fix(css): correct spelling of separator in navbar and theme CSS (#3888)

# Description of Changes

**What was changed**
- Corrected the spelling of the CSS variable
`--md-nav-color-on-separator` (previously misspelled as
`--md-nav-color-on-seperator`) across `navbar.css`, `theme.dark.css`,
and `theme.light.css`. Adjusted related CSS comments and formatting for
consistency. Updated HTML templates (`fragments/navbar.html` and
`home.html`) to reference the corrected variable.

**Why the change was made**
- To resolve styling inconsistencies and prevent potential runtime
errors caused by the typo.

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

stirling-pdf/src/main/resources/static/css/navbar.css

@@ -86,7 +86,8 @@
 
 .scalable-languages-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */
+  /* Auto-fill columns, with a minimum width of 180px */
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 }
 
 .scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child {
@@ -106,15 +107,15 @@
 }
 
 html[dir="ltr"] .lang-dropdown-item-wrapper {
-  border-right: 2px solid var(--md-nav-color-on-seperator);
+  border-right: 2px solid var(--md-nav-color-on-separator);
 }
 
 html[dir="rtl"] .lang-dropdown-item-wrapper {
-  border-left: 2px solid var(--md-nav-color-on-seperator);
+  border-left: 2px solid var(--md-nav-color-on-separator);
 }
 
 /* Responsive adjustments */
-@media (min-width: 1200px){
+@media (min-width: 1200px) {
   .lang-dropdown-item-wrapper .dropdown-item {
     min-width: 200px
   }
@@ -124,9 +125,11 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
   .scalable-languages-container {
     grid-template-columns: repeat(2, 1fr);
   }
-  .scalable-languages-container:not(:has(> :nth-child(2))){
+
+  .scalable-languages-container:not(:has(> :nth-child(2))) {
     grid-template-columns: repeat(var(--count), 1fr) !important;
   }
+
   .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) {
     border: 0px
   }
@@ -136,9 +139,11 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
   .scalable-languages-container {
     grid-template-columns: repeat(3, 1fr);
   }
-  .scalable-languages-container:not(:has(> :nth-child(3))){
+
+  .scalable-languages-container:not(:has(> :nth-child(3))) {
     grid-template-columns: repeat(var(--count), 1fr) !important;
   }
+
   .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) {
     border: 0px
   }
@@ -149,7 +154,7 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
     grid-template-columns: repeat(4, 1fr);
   }
 
-  .scalable-languages-container:not(:has(> :nth-child(4))){
+  .scalable-languages-container:not(:has(> :nth-child(4))) {
     grid-template-columns: repeat(var(--count), 1fr) !important;
   }
 

stirling-pdf/src/main/resources/static/css/theme/theme.dark.css

@@ -72,7 +72,7 @@
   --md-nav-on-section-color-word: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
   --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity));
   --md-nav-on-section-color-ppt: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
-    --md-nav-color-on-seperator: rgb(24 28 34);
+  --md-nav-color-on-separator: rgb(24 28 34);
   --md-nav-background: rgb(15 20 26);
   --favourite-add: #9ed18c;
   --favourite-remove: palevioletred;

stirling-pdf/src/main/resources/static/css/theme/theme.light.css

@@ -72,7 +72,7 @@
     --md-nav-on-section-color-word: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-ppt: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
-    --md-nav-color-on-seperator: rgb(174, 178, 179);
+    --md-nav-color-on-separator: rgb(174, 178, 179);
     --md-nav-background: rgb(248 249 255);
     --favourite-add: #25ab6c;
     --favourite-remove: rgb(222, 94, 137);

stirling-pdf/src/main/resources/templates/fragments/navbar.html

@@ -22,7 +22,7 @@
   background: var(--md-nav-background);
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  border-color: var(--md-nav-color-on-seperator)">
+  border-color: var(--md-nav-color-on-separator)">
     <div class="container " style="max-width: 100%;">
       <a class="navbar-brand" th:href="${@contextPath}" style="display: flex;">
         <img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon">

stirling-pdf/src/main/resources/templates/home.html

@@ -102,7 +102,7 @@
         <div style="width:100%; overflow-x:visible;">
         <div class="features-container" style="  border-top: 1px;
         border-top-style: solid;
-        border-color: var(--md-nav-color-on-seperator);
+        border-color: var(--md-nav-color-on-separator);
         margin-top: 1rem;
       ">
           <div class="feature-rows">