Hero - navbar UI

assets/css/brand-palette.css

@@ -0,0 +1,70 @@
+/* OpenMS brand palette — load before other site CSS (filename sorts first) */
+:root {
+  --fontFamily: "{{ .Site.Params.font.name | default "Montserrat" }}", system-ui, -apple-system,
+    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --openms-font-heading: var(--fontFamily);
+  --openms-font-body: "{{ .Site.Params.bodyFont.name | default "Raleway" }}", system-ui, -apple-system,
+    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  /* Primary headings — Montserrat (pt) */
+  --openms-heading-xl-size: 26pt;
+  --openms-heading-xl-weight: 800;
+  --openms-heading-lg-size: 20pt;
+  --openms-heading-lg-weight: 700;
+
+  /* Body & secondary headings — Raleway (pt) */
+  --openms-text-min: 11pt;
+  --openms-body-size: 12pt;
+  --openms-body-size-lg: 14pt;
+  --openms-secondary-heading-size: 14pt;
+  --openms-secondary-heading-size-lg: 16pt;
+  --openms-presentation-size: 18pt;
+  --openms-body-weight: 400;
+  --openms-secondary-heading-weight: 400;
+
+  /* Quotes, callouts & emphasis — JetBrains Mono thin */
+  --openms-font-mono: "{{ .Site.Params.monoFont.name | default "JetBrains Mono" }}", ui-monospace,
+    "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
+  --openms-mono-weight: 100;
+
+  --openms-yellow: #ffcb4f;
+  --openms-orange: #ff7501;
+  --openms-pink: #ff03cb;
+  --openms-purple: #b503ff;
+  --openms-blue: #3157e9;
+  --openms-navy: #0c2171;
+  --openms-dark: #231f20;
+  --openms-grey: #c2babc;
+  --openms-white: #ffffff;
+
+  --openms-yellow-rgb: 255, 203, 79;
+  --openms-orange-rgb: 255, 117, 1;
+  --openms-pink-rgb: 255, 3, 203;
+  --openms-purple-rgb: 181, 3, 255;
+  --openms-blue-rgb: 49, 87, 233;
+  --openms-navy-rgb: 12, 33, 113;
+  --openms-dark-rgb: 35, 31, 32;
+  --openms-grey-rgb: 194, 186, 188;
+  --openms-white-rgb: 255, 255, 255;
+
+  --colorPrimaryDark: var(--openms-blue);
+  --colorPrimaryDarkBtn: var(--openms-orange);
+  --colorPrimary: var(--openms-blue);
+  --colorPrimaryLight: var(--openms-purple);
+  --colorSecondaryDark: var(--openms-dark);
+  --colorSecondary: var(--openms-grey);
+  --colorSecondaryLight: var(--openms-white);
+  --colorHeading: var(--openms-dark);
+  --colorHighlight: var(--openms-yellow);
+  --colorShadow: rgba(var(--openms-dark-rgb), 0.1);
+  --colorContentLink: var(--openms-blue);
+  --colorIcon: var(--openms-blue);
+  --colorNoteHeading: var(--openms-blue);
+  --colorNoteContent: var(--openms-grey);
+  --colorInfoHeading: var(--openms-orange);
+  --colorInfoContent: var(--openms-grey);
+  --colorWarningHeading: var(--openms-pink);
+  --colorWarningContent: var(--openms-grey);
+  --colorTipHeading: var(--openms-purple);
+  --colorTipContent: var(--openms-grey);
+}

assets/css/casestudies.css

@@ -4,14 +4,12 @@
 
 .casestudies a:hover {
     text-decoration: none;
-    color:black
+    color: var(--openms-dark);
 }
 
 .casestudies-title {
     display: flex;
     justify-content: center;
-    letter-spacing: 1.5px;
-    font-size: 27px;
 }
 
 .casestudies-box-container {
@@ -29,7 +27,7 @@
 }
 
 .casestudies a {
-    color: rgb(1, 50, 67) !important;
+    color: var(--openms-blue) !important;
 }
 
 .casestudies-box-title {
@@ -40,7 +38,7 @@
 
 .casestudies-box-text {
     margin: 30px 15px;
-    font-size: 14px;
+    font-size: var(--openms-body-size-lg);
 }
 
 @media only screen and (max-width: 1300px) {
@@ -62,7 +60,7 @@
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     /* Black, with 10% opacity */
-    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 8px 15px rgba(var(--openms-dark-rgb), 0.1);
     position: relative;
     overflow: hidden;
 }
@@ -74,7 +72,7 @@
     left: 0;
     right: 100%;
     bottom: 0;
-    background: rgb(1, 50, 67);
+    background: var(--openms-blue);
     height: 4px;
     -webkit-transition-property: right;
     transition-property: right;

assets/css/content_override.css

@@ -1,43 +1,16 @@
 .content-container .divider {
-    background: #1e0010;
-}
-
-.content-container h1 {
-    font-size: 2em;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    font-weight: bold;
-}
-
-.content-container h2 {
-    font-size: 2em;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    font-weight: bold;
+  background: var(--openms-dark);
 }
 
 .content-container h3 {
-    font-size: 1.5em;
-    text-transform: uppercase;
-    letter-spacing: 1.3px;
-    font-weight: bold;
-    margin-top: 25px;
+  margin-top: 1.5rem;
 }
 
 .content-container h4 {
-    text-transform: uppercase;
-    font-weight: bold;
-    margin-top: 40px;
-    margin-bottom: -10px;
+  margin-top: 2.5rem;
+  margin-bottom: -0.625rem;
 }
 
 .content-container h5 {
-    text-transform: uppercase;
-    font-weight: bold;
-    margin-top: 22px;
+  margin-top: 1.375rem;
 }
-
-.content-container h6 {
-    text-transform: uppercase;
-    font-weight: bold;
-}