diff --git a/assets/css/brand-palette.css b/assets/css/brand-palette.css new file mode 100644 index 0000000..142bdc6 --- /dev/null +++ b/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); +} diff --git a/assets/css/casestudies.css b/assets/css/casestudies.css index dc35cac..e7a084a 100644 --- a/assets/css/casestudies.css +++ b/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; diff --git a/assets/css/content_override.css b/assets/css/content_override.css index e719ef7..cc1bba2 100644 --- a/assets/css/content_override.css +++ b/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; -} \ No newline at end of file diff --git a/assets/css/hero.css b/assets/css/hero.css new file mode 100644 index 0000000..b252535 --- /dev/null +++ b/assets/css/hero.css @@ -0,0 +1,725 @@ +/* Modern hero — OpenMS brand palette & UX */ + +:root { + /* News banner + navbar (approx.) — used to fit hero in one screen */ + --openms-hero-chrome: 8.5rem; + --openms-hero-focus-ring: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow); +} + +.hero-modern-wrap { + display: block; + position: relative; +} + +.hero-modern { + position: relative; + overflow: hidden; + color: var(--openms-white); + background: var(--openms-navy); + padding: clamp(2rem, 4vh, 5rem) clamp(1.25rem, 4vw, 2.5rem); + min-height: min(32rem, calc(100svh - var(--openms-hero-chrome))); + box-sizing: border-box; + display: flex; + align-items: center; +} + +.hero-modern::before, +.hero-modern::after { + content: ""; + position: absolute; + border-radius: 50%; + z-index: 1; + pointer-events: none; +} + +.hero-modern::before { + top: -50%; + right: -10%; + width: 37.5rem; + height: 37.5rem; + background: radial-gradient( + circle, + rgba(var(--openms-white-rgb), 0.12) 0%, + transparent 70% + ); +} + +.hero-modern::after { + bottom: -30%; + left: -5%; + width: 31.25rem; + height: 31.25rem; + background: radial-gradient( + circle, + rgba(var(--openms-purple-rgb), 0.15) 0%, + transparent 70% + ); +} + +.hero-modern__container { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + grid-template-areas: + "content visual" + "actions actions"; + column-gap: 3.75rem; + row-gap: clamp(1rem, 2vh, 1.75rem); + align-items: center; + max-width: 75rem; + width: 100%; + margin: 0 auto; +} + +.hero-modern__content { + grid-area: content; + align-self: end; + max-width: 40rem; +} + +.hero-modern__actions { + grid-area: actions; + align-self: start; + width: 100%; + max-width: 100%; +} + +.hero-modern__visual { + grid-area: visual; +} + +.hero-modern__title { + font-family: var(--openms-font-heading); + font-size: clamp(1.875rem, 4.5vw, 3.125rem); + font-weight: var(--openms-heading-xl-weight); + line-height: 1.15; + letter-spacing: -0.02em; + margin: 0 0 1rem; + color: var(--openms-white); + text-wrap: balance; +} + +.hero-modern__gradient-text { + font-size: 1.25em; + line-height: 1.1; + display: inline-block; + background: linear-gradient( + 90deg, + var(--openms-yellow) 0%, + var(--openms-orange) 40%, + var(--openms-pink) 75%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-modern__description { + margin: 0 0 clamp(1rem, 2vh, 1.5rem); + max-width: 38ch; + color: rgba(var(--openms-white-rgb), 0.92); + font-size: var(--openms-presentation-size); + font-weight: var(--openms-body-weight); + line-height: 1.55; + text-wrap: pretty; +} + +.hero-modern__actions { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + column-gap: clamp(1.5rem, 4vw, 3rem); + width: 100%; + margin: 0; + padding-right: 0; +} + +.hero-modern__buttons { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 0; + grid-column: 1; + align-self: center; +} + +@media (min-width: 769px) { + .hero-modern__actions .hero-modern__stats { + grid-column: 3; + justify-self: end; + align-self: center; + flex-shrink: 0; + padding: 0.375rem 0.625rem; + border-radius: 0.5rem; + background: rgba(var(--openms-white-rgb), 0.06); + border: 1px solid rgba(var(--openms-white-rgb), 0.12); + } + + .hero-modern__stat-sep { + display: none; + } + + .hero-modern__stat:not(:first-child) { + padding-left: clamp(0.625rem, 1.5vw, 1rem); + margin-left: clamp(0.625rem, 1.5vw, 1rem); + border-left: 1px solid rgba(var(--openms-white-rgb), 0.22); + } +} + +.hero-modern__btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.75rem 1.75rem; + font-size: var(--openms-body-size-lg); + font-weight: 600; + border-radius: 0.5rem; + text-decoration: none; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, + border-color 0.2s ease, color 0.2s ease; +} + +.hero-modern__btn:focus { + outline: none; +} + +.hero-modern__btn:focus-visible { + outline: none; + box-shadow: var(--openms-hero-focus-ring); +} + +.hero-modern__btn:active { + transform: translateY(0); +} + +.hero-modern__btn--primary { + color: var(--openms-white); + background: var(--openms-orange); + border: 2px solid var(--openms-orange); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-orange-rgb), 0.35); +} + +.hero-modern__btn--primary:hover { + transform: translateY(-2px); + background: var(--openms-yellow); + border-color: var(--openms-yellow); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-yellow-rgb), 0.4); + color: var(--openms-dark); +} + +.hero-modern__btn--secondary { + color: var(--openms-white); + background: rgba(var(--openms-white-rgb), 0.15); + border: 2px solid var(--openms-white); + backdrop-filter: blur(10px); +} + +.hero-modern__btn--secondary:hover { + background: rgba(var(--openms-white-rgb), 0.25); + border-color: var(--openms-yellow); + color: var(--openms-white); +} + +.hero-modern__stats { + display: flex; + flex-wrap: nowrap; + gap: clamp(0.75rem, 2vw, 1.5rem); + margin: 0; + padding: 0; + border-top: none; + justify-content: flex-end; + align-items: center; + grid-column: 3; + justify-self: end; + min-width: 0; +} + +.hero-modern__stat-sep { + flex: 0 0 auto; + align-self: center; + color: rgba(var(--openms-white-rgb), 0.45); + font-size: clamp(1.125rem, 2vw, 1.375rem); + font-weight: 300; + line-height: 1; + user-select: none; +} + +.hero-modern__stat { + display: flex; + flex-direction: column; + gap: 0.35rem; + margin: 0; + align-items: flex-end; + text-align: right; +} + +.hero-modern__stat-number { + order: -1; + margin: 0; + font-size: clamp(1.375rem, 3vw, 1.75rem); + font-weight: 800; + font-variant-numeric: tabular-nums; + line-height: 1.1; + min-width: 5ch; + color: var(--openms-white); +} + +.hero-modern__stat-label { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 500; + color: rgba(var(--openms-white-rgb), 0.88); + text-transform: uppercase; + letter-spacing: 0.05em; + line-height: 1.35; +} + +.hero-modern__visual { + display: flex; + align-items: center; + justify-content: center; + min-height: 18rem; + align-self: center; +} + +.hero-modern__waveform { + display: flex; + align-items: center; + justify-content: center; + gap: 0.1875rem; + width: 100%; + max-width: 25rem; + height: 100%; + min-height: 16rem; +} + +.hero-modern__wave-bar { + width: 0.375rem; + height: 20%; + border-radius: 0.1875rem; + background: linear-gradient(180deg, var(--openms-orange), var(--openms-pink)); + animation: hero-modern-waveform 2s ease-in-out infinite; +} + +.hero-modern__wave-bar:nth-child(1) { animation-delay: 0s; } +.hero-modern__wave-bar:nth-child(2) { animation-delay: 0.1s; } +.hero-modern__wave-bar:nth-child(3) { animation-delay: 0.2s; } +.hero-modern__wave-bar:nth-child(4) { animation-delay: 0.3s; } +.hero-modern__wave-bar:nth-child(5) { animation-delay: 0.4s; } +.hero-modern__wave-bar:nth-child(6) { animation-delay: 0.5s; } +.hero-modern__wave-bar:nth-child(7) { animation-delay: 0.6s; } +.hero-modern__wave-bar:nth-child(8) { animation-delay: 0.7s; } +.hero-modern__wave-bar:nth-child(9) { animation-delay: 0.8s; } +.hero-modern__wave-bar:nth-child(10) { animation-delay: 0.9s; } +.hero-modern__wave-bar:nth-child(11) { animation-delay: 1s; } + +@keyframes hero-modern-waveform { + 0%, + 100% { + height: 20%; + } + 50% { + height: 100%; + } +} + +/* Medium (md) — same two-column layout as large; slightly tighter spacing */ +@media (min-width: 769px) and (max-width: 1024px) { + :root { + --openms-hero-chrome: 9.5rem; + } + + .hero-modern { + padding: clamp(1.5rem, 3vh, 3.5rem) 1.5rem; + min-height: min(30rem, calc(100dvh - var(--openms-hero-chrome))); + } + + .hero-modern::before { + width: 22rem; + height: 22rem; + right: -25%; + } + + .hero-modern::after { + width: 18rem; + height: 18rem; + left: -20%; + } + + .hero-modern__container { + column-gap: 2rem; + row-gap: 1.25rem; + } + + .hero-modern__title { + font-size: clamp(1.75rem, 3.5vw, 2.5rem); + } + + .hero-modern__visual { + min-height: 14rem; + } + + .hero-modern__waveform { + min-height: 12rem; + max-width: 20rem; + } + + .hero-modern__actions { + grid-template-columns: minmax(0, auto) minmax(0, 1fr); + column-gap: 1rem; + align-items: center; + } + + .hero-modern__buttons { + grid-column: 1; + } + + .hero-modern__actions .hero-modern__stats { + grid-column: 2; + gap: 0; + padding: 0.5rem 0.625rem; + max-width: 100%; + overflow: hidden; + } + + .hero-modern__actions .hero-modern__stat { + align-items: center; + text-align: center; + gap: 0.2rem; + min-width: 0; + flex: 0 1 auto; + } + + .hero-modern__actions .hero-modern__stat:not(:first-child) { + padding-left: 0.625rem; + margin-left: 0.625rem; + } + + .hero-modern__actions .hero-modern__stat-number { + font-size: clamp(1.2rem, 2.2vw, 1.45rem); + min-width: auto; + line-height: 1; + } + + .hero-modern__actions .hero-modern__stat-label { + font-size: var(--openms-text-min); + font-weight: 600; + text-transform: none; + letter-spacing: 0.02em; + line-height: 1.2; + color: rgba(var(--openms-white-rgb), 0.85); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 5.75rem; + } +} + +/* Large (lg) — roomier stats beside the CTA */ +@media (min-width: 1025px) and (max-width: 1280px) { + .hero-modern__actions .hero-modern__stats { + gap: 0; + padding: 0.5rem 0.875rem; + } + + .hero-modern__actions .hero-modern__stat { + align-items: flex-end; + text-align: right; + gap: 0.25rem; + } + + .hero-modern__actions .hero-modern__stat:not(:first-child) { + padding-left: 1rem; + margin-left: 1rem; + } + + .hero-modern__actions .hero-modern__stat-number { + font-size: clamp(1.35rem, 2vw, 1.6rem); + } + + .hero-modern__actions .hero-modern__stat-label { + text-transform: none; + letter-spacing: 0.02em; + max-width: 7rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +/* Small (sm) — stacked layout; stats below hero */ +@media (max-width: 768px) { + :root { + --openms-hero-chrome: 10.5rem; + } + + .hero-modern { + padding: clamp(0.75rem, 1.5vh, 1.5rem) 1.25rem; + min-height: min(28rem, calc(100dvh - var(--openms-hero-chrome))); + } + + .hero-modern::before { + width: 22rem; + height: 22rem; + right: -25%; + } + + .hero-modern::after { + width: 18rem; + height: 18rem; + left: -20%; + } + + .hero-modern__container { + grid-template-columns: 1fr; + grid-template-areas: + "content" + "visual" + "actions"; + gap: clamp(0.5rem, 1.5vh, 1rem); + } + + .hero-modern__content { + grid-area: content; + align-self: auto; + text-align: center; + width: 100%; + max-width: 36rem; + margin-inline: auto; + } + + .hero-modern { + position: relative; + } + + .hero-modern__container { + position: static; + } + + .hero-modern__actions { + grid-area: actions; + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + gap: 0; + } + + .hero-modern__buttons { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + margin-bottom: 0; + } + + .hero-modern__actions .hero-modern__stats { + position: absolute; + left: 0; + right: 0; + bottom: 0; + transform: translateY(100%); + width: 100%; + max-width: none; + margin: 0; + padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem); + background: var(--openms-white); + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-dark-rgb), 0.06); + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.5rem; + align-items: stretch; + grid-column: unset; + justify-self: unset; + z-index: 4; + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat-sep { + display: none; + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 0.3rem; + min-width: 0; + max-width: none; + padding: 0.625rem 0.375rem; + border-radius: 0.5rem; + background: rgba(var(--openms-navy-rgb), 0.05); + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat-number { + font-family: var(--openms-font-heading); + font-size: clamp(1.375rem, 5.5vw, 1.625rem); + font-weight: 800; + line-height: 1; + color: var(--openms-navy); + min-width: auto; + letter-spacing: -0.02em; + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat-label { + font-size: var(--openms-text-min); + font-weight: 600; + color: rgba(var(--openms-dark-rgb), 0.82); + text-transform: none; + letter-spacing: 0.01em; + line-height: 1.25; + max-width: 100%; + overflow-wrap: anywhere; + hyphens: auto; + } + + .hero-modern__visual { + grid-area: visual; + min-height: 0; + max-height: clamp(5rem, 14vh, 8rem); + } + + .hero-modern__waveform { + min-height: 0; + max-height: 100%; + height: clamp(5rem, 14vh, 8rem); + } + + .hero-modern__title { + margin-bottom: 0.75rem; + font-size: clamp(1.875rem, 7.5vw, 2.5rem); + line-height: 1.18; + } + + .hero-modern__gradient-text { + font-size: 1.1em; + } + + .hero-modern .hero-modern__description { + margin-inline: auto; + max-width: none; + margin-bottom: 0.75rem; + font-size: var(--openms-text-min); + line-height: 1.4; + } + + .hero-modern__btn { + width: 100%; + box-sizing: border-box; + min-height: 2.75rem; + padding: 0.75rem 1.25rem; + } + + .hero-modern__visual { + min-height: 0; + max-height: clamp(3.5rem, 10vh, 5.5rem); + } + + .hero-modern__waveform { + min-height: 0; + max-height: 100%; + height: clamp(3.5rem, 10vh, 5.5rem); + max-width: 14rem; + } + + .hero-modern__wave-bar { + width: 0.3rem; + } +} + +@media (max-width: 768px) and (max-height: 700px) { + .hero-modern__visual { + display: none; + } + + .hero-modern__container { + gap: 0.5rem; + } +} + +@media (max-width: 380px) { + :root { + --openms-hero-chrome: 11rem; + } + + .hero-modern { + padding: 0.75rem 1rem; + } + + .hero-modern__title { + font-size: clamp(1.625rem, 6.5vw, 1.875rem); + } + + .hero-modern .hero-modern__description { + line-height: 1.35; + } + + .hero-modern__actions .hero-modern__stats { + gap: 0.375rem; + padding: 0.625rem 0.75rem; + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat { + padding: 0.5rem 0.25rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-modern__wave-bar { + animation: none; + height: 55%; + } + + .hero-modern__btn { + transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; + } + + .hero-modern__btn--primary:hover, + .hero-modern__btn--secondary:hover { + transform: none; + } +} + +@media (prefers-contrast: more) { + .hero-modern__description { + color: var(--openms-white); + } + + @media (min-width: 769px) { + .hero-modern__actions .hero-modern__stats .hero-modern__stat-label { + color: var(--openms-white); + } + } + + @media (max-width: 768px) { + .hero-modern__actions .hero-modern__stats .hero-modern__stat { + border-color: var(--openms-dark); + background: var(--openms-white); + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat-number { + color: var(--openms-navy); + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat-label { + color: var(--openms-dark); + } + } + + .hero-modern__gradient-text { + -webkit-text-fill-color: var(--openms-yellow); + background: none; + } + + .hero-modern__btn--secondary { + border-width: 3px; + } +} diff --git a/assets/css/keyfeatures_override.css b/assets/css/keyfeatures_override.css index 7d6bd2d..6b23356 100644 --- a/assets/css/keyfeatures_override.css +++ b/assets/css/keyfeatures_override.css @@ -4,7 +4,7 @@ .keyfeatures a:hover { text-decoration: none; - color:black + color: var(--openms-dark); } .keyfeatures-img{ @@ -19,9 +19,6 @@ .keyfeatures-title { display: flex; justify-content: center; - letter-spacing: 1.5px; - font-size: 27px; - font-weight: bold; } .keyfeatures-box-container { @@ -38,18 +35,15 @@ } .keyfeatures-box-content:hover { - box-shadow: 0 8px 16px 0 rgba(12, 42, 96, 0.4); + box-shadow: 0 8px 16px 0 rgba(var(--openms-blue-rgb), 0.4); } .keyfeatures a { - color: rgb(1, 50, 67) !important; + color: var(--openms-blue) !important; } .keyfeatures-box-title { margin: 15px; - font-size: 16px; - text-transform: uppercase; - font-weight: bold; } .keyfeatures-box-text { @@ -70,5 +64,5 @@ } .keyfeatures-underline:before { - background: rgb(1, 50, 67); + background: var(--openms-blue); } \ No newline at end of file diff --git a/assets/css/mailchimp.css b/assets/css/mailchimp.css index 00894e7..349d4c1 100644 --- a/assets/css/mailchimp.css +++ b/assets/css/mailchimp.css @@ -1,5 +1,5 @@ :root { - --openmsSlateGray: rgb(108, 122, 137); + --openmsSlateGray: var(--openms-grey); } .sign-up-container { @@ -31,18 +31,18 @@ width: 75%; height: 35px; padding-left: 5px; - font-size: 14px; + font-size: var(--openms-body-size-lg); color: var(--colorPrimaryDark); } .submission-instructions { position: absolute; right: 18%; - font-size: 10px; + font-size: var(--openms-text-min); color: var(--openmsSlateGray); } -.signup-button { +.sign-up-container .signup-button { display: none; } @@ -64,7 +64,7 @@ @media only screen and (max-width: 1150px) { .sign-up-input { - font-size: 12px; + font-size: var(--openms-text-min); } } @@ -81,14 +81,14 @@ display: none; } - .signup-button { + .sign-up-container .signup-button { display: block; height: 35px; border-radius: 5px; margin-left: 5px; width: 60px; color: black; - border:none; - outline:none; + border: none; + outline: none; } } diff --git a/assets/css/members.css b/assets/css/members.css index 0ddb3e8..320e1df 100644 --- a/assets/css/members.css +++ b/assets/css/members.css @@ -8,8 +8,8 @@ .role { display: inline-block; - background-color: #eee; - color: #333; + background-color: var(--openms-grey); + color: var(--openms-dark); padding: 0.2rem 0.5rem; border-radius: 0.5rem; font-size: 0.85em; diff --git a/assets/css/navbar-responsive.css b/assets/css/navbar-responsive.css new file mode 100644 index 0000000..580e93e --- /dev/null +++ b/assets/css/navbar-responsive.css @@ -0,0 +1,451 @@ +/* Navbar — tablet (md) & mobile (sm) */ + +/* Mobile bar CTAs — hidden on desktop */ +.navbar-mobile-ctas, +.navbar-mobile-ctas-end { + display: none; +} + +.navbar-brand-actions { + display: flex; + align-items: center; +} + +/* Desktop — horizontal bar */ +@media (min-width: 1024px) { + .navbar-mobile-ctas, + .navbar-mobile-ctas-end, + .navbar-brand-actions { + display: none; + } + + .navbar-desktop-cta { + display: contents; + } + + .navbar.is-fresh .navbar-burger, + #navbar-clone.navbar.is-fresh .navbar-burger { + display: none; + } + + .navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + display: flex !important; + flex: 1; + min-width: 0; + position: static; + box-shadow: none; + background: transparent; + overflow: visible; + } + + .site-header #nav.navbar.is-fresh .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-end { + flex-wrap: wrap; + justify-content: flex-end; + align-items: center; + } +} + +/* Medium desktop — tighter items so CTAs stay visible */ +@media (min-width: 1024px) and (max-width: 1280px) { + .navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 64px !important; + height: 64px !important; + } + + .navbar.is-fresh .navbar-logo-text, + #navbar-clone.navbar.is-fresh .navbar-logo-text { + font-size: var(--openms-secondary-heading-size-lg); + } + + .navbar.is-fresh .navbar-item, + .navbar.is-fresh a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-item, + #navbar-clone.navbar.is-fresh a.navbar-item.is-secondary { + font-size: var(--openms-text-min); + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .navbar.is-fresh .signup-button, + #navbar-clone.navbar.is-fresh .signup-button { + font-size: var(--openms-text-min); + padding: 0.5rem 0.875rem !important; + white-space: nowrap; + } +} + +/* Tablet & mobile — collapsible menu (Bulma < 1024px) */ +@media (max-width: 1023px) { + .site-header #nav.navbar.is-fresh, + #navbar-clone.navbar.is-fresh { + min-height: auto; + } + + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container { + display: flex; + flex-wrap: nowrap; + align-items: center; + min-height: 4.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + overflow: visible; + } + + .navbar-desktop-cta { + display: none !important; + } + + .site-header #nav.navbar.is-fresh .navbar-brand, + #navbar-clone.navbar.is-fresh .navbar-brand { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1; + min-height: 4.25rem; + min-width: 0; + padding-left: 0; + gap: 0.25rem; + } + + .site-header #nav.navbar.is-fresh .navbar-brand-link, + #navbar-clone.navbar.is-fresh .navbar-brand-link { + flex: 0 1 auto; + min-width: 0; + max-width: 50%; + padding: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 56px !important; + height: 56px !important; + max-width: 100%; + width: auto; + object-fit: contain; + object-position: left center; + } + + .site-header #nav.navbar.is-fresh .navbar-logo-text, + #navbar-clone.navbar.is-fresh .navbar-logo-text { + display: none; + } + + .navbar-brand-actions { + display: flex !important; + align-items: center; + flex: 1 1 auto; + min-width: 0; + margin-left: auto; + justify-content: flex-end; + overflow: visible; + } + + /* Right cluster: Spon → Give → menu */ + .navbar-mobile-ctas-end { + display: flex !important; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + gap: 0.25rem; + flex-shrink: 0; + margin-left: auto; + overflow: visible; + max-width: 100%; + } + + .navbar-mobile-ctas-end .navbar-cta-label--full, + .navbar-mobile-ctas .navbar-cta-label--full { + display: none; + } + + .navbar-mobile-ctas-end .navbar-cta-label--short, + .navbar-mobile-ctas .navbar-cta-label--short { + display: inline; + } + + .navbar-mobile-ctas-end .navbar-cta-item { + display: inline-flex !important; + align-items: center; + flex-shrink: 0; + width: auto !important; + max-width: none; + justify-content: center; + text-align: center; + padding: 0; + } + + .navbar-mobile-ctas-end .navbar-cta-item:nth-child(1) { + order: 1; + } + + .navbar-mobile-ctas-end .navbar-cta-item:nth-child(2) { + order: 2; + } + + .navbar-mobile-ctas-end .signup-button { + display: inline-block !important; + padding: 0.35rem 0.5rem !important; + font-size: var(--openms-text-min); + line-height: 1.15; + white-space: nowrap; + border-width: 1.5px !important; + } + + .navbar-mobile-ctas-end .navbar-burger { + order: 3; + display: flex !important; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 2.75rem; + height: 2.75rem; + margin-right: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-burger, + #navbar-clone.navbar.is-fresh .navbar-burger { + display: flex !important; + align-items: center; + justify-content: center; + width: 2.75rem; + height: 2.75rem; + margin-right: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-burger span, + #navbar-clone.navbar.is-fresh .navbar-burger span { + height: 2px; + width: 1.25rem; + left: calc(50% - 0.625rem); + } + + /* Overlay menu — does not expand header height */ + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + display: none !important; + flex: none; + width: 100vw; + max-width: 100vw; + position: fixed; + left: 0; + right: 0; + top: var(--openms-header-height, 9rem); + bottom: 0; + height: auto !important; + min-height: calc(100dvh - var(--openms-header-height, 9rem)); + z-index: 250; + margin: 0; + padding: 0; + background: var(--openms-white); + box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); + border-top: 1px solid var(--openms-grey); + max-height: none; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + pointer-events: auto; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active { + display: flex !important; + flex-direction: column; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active .navbar-end { + display: flex; + flex: 1 1 auto; + width: 100%; + } + + .site-header #nav.navbar.is-fresh .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-end { + flex-direction: column; + align-items: stretch; + width: 100%; + flex-wrap: nowrap; + gap: 0; + padding: 0.5rem 0 1rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown { + width: 100%; + justify-content: center; + text-align: center; + padding: 0.65rem 1rem; + } + + .navbar.is-fresh .navbar-item.has-dropdown .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { + width: 100%; + justify-content: center; + } + + .navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { + position: relative; + top: auto; + right: auto; + margin-left: 0.35rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown { + position: static; + display: none !important; + width: 100%; + min-width: 0; + margin-top: 0; + box-shadow: none; + border-top: none; + background: rgba(var(--openms-blue-rgb), 0.06); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown { + display: block !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown { + display: none !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown { + display: block !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + cursor: pointer; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-heading { + width: 100%; + text-align: center; + border-top-color: var(--openms-grey); + color: var(--openms-blue); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested { + font-size: var(--openms-body-size); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social { + display: flex; + justify-content: center; + align-items: center; + gap: 1.25rem; + width: 100%; + margin-top: auto; + padding: 1.25rem 1rem 1.5rem; + border-top: 1px solid var(--openms-grey); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a { + display: inline-flex; + align-items: center; + justify-content: center; + width: auto; + min-width: 44px; + min-height: 44px; + padding: 0; + color: var(--openms-blue); + transition: color 0.2s ease; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover { + color: var(--openms-orange); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon { + width: 1.5rem; + height: 1.5rem; + fill: currentColor; + } + +} + +@media (min-width: 1024px) { + .navbar-mobile-social { + display: none !important; + } +} + +/* Small phones */ +@media (max-width: 768px) { + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container { + min-height: 4rem; + } + + .site-header #nav.navbar.is-fresh .navbar-brand, + #navbar-clone.navbar.is-fresh .navbar-brand { + min-height: 4rem; + } + + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 52px !important; + height: 52px !important; + } + + .site-header #nav.navbar.is-fresh .navbar-brand-link, + #navbar-clone.navbar.is-fresh .navbar-brand-link { + max-width: 46%; + } +} + +@media (max-width: 380px) { + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 48px !important; + height: 48px !important; + } + + .site-header #nav.navbar.is-fresh .navbar-brand-link, + #navbar-clone.navbar.is-fresh .navbar-brand-link { + max-width: 42%; + } + + .navbar-mobile-ctas-end { + gap: 0.2rem; + } + + .navbar-mobile-ctas-end .signup-button { + padding: 0.3rem 0.4rem !important; + } + + .navbar-mobile-ctas-end .navbar-burger { + width: 2.5rem; + height: 2.5rem; + } +} + +/* Desktop CTA labels */ +@media (min-width: 1024px) { + .navbar-cta-label--short { + display: none; + } + + .navbar-cta-label--full { + display: inline; + } +} diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css new file mode 100644 index 0000000..895d507 --- /dev/null +++ b/assets/css/news-banner.css @@ -0,0 +1,110 @@ +/* Site-wide news / alert banner — matches hero color scheme */ + +.news-banner { + position: relative; + z-index: 100; + background: var(--openms-navy); + color: var(--openms-white); + border-bottom: 1px solid rgba(var(--openms-white-rgb), 0.1); +} + +.news-banner__inner { + display: flex; + align-items: center; + justify-content: center; + min-height: 1.25rem; + padding: 0.15rem 0.55rem; + text-align: center; +} + +.news-banner__message { + margin: 0; + font-size: 0.75rem; + line-height: 1.25; + flex: 1; +} + +/* Matches hero primary button */ +.news-banner__label { + display: inline-block; + margin-right: 0.5rem; + padding: 0.125rem 0.5rem; + font-size: inherit; + font-weight: 600; + line-height: 1.2; + letter-spacing: 0.06em; + text-transform: uppercase; + border-radius: 0.25rem; + background: var(--openms-orange); + border: 2px solid var(--openms-orange); + color: var(--openms-white); + vertical-align: middle; +} + +.news-banner__link { + display: inline; + color: inherit; + text-decoration: none; + transition: color 0.2s ease, opacity 0.2s ease; +} + +.news-banner__link:hover { + color: var(--openms-white); +} + +.news-banner__text { + font-weight: 500; + color: var(--openms-white); +} + +/* Matches hero stat numbers */ +.news-banner__cta { + margin-left: 0.3rem; + font-size: 0.5rem; + font-weight: 600; + color: var(--openms-yellow); + white-space: nowrap; + transition: color 0.2s ease; +} + +.news-banner__link:hover .news-banner__cta { + color: var(--openms-yellow); +} + +@media (max-width: 768px) { + .news-banner__inner { + min-height: 1.125rem; + padding: 0.125rem 0.4rem; + text-align: center; + justify-content: center; + } + + .news-banner__message { + flex: none; + width: 100%; + font-size: 0.7375rem; + line-height: 1.2; + text-align: center; + } + + .news-banner__label { + display: inline-block; + margin: 0 0.35rem 0 0; + padding: 0.1rem 0.45rem; + } + + .news-banner__cta { + font-size: 0.4375rem; + } + + .news-banner__link { + display: inline-block; + text-align: center; + } + + .news-banner__cta { + display: block; + margin: 0.25rem auto 0; + white-space: normal; + } +} diff --git a/assets/css/quick-facts.css b/assets/css/quick-facts.css index ab77a28..78003a8 100644 --- a/assets/css/quick-facts.css +++ b/assets/css/quick-facts.css @@ -9,9 +9,6 @@ .facts-title { display: flex; justify-content: center; - letter-spacing: 1.5px; - font-size: 30px; - font-weight: bold; } .facts-list { @@ -28,12 +25,12 @@ height: 86px; font-size: 36px; font-family: 'Bebas Neue', cursive; - background: linear-gradient(45deg, transparent 5%, #FF013C 5%); + background: linear-gradient(45deg, transparent 5%, var(--openms-pink) 5%); border: 0; - color: #fff; + color: var(--openms-white); letter-spacing: 3px; line-height: 88px; - box-shadow: 6px 0px 0px #00E6F6; + box-shadow: 6px 0px 0px var(--openms-blue); outline: transparent; position: relative; } @@ -53,8 +50,8 @@ left: 0; right: 0; bottom: 0; - background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%); - text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6; + background: linear-gradient(45deg, transparent 3%, var(--openms-blue) 3%, var(--openms-blue) 5%, var(--openms-pink) 5%); + text-shadow: -3px -3px 0px var(--openms-yellow), 3px 3px 0px var(--openms-blue); clip-path: var(--slice-0); } diff --git a/assets/css/shell.css b/assets/css/shell.css index 46eaed3..6afefcb 100644 --- a/assets/css/shell.css +++ b/assets/css/shell.css @@ -2,8 +2,8 @@ display: flex; flex-direction: column; /* Black, with 10% opacity */ - box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); - background: rgb(238, 238, 238); + box-shadow: 0px 8px 15px rgba(var(--openms-dark-rgb), 0.1); + background: var(--openms-grey); padding: 15px; } @@ -32,11 +32,6 @@ align-items: center; } -.shell-title { - font-size: 35px; - font-weight: bold; -} - .shell-lesson { text-align: left; flex: 1; @@ -68,11 +63,11 @@ } .CodeMirror pre { - color: rgb(255, 255, 255) !important; + color: var(--openms-white) !important; } .CodeMirror-cursor { - color: rgb(255, 255, 255) !important; + color: var(--openms-white) !important; border-left: 1px solid white !important; } diff --git a/assets/css/site-header.css b/assets/css/site-header.css new file mode 100644 index 0000000..1c9270f --- /dev/null +++ b/assets/css/site-header.css @@ -0,0 +1,26 @@ +/* Sticky site header — news banner + navbar stay aligned at top */ + +.site-header { + position: sticky; + top: 0; + z-index: 200; + width: 100%; + background: var(--openms-white); +} + +.site-header .news-banner { + position: relative; + z-index: 1; + flex-shrink: 0; +} + +.site-header #nav.navbar.is-fresh { + position: relative; + z-index: 2; + width: 100%; +} + +/* Scroll clone duplicates nav only — hide; sticky header handles scroll */ +#navbar-clone.navbar.is-fresh { + display: none !important; +} diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index ef8a8b8..dcf8cda 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -1,52 +1,263 @@ /* Back to top – colour override to match footer theme */ #backtotop a { - background-color: #0b214a; - border: 2px solid rgba(255, 255, 255, 0.25); + background-color: var(--openms-blue); + border: 2px solid rgba(var(--openms-white-rgb), 0.25); } #backtotop.visible a:hover { - background-color: #1a3a7a; + background-color: var(--openms-purple); } -.hero-title-content { - max-width: 1200px; - margin: 1vh auto; +.navbar.is-fresh .navbar-item, +.navbar.is-fresh .navbar-link, +.navbar.is-fresh a.navbar-item.is-secondary, +.navbar.is-fresh .navbar-menu .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-link, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary, +#navbar-clone.navbar.is-fresh .navbar-menu .navbar-item { + color: var(--openms-dark) !important; } -.hero-logo { - max-height: 200px; +.navbar.is-fresh .navbar-item:focus-visible, +.navbar.is-fresh .navbar-link:focus-visible, +.navbar.is-fresh .navbar-dropdown .navbar-item:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-item:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-link:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: 2px; } -.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { - color: var(--colorPrimaryDark); +.navbar.is-fresh .navbar-item:hover, +.navbar.is-fresh .navbar-link:hover, +.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-fresh .navbar-brand .navbar-brand-link:hover, +#navbar-clone.navbar.is-fresh .navbar-item:hover, +#navbar-clone.navbar.is-fresh .navbar-link:hover, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, +#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover { + color: var(--openms-blue) !important; } -.navbar.is-fresh .navbar-brand img { - max-height: 50px !important; - height: 50px; +.navbar.is-fresh a.navbar-item.is-secondary, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary { + transition: color 0.2s ease; } -@media only screen and (max-width: 850px) { - .social-media-icons { - width: 100%; - } +.navbar.is-fresh a.navbar-item.is-secondary:hover, +.navbar.is-fresh a.navbar-item.is-secondary:focus-visible, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:hover, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:focus-visible { + color: var(--openms-blue) !important; + background-color: transparent !important; } -@media only screen and (max-width: 600px) { - .hero-logo { - max-height: 150px; - } +.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { + border-color: var(--openms-dark) !important; +} + +.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after { + border-color: var(--openms-blue) !important; +} + +.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { + border-top-color: var(--openms-blue); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-dark-rgb), 0.08); +} + +.navbar.is-fresh .navbar-dropdown .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item { + color: var(--openms-dark) !important; +} + +.navbar.is-fresh .navbar-dropdown .navbar-item:hover, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item:hover { + color: var(--openms-blue) !important; + background-color: rgba(var(--openms-blue-rgb), 0.1); +} + +/* Navbar CTA buttons (mailchimp.css must not hide these) */ +.navbar.is-fresh .signup-button, +#navbar-clone.navbar.is-fresh .signup-button { + display: inline-block !important; +} + +/* Donate — matches hero primary button */ +.navbar.is-fresh .signup-button.secondary-btn, +#navbar-clone.navbar.is-fresh .signup-button.secondary-btn { + background-color: var(--openms-orange) !important; + color: var(--openms-white) !important; + border: 2px solid var(--openms-orange) !important; + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-orange-rgb), 0.3); +} + +.navbar.is-fresh .signup-button.secondary-btn:hover, +#navbar-clone.navbar.is-fresh .signup-button.secondary-btn:hover { + background-color: var(--openms-yellow) !important; + color: var(--openms-dark) !important; + border-color: var(--openms-yellow) !important; + box-shadow: 0 0.35rem 1rem rgba(var(--openms-yellow-rgb), 0.35); +} + +/* Sponsor — outline blue */ +.navbar.is-fresh .signup-button.sponsor-btn, +#navbar-clone.navbar.is-fresh .signup-button.sponsor-btn { + background-color: transparent !important; + color: var(--openms-blue) !important; + border: 2px solid var(--openms-blue) !important; + box-shadow: none; +} + +.navbar.is-fresh .signup-button.sponsor-btn:hover, +#navbar-clone.navbar.is-fresh .signup-button.sponsor-btn:hover { + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + border-color: var(--openms-blue) !important; + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-blue-rgb), 0.3); +} + +.navbar.is-fresh .navbar-burger, +#navbar-clone.navbar.is-fresh .navbar-burger { + color: var(--openms-dark); + width: 3.5rem; + height: 3.5rem; + margin-right: 1rem; } -@media only screen and (max-width: 400px) { - .hero-logo { - max-height: 120px; +@media (max-width: 1023px) { + .navbar.is-fresh .navbar-burger, + #navbar-clone.navbar.is-fresh .navbar-burger { + margin-right: 0; } } -@media only screen and (max-width: 320px) { - .hero-logo { - max-height: 100px; +.navbar.is-fresh .navbar-burger span, +#navbar-clone.navbar.is-fresh .navbar-burger span { + background-color: var(--openms-dark); + height: 2px; + width: 1.5rem; + left: calc(50% - 0.75rem); + border-radius: 1px; +} + +.navbar.is-fresh .navbar-burger span:nth-child(1), +#navbar-clone.navbar.is-fresh .navbar-burger span:nth-child(1) { + top: calc(50% - 6px); +} + +.navbar.is-fresh .navbar-burger span:nth-child(2), +#navbar-clone.navbar.is-fresh .navbar-burger span:nth-child(2) { + top: calc(50% - 1px); +} + +.navbar.is-fresh .navbar-burger span:nth-child(3), +#navbar-clone.navbar.is-fresh .navbar-burger span:nth-child(3) { + top: calc(50% + 4px); +} + +.navbar.is-fresh .navbar-burger:hover, +.navbar.is-fresh .navbar-burger:focus, +.navbar.is-fresh .navbar-burger:focus-visible, +.navbar.is-fresh .navbar-burger:active, +#navbar-clone.navbar.is-fresh .navbar-burger:hover, +#navbar-clone.navbar.is-fresh .navbar-burger:focus, +#navbar-clone.navbar.is-fresh .navbar-burger:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-burger:active { + background-color: transparent; +} + +.navbar.is-fresh { + min-height: 5.5rem; +} + +.navbar.is-fresh .container, +.navbar.is-fresh .navbar-brand { + min-height: 5.5rem; +} + +/* Top-level dropdown labels (e.g. Partner with OpenMS) */ +.navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link { + font-weight: 700; +} + +/* Navbar dropdown section headings & nested links */ +.navbar.is-fresh .navbar-dropdown-heading, +#navbar-clone.navbar.is-fresh .navbar-dropdown-heading { + display: block; + padding: 0.5rem 1rem 0.35rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + border-top: 1px solid rgba(var(--openms-blue-rgb), 0.12); + margin-top: 0.25rem; + pointer-events: none; + user-select: none; +} + +.navbar.is-fresh .navbar-dropdown-heading:first-child, +#navbar-clone.navbar.is-fresh .navbar-dropdown-heading:first-child { + border-top: none; + margin-top: 0; + padding-top: 0.35rem; +} + +.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested { + padding-left: 1.5rem; + font-size: calc(var(--openms-body-size) * 0.95); +} + +.navbar.is-fresh .navbar-item:has(.signup-button) { + flex-shrink: 0; + padding-left: 0.35rem; + padding-right: 0.35rem; +} + +.navbar.is-fresh .navbar-brand .navbar-brand-link { + display: flex; + align-items: center; + gap: 0.875rem; + padding-left: 0; +} + +.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 88px !important; + height: 88px !important; + width: auto !important; + padding-right: 0; +} + +.navbar.is-fresh .navbar-logo-text, +#navbar-clone.navbar.is-fresh .navbar-logo-text { + font-family: var(--openms-font-heading); + font-size: var(--openms-heading-lg-size); + font-weight: var(--openms-heading-lg-weight); + color: var(--openms-dark) !important; + line-height: 1; +} + +.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text, +#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text { + color: var(--openms-blue) !important; +} + +/* Solid bar over the dark homepage hero (matches design mockup) */ +body:has(.hero-modern) .site-header #nav.navbar.is-fresh { + background: rgba(var(--openms-white-rgb), 0.95); + backdrop-filter: blur(10px); + border-bottom: 2px solid var(--openms-grey); +} + +@media only screen and (max-width: 850px) { + .social-media-icons { + width: 100%; } } @@ -55,8 +266,8 @@ ============================================= */ .footer-redesign { - background-color: #0b214a; - color: #e2e8f0; + background-color: var(--openms-blue); + color: var(--openms-grey); padding: 3rem 0 0; font-family: inherit; } @@ -73,15 +284,66 @@ /* ---- Brand block ---- */ .footer-brand { - flex: 0 0 200px; + flex: 0 0 300px; } -.footer-title { - font-size: 1.75rem; - font-weight: 800; - color: #ffffff; +.footer-brand-top { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.25rem; margin-bottom: 1.5rem; - letter-spacing: -0.3px; +} + +.footer-logo { + display: inline-flex; + align-items: center; + min-height: 44px; +} + +.footer-logo img { + display: block; + max-height: 88px; + max-width: min(100%, 280px); + width: auto; + height: auto; + object-fit: contain; + filter: brightness(0) invert(1); +} + +.footer-logo:focus-visible { + outline: 2px solid rgba(var(--openms-white-rgb), 0.45); + outline-offset: 4px; + border-radius: 4px; +} + +.footer-donate-btn.signup-button { + display: inline-block !important; + padding: 0.55rem 1.35rem !important; + font-size: var(--openms-body-size); + font-weight: 600; + text-decoration: none; + white-space: nowrap; +} + +.footer-redesign .footer-donate-btn.signup-button.secondary-btn { + background-color: var(--openms-orange) !important; + color: var(--openms-white) !important; + border: 2px solid var(--openms-orange) !important; + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-orange-rgb), 0.3); +} + +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible { + background-color: var(--openms-yellow) !important; + color: var(--openms-dark) !important; + border-color: var(--openms-yellow) !important; + box-shadow: 0 0.35rem 1rem rgba(var(--openms-yellow-rgb), 0.35); +} + +.footer-title { + color: var(--openms-white); + margin-bottom: 0; } /* ---- Partner logo row ---- */ @@ -104,8 +366,8 @@ .footer-link-group ul li a:focus-visible, .footer-socials a:focus-visible { - color: #ffffff; - outline: 2px solid rgba(255, 255, 255, 0.45); + color: var(--openms-white); + outline: 2px solid rgba(var(--openms-white-rgb), 0.45); outline-offset: 4px; } @@ -135,11 +397,11 @@ /* ---- Column heading ---- */ .footer-group-heading { - font-size: 0.68rem; + font-size: var(--openms-text-min); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; - color: rgba(255, 255, 255, 0.45); + color: rgba(var(--openms-white-rgb), 0.45); margin: 0 0 0.875rem 0; padding: 0; } @@ -152,9 +414,9 @@ } .footer-link-group ul li a { - color: #c8d4e8; + color: var(--openms-grey); text-decoration: none; - font-size: 0.9rem; + font-size: var(--openms-body-size); display: flex; align-items: center; min-height: 44px; @@ -162,7 +424,7 @@ } .footer-link-group ul li a:hover { - color: #ffffff; + color: var(--openms-white); text-decoration: underline; } @@ -171,7 +433,7 @@ max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(var(--openms-white-rgb), 0.1); display: flex; align-items: center; justify-content: space-between; @@ -192,12 +454,12 @@ justify-content: center; min-width: 44px; min-height: 44px; - color: #c8d4e8; + color: var(--openms-grey); transition: color 0.2s ease; } .footer-socials a:hover { - color: #ffffff; + color: var(--openms-white); } .footer-socials svg.icon { @@ -208,8 +470,8 @@ /* ---- Copyright ---- */ .footer-copyright { - color: rgba(255, 255, 255, 0.45); - font-size: 0.85rem; + color: rgba(var(--openms-white-rgb), 0.45); + font-size: var(--openms-text-min); } /* ============================================= @@ -227,6 +489,20 @@ width: 100%; } + .footer-brand-top { + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + width: 100%; + gap: 1rem; + } + + .footer-logo img { + max-height: 72px; + max-width: min(65vw, 240px); + } + .footer-partners { flex-direction: row; flex-wrap: wrap; diff --git a/assets/css/tabs.css b/assets/css/tabs.css index a7c39bc..f69d395 100644 --- a/assets/css/tabs.css +++ b/assets/css/tabs.css @@ -16,8 +16,6 @@ .tabs-title { display: flex; justify-content: center; - letter-spacing: 1.5px; - font-size: 27px; margin: 30px 0; } @@ -32,11 +30,11 @@ .uk-nav > li > a { height: 35px; - font-size: 13px; + font-size: var(--openms-text-min); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; - color: rgb(108, 122, 137); + color: var(--openms-grey); } #tabs-content > li { @@ -63,7 +61,7 @@ .grid-container > div { /* White, with 80% opacity */ - background-color: rgba(255, 255, 255, 0.8); + background-color: rgba(var(--openms-white-rgb), 0.8); text-align: middle; } @@ -85,25 +83,25 @@ } .image-grid > div { - background-color: rgb(238, 238, 238); - border: 2px solid rgb(255, 255, 255); + background-color: var(--openms-grey); + border: 2px solid var(--openms-white); border-radius: 10px; padding: 10px; } /* Scientific Domains */ td, th { - font-size: 0.8rem; + font-size: var(--openms-text-min); padding: 8px; } td > a { - font-size: 0.8rem; + font-size: var(--openms-text-min); } tr.highlight-th { - border-top: 1px solid rgb(238, 238, 238); - font-size: 0.8rem; + border-top: 1px solid var(--openms-grey); + font-size: var(--openms-text-min); } td.bold-text { @@ -134,7 +132,7 @@ td.full-center-text { td.lastrow-center-text { text-align: center; line-height: 35%; - border-bottom: 1px solid rgb(255, 255, 255); + border-bottom: 1px solid var(--openms-white); } /* Array Libraries */ diff --git a/assets/css/terminal.css b/assets/css/terminal.css index d41efda..45b162c 100644 --- a/assets/css/terminal.css +++ b/assets/css/terminal.css @@ -7,7 +7,7 @@ position: relative; } .terminal-window header { -background: #E0E8F0; +background: var(--openms-grey); height: 30px; border-radius: 8px 8px 0 0; padding-left: 10px; @@ -23,22 +23,22 @@ padding: 0%; } .terminal-window header .button.green { -background: #3BB662; +background: var(--openms-yellow); } .terminal-window header .button.yellow { -background: #E5C30F; +background: var(--openms-orange); } .terminal-window header .button.red { -background: #E75448; +background: var(--openms-pink); } .terminal-window section.terminal { -color: white; +color: var(--openms-white); font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier"; font-size: 11pt; -background: #30353A; +background: var(--openms-dark); padding: 10px; box-sizing: border-box; position: absolute; @@ -71,5 +71,5 @@ overflow: auto; } .terminal-data { display: none; } -.terminal-window .gray { color: gray; } -.terminal-window .green { color: green;} \ No newline at end of file +.terminal-window .gray { color: var(--openms-grey); } +.terminal-window .green { color: var(--openms-purple); } diff --git a/assets/css/typography.css b/assets/css/typography.css new file mode 100644 index 0000000..7477982 --- /dev/null +++ b/assets/css/typography.css @@ -0,0 +1,161 @@ +/* OpenMS typography + Montserrat — primary headings (h1, h2, large titles) + Raleway — body copy & secondary headings (h3–h6) + JetBrains Mono thin — quotes, callouts & emphasis + Web minimum — 11pt +*/ + +html { + font-size: var(--openms-body-size); +} + +body { + font-family: var(--openms-font-body); + font-size: 1rem; + font-weight: var(--openms-body-weight); + line-height: 1.5; + color: var(--openms-dark); +} + +/* Normal text — 11–14pt */ +p, +li, +dd, +dt, +td, +th, +label, +input, +textarea, +select, +button, +.content-container, +.subtitle:not(.is-1):not(.is-2):not(.is-3), +.navbar-item, +.navbar-link, +.news-banner__message { + font-family: var(--openms-font-body); + font-weight: var(--openms-body-weight); +} + +.openms-text-sm { + font-size: var(--openms-text-min); +} + +.openms-text-lg { + font-size: var(--openms-body-size-lg); +} + +/* Presentations — 18pt */ +.openms-text-presentation, +.keyfeatures > .container > p { + font-family: var(--openms-font-body); + font-size: var(--openms-presentation-size); + font-weight: var(--openms-body-weight); + line-height: 1.55; +} + +/* Titles & large headings — Montserrat extra bold 26pt */ +h1, +.title.is-1, +.keyfeatures-title, +.casestudies-title, +.heroItemTitle, +.facts-title, +.shell-title, +.tabs-title, +.section-title, +.content-container h1 { + font-family: var(--openms-font-heading); + font-size: var(--openms-heading-xl-size); + font-weight: var(--openms-heading-xl-weight); + line-height: 1.25; + letter-spacing: normal; + text-transform: none; +} + +/* Chapters & headings — Montserrat bold 20pt */ +h2, +.title.is-2, +.footer-title, +.content-container h2, +.post-title h2 { + font-family: var(--openms-font-heading); + font-size: var(--openms-heading-lg-size); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: none; +} + +/* Secondary headings — Raleway regular */ +h3, +.title.is-3, +.keyfeatures-box-title, +.casestudies-box-title, +.content-container h3, +.post-subtitle h3 { + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: var(--openms-secondary-heading-weight); + line-height: 1.35; + letter-spacing: normal; + text-transform: none; +} + +h4, +h5, +h6, +.title.is-4, +.title.is-5, +.title.is-6, +.content-container h4, +.content-container h5, +.content-container h6 { + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size); + font-weight: var(--openms-secondary-heading-weight); + line-height: 1.35; + letter-spacing: normal; + text-transform: none; +} + +/* Quotes, callouts & emphasis — JetBrains Mono thin */ +blockquote, +blockquote p, +q, +.notice, +.notice-content, +.notice-type, +em, +i, +cite, +mark { + font-family: var(--openms-font-mono); + font-weight: var(--openms-mono-weight); + font-style: normal; + font-size: max(var(--openms-text-min), 1em); + line-height: 1.55; +} + +.notice-type { + letter-spacing: 0.05em; + text-transform: uppercase; +} + +blockquote p { + font-size: inherit; +} + +/* Web minimum — nothing smaller than 11pt (news banner uses compact sizes in news-banner.css) */ +.hero-modern__stat-label, +.hero-modern__btn, +.footer-link-group ul li a, +.footer-copyright, +.footer-column-label, +.tabs-section .tab, +.mailchimp-form, +.members-card, +.casestudies-box-text { + font-size: max(var(--openms-text-min), 1em); +} diff --git a/assets/css/vars_override.css b/assets/css/vars_override.css deleted file mode 100644 index d0697dc..0000000 --- a/assets/css/vars_override.css +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --fontFamily: {{ .Site.Params.font.name }}; - - --colorPrimaryDark: #0c2a60; - --colorPrimaryDarkBtn: #0c2a60; -} diff --git a/assets/css/webapps.css b/assets/css/webapps.css index f782644..514dec2 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -29,9 +29,9 @@ flex-direction: column; align-items: center; height: 60%; - border: 1px solid lightgray; + border: 1px solid var(--openms-grey); border-radius: 25px; - box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: 2px 2px 6px rgba(var(--openms-dark-rgb), 0.1); transition: height 0.6s ease; } @@ -115,7 +115,7 @@ .swiper-button-prev, .swiper-button-next { - color: #000080; + color: var(--openms-blue); position: absolute; top: 40%; } diff --git a/assets/icons/linkedin.svg b/assets/icons/linkedin.svg new file mode 100644 index 0000000..f820eaf --- /dev/null +++ b/assets/icons/linkedin.svg @@ -0,0 +1 @@ + diff --git a/assets/js/hero-stats.js b/assets/js/hero-stats.js new file mode 100644 index 0000000..1eb84d4 --- /dev/null +++ b/assets/js/hero-stats.js @@ -0,0 +1,74 @@ +(function () { + var counters = Array.prototype.filter.call( + document.querySelectorAll(".hero-modern__stat-number[data-count-value]"), + function (counter) { + return counter.offsetParent !== null; + } + ); + if (!counters.length) return; + + var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + + function formatValue(value, decimals) { + return decimals > 0 ? value.toFixed(decimals) : String(Math.round(value)); + } + + function setFinal(counter) { + var target = parseFloat(counter.getAttribute("data-count-value")); + var suffix = counter.getAttribute("data-count-suffix") || ""; + var decimals = parseInt(counter.getAttribute("data-count-decimals") || "0", 10); + counter.textContent = formatValue(target, decimals) + suffix; + } + + function animateCounter(counter) { + if (counter.dataset.countAnimated === "true") return; + counter.dataset.countAnimated = "true"; + + var target = parseFloat(counter.getAttribute("data-count-value")); + var suffix = counter.getAttribute("data-count-suffix") || ""; + var decimals = parseInt(counter.getAttribute("data-count-decimals") || "0", 10); + var duration = 2000; + var start = performance.now(); + + function tick(now) { + var progress = Math.min((now - start) / duration, 1); + var eased = 1 - Math.pow(1 - progress, 3); + var current = target * eased; + counter.textContent = formatValue(current, decimals) + suffix; + + if (progress < 1) { + requestAnimationFrame(tick); + } else { + counter.textContent = formatValue(target, decimals) + suffix; + } + } + + requestAnimationFrame(tick); + } + + if (prefersReducedMotion) { + counters.forEach(setFinal); + return; + } + + if (!("IntersectionObserver" in window)) { + counters.forEach(animateCounter); + return; + } + + var observer = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + animateCounter(entry.target); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.3 } + ); + + counters.forEach(function (counter) { + observer.observe(counter); + }); +})(); diff --git a/assets/js/navbar.js b/assets/js/navbar.js new file mode 100644 index 0000000..8f3c394 --- /dev/null +++ b/assets/js/navbar.js @@ -0,0 +1,107 @@ +/** + * Mobile navbar — burger menu, dropdown toggles & close on navigate + */ +(function () { + var MOBILE_MAX = 1023; + + function isMobileNav() { + return window.matchMedia("(max-width: " + MOBILE_MAX + "px)").matches; + } + + function closeDropdowns(nav) { + if (!nav) return; + nav.querySelectorAll(".navbar-item.has-dropdown.is-active").forEach(function (el) { + el.classList.remove("is-active"); + var link = el.querySelector(".navbar-link"); + if (link) link.setAttribute("aria-expanded", "false"); + }); + } + + function closeMobileMenu(nav) { + if (!nav) return; + var menu = nav.querySelector(".navbar-menu"); + var burger = nav.querySelector(".navbar-burger"); + if (menu) menu.classList.remove("is-active"); + if (burger) { + burger.classList.remove("is-active"); + burger.setAttribute("aria-expanded", "false"); + } + closeDropdowns(nav); + } + + function setupNav(nav) { + if (!nav) return; + + var menu = nav.querySelector(".navbar-menu"); + var burger = nav.querySelector(".navbar-burger"); + + if (burger && menu) { + burger.addEventListener("click", function (e) { + if (!isMobileNav()) return; + e.preventDefault(); + e.stopPropagation(); + /* Theme fresh.js also toggles the burger — prevent double-toggle */ + e.stopImmediatePropagation(); + + var willOpen = !menu.classList.contains("is-active"); + menu.classList.toggle("is-active", willOpen); + burger.classList.toggle("is-active", willOpen); + burger.setAttribute("aria-expanded", willOpen ? "true" : "false"); + + if (!willOpen) { + closeDropdowns(nav); + } else { + updateHeaderHeight(); + } + }); + } + + nav.querySelectorAll(".navbar-item.has-dropdown > .navbar-link").forEach(function (link) { + link.addEventListener("click", function (e) { + if (!isMobileNav()) return; + e.preventDefault(); + e.stopPropagation(); + + var parent = link.closest(".navbar-item.has-dropdown"); + var open = parent.classList.contains("is-active"); + closeDropdowns(nav); + if (!open) { + parent.classList.add("is-active"); + link.setAttribute("aria-expanded", "true"); + } + }); + }); + + if (menu) { + menu.querySelectorAll("a.navbar-item[href], a.navbar-cta-item").forEach(function (anchor) { + anchor.addEventListener("click", function () { + if (!isMobileNav()) return; + closeMobileMenu(nav); + }); + }); + } + } + + function updateHeaderHeight() { + var header = document.querySelector(".site-header"); + if (!header) return; + document.documentElement.style.setProperty( + "--openms-header-height", + header.offsetHeight + "px" + ); + } + + document.addEventListener("DOMContentLoaded", function () { + setupNav(document.getElementById("nav")); + setupNav(document.getElementById("navbar-clone")); + updateHeaderHeight(); + + window.addEventListener("resize", function () { + updateHeaderHeight(); + if (!isMobileNav()) { + closeMobileMenu(document.getElementById("nav")); + closeMobileMenu(document.getElementById("navbar-clone")); + } + }); + }); +})(); diff --git a/config.yaml b/config.yaml index c66342e..a2e1219 100644 --- a/config.yaml +++ b/config.yaml @@ -16,6 +16,23 @@ markup: disableLanguages: [] params: + font: + name: Montserrat + sizes: + - 400 + - 600 + - 700 + - 800 + bodyFont: + name: Raleway + sizes: + - 400 + - 500 + - 600 + monoFont: + name: JetBrains Mono + sizes: + - 100 images: - /images/logo.svg navColor: blue @@ -33,24 +50,41 @@ languages: languageName: English params: description: Why OpenMS? Mass Spectrometry. Visualizations. Open source. + newsBanner: + enabled: true + label: News + text: Workshop at University of Helsinki on April 30th 2026. + link: /news/ + # linkText: Learn more navbarlogo: image: OpenMS_transparent_blackFont.png link: / + altText: OpenMS hero: - # Main hero title - # title: OpenMS - # Hero subtitle (optional) - subtitle: The open-source framework for Mass Spectrometry - # Button text - buttontext: Install - # Where the main hero button links to + titleBefore: "The " + titleHighlight: open-source framework + titleAfter: " for Mass Spectrometry" + description: >- + Build sophisticated LC/MS data analysis tools with C++ or Python. + Process large datasets at scale. Create high-performance algorithms. + Join 1000+ researchers worldwide. + buttontext: Get Started Now buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html - # Hero image (from static/images/___) - image: OpenMS_transparent_blackFont.png + stats: + - value: 10 + suffix: "+" + label: Years Active + - value: 1000 + suffix: "+" + label: Researchers + - value: 3.5 + suffix: ".0" + decimals: 1 + label: Latest Version heroGroup: - title: "OpenMS allows users to:" - bgColor: ECF2F9 + bgColor: C2BABC heroItems: - title: Run existing workflows subtitle: Run existing workflows for proteomics and metabolomics with OpenMS in KNIME. @@ -72,7 +106,7 @@ languages: buttonText: Get Started buttonLink: "https://pyopenms.readthedocs.io/en/latest/" - title: "Advanced users / developers can use OpenMS to:" - bgColor: FFF1E0 + bgColor: FFCB4F heroItems: - title: Analyze large datasets subtitle: Run workflows on very large datasets on powerful compute infrastructure @@ -139,10 +173,20 @@ languages: sponsorLogo2: /images/logos/elixir-logo-white.png sponsorLogo3: /images/logos/libis-logo-white.svg logo: + image: OpenMS_transparent_blackFont.png + link: / + altText: OpenMS + donate: + text: Donate + link: /about#donate socialmediatitle: "" socialmedia: - - link: https://discord.gg/v9tv5BxPch + - link: https://discord.com/invite/v9tv5BxPch icon: discord + - link: https://www.linkedin.com/company/openms-org + icon: linkedin + - link: https://github.com/openMS + icon: github quicklinks: column1: heading: RESOURCES @@ -173,13 +217,10 @@ languages: link: /exec_committee - text: Governance link: /governance - - text: Jobs - link: /jobs + column4: heading: LEGAL links: - - text: Help - link: /help - text: Terms of use link: /terms - text: Privacy @@ -190,35 +231,71 @@ languages: link: /impressum navbar: - - title: News - url: /news - - title: Install - url: https://openms.readthedocs.io/en/latest/about/installation.html - - title: Documentation - url: https://openms.readthedocs.io/en/latest/index.html + - title: Infrastructure + sublinks: + - title: OpenMS-lib + url: https://openms.readthedocs.io/en/latest/develop-with-openms/openms-cpp-core-library.html + is_external: true + - title: pyOpenMS + url: https://pyopenms.readthedocs.io/en/latest/ + is_external: true + - title: WebApp-template + url: https://github.com/OpenMS/streamlit-template + is_external: true + - title: Projects + url: /applications + sublinks: + - title: Featured Projects + url: /applications + - title: Affiliated Projects + url: /applications + - title: Archived Projects + url: /applications + - title: Learn + sublinks: + - title: Liquid Chromatography + url: https://openms.readthedocs.io/en/latest/about/learning/lc-chromatography.html + is_external: true + - title: Mass Spectrometry + url: https://openms.readthedocs.io/en/latest/about/learning/mass-spectrometry.html + is_external: true + - title: Identification and Quantification + url: https://openms.readthedocs.io/en/latest/about/learning/id-and-quant.html + is_external: true + - title: Background + url: https://pyopenms.readthedocs.io/en/release-3.5.0/user_guide/background.html + is_external: true + - title: Glossary + url: https://openms.readthedocs.io/en/latest/manual/glossary.html + is_external: true - title: Community sublinks: - - title: Communication - url: /communication - - title: Contribute + - title: News + url: /news + - title: Getting Involved url: /contribute - - title: Awards - url: /news/fellowship2024 - url: /community - - title: About Us + - title: Annual Developer Meeting + url: /news/ + - title: About sublinks: + - title: About + url: /about - title: Governance url: /governance - - title: Contributors - url: /contributors - url: /about - - title: Use Cases - url: /publications - sublinks: - - title: Applications - url: /applications - title: Publications url: /publications - - title: Help Request - url: /help-request + - title: Contact + url: /communication + - title: Partner with OpenMS + url: /about#institutional-partners + is_emphasized: true + sublinks: + - title: Research Partnerships + url: /about#institutional-partners + - title: Scientific and Technical Support + url: /help + - title: Sponsor Us + url: /about#sponsors + - title: Donate + url: /about#donate button: true diff --git a/content/en/about.md b/content/en/about.md index 14040b8..88c6ba2 100644 --- a/content/en/about.md +++ b/content/en/about.md @@ -7,13 +7,13 @@ OpenMS Inc. is the corporate entity and fiscal home of the OpenMS project. As a The board of directors of OpenMS Inc. consists of Dr. Samuel Wein as chief executive officer, Prof. Dr. Oliver Kohlbacher as chief scientific officer, and Dr. Timo Sachsenberg as chief technology officer. -## Sponsors +## Sponsors {#sponsors} OpenMS receives direct funding from the following sources: {{< sponsors >}} -## Institutional Partners +## Institutional Partners {#institutional-partners} Institutional Partners are organizations that support the project by employing people that contribute to OpenMS as part of their job. Current Institutional Partners include: diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8b196d1..1e2ee50 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -39,7 +39,10 @@ {{ end }} {{ block "navbar" . }} - {{ partial "navbar.html" . }} +
+ {{ partial "news-banner.html" . }} + {{ partial "navbar.html" . }} +
{{ partial "navbar-clone.html" . }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html index 01136f5..0dce7c8 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -10,11 +10,7 @@ {{ if .Content }} {{ partial "single/content.html" . }} {{ end }} - - {{ if .Site.GetPage "/news" }} - {{ partial "news.html" . }} - {{ end }} - + {{ if .Site.Params.keyfeatures }} {{ partial "keyfeatures.html" . }} {{ end }} diff --git a/layouts/partials/css.html b/layouts/partials/css.html index 70295f0..dc0d2d4 100644 --- a/layouts/partials/css.html +++ b/layouts/partials/css.html @@ -5,14 +5,19 @@ {{- $sass := (slice "theme-css/fresh/core.scss") -}} {{- $cssOpts := cond ($inServerMode) (dict "enableSourceMap" true) (dict "outputStyle" "compressed") -}} - - - + +{{- $headingFont := .Site.Params.font.name | default "Montserrat" -}} +{{- $headingWeights := .Site.Params.font.sizes | default (slice 400 600 700 800) -}} +{{- $bodyFont := .Site.Params.bodyFont.name | default "Raleway" -}} +{{- $bodyWeights := .Site.Params.bodyFont.sizes | default (slice 400 500 600) -}} +{{- $monoFont := .Site.Params.monoFont.name | default "JetBrains Mono" -}} +{{- $monoWeights := .Site.Params.monoFont.sizes | default (slice 100) -}} +{{- $fontUrl := printf "https://fonts.googleapis.com/css2?family=%s:wght@%s&family=%s:wght@%s&family=%s:wght@%s&display=swap" (replace $headingFont " " "+") (delimit $headingWeights ";") (replace $bodyFont " " "+") (delimit $bodyWeights ";") (replace $monoFont " " "+") (delimit $monoWeights ";") -}} - + + + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d219add..d303e99 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -6,13 +6,29 @@ {{- $sponsorLogo3 := index $footer "sponsorLogo3" }} {{- $quickLinks := index $footer "quicklinks" }} {{- $socialMedia := index $footer "socialmedia" }} +{{- $footerLogo := index $footer "logo" | default .Site.Params.navbarlogo }} +{{- $donate := index $footer "donate" }}