[WEBPAGE] Update style of current unicado page

Description

Reworked current webpage appearance

• Changed colorscheme to blue white
• Update landing page layout and hero section

Related Issue(s)

• N.A.

Other Changes

Screenshots/Logs

Attach screenshots or log outputs if applicable.

Testing Instructions

1. Get the merge request branch (not the origin branch)
2. run mkdocs
3. check all links and appearance

Developer Checklist

• Code has been tested locally and/or in pipeline.
• Merge conflicts resolved with the target branch.

docs/assets/css/unicado.css

 /* Define color variables in :root for easy reference */
 :root {
-  --primary-color: #2C3E50;      /* Primary color for headers, hero section, and cards */
-  --background-color: #34495E;   /* Background color for main content areas */
-  --text-color: #D1D5DB;         /* Main text color for readability on dark backgrounds */
+  --primary-color: #00418b;      /* Primary color for headers, hero section, and cards */
+  --background-color: #00418b;   /* Background color for main content areas */
+  --text-color: var(--primary-color);
+  --text-color-hero: #ecf1f8;
+  --text-color-tabs: #ecf1f8;         /* Main text color for readability on dark backgrounds */
   --button-bg-color: #ffffff;    /* Background color for buttons */
-  --accent-color: #E74C3C;       /* Accent color for links and hover effects */
+  --accent-color: #e20e1f;       /* Accent color for links and hover effects */
   --secondary-accent: #1ABC9C;   /* Secondary accent color for icons */
   --link-color: #3498DB;         /* Link color for clickable items */
   --link-hover-color: #E74C3C;   /* Hover color for links */
+  --bg-gradient-start-color: #00418b;
+  --bg-gradient-intermediate-color: #1C5598;
+  --bg-gradient-end-color: #ffffff;
 }
 
-.md-header {
-  background-color: var(--primary-color);
-}
-
-/* Apply primary color to tab backgrounds */
-[data-md-color-scheme=slate] .md-tabs {
-  background-color: var(--primary-color);
-}
-
-/* Hero Section Styling */
-.hero-section {
-  background-color: var(--primary-color);
-  padding: 2em;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  max-width: 1060px;
-  margin: auto;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-
-}
-
-/* Text styling within the hero section */
-.intro-text {
-  color: var(--text-color);
-  font-size: 1.1em;
-}
-
-/* Download button styling */
-.download-button-container {
-  text-align: center;
-  margin-top: 20px;
-}
-
-.download-button {
-  display: inline-block;
-  background-color: var(--button-bg-color);  /* Uses button background color */
-  padding: 10px 20px;
-  font-size: 1.1em;
-  font-weight: bold;
-  border-radius: 5px;
-  text-decoration: none;
-  color: var(--primary-color); /* Button text color */
-  transition: background-color 0.3s ease;
+.md-typeset h1 {
+  color: var(--text-color); 
 }
 
-/* Grid Container */
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1.5em;
-  margin: 2em auto;
-  max-width: 1100px;
-  padding: 1em;
+.md-header {
+  color: var(--text-color-tabs);
+  background: linear-gradient(to bottom, var(--bg-gradient-start-color), var(--bg-gradient-intermediate-color)); /* var(--md-primary-bg-color); */
+  
 }
 
-.grid-item {
-  background-color: var(--primary-color);   /* Uses primary color for card background */
-  padding: 1.5em;
-  border-radius: 10px;
-  text-align: left;
-  color: var(--text-color);                 /* Text color for readability */
-  transition: transform 0.3s, box-shadow 0.3s;
+.md-tabs {
+  color: var(--text-color-tabs);
+  /* background: linear-gradient(to bottom, var(--bg-gradient-intermediate-color), 75%, var(--bg-gradient-end-color)); */
+  background-color: var(--bg-gradient-intermediate-color);
 }
 
-.grid-item h3 {
-  font-size: 1.25em;
-  margin-bottom: 0.5em;
-}
 
-/* Card styling with hover effects */
-.card {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
+[dir="ltr"] .md-header__title {
+  margin-left: 0.1rem;
 
-.card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
 }
 
-/* Link styling within cards */
-.card a {
-  color: var(--link-color);
-  font-weight: bold;
+.md-header__topic {
+  font-weight: lighter;
 }
 
-.card a:hover {
-  color: var(--link-hover-color);  /* Changes to accent color on hover */
+.md-header__topic:first-child {
+  font-weight: lighter;
 }
 
 /* Accent color for icons or specific elements */
 .accent {
-  color: var(--secondary-accent);  /* Teal accent color for specific elements */
+  color: var(--accent-color);  /* Teal accent color for specific elements */
 }
 
 .overview-item {
@@ -118,11 +63,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--primary-color); /* Background color for the footer */
-  color: var(--text-color);
+  background: var(--bg-gradient-end-color); /* Background color for the footer */
+  color: var(--background-color);
   padding: 1em 2em; /* Adjust padding for spacing */
   font-size: 1em; /* Increase text size for better readability */
-  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle top border */
+  /* border-top: 1px solid rgba(255, 255, 255, 0.2); Subtle top border */
 }
 
 /* Align text and links */
@@ -139,7 +84,7 @@
 
 /* Footer link styling */
 .footer-link {
-  color: var(--text-color);
+  color: inherit;
   text-decoration: none;
   font-weight: bold;
   font-size: 1.4em;
@@ -162,6 +107,8 @@
   height: auto;
   margin-left: 1em; /* Space between image and text */
   border-radius: 8px; /* Optional: Rounded corners */
+  border-color: var(--background-color);
+  border: 1px solid;
 }