change colors to meet servicenow chart

Author: imenelydiaker

docs/landing_page/index.html

@@ -98,13 +98,22 @@
     <div class="container is-max-desktop">
       <div class="columns is-centered">
         <div class="column has-text-centered">
+
           <h1 class="title is-1 publication-title">AgentLab Research Hub</h1>
           <div class="is-size-5 publication-authors">
             <span class="author-block">
               A comprehensive framework for developing and evaluating web agents
             </span>
           </div>
 
+          <!-- ServiceNow Logo -->
+          <!-- <div class="servicenow-logo-container" style="margin-bottom: 2rem;">
+            <img src="./static/images/ServiceNow_logo_CMYK_BL_Green.png" 
+                 alt="ServiceNow Logo" 
+                 class="servicenow-logo"
+                 style="height: 60px; width: auto;">
+          </div> -->
+
           <div class="is-size-5 publication-authors">
             <span class="author-block">
               <a href="https://servicenow.com" style="color: #63df4e;">ServiceNow Research</a>

docs/landing_page/static/css/index.css

@@ -1,7 +1,7 @@
-/* Custom CSS for AgentLab Landing Page */
+/* Custom CSS for AgentLab Landing Page - ServiceNow Theme */
 
 .hero {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
   color: white;
 }
 
@@ -31,11 +31,14 @@
 
 .card {
   height: 100%;
-  transition: transform 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border: 1px solid #E5E7EB;
 }
 
 .card:hover {
   transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(15, 32, 39, 0.15);
+  border-color: #63DF4E;
 }
 
 .center-image {
@@ -56,16 +59,48 @@
 }
 
 .navbar {
-  background-color: rgba(255, 255, 255, 0.95);
+  background-color: rgba(15, 32, 39, 0.95);
   backdrop-filter: blur(10px);
 }
 
+.navbar-item {
+  color: white;
+}
+
+.navbar-item:hover {
+  background-color: rgba(99, 223, 78, 0.1);
+  color: #63DF4E;
+}
+
+.navbar-link {
+  color: white;
+}
+
+.navbar-link:hover {
+  background-color: rgba(99, 223, 78, 0.1);
+  color: #63DF4E;
+}
+
+.navbar-dropdown {
+  background-color: #203A43;
+}
+
+.navbar-dropdown .navbar-item {
+  color: white;
+}
+
+.navbar-dropdown .navbar-item:hover {
+  background-color: rgba(99, 223, 78, 0.1);
+  color: #63DF4E;
+}
+
 .section {
   padding: 3rem 1.5rem;
 }
 
 .footer {
-  background-color: #f5f5f5;
+  background-color: #0F2027;
+  color: white;
   padding: 3rem 1.5rem 6rem;
 }
 
@@ -80,44 +115,163 @@
   }
 }
 
-/* Button styling */
+/* Button styling - ServiceNow Theme */
 .button.is-rounded {
   border-radius: 25px;
 }
 
 .button.is-primary {
-  background-color: #667eea;
-  border-color: #667eea;
+  background-color: #63DF4E;
+  border-color: #63DF4E;
+  color: #0F2027;
+  font-weight: 600;
+}
+
+.button.is-primary:hover {
+  background-color: #4FBF3A;
+  border-color: #4FBF3A;
 }
 
 .button.is-link {
-  background-color: #764ba2;
-  border-color: #764ba2;
+  background-color: #203A43;
+  border-color: #203A43;
+  color: white;
+}
+
+.button.is-link:hover {
+  background-color: #2C5364;
+  border-color: #2C5364;
 }
 
 .button.is-dark {
-  background-color: #363636;
-  border-color: #363636;
+  background-color: #0F2027;
+  border-color: #0F2027;
+  color: white;
+}
+
+.button.is-dark:hover {
+  background-color: #203A43;
+  border-color: #203A43;
 }
 
-/* Navigation improvements */
+/* Navigation improvements - ServiceNow Theme */
 .navbar-dropdown {
   border-radius: 8px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 16px rgba(15, 32, 39, 0.25);
+  border: 1px solid #2C5364;
 }
 
-/* Code block styling */
+/* Code block styling - ServiceNow Theme */
 pre {
-  background-color: #2d3748;
+  background-color: #0F2027;
   color: #e2e8f0;
   border-radius: 8px;
   padding: 1rem;
   overflow-x: auto;
+  border: 1px solid #203A43;
 }
 
 code {
-  background-color: #2d3748;
-  color: #e2e8f0;
+  background-color: #0F2027;
+  color: #63DF4E;
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
+}
+
+/* Additional ServiceNow Theme Elements */
+.title {
+  color: #0F2027;
+}
+
+.subtitle {
+  color: #203A43;
+}
+
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
+  color: #0F2027;
+}
+
+.table {
+  background-color: white;
+  border: 1px solid #E5E7EB;
+}
+
+.table th {
+  background-color: #0F2027;
+  color: white;
+}
+
+.table td {
+  border-color: #E5E7EB;
+}
+
+.table tr:hover {
+  background-color: rgba(99, 223, 78, 0.05);
+}
+
+/* Accent colors */
+.has-text-primary {
+  color: #63DF4E !important;
+}
+
+.has-background-primary {
+  background-color: #63DF4E !important;
+}
+
+/* Link styling */
+a {
+  color: #203A43;
+}
+
+a:hover {
+  color: #63DF4E;
+}
+
+/* Footer improvements */
+.footer a {
+  color: #63DF4E;
+}
+
+.footer a:hover {
+  color: white;
+}
+
+/* Section dividers */
+.section:nth-child(even) {
+  background-color: rgba(99, 223, 78, 0.02);
+}
+
+/* ServiceNow Logo Styling */
+.servicenow-logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.servicenow-logo {
+  max-height: 60px;
+  height: auto;
+  width: auto;
+  transition: transform 0.2s ease;
+}
+
+.servicenow-logo:hover {
+  transform: scale(1.05);
+}
+
+/* Responsive logo sizing */
+@media screen and (max-width: 768px) {
+  .servicenow-logo {
+    max-height: 45px;
+  }
+  
+  .servicenow-logo-container {
+    margin-bottom: 1.5rem !important;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .servicenow-logo {
+    max-height: 35px;
+  }
 }