diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 4b434eae..9104d63f 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,5 +1,3 @@
-
-
#### Brief description of what is fixed or changed
+#### Website checklist (content / config PRs)
+
+- [ ] Netlify deploy preview checked (link below when ready)
+- [ ] If `config.yaml`: valid YAML, homepage (and affected pages) reviewed on preview
+- [ ] If news post: `date`, `summary`, and `type: news` set; article and `/news` listing checked
+- [ ] If new images: files under `static/`, paths use `/images/...`
+- [ ] No secrets or internal-only URLs committed
+
+**Maintainer docs:** [docs/README.md](../docs/README.md)
diff --git a/README.md b/README.md
index b5d06af2..22aea15a 100644
--- a/README.md
+++ b/README.md
@@ -41,3 +41,9 @@ error: failed to transform resource: TOCSS: failed to transform "style.sass"
```
if you don't have the Hugo extended version.
+
+## Maintainer documentation
+
+**Non-developers** updating news, pages, or homepage text should start here:
+
+**[docs/README.md](docs/README.md)** — task guides (add news, edit banner, config.yaml reference, PR workflow, troubleshooting).
diff --git a/archetypes/news.md b/archetypes/news.md
new file mode 100644
index 00000000..0418aa16
--- /dev/null
+++ b/archetypes/news.md
@@ -0,0 +1,10 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+authors: []
+date: {{ .Date.Format "2006-01-02" }}
+summary: ""
+type: news
+draft: true
+---
+
+Write your news article here.
diff --git a/assets/css/about.css b/assets/css/about.css
new file mode 100644
index 00000000..7da007f5
--- /dev/null
+++ b/assets/css/about.css
@@ -0,0 +1,626 @@
+.about-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --about-max: 64rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.about-page-layout__content {
+ width: min(100%, var(--about-max));
+ max-width: var(--about-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.about-page-hero {
+ margin-bottom: var(--olib-section-y);
+}
+
+.about-page,
+.research-partnerships-page,
+.sponsor-us-page {
+ display: grid;
+ gap: clamp(2rem, 3.8vw, 3.2rem);
+ margin: 0;
+}
+
+.research-partnerships-page__actions,
+.sponsor-us-page__actions {
+ margin-top: 1rem;
+}
+
+.about-hero {
+ position: relative;
+ overflow: hidden;
+ padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem);
+ background: linear-gradient(
+ 135deg,
+ var(--openms-navy) 0%,
+ #1b318f 55%,
+ var(--openms-blue) 100%
+ );
+ color: var(--openms-white);
+}
+
+.about-hero::before,
+.about-hero::after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+ pointer-events: none;
+}
+
+.about-hero::before {
+ width: 18rem;
+ height: 18rem;
+ right: -4rem;
+ top: -8rem;
+ background: radial-gradient(circle, rgba(var(--openms-white-rgb), 0.16) 0%, transparent 70%);
+}
+
+.about-hero::after {
+ width: 14rem;
+ height: 14rem;
+ left: -5rem;
+ bottom: -7rem;
+ background: radial-gradient(circle, rgba(var(--openms-pink-rgb), 0.2) 0%, transparent 70%);
+}
+
+.about-hero__eyebrow {
+ position: relative;
+ z-index: 1;
+ margin: 0 0 0.5rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-white-rgb), 0.82);
+}
+
+.about-hero__title {
+ position: relative;
+ z-index: 1;
+ margin: 0;
+ max-width: 20ch;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 4.8vw, 3.2rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.02em;
+ text-wrap: balance;
+ color: var(--openms-white) !important;
+}
+
+.about-hero__title span {
+ color: var(--openms-white) !important;
+}
+
+.about-hero__description {
+ position: relative;
+ z-index: 1;
+ margin: 0.9rem 0 0;
+ max-width: 60ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-white-rgb), 0.92);
+}
+
+.about-hero a,
+.about-hero a:visited {
+ color: var(--openms-white) !important;
+}
+
+.about-section {
+ padding: 0 clamp(1rem, 3vw, 2rem);
+}
+
+.about-section h2 {
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+ font-size: clamp(1.2rem, 3vw, 1.65rem);
+ line-height: 1.25;
+ text-wrap: balance;
+ color: var(--openms-navy);
+}
+
+.about-page .governance-links h2 {
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+ font-size: clamp(1.2rem, 3vw, 1.65rem);
+ line-height: 1.25;
+ text-wrap: balance;
+ color: var(--openms-navy) !important;
+}
+
+.about-page #donate h2 {
+ color: var(--openms-navy) !important;
+}
+
+.about-section p {
+ max-width: 72ch;
+ font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+}
+
+.about-two-col {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ gap: clamp(1rem, 2vw, 2rem);
+ align-items: start;
+ max-width: 56rem;
+ margin-inline: auto;
+ width: 100%;
+}
+
+.about-two-col p {
+ margin-top: 0;
+ overflow-wrap: anywhere;
+ max-width: none;
+}
+
+.about-page .about-two-col {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
+}
+
+.about-sponsors-grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 1rem;
+ max-width: 64rem;
+ margin-top: 1rem;
+}
+
+.about-sponsor-card {
+ min-height: 8rem;
+ padding: 1rem;
+ border-radius: 0.75rem;
+ border: 1px solid #d3d0d1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ background: #fff;
+ min-width: 0;
+}
+
+.about-sponsor-card__stack {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.45rem;
+ width: 100%;
+}
+
+.about-sponsor-card__logo {
+ max-width: 13rem;
+ max-height: 4rem;
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+ display: block;
+}
+
+.about-sponsor-card__badge {
+ display: inline-block;
+ padding: 0.55rem 1rem;
+ border-radius: 0.6rem;
+ background: #6b2fb6;
+ color: #fff;
+ font-family: Montserrat, Arial, sans-serif;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+}
+
+.about-sponsor-card__logo-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.6rem 0.8rem;
+ border-radius: 0.5rem;
+ background: #0c2171;
+ min-height: 4rem;
+ width: 100%;
+ max-width: 12rem;
+}
+
+.about-sponsor-card__logo--denbi {
+ max-width: 11.5rem;
+ max-height: 3rem;
+}
+
+.about-sponsor-card__name {
+ font-family: Montserrat, Arial, sans-serif;
+ font-size: 0.78rem;
+ letter-spacing: 0.06em;
+ color: #0c2171;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+
+.about-donate-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: calc(var(--openms-btn-glow-size, 6px) * 2 + 1rem);
+ margin-top: 1rem;
+}
+
+.about-page .about-donate-actions {
+ align-items: stretch;
+ gap: 0.75rem;
+ width: fit-content;
+ max-width: 100%;
+}
+
+.about-page .about-donate-actions > a {
+ box-sizing: border-box;
+ flex: 1 1 11.75rem;
+ min-width: 11.75rem;
+ height: 2.75rem;
+ margin-top: 0;
+ text-align: center;
+}
+
+/* Navbar-style CTA motion (about page) */
+.about-page-layout .openms-lib-btn,
+.about-page-layout .about-page .about-donate-actions > a,
+.donate-page-layout .openms-lib-btn,
+.donate-page-layout .donate-page .about-donate-actions > a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ width: fit-content;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.about-page-layout .openms-lib-btn--primary {
+ gap: 0.5rem;
+ padding-inline: 1.15rem;
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.about-page-layout .openms-lib-btn--ghost,
+.donate-page-layout .openms-lib-btn--ghost,
+.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate,
+.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary {
+ border: 2px solid var(--openms-blue);
+ background: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.about-page-layout .openms-lib-btn--primary:hover,
+.about-page-layout .openms-lib-btn--primary:focus-visible,
+.about-page-layout .openms-lib-btn--primary:active,
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:hover,
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:focus-visible,
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:active {
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.about-page-layout .openms-lib-btn--primary:hover,
+.about-page-layout .openms-lib-btn--primary:focus-visible,
+.about-page-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:hover,
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:focus-visible,
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:active {
+ background: var(--openms-blue);
+ border-color: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.about-page-layout .openms-lib-btn--ghost:hover,
+.donate-page-layout .openms-lib-btn--ghost:hover,
+.about-page-layout .openms-lib-btn--ghost:focus-visible,
+.donate-page-layout .openms-lib-btn--ghost:focus-visible,
+.about-page-layout .openms-lib-btn--ghost:active,
+.donate-page-layout .openms-lib-btn--ghost:active,
+.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:hover,
+.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:hover,
+.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:focus-visible,
+.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:focus-visible,
+.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:active,
+.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.about-page-layout .openms-lib-btn--primary:focus-visible,
+.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.about-page-layout .openms-lib-btn--ghost:focus-visible,
+.donate-page-layout .openms-lib-btn--ghost:focus-visible,
+.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:focus-visible,
+.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+/* Sponsor tiers (Apache-style levels) */
+.sponsor-tiers__intro {
+ max-width: 65ch;
+ margin-bottom: 1.25rem;
+}
+
+.sponsor-tiers__grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: clamp(1rem, 2vw, 1.35rem);
+ margin: 0 0 1rem;
+}
+
+.sponsor-tier {
+ display: flex;
+ flex-direction: column;
+ gap: 0.65rem;
+ padding: clamp(1.1rem, 2vw, 1.35rem);
+ border-radius: 0.75rem;
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.12);
+ background: var(--openms-white);
+ box-shadow: 0 0.25rem 0.85rem rgba(var(--openms-navy-rgb), 0.05);
+}
+
+.sponsor-tier__header {
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+}
+
+.sponsor-tier__badge {
+ margin: 0;
+ align-self: flex-start;
+ padding: 0.25rem 0.65rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ border-radius: 999px;
+ line-height: 1.2;
+}
+
+.sponsor-tier--platinum .sponsor-tier__badge {
+ color: #3d3d4a;
+ background: linear-gradient(135deg, #f4f4f8 0%, #d8d8e4 45%, #ececf2 100%);
+ border: 1px solid rgba(80, 80, 100, 0.2);
+}
+
+.sponsor-tier--gold .sponsor-tier__badge {
+ color: #5c4a12;
+ background: linear-gradient(135deg, #fff8e6 0%, #f0d78c 55%, #fff4d6 100%);
+ border: 1px solid rgba(180, 140, 40, 0.35);
+}
+
+.sponsor-tier--silver .sponsor-tier__badge {
+ color: #3a4249;
+ background: linear-gradient(135deg, #f5f7fa 0%, #c5ced6 55%, #eef1f4 100%);
+ border: 1px solid rgba(90, 105, 120, 0.25);
+}
+
+.sponsor-tier--bronze .sponsor-tier__badge {
+ color: #4a3520;
+ background: linear-gradient(135deg, #faf0e4 0%, #d4a574 55%, #f5e6d6 100%);
+ border: 1px solid rgba(140, 90, 45, 0.3);
+}
+
+.sponsor-tier--platinum {
+ border-top: 4px solid #b8b8c8;
+}
+
+.sponsor-tier--gold {
+ border-top: 4px solid #d4a017;
+}
+
+.sponsor-tier--silver {
+ border-top: 4px solid #9aa5b1;
+}
+
+.sponsor-tier--bronze {
+ border-top: 4px solid #b87333;
+}
+
+.sponsor-tier__name {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.15rem, 2vw, 1.35rem);
+ font-weight: 800;
+ color: var(--openms-navy);
+}
+
+.sponsor-tier__summary {
+ margin: 0;
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.82);
+}
+
+.sponsor-tier__benefits {
+ margin: 0.25rem 0 0;
+ padding-left: 1.15rem;
+ font-size: var(--openms-text-min);
+ line-height: 1.55;
+ color: rgba(var(--openms-navy-rgb), 0.78);
+}
+
+.sponsor-tier__benefits li {
+ margin-bottom: 0.35rem;
+}
+
+.sponsor-tier__benefits li:last-child {
+ margin-bottom: 0;
+}
+
+.sponsor-tiers__note {
+ margin: 0;
+ max-width: 65ch;
+}
+
+/* Blue sponsor CTAs use .openms-btn-primary / .openms-step__cta (openms-buttons.css) */
+
+/* Donate CTA — secondary blue (openms-buttons.css) */
+
+@media (max-width: 1100px) {
+ .about-sponsors-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .about-sponsor-card__logo {
+ max-width: 11.5rem;
+ max-height: 3.4rem;
+ }
+}
+
+@media (max-width: 720px) {
+ .about-page .about-donate-actions {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .about-page .about-donate-actions > a {
+ flex: 1 1 auto;
+ width: 100%;
+ min-width: 0;
+ }
+}
+
+@media (max-width: 860px) {
+ .sponsor-tiers__grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-page {
+ gap: 1.8rem;
+ }
+
+ .about-sponsors-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.75rem;
+ }
+
+ .about-sponsor-card {
+ min-height: 7rem;
+ padding: 0.85rem;
+ }
+
+ .about-page .uni-partners__item {
+ min-width: 0;
+ }
+
+ .about-page .uni-partners__item img {
+ max-width: 100%;
+ }
+}
+
+@media (max-width: 640px) {
+ .about-page .about-two-col {
+ grid-template-columns: 1fr !important;
+ gap: 0.75rem;
+ }
+
+ .about-page {
+ gap: 1.4rem;
+ margin: 0;
+ }
+
+ .about-section p {
+ max-width: none;
+ }
+
+ .about-sponsors-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-sponsor-card {
+ min-height: 6.5rem;
+ padding: 0.75rem;
+ }
+
+ .about-sponsor-card__badge {
+ width: 100%;
+ text-align: center;
+ font-size: 0.85rem;
+ letter-spacing: 0.06em;
+ padding: 0.5rem 0.75rem;
+ }
+
+ .about-sponsor-card__name {
+ font-size: 0.72rem;
+ }
+
+ .about-page .uni-partners {
+ padding-block: 1.2rem;
+ }
+
+ .about-page .uni-partners__marquee {
+ display: none;
+ }
+
+ .about-page .uni-partners__static {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.6rem;
+ padding-inline: 0;
+ }
+
+ .about-page .uni-partners__static .uni-partners__item {
+ height: 4rem;
+ padding: 0.5rem;
+ }
+}
+
+@media (max-width: 420px) {
+ .about-page .uni-partners__static {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .about-page-layout .openms-lib-btn:hover,
+ .about-page-layout .openms-lib-btn:focus-visible,
+ .about-page-layout .about-page .about-donate-actions > a:hover,
+ .about-page-layout .about-page .about-donate-actions > a:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/applications-page.css b/assets/css/applications-page.css
new file mode 100644
index 00000000..4b371d0b
--- /dev/null
+++ b/assets/css/applications-page.css
@@ -0,0 +1,359 @@
+.applications-page-layout {
+ --apps-max: 72rem;
+ --apps-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --apps-section-y: clamp(4rem, 8vh, 5.5rem);
+ --apps-bg-soft: #f4f6f9;
+ --apps-line: rgba(var(--openms-navy-rgb), 0.08);
+ --apps-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --apps-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--apps-bg-soft));
+ --apps-radius: 1.25rem;
+ --apps-radius-sm: 0.65rem;
+ --apps-shadow: 0 0.35rem 1.5rem rgba(var(--openms-navy-rgb), 0.06);
+ --apps-shadow-hover: 0 0.75rem 2rem rgba(var(--openms-navy-rgb), 0.1);
+ --apps-card-gap: clamp(1rem, 2vw, 1.35rem);
+ --apps-ease: cubic-bezier(0.22, 1, 0.36, 1);
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(3rem, 6vh, 4.5rem);
+ color: var(--openms-navy);
+ background: var(--openms-white);
+}
+
+.applications-page-layout__content {
+ width: min(100%, var(--apps-max));
+ max-width: var(--apps-max);
+ margin-inline: auto;
+ padding-inline: var(--apps-pad-x);
+}
+
+.applications-page {
+ display: grid;
+ gap: clamp(2.5rem, 5vw, 3.5rem);
+ margin-top: 0;
+}
+
+.applications-page-hero {
+ margin-bottom: clamp(2rem, 4vh, 3rem);
+}
+
+.applications-page-hero.openms-lib-hero {
+ --olib-pad-x: var(--apps-pad-x);
+ --olib-hero-bg-top: var(--apps-hero-bg-top);
+}
+
+/* Intro */
+.applications-page__intro {
+ display: grid;
+ gap: clamp(1rem, 2.2vw, 1.35rem);
+ max-width: 52rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.65;
+ color: rgba(var(--openms-navy-rgb), 0.88);
+}
+
+.applications-page__intro p {
+ margin: 0;
+}
+
+.applications-page__intro a {
+ color: var(--openms-blue);
+ font-weight: 600;
+ text-decoration: none;
+}
+
+.applications-page__intro a:hover,
+.applications-page__intro a:focus-visible {
+ color: var(--openms-navy);
+ text-decoration: underline;
+ text-underline-offset: 0.14em;
+}
+
+.applications-page__callout {
+ margin: 0;
+ padding: clamp(1.1rem, 2.2vw, 1.35rem) clamp(1.15rem, 2.5vw, 1.5rem);
+ border: 1px solid var(--apps-line);
+ border-left: 4px solid var(--openms-blue);
+ border-radius: 0 var(--apps-radius-sm) var(--apps-radius-sm) 0;
+ background: color-mix(in srgb, var(--apps-bg-soft) 55%, var(--openms-white));
+}
+
+.applications-page__callout > p:first-child,
+.applications-page__callout > strong:first-child {
+ margin: 0 0 0.65rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+}
+
+.applications-page__callout > p:first-child strong {
+ font-weight: inherit;
+ color: inherit;
+}
+
+.applications-page__callout ul {
+ margin: 0;
+ padding-left: 1.2rem;
+}
+
+.applications-page__callout li + li {
+ margin-top: 0.35rem;
+}
+
+.applications-page__callout a {
+ font-weight: 600;
+}
+
+/* Catalog */
+.applications-page__catalog {
+ display: grid;
+ gap: clamp(1.75rem, 3.5vw, 2.5rem);
+}
+
+.applications-page__catalog-head {
+ display: grid;
+ gap: 0.55rem;
+ justify-items: center;
+ max-width: 46rem;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.applications-page__catalog-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.55rem, 3.2vw, 2rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.applications-page__catalog-lead {
+ margin: 0;
+ max-width: 48ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: var(--apps-text-muted);
+}
+
+.applications-page__grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: var(--apps-card-gap);
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.applications-page__item {
+ display: flex;
+ min-width: 0;
+}
+
+.applications-page__card {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+ height: 100%;
+ padding: clamp(1.15rem, 2.2vw, 1.4rem);
+ border: 1px solid var(--apps-line);
+ border-radius: var(--apps-radius);
+ background: var(--openms-white);
+ box-shadow: var(--apps-shadow);
+ color: inherit;
+ text-decoration: none;
+ transition:
+ border-color 0.22s var(--apps-ease),
+ box-shadow 0.22s var(--apps-ease),
+ transform 0.22s var(--apps-ease);
+}
+
+.applications-page__card:hover,
+.applications-page__card:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.24);
+ box-shadow: var(--apps-shadow-hover);
+ transform: translateY(-2px);
+ outline: none;
+}
+
+.applications-page__card-tag {
+ display: inline-flex;
+ margin-bottom: 0.15rem;
+ padding: 0.18rem 0.5rem;
+ font-size: 0.62rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.08);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.14);
+ border-radius: 999px;
+}
+
+.applications-page__card-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.05rem, 1.9vw, 1.2rem);
+ font-weight: 700;
+ line-height: 1.28;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.applications-page__card-text {
+ flex: 1 1 auto;
+ margin: 0.35rem 0 0;
+ font-size: var(--openms-text-min);
+ line-height: 1.58;
+ color: var(--apps-text-muted);
+}
+
+.applications-page__card-meta {
+ margin: 0.35rem 0 0;
+ font-size: 0.72rem;
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.55);
+}
+
+.applications-page__card-cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ margin-top: auto;
+ padding-top: 0.75rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--openms-blue);
+ transition: gap 0.15s ease, color 0.15s ease;
+}
+
+.applications-page__card:hover .applications-page__card-cta,
+.applications-page__card:focus-visible .applications-page__card-cta {
+ gap: 0.4rem;
+ color: var(--openms-navy);
+}
+
+/* Navbar-style CTA motion (hero) */
+.applications-page-layout .openms-lib-hero__actions .openms-lib-btn {
+ width: auto;
+ min-width: 0;
+}
+
+.applications-page-layout .openms-lib-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ box-sizing: border-box;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.applications-page-layout .openms-lib-btn--primary {
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.applications-page-layout .openms-lib-btn--ghost {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+ text-decoration: none;
+}
+
+.applications-page-layout .openms-lib-btn--primary:hover,
+.applications-page-layout .openms-lib-btn--primary:focus-visible,
+.applications-page-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.applications-page-layout .openms-lib-btn--ghost:hover,
+.applications-page-layout .openms-lib-btn--ghost:focus-visible,
+.applications-page-layout .openms-lib-btn--ghost:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.applications-page-layout .openms-lib-btn--primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.applications-page-layout .openms-lib-btn--ghost:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+@media (max-width: 1024px) {
+ .applications-page__grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (max-width: 720px) {
+ .applications-page__grid {
+ grid-template-columns: 1fr;
+ }
+
+ .applications-page__card:hover,
+ .applications-page__card:focus-visible {
+ transform: none;
+ }
+
+ .applications-page-layout .openms-lib-hero__actions {
+ flex-direction: column;
+ align-items: stretch;
+ max-width: 22rem;
+ margin-inline: auto;
+ }
+
+ .applications-page-layout .openms-lib-hero__actions .openms-lib-btn {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .applications-page__card,
+ .applications-page-layout .openms-lib-btn {
+ transition: none;
+ }
+
+ .applications-page__card:hover,
+ .applications-page__card:focus-visible,
+ .applications-page-layout .openms-lib-btn:hover,
+ .applications-page-layout .openms-lib-btn:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/brand-palette.css b/assets/css/brand-palette.css
new file mode 100644
index 00000000..afd4a8ca
--- /dev/null
+++ b/assets/css/brand-palette.css
@@ -0,0 +1,126 @@
+/* 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-navbar-font-size: 15px;
+ --openms-navbar-link-color: var(--openms-white);
+ --openms-navbar-link-hover-color: color-mix(in srgb, var(--openms-white) 86%, var(--openms-blue-secondary) 14%);
+ --openms-navbar-link-hover-bg: rgba(var(--openms-white-rgb), 0.1);
+ --openms-navbar-dropdown-bg: var(--openms-white);
+ --openms-navbar-dropdown-text: rgba(var(--openms-navy-rgb), 0.9);
+ --openms-navbar-dropdown-heading: rgba(var(--openms-navy-rgb), 0.5);
+ --openms-navbar-dropdown-hover-text: var(--openms-navy);
+ --openms-navbar-dropdown-hover-bg: rgba(var(--openms-navy-rgb), 0.06);
+ --openms-navbar-dropdown-border: rgba(var(--openms-navy-rgb), 0.1);
+ --openms-navbar-container-pad-inline: clamp(1.25rem, 3vw, 2.25rem);
+ --openms-navbar-container-pad-inline-mobile: 1.15rem;
+ --openms-navbar-brand-slot-width: 18.5rem;
+ --openms-navbar-logo-height: 76px;
+ --openms-header-bar-min-height: calc(var(--openms-navbar-logo-height) + 0.65rem);
+ --openms-navbar-desktop-gap: clamp(0.4rem, 1.1vw, 0.9rem);
+ --openms-navbar-desktop-pad-x: clamp(0.35rem, 0.75vw, 0.7rem);
+ --openms-navbar-desktop-font-size: clamp(0.8125rem, 0.95vw, 15px);
+ --openms-navbar-actions-gap: clamp(0.5rem, 1vw, 0.85rem);
+ /* Nav breakpoints: burger < 1280px; compact xl 1280–1535px; full desktop 1536px+ */
+ --openms-nav-desktop-min: 1280px;
+ --openms-nav-xl-wide-min: 1536px;
+ --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-blue-secondary: #5280f0;
+ --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-blue-secondary-rgb: 82, 128, 240;
+ --openms-navy-rgb: 12, 33, 113;
+ --openms-dark-rgb: 35, 31, 32;
+
+ /* Solid section backgrounds */
+ --openms-bg-navy: var(--openms-navy);
+ --openms-grey-rgb: 194, 186, 188;
+ --openms-white-rgb: 255, 255, 255;
+
+ /* Site chrome — unified banner → nav → hero stack */
+ --openms-chrome-bg: var(--openms-navy);
+ --openms-chrome-border: rgba(var(--openms-white-rgb), 0.1);
+ --openms-chrome-border-strong: rgba(var(--openms-white-rgb), 0.16);
+ --openms-chrome-text: rgba(var(--openms-white-rgb), 0.92);
+ --openms-chrome-text-muted: rgba(var(--openms-white-rgb), 0.62);
+ --openms-chrome-surface: rgba(var(--openms-white-rgb), 0.07);
+ --openms-chrome-surface-hover: rgba(var(--openms-white-rgb), 0.12);
+ --openms-chrome-accent: var(--openms-pink);
+ --openms-chrome-accent-line: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 55%,
+ var(--openms-pink) 100%
+ );
+ --openms-chrome-banner-bg: var(--openms-white);
+ --openms-chrome-banner-label: var(--openms-white);
+ --openms-chrome-banner-label-bg: var(--openms-orange);
+ --openms-chrome-banner-label-border: var(--openms-orange);
+ --openms-chrome-banner-text: rgba(var(--openms-navy-rgb), 0.88);
+ --openms-chrome-banner-border: rgba(var(--openms-navy-rgb), 0.1);
+ --openms-chrome-nav-surface: var(--openms-white);
+ --openms-chrome-nav-border: rgba(var(--openms-navy-rgb), 0.14);
+ --openms-chrome-nav-text: var(--openms-navy);
+ --openms-chrome-nav-text-muted: rgba(var(--openms-navy-rgb), 0.58);
+ --openms-chrome-nav-dropdown-bg: rgba(var(--openms-blue-rgb), 0.06);
+ --openms-chrome-nav-dropdown-border: rgba(var(--openms-blue-rgb), 0.2);
+ --openms-chrome-nav-backdrop: rgba(var(--openms-navy-rgb), 0.52);
+
+ --colorPrimaryDark: var(--openms-blue);
+ --colorPrimaryDarkBtn: var(--openms-blue);
+ --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 dc35cace..e7a084a4 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/community-calendar.css b/assets/css/community-calendar.css
new file mode 100644
index 00000000..539fdf2a
--- /dev/null
+++ b/assets/css/community-calendar.css
@@ -0,0 +1,730 @@
+/* Community events page (/calendar/) */
+
+.community-calendar-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --calendar-max: 68rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.community-calendar-layout__content {
+ width: min(100%, var(--calendar-max));
+ max-width: var(--calendar-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.calendar-page-hero {
+ margin-bottom: clamp(2rem, 4vh, 3rem);
+}
+
+.community-events-page {
+ display: grid;
+ gap: clamp(3.5rem, 6vh, 5rem);
+}
+
+.community-events-page__section {
+ display: grid;
+ gap: clamp(1.25rem, 2.5vw, 1.75rem);
+}
+
+.community-events-page__section--upcoming {
+ padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
+ margin-bottom: clamp(0.5rem, 1.5vh, 1rem);
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.community-events-page__header {
+ margin: 0;
+}
+
+.community-events-page__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.35rem, 2.4vw, 1.65rem);
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.community-events-page__grid {
+ margin: 0;
+}
+
+.community-events-page .community-events-home__grid {
+ background: transparent;
+ padding: 0;
+}
+
+.community-events-page__empty {
+ margin: 0;
+ padding: clamp(1rem, 2vw, 1.25rem);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.55;
+ color: rgba(var(--openms-navy-rgb), 0.72);
+ background: rgba(var(--openms-blue-rgb), 0.04);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ border-radius: 0.85rem;
+}
+
+.community-events-page__section--past {
+ padding-top: clamp(0.5rem, 1.5vh, 1rem);
+ border-top: none;
+}
+
+/* —— Past events panel —— */
+.events-past-panel {
+ display: grid;
+ gap: clamp(1.25rem, 2.5vw, 1.75rem);
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+}
+
+.events-past-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 1rem 1.5rem;
+ padding-bottom: 0.35rem;
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.events-past-toolbar__intro {
+ display: grid;
+ gap: 0.35rem;
+ max-width: min(100%, 36rem);
+}
+
+.events-past-toolbar__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.35rem, 2.4vw, 1.65rem);
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.events-past-toolbar__hint {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-navy-rgb), 0.68);
+}
+
+.events-past-toolbar__filter {
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+ min-width: min(100%, 10rem);
+}
+
+.events-past-toolbar__filter-label {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.62);
+}
+
+.events-past-toolbar__select {
+ min-height: 2.75rem;
+ min-width: 8rem;
+ padding: 0.45rem 2.25rem 0.45rem 0.85rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ font-weight: 700;
+ color: var(--openms-navy);
+ background-color: var(--openms-white);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.14);
+ border-radius: 0.65rem;
+ cursor: pointer;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230c2171' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 0.85rem center;
+ box-shadow: 0 0.1rem 0.35rem rgba(var(--openms-navy-rgb), 0.05);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.events-past-toolbar__select:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.35);
+}
+
+.events-past-toolbar__select:focus {
+ outline: none;
+}
+
+.events-past-toolbar__select:focus-visible {
+ border-color: var(--openms-blue);
+ box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.18);
+}
+
+.events-past-panel__entries {
+ display: grid;
+ gap: clamp(1.25rem, 2.5vw, 1.75rem);
+}
+
+[data-events-year-filter]:not(.events-year-filter--ready) .events-past-year[data-events-year]:not(.events-past-year--default) {
+ display: none;
+}
+
+.events-past-year[hidden] {
+ display: none;
+}
+
+.events-past-year__header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 0.35rem 1rem;
+ margin-bottom: clamp(0.85rem, 2vw, 1.1rem);
+}
+
+.events-past-year__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.15rem, 2vw, 1.35rem);
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.events-past-year__count {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ color: rgba(var(--openms-navy-rgb), 0.58);
+}
+
+.events-past-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: clamp(0.75rem, 1.5vw, 1rem);
+}
+
+.events-past-card {
+ --events-past-accent: var(--openms-blue);
+ --events-past-accent-soft: rgba(var(--openms-blue-rgb), 0.1);
+
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr);
+ align-items: start;
+ gap: clamp(0.65rem, 1.5vw, 0.85rem);
+ padding: clamp(0.75rem, 1.6vw, 0.95rem);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ border-radius: 0.85rem;
+ background: var(--openms-white);
+ box-shadow: 0 0.15rem 0.65rem rgba(var(--openms-navy-rgb), 0.04);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.events-past-card__date-block {
+ grid-column: 1;
+ grid-row: 1;
+}
+
+.events-past-card__body {
+ grid-column: 2;
+ grid-row: 1;
+ display: grid;
+ gap: 0.35rem;
+ min-width: 0;
+}
+
+.events-past-card__header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 0.65rem;
+}
+
+.events-past-card__header .events-past-card__title {
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.events-past-card__header .events-past-card__category {
+ flex: 0 0 auto;
+}
+
+.events-past-card:hover {
+ border-color: color-mix(in srgb, var(--events-past-accent) 28%, rgba(var(--openms-navy-rgb), 0.1));
+ box-shadow: 0 0.45rem 1.25rem rgba(var(--openms-navy-rgb), 0.07);
+}
+
+.events-past-card--developer-meeting {
+ --events-past-accent: var(--openms-navy);
+ --events-past-accent-soft: rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.events-past-card--workshop {
+ --events-past-accent: var(--openms-blue);
+ --events-past-accent-soft: rgba(var(--openms-blue-rgb), 0.1);
+}
+
+.events-past-card--outreach {
+ --events-past-accent: var(--openms-purple);
+ --events-past-accent-soft: rgba(var(--openms-purple-rgb), 0.12);
+}
+
+.events-past-card__category {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.24rem 0.58rem;
+ border-radius: 999px;
+ font-family: var(--openms-font-body);
+ font-size: 0.625rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--events-past-accent);
+ background: var(--events-past-accent-soft);
+ border: 1px solid color-mix(in srgb, var(--events-past-accent) 20%, transparent);
+}
+
+.events-past-card__when {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.62);
+}
+
+.events-past-card__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 1.6vw, 1.1rem);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--openms-navy);
+ text-wrap: pretty;
+}
+
+.events-past-card__title-link {
+ color: inherit;
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.events-past-card__title-link:hover,
+.events-past-card__title-link:focus-visible {
+ color: var(--events-past-accent);
+ outline: none;
+}
+
+.events-past-card__summary {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.72);
+ text-wrap: pretty;
+}
+
+.events-past-card__footer {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.65rem 0.85rem;
+ margin-top: 0;
+ padding-top: 0.45rem;
+ border-top: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.events-past-card__location {
+ display: inline-flex;
+ align-items: flex-start;
+ gap: 0.35rem;
+ margin: 0;
+ min-width: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.68);
+}
+
+.events-past-card__location-icon {
+ display: inline-flex;
+ flex-shrink: 0;
+ margin-top: 0.08rem;
+ color: var(--events-past-accent);
+}
+
+.events-past-card__cta {
+ flex-shrink: 0;
+ min-height: 2.25rem;
+ padding: 0.4rem 0.85rem;
+ font-size: var(--openms-text-min);
+}
+
+/* Upcoming events — split card layout (homepage + calendar) */
+.community-events-upcoming-layout {
+ --events-grid-gap: clamp(1rem, 2.2vw, 1.5rem);
+ --events-accent: var(--openms-blue);
+ --events-accent-soft: rgba(var(--openms-blue-rgb), 0.1);
+ --events-date-bg: var(--openms-blue);
+ --events-date-border: rgba(var(--openms-white-rgb), 0.16);
+}
+
+.community-events-upcoming-layout .community-events-home__card--developer-meeting,
+.community-events-upcoming-layout .community-events-home__card--workshop,
+.community-events-upcoming-layout .community-events-home__card--outreach {
+ --events-accent: var(--openms-blue);
+ --events-accent-soft: rgba(var(--openms-blue-rgb), 0.1);
+}
+
+.community-events-upcoming-layout .community-events-home__card-link {
+ gap: 0.5rem;
+ padding: clamp(0.6rem, 1.2vw, 0.8rem);
+ min-height: 0;
+}
+
+.community-events-upcoming-layout .community-events-home__card {
+ min-height: 0;
+}
+
+.community-events-upcoming-layout .community-events-home__card-link--split {
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr);
+ align-items: start;
+ gap: clamp(0.5rem, 1.1vw, 0.65rem);
+}
+
+.community-events-upcoming-layout .community-events-home__card-link--split .community-events-home__date-block {
+ grid-column: 1;
+ grid-row: 1;
+}
+
+.community-events-upcoming-layout .community-events-home__card-main {
+ grid-column: 2;
+ grid-row: 1;
+ display: grid;
+ gap: clamp(0.35rem, 0.8vw, 0.5rem);
+ min-width: 0;
+}
+
+.community-events-upcoming-layout .community-events-home__card-header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 0.5rem;
+}
+
+.community-events-upcoming-layout .community-events-home__card-header .community-events-home__card-title {
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.community-events-upcoming-layout .community-events-home__card-header .community-events-home__category {
+ flex: 0 0 auto;
+ max-width: min(100%, 9rem);
+ padding: 0.2rem 0.5rem;
+}
+
+.community-events-upcoming-layout .community-events-home__card-location {
+ font-size: 0.75rem;
+ line-height: 1.35;
+}
+
+.community-events-upcoming-layout .community-events-home__card-link--split .community-events-home__card-footer {
+ margin-top: 0.2rem;
+}
+
+.community-events-upcoming-layout .community-events-home__date {
+ min-width: 2.85rem;
+ min-height: 2.85rem;
+ padding: 0.2rem 0.35rem;
+ border-radius: 0.55rem;
+ background: var(--openms-blue);
+ border: 1px solid rgba(var(--openms-white-rgb), 0.2);
+ box-shadow: 0 0.15rem 0.45rem rgba(var(--openms-blue-rgb), 0.28);
+}
+
+.community-events-upcoming-layout .community-events-home__date-day {
+ font-size: 1.15rem;
+ color: var(--openms-white);
+}
+
+.community-events-upcoming-layout .community-events-home__date-month {
+ margin-top: 0.06rem;
+ font-size: 0.625rem;
+ color: rgba(var(--openms-white-rgb), 0.9);
+}
+
+.community-events-upcoming-layout .community-events-home__date-year {
+ margin-top: 0.04rem;
+ font-size: 0.5625rem;
+ color: rgba(var(--openms-white-rgb), 0.72);
+}
+
+.community-events-upcoming-layout .community-events-home__card--developer-meeting .community-events-home__date,
+.community-events-upcoming-layout .community-events-home__card--workshop .community-events-home__date,
+.community-events-upcoming-layout .community-events-home__card--outreach .community-events-home__date {
+ background: var(--openms-blue);
+ border-color: rgba(var(--openms-white-rgb), 0.2);
+}
+
+.community-events-upcoming-layout .community-events-home__card--developer-meeting .community-events-home__date-day,
+.community-events-upcoming-layout .community-events-home__card--workshop .community-events-home__date-day,
+.community-events-upcoming-layout .community-events-home__card--outreach .community-events-home__date-day {
+ color: var(--openms-white);
+}
+
+.community-events-upcoming-layout .community-events-home__card--developer-meeting .community-events-home__date-month,
+.community-events-upcoming-layout .community-events-home__card--workshop .community-events-home__date-month,
+.community-events-upcoming-layout .community-events-home__card--outreach .community-events-home__date-month {
+ color: rgba(var(--openms-white-rgb), 0.9);
+}
+
+.community-events-upcoming-layout .community-events-home__card--developer-meeting .community-events-home__date-year,
+.community-events-upcoming-layout .community-events-home__card--workshop .community-events-home__date-year,
+.community-events-upcoming-layout .community-events-home__card--outreach .community-events-home__date-year {
+ color: rgba(var(--openms-white-rgb), 0.72);
+}
+
+.community-events-upcoming-layout .community-events-home__card-body {
+ gap: 0.3rem;
+}
+
+.community-events-upcoming-layout .community-events-home__card-title {
+ font-size: clamp(0.95rem, 1.4vw, 1.05rem);
+ line-height: 1.25;
+}
+
+.community-events-upcoming-layout .community-events-home__card-summary {
+ line-height: 1.4;
+ -webkit-line-clamp: 1;
+}
+
+.community-events-upcoming-layout .community-events-home__card-footer {
+ gap: clamp(0.5rem, 1.1vw, 0.7rem);
+ padding-top: clamp(0.35rem, 0.8vw, 0.5rem);
+}
+
+.community-events-upcoming-layout .community-events-home__card-footer .events-past-card__cta {
+ min-height: 1.9rem;
+ padding: 0.28rem 0.7rem;
+ font-size: var(--openms-text-min);
+}
+
+.community-events-upcoming-layout .community-events-home__footer {
+ margin-top: clamp(2.25rem, 4.5vh, 3rem);
+}
+
+/* Upcoming cards: blue accents on selected details only */
+.community-events-upcoming-layout .community-events-home__card-link,
+.community-events-upcoming-layout .community-events-home__card-link:hover,
+.community-events-upcoming-layout .community-events-home__card-link:focus-visible,
+.community-events-upcoming-layout .community-events-home__card-link--static:hover,
+.community-events-upcoming-layout .community-events-home__card-link--static:focus-visible {
+ border-top: 1px solid var(--events-card-border);
+}
+
+.community-events-upcoming-layout .community-events-home__card-link:hover,
+.community-events-upcoming-layout .community-events-home__card-link:focus-visible {
+ background: var(--events-card-bg);
+ box-shadow: 0 0.15rem 0.75rem rgba(var(--openms-navy-rgb), 0.05);
+ transform: none;
+ border-color: color-mix(in srgb, var(--events-accent) 34%, var(--events-card-border));
+}
+
+.community-events-upcoming-layout .community-events-home__card-title .events-past-card__title-link:hover,
+.community-events-upcoming-layout .community-events-home__card-title .events-past-card__title-link:focus-visible {
+ color: var(--openms-blue);
+}
+
+/* Calendar page: past event cards */
+.community-calendar-layout .events-past-card .community-events-home__date {
+ background: var(--openms-blue);
+ border-color: rgba(var(--openms-white-rgb), 0.2);
+}
+
+.community-calendar-layout .events-past-card .community-events-home__date-day {
+ color: var(--openms-white);
+}
+
+.community-calendar-layout .events-past-card .community-events-home__date-month {
+ color: rgba(var(--openms-white-rgb), 0.9);
+}
+
+.community-calendar-layout .events-past-card .community-events-home__date-year {
+ color: rgba(var(--openms-white-rgb), 0.72);
+}
+
+.community-calendar-layout .events-past-card:hover {
+ box-shadow: 0 0.15rem 0.65rem rgba(var(--openms-navy-rgb), 0.04);
+}
+
+.community-calendar-layout .events-past-card,
+.community-calendar-layout .events-past-card--developer-meeting,
+.community-calendar-layout .events-past-card--workshop,
+.community-calendar-layout .events-past-card--outreach {
+ --events-past-accent: var(--openms-blue);
+ --events-past-accent-soft: rgba(var(--openms-blue-rgb), 0.1);
+}
+
+.community-calendar-layout .events-past-card__title-link:hover,
+.community-calendar-layout .events-past-card__title-link:focus-visible {
+ color: var(--openms-blue);
+}
+
+@media (max-width: 640px) {
+ .community-events-upcoming-layout .community-events-home__card-link--split {
+ grid-template-columns: 1fr;
+ }
+
+ .community-events-upcoming-layout .community-events-home__card-link--split .community-events-home__date-block,
+ .community-events-upcoming-layout .community-events-home__card-main {
+ grid-column: 1;
+ grid-row: auto;
+ }
+
+ .community-events-upcoming-layout .community-events-home__card-footer {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .community-events-upcoming-layout .community-events-home__card-footer .events-past-card__cta {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .events-past-toolbar {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .events-past-toolbar__filter,
+ .events-past-toolbar__select {
+ width: 100%;
+ }
+
+ .events-past-card {
+ grid-template-columns: 1fr;
+ }
+
+ .events-past-card__date-block,
+ .events-past-card__body {
+ grid-column: 1;
+ grid-row: auto;
+ }
+
+ .events-past-card__date-block {
+ width: fit-content;
+ }
+
+ .events-past-card__footer {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .events-past-card__cta {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+.community-events-page__update p {
+ max-width: none;
+}
+
+.community-events-page__update a {
+ font-weight: 600;
+}
+
+/* Standard page hero buttons (matches governance / help pages) */
+.community-calendar-layout .openms-lib-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ width: fit-content;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.community-calendar-layout .openms-lib-btn--primary {
+ gap: 0.5rem;
+ padding-inline: 1.15rem;
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.community-calendar-layout .openms-lib-btn--ghost {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.community-calendar-layout .openms-lib-btn--primary:hover,
+.community-calendar-layout .openms-lib-btn--primary:focus-visible,
+.community-calendar-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.community-calendar-layout .openms-lib-btn--ghost:hover,
+.community-calendar-layout .openms-lib-btn--ghost:focus-visible,
+.community-calendar-layout .openms-lib-btn--ghost:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.community-calendar-layout .openms-lib-btn--primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.community-calendar-layout .openms-lib-btn--ghost:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .community-calendar-layout .openms-lib-btn:hover,
+ .community-calendar-layout .openms-lib-btn:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/community-events-home.css b/assets/css/community-events-home.css
new file mode 100644
index 00000000..697f0e02
--- /dev/null
+++ b/assets/css/community-events-home.css
@@ -0,0 +1,454 @@
+/* Upcoming events — homepage & events page */
+
+/* Shared tokens — homepage section + calendar events page */
+.community-events-home,
+.community-events-page {
+ --events-card-radius: 1rem;
+ --events-grid-gap: clamp(2rem, 4.5vw, 3rem);
+ --events-grid-col-gap: clamp(1.25rem, 2.8vw, 1.75rem);
+ --events-card-bg: var(--openms-white);
+ --events-card-border: rgba(var(--openms-navy-rgb), 0.1);
+ --events-date-bg: rgba(var(--openms-blue-rgb), 0.08);
+ --events-date-border: rgba(var(--openms-blue-rgb), 0.16);
+ --events-accent: var(--openms-blue);
+ --events-accent-soft: rgba(var(--openms-blue-rgb), 0.1);
+}
+
+.community-events-home {
+ padding: var(--home-section-pad) var(--home-pad-x);
+ background: linear-gradient(
+ 180deg,
+ var(--openms-white) 0%,
+ color-mix(in srgb, var(--openms-blue) 3%, var(--openms-white)) 100%
+ );
+}
+
+.community-events-home__inner {
+ max-width: var(--home-max, 75rem);
+ margin: 0 auto;
+}
+
+.community-events-home__header {
+ margin: 0 0 clamp(1.75rem, 3.5vh, 2.25rem);
+}
+
+.community-events-home__header-main {
+ max-width: min(100%, 46rem);
+}
+
+.community-events-home__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: none;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.18);
+ border-radius: 999px;
+}
+
+.community-events-home__eyebrow-icon {
+ display: inline-flex;
+ line-height: 0;
+ opacity: 0.9;
+}
+
+.community-events-home__eyebrow-icon svg {
+ display: block;
+ width: 0.875rem;
+ height: 0.875rem;
+}
+
+.community-events-home__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 4.2vw, 3.15rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.03em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.community-events-home__title-accent {
+ display: inline;
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue-secondary) 0%,
+ var(--openms-purple) 50%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+}
+
+.community-events-home__lead {
+ margin: 0.85rem 0 0;
+ max-width: 52ch;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+ text-wrap: pretty;
+}
+
+.community-events-home__grid {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: 1fr;
+ row-gap: var(--events-grid-gap);
+ column-gap: var(--events-grid-col-gap);
+}
+
+.community-events-home__item {
+ display: flex;
+ min-width: 0;
+}
+
+.community-events-home__card {
+ display: flex;
+ width: 100%;
+ margin: 0;
+ min-height: 100%;
+}
+
+.community-events-home__card-link {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ gap: clamp(0.85rem, 2vw, 1rem);
+ width: 100%;
+ min-height: 100%;
+ padding: clamp(1rem, 2.2vw, 1.25rem);
+ border-radius: var(--events-card-radius);
+ border: 1px solid var(--events-card-border);
+ border-top: 3px solid var(--events-accent);
+ background: var(--events-card-bg);
+ text-decoration: none;
+ color: inherit;
+ box-shadow: 0 0.15rem 0.75rem rgba(var(--openms-navy-rgb), 0.05);
+ transition:
+ border-color 0.22s ease,
+ box-shadow 0.22s ease,
+ transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+ background-color 0.22s ease;
+}
+
+.community-events-home__card--developer-meeting {
+ --events-accent: var(--openms-navy);
+ --events-accent-soft: rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.community-events-home__card--workshop {
+ --events-accent: var(--openms-blue);
+ --events-accent-soft: rgba(var(--openms-blue-rgb), 0.1);
+}
+
+.community-events-home__card--outreach {
+ --events-accent: var(--openms-purple);
+ --events-accent-soft: rgba(var(--openms-purple-rgb), 0.12);
+}
+
+.community-events-home__card--featured .community-events-home__card-link {
+ background: linear-gradient(
+ 145deg,
+ var(--events-accent-soft) 0%,
+ var(--events-card-bg) 42%
+ );
+}
+
+.community-events-home__card-link--static {
+ cursor: default;
+}
+
+.community-events-home__card-link:hover,
+.community-events-home__card-link:focus-visible {
+ border-color: color-mix(in srgb, var(--events-accent) 34%, var(--events-card-border));
+ border-top-color: var(--events-accent);
+ background: linear-gradient(
+ 145deg,
+ var(--events-accent-soft) 0%,
+ var(--events-card-bg) 55%
+ );
+ box-shadow: 0 0.65rem 1.65rem rgba(var(--openms-navy-rgb), 0.08);
+ transform: translateY(-3px);
+ outline: none;
+}
+
+.community-events-home__card-link--static:hover,
+.community-events-home__card-link--static:focus-visible {
+ transform: none;
+ border-color: var(--events-card-border);
+ border-top-color: var(--events-accent);
+ box-shadow: 0 0.15rem 0.75rem rgba(var(--openms-navy-rgb), 0.05);
+ background: var(--events-card-bg);
+}
+
+.community-events-home__card-top {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 0.75rem;
+}
+
+.community-events-home__date-block {
+ flex-shrink: 0;
+}
+
+.community-events-home__date {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-width: 4rem;
+ min-height: 4rem;
+ padding: 0.45rem 0.55rem;
+ border-radius: 0.65rem;
+ background: var(--events-date-bg);
+ border: 1px solid var(--events-date-border);
+ text-align: center;
+ line-height: 1;
+}
+
+.community-events-home__card--developer-meeting .community-events-home__date {
+ background: rgba(var(--openms-navy-rgb), 0.06);
+ border-color: rgba(var(--openms-navy-rgb), 0.12);
+}
+
+.community-events-home__card--outreach .community-events-home__date {
+ background: rgba(var(--openms-purple-rgb), 0.08);
+ border-color: rgba(var(--openms-purple-rgb), 0.16);
+}
+
+.community-events-home__date-day {
+ font-family: var(--openms-font-heading);
+ font-size: 1.65rem;
+ font-weight: 800;
+ letter-spacing: -0.03em;
+ color: var(--openms-navy);
+}
+
+.community-events-home__date-month {
+ margin-top: 0.15rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--events-accent);
+}
+
+.community-events-home__date-year {
+ margin-top: 0.1rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.625rem;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ color: rgba(var(--openms-navy-rgb), 0.55);
+}
+
+.community-events-home__category {
+ display: inline-flex;
+ align-items: center;
+ max-width: min(100%, 9rem);
+ padding: 0.28rem 0.62rem;
+ border-radius: 999px;
+ font-family: var(--openms-font-body);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: var(--events-accent);
+ background: var(--events-accent-soft);
+ border: 1px solid color-mix(in srgb, var(--events-accent) 22%, transparent);
+ text-wrap: balance;
+ text-align: center;
+}
+
+.community-events-home__card-body {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ gap: 0.45rem;
+ min-width: 0;
+}
+
+.community-events-home__card-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.05rem, 1.8vw, 1.2rem);
+ font-weight: 700;
+ line-height: 1.35;
+ color: var(--openms-navy);
+ text-wrap: pretty;
+}
+
+.community-events-home__card--featured .community-events-home__card-title {
+ font-size: clamp(1.15rem, 2vw, 1.35rem);
+}
+
+.community-events-home__card-dates {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.62);
+}
+
+.community-events-home__card-summary {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-navy-rgb), 0.72);
+ text-wrap: pretty;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+}
+
+.community-events-home__card-link:hover .community-events-home__card-title,
+.community-events-home__card-link:focus-visible .community-events-home__card-title {
+ color: var(--events-accent);
+}
+
+.community-events-home__card-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem 1rem;
+ margin-top: auto;
+ padding-top: 0.65rem;
+ border-top: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.community-events-home__card-location {
+ display: inline-flex;
+ align-items: flex-start;
+ gap: 0.35rem;
+ margin: 0;
+ min-width: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.68);
+}
+
+.community-events-home__card-location-icon {
+ display: inline-flex;
+ flex-shrink: 0;
+ margin-top: 0.1rem;
+ color: var(--events-accent);
+ opacity: 0.85;
+}
+
+.community-events-home__card-cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ flex-shrink: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--events-accent);
+ transition: gap 0.2s ease;
+}
+
+.community-events-home__card-cta-icon {
+ display: inline-block;
+ transition: transform 0.2s ease;
+}
+
+.community-events-home__card-link:hover .community-events-home__card-cta,
+.community-events-home__card-link:focus-visible .community-events-home__card-cta {
+ gap: 0.45rem;
+}
+
+.community-events-home__card-link:hover .community-events-home__card-cta-icon,
+.community-events-home__card-link:focus-visible .community-events-home__card-cta-icon {
+ transform: translateX(2px);
+}
+
+.community-events-home__footer {
+ margin-top: clamp(1.75rem, 3.5vh, 2.25rem);
+ text-align: center;
+}
+
+.community-events-home__view-all {
+ min-width: min(100%, 13rem);
+}
+
+.community-events-home__empty {
+ display: grid;
+ gap: 1rem;
+ justify-items: center;
+ padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
+ text-align: center;
+ border: 1px solid var(--events-card-border);
+ border-radius: var(--events-card-radius);
+ background: var(--events-card-bg);
+}
+
+.community-events-home__empty-icon {
+ display: block;
+ width: clamp(5.5rem, 12vw, 7rem);
+ height: auto;
+}
+
+.community-events-home__empty-text {
+ margin: 0;
+ max-width: 34rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-dark-rgb), 0.78);
+}
+
+@media (max-width: 640px) {
+ .community-events-home__title {
+ font-size: clamp(1.75rem, 5vw, 2.35rem);
+ }
+
+ .community-events-home__card-footer {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .community-events-home__view-all {
+ width: 100%;
+ max-width: none;
+ }
+
+ .community-events-home__date {
+ min-width: 3.5rem;
+ min-height: 3.5rem;
+ }
+
+ .community-events-home__date-day {
+ font-size: 1.4rem;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .community-events-home__card-link:hover,
+ .community-events-home__card-link:focus-visible {
+ transform: none;
+ }
+
+ .community-events-home__card-link:hover .community-events-home__card-cta-icon,
+ .community-events-home__card-link:focus-visible .community-events-home__card-cta-icon {
+ transform: none;
+ }
+}
diff --git a/assets/css/community-events-news-home.css b/assets/css/community-events-news-home.css
new file mode 100644
index 00000000..52f5e92e
--- /dev/null
+++ b/assets/css/community-events-news-home.css
@@ -0,0 +1,223 @@
+/* Homepage — Latest news + Upcoming events side-by-side (Galaxy-style) */
+
+.community-events-home--with-news {
+ --news-events-col-gap: clamp(2rem, 5vw, 4rem);
+ --news-events-item-gap: clamp(1.25rem, 2.5vw, 1.75rem);
+ --news-events-title-size: clamp(1.35rem, 2.4vw, 1.75rem);
+}
+
+.community-events-home--with-news .community-events-home__header,
+.community-events-home--with-news .community-events-home__footer {
+ display: none;
+}
+
+.community-news-events__grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: clamp(2.5rem, 5vh, 3.5rem);
+}
+
+.community-news-events__column {
+ display: grid;
+ align-content: start;
+ gap: clamp(1.25rem, 2.5vh, 1.75rem);
+ min-width: 0;
+}
+
+.community-news-events__column-header {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 1rem 1.25rem;
+ padding-bottom: 0.85rem;
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+}
+
+.community-news-events__column-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: var(--news-events-title-size);
+ font-weight: 800;
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.community-news-events__column-title-accent {
+ color: var(--openms-blue);
+}
+
+.community-news-events__view-all {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ flex-shrink: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ font-weight: 600;
+ line-height: 1.3;
+ color: var(--openms-blue);
+ text-decoration: none;
+ white-space: nowrap;
+ transition: color 0.2s ease, gap 0.2s ease;
+}
+
+.community-news-events__view-all:hover,
+.community-news-events__view-all:focus-visible {
+ color: var(--openms-blue-secondary);
+ outline: none;
+}
+
+.community-news-events__view-all-icon {
+ display: inline-block;
+ transition: transform 0.2s ease;
+}
+
+.community-news-events__view-all:hover .community-news-events__view-all-icon,
+.community-news-events__view-all:focus-visible .community-news-events__view-all-icon {
+ transform: translateX(2px);
+}
+
+/* News column */
+.news-home__list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: var(--news-events-item-gap);
+}
+
+.news-home__item {
+ min-width: 0;
+}
+
+.news-home__card {
+ margin: 0;
+}
+
+.news-home__card-link {
+ display: grid;
+ gap: 0.35rem;
+ padding: 0;
+ color: inherit;
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+.news-home__card-link:hover,
+.news-home__card-link:focus-visible {
+ outline: none;
+}
+
+.news-home__card-link:hover .news-home__card-title,
+.news-home__card-link:focus-visible .news-home__card-title {
+ color: var(--openms-blue);
+}
+
+.news-home__card-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 1.6vw, 1.125rem);
+ font-weight: 700;
+ line-height: 1.35;
+ color: var(--openms-navy);
+ text-wrap: pretty;
+ transition: color 0.2s ease;
+}
+
+.news-home__card-date {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ color: rgba(var(--openms-navy-rgb), 0.55);
+}
+
+.news-home__card-summary {
+ margin: 0.15rem 0 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+ text-wrap: pretty;
+}
+
+.news-home__empty {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+}
+
+/* Events column — compact empty state */
+.community-events-home__empty--compact {
+ display: grid;
+ gap: 0.85rem;
+ justify-items: start;
+ padding: clamp(1.25rem, 2.5vw, 1.75rem);
+ text-align: left;
+}
+
+.community-events-home__empty--compact .community-events-home__empty-visual {
+ display: none;
+}
+
+.community-events-home__view-all--inline {
+ min-width: 0;
+ font-size: var(--openms-body-size);
+ font-weight: 600;
+ padding: 0;
+ background: none;
+ border: none;
+ box-shadow: none;
+ color: var(--openms-blue);
+ text-decoration: underline;
+ text-underline-offset: 0.14em;
+}
+
+.community-events-home__view-all--inline:hover,
+.community-events-home__view-all--inline:focus-visible {
+ color: var(--openms-blue-secondary);
+ background: none;
+ box-shadow: none;
+}
+
+@media (min-width: 900px) {
+ .community-news-events__grid {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ align-items: start;
+ gap: var(--news-events-col-gap);
+ }
+
+ .community-news-events__column--news {
+ padding-right: clamp(0.5rem, 2vw, 1.5rem);
+ border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+ }
+
+ .community-news-events__column--events {
+ padding-left: clamp(0.5rem, 2vw, 1.5rem);
+ }
+}
+
+@media (max-width: 899px) {
+ .community-news-events__column--news {
+ padding-bottom: clamp(1.5rem, 3vh, 2rem);
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .community-news-events__view-all,
+ .community-news-events__view-all-icon,
+ .news-home__card-link,
+ .news-home__card-title {
+ transition: none;
+ }
+
+ .community-news-events__view-all:hover .community-news-events__view-all-icon,
+ .community-news-events__view-all:focus-visible .community-news-events__view-all-icon {
+ transform: none;
+ }
+}
diff --git a/assets/css/community-home.css b/assets/css/community-home.css
new file mode 100644
index 00000000..8e6fd637
--- /dev/null
+++ b/assets/css/community-home.css
@@ -0,0 +1,188 @@
+/* Homepage community — minimalist copy over fixed photo */
+
+.community-home {
+ position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ background: #000;
+}
+
+.community-home--has-bg {
+ min-height: clamp(40rem, 78vh, 56rem);
+}
+
+.community-home__media {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ background-color: #000;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ pointer-events: none;
+}
+
+.community-home__backdrop {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ pointer-events: none;
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 0, 0, 0.34) 0%,
+ rgba(0, 0, 0, 0.18) 48%,
+ rgba(0, 0, 0, 0.06) 100%
+ );
+}
+
+.community-home__inner {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ min-height: clamp(40rem, 78vh, 56rem);
+ max-width: var(--home-max, 75rem);
+ margin: 0 auto;
+ padding-block: clamp(4.5rem, 9vh, 6.5rem);
+ padding-inline: var(--home-pad-x);
+}
+
+.community-home__content {
+ max-width: min(100%, 38rem);
+ min-width: 0;
+}
+
+.community-home__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: none;
+ color: var(--openms-white);
+ background: rgba(var(--openms-white-rgb), 0.12);
+ border: 1px solid rgba(var(--openms-white-rgb), 0.24);
+ border-radius: 999px;
+}
+
+.community-home__eyebrow-icon {
+ display: inline-flex;
+ line-height: 0;
+ opacity: 0.9;
+}
+
+.community-home__eyebrow-icon svg {
+ display: block;
+ width: 0.875rem;
+ height: 0.875rem;
+}
+
+.community-home__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.85rem, 3.8vw, 2.75rem);
+ font-weight: 800;
+ line-height: 1.1;
+ letter-spacing: -0.03em;
+ color: var(--openms-white);
+ text-wrap: balance;
+}
+
+.community-home__title-accent {
+ display: inline;
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue-secondary) 0%,
+ var(--openms-purple) 50%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+}
+
+.community-home__lead {
+ margin: 0.85rem 0 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ font-weight: 400;
+ line-height: 1.6;
+ color: rgba(var(--openms-white-rgb), 0.92);
+ text-wrap: pretty;
+}
+
+.community-home__note {
+ margin: 0.75rem 0 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ font-weight: 400;
+ line-height: 1.55;
+ color: rgba(var(--openms-white-rgb), 0.8);
+ text-wrap: pretty;
+}
+
+.community-home__note p {
+ margin: 0;
+}
+
+.community-home__note a {
+ color: var(--openms-white);
+ font-weight: 600;
+ text-decoration: underline;
+ text-underline-offset: 0.15em;
+}
+
+.community-home__note a:hover,
+.community-home__note a:focus-visible {
+ color: var(--openms-blue-secondary);
+}
+
+.community-home__actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.75rem 1rem;
+ margin-top: 1.35rem;
+}
+
+.community-home__cta {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+ .community-home--has-bg,
+ .community-home__inner {
+ min-height: clamp(32rem, 72vh, 48rem);
+ }
+
+ .community-home__media {
+ background-attachment: scroll;
+ }
+
+ .community-home__inner {
+ padding-block: clamp(3.75rem, 7.5vh, 5.75rem);
+ padding-inline: var(--home-pad-x);
+ }
+
+ .community-home__title {
+ font-size: clamp(1.55rem, 5vw, 2rem);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .community-home__media {
+ background-attachment: scroll;
+ }
+}
diff --git a/assets/css/contact-area.css b/assets/css/contact-area.css
new file mode 100644
index 00000000..6a4d2ef9
--- /dev/null
+++ b/assets/css/contact-area.css
@@ -0,0 +1,413 @@
+/* Homepage contact — header + action cards */
+
+.contact-home {
+ background: var(--openms-white);
+ border-top: none;
+}
+
+.contact-home__main {
+ padding: var(--home-section-pad, var(--home-section-space-y, clamp(3.75rem, 7.5vh, 5.75rem))) var(--home-pad-x, clamp(1.25rem, 4vw, 2.5rem));
+}
+
+main.home-page > section.home-page__cta:last-of-type .contact-home__main {
+ padding-bottom: var(--home-section-space-y, clamp(3.75rem, 7.5vh, 5.75rem));
+}
+
+main.home-page > section.home-page__cta:last-of-type .contact-home {
+ margin-bottom: 0;
+}
+
+main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redesign {
+ padding-top: 0;
+ margin-top: 0;
+}
+
+.contact-home__inner {
+ max-width: var(--home-max, 75rem);
+ margin: 0 auto;
+}
+
+.contact-home__header {
+ max-width: min(100%, 46rem);
+ margin-bottom: clamp(2rem, 4vh, 2.75rem);
+}
+
+.contact-home__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: none;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.18);
+ border-radius: 999px;
+}
+
+.contact-home__eyebrow-icon {
+ display: inline-flex;
+ line-height: 0;
+ opacity: 0.9;
+}
+
+.contact-home__eyebrow-icon svg {
+ display: block;
+ width: 0.875rem;
+ height: 0.875rem;
+}
+
+.contact-home__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 4.2vw, 3.15rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.03em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.contact-home__title-accent {
+ display: inline;
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue-secondary) 0%,
+ var(--openms-purple) 50%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+}
+
+.contact-home__description {
+ margin: 0.85rem 0 0;
+ max-width: 52ch;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+ text-wrap: pretty;
+}
+
+.contact-home__grid {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: clamp(1rem, 2vw, 1.5rem);
+ align-items: stretch;
+}
+
+.contact-home__item {
+ display: flex;
+ min-width: 0;
+}
+
+.contact-home__card {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100%;
+ padding: clamp(1rem, 2vw, 1.2rem);
+ border-radius: 1rem;
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ background: var(--openms-white);
+ text-decoration: none;
+ color: inherit;
+ box-shadow: 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05);
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease,
+ transform 0.2s ease;
+}
+
+.contact-home__card:hover,
+.contact-home__card:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-blue-rgb), 0.1);
+ transform: translateY(-2px);
+ outline: none;
+}
+
+.contact-home__card--primary {
+ border-color: rgba(var(--openms-blue-rgb), 0.2);
+ background: rgba(var(--openms-blue-rgb), 0.03);
+}
+
+.contact-home__card-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ margin-bottom: 0.85rem;
+ border-radius: 0.65rem;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.14);
+}
+
+.contact-home__card-icon svg {
+ display: block;
+}
+
+.contact-home__card-title {
+ margin: 0 0 0.45rem;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 1.4vw, 1.1rem);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--openms-navy);
+}
+
+.contact-home__card-text {
+ margin: 0;
+ flex: 1 1 auto;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+}
+
+.contact-home__card-cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.3rem;
+ margin-top: 1rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--openms-blue);
+}
+
+.contact-home__card-cta-icon {
+ font-size: 1.1em;
+ line-height: 1;
+ transition: transform 0.2s ease;
+}
+
+.contact-home__card:hover .contact-home__card-cta,
+.contact-home__card:focus-visible .contact-home__card-cta {
+ color: var(--openms-blue);
+}
+
+.contact-home__card:hover .contact-home__card-cta-icon,
+.contact-home__card:focus-visible .contact-home__card-cta-icon {
+ transform: translateX(3px);
+}
+
+.contact-home__meta {
+ margin: clamp(1.25rem, 2.5vh, 1.75rem) 0 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ line-height: 1.45;
+ color: rgba(var(--openms-dark-rgb), 0.5);
+}
+
+@media (max-width: 960px) {
+ .contact-home__grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 640px) {
+ .contact-home__title {
+ font-size: clamp(1.75rem, 5vw, 2.35rem);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .contact-home__card:hover,
+ .contact-home__card:focus-visible {
+ transform: none;
+ }
+
+ .contact-home__card:hover .contact-home__card-cta-icon,
+ .contact-home__card:focus-visible .contact-home__card-cta-icon {
+ transform: none;
+ }
+}
+
+/* ═══ Standalone contact page ═══ */
+.contact-area {
+ padding: clamp(2.4rem, 6vh, 4rem) clamp(1.25rem, 4vw, 2.5rem);
+ background: var(--openms-white);
+}
+
+.contact-area__inner {
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 75rem;
+ margin-inline: auto;
+ padding: clamp(1.75rem, 4vh, 2.5rem);
+ display: grid;
+ grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
+ gap: clamp(1.2rem, 2.8vw, 2.5rem);
+ align-items: center;
+}
+
+.contact-area__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ margin: 0 0 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+}
+
+.contact-area__eyebrow-icon {
+ display: inline-flex;
+ line-height: 0;
+ opacity: 0.85;
+}
+
+.contact-area__eyebrow-icon svg {
+ display: block;
+ width: 0.8125rem;
+ height: 0.812rem;
+}
+
+.contact-area__title {
+ margin: 0 0 0.7rem;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.4vw, 2.35rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.1;
+ color: var(--openms-navy);
+}
+
+.contact-area__copy {
+ margin: 0 0 0.8rem;
+ max-width: 50ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-dark-rgb), 0.82);
+}
+
+.contact-area__meta {
+ margin: 0;
+ font-size: var(--openms-text-min);
+ color: rgba(var(--openms-dark-rgb), 0.6);
+}
+
+.contact-area__support-note {
+ margin: 0.8rem 0 0;
+ font-size: var(--openms-body-size);
+ line-height: 1.5;
+ color: rgba(var(--openms-dark-rgb), 0.82);
+}
+
+.contact-area__support-note a {
+ color: var(--openms-blue);
+ font-weight: 600;
+}
+
+.contact-area__cta {
+ justify-content: center;
+}
+
+.contact-area__cta-secondary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ border: 2px solid rgba(var(--openms-navy-rgb), 0.2);
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ background: transparent;
+ color: var(--openms-navy);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 rgba(var(--openms-blue-rgb), 0.18);
+ transition: var(--openms-btn-motion, transform 0.35s cubic-bezier(0.44, 0, 0.56, 1),
+ box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1));
+}
+
+.contact-area__cta-secondary:hover,
+.contact-area__cta-secondary:focus-visible {
+ border-color: rgba(var(--openms-navy-rgb), 0.2);
+ color: var(--openms-navy);
+ transform: scale(var(--openms-btn-hover-scale, 1.03));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-blue-rgb), 0.18);
+ outline: none;
+}
+
+.contact-area__actions {
+ display: flex;
+ flex-direction: column;
+ gap: 0.65rem;
+ width: 100%;
+}
+
+.contact-area__actions .contact-area__cta {
+ width: 100%;
+ border-radius: var(--openms-btn-pill-radius, 999px);
+}
+
+.contact-area__details {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.contact-area__line {
+ font-size: var(--openms-text-min);
+ font-weight: 500;
+ color: var(--openms-blue);
+ text-decoration: none;
+}
+
+.contact-area__line:hover,
+.contact-area__line:focus-visible {
+ color: var(--openms-navy);
+ text-decoration: underline;
+ outline: none;
+}
+
+.contact-area__details .contact-area__actions .contact-area__cta {
+ color: var(--openms-white) !important;
+}
+
+@media (max-width: 1024px) {
+ .contact-area__inner {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 4vw, 1.75rem);
+ }
+
+ .contact-area__main {
+ text-align: center;
+ }
+
+ .contact-area__eyebrow {
+ margin-inline: auto;
+ }
+
+ .contact-area__details {
+ align-items: center;
+ width: 100%;
+ max-width: 26rem;
+ margin-inline: auto;
+ }
+}
+
+@media (min-width: 1025px) {
+ .contact-area__inner {
+ grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
+ gap: clamp(2rem, 4vw, 3rem);
+ }
+}
diff --git a/assets/css/contact-page.css b/assets/css/contact-page.css
new file mode 100644
index 00000000..209e3ba2
--- /dev/null
+++ b/assets/css/contact-page.css
@@ -0,0 +1,407 @@
+.contact-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --contact-max: 64rem;
+ --contact-gap: clamp(2.25rem, 4vw, 3.5rem);
+ --contact-card-radius: 0.85rem;
+ --contact-card-border: rgba(var(--openms-navy-rgb), 0.12);
+ --contact-card-pad: clamp(1rem, 2vw, 1.25rem);
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+ scroll-behavior: smooth;
+}
+
+.contact-page-layout__content {
+ width: min(100%, var(--contact-max));
+ max-width: var(--contact-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.contact-page-hero {
+ margin-bottom: clamp(2rem, 4vh, 3rem);
+}
+
+.contact-page-hero .openms-lib-hero__chips {
+ margin-bottom: 0;
+}
+
+.contact-page {
+ display: grid;
+ gap: var(--contact-gap);
+ margin-top: 0;
+}
+
+/* Shared section headers */
+
+.contact-page__section-head {
+ display: grid;
+ gap: 0.4rem;
+ max-width: 38rem;
+ margin-bottom: clamp(1.1rem, 2.4vw, 1.5rem);
+}
+
+.contact-page__section-label {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.65rem, 2vw, 0.6875rem);
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.55);
+}
+
+.contact-page__section-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.2rem, 3vw, 1.65rem);
+ font-weight: 800;
+ line-height: 1.25;
+ letter-spacing: -0.02em;
+ text-wrap: balance;
+ color: var(--openms-navy);
+}
+
+.contact-page__section-lead {
+ margin: 0;
+ font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+ color: var(--olib-text-muted);
+}
+
+/* Primary — contact form */
+
+.contact-page__primary {
+ scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem);
+}
+
+.contact-page__form-card {
+ display: grid;
+ gap: 0;
+ overflow: hidden;
+ border: 1px solid var(--contact-card-border);
+ border-radius: var(--contact-card-radius);
+ background: var(--openms-white);
+ box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
+}
+
+.contact-page__form-head {
+ display: grid;
+ gap: 0.4rem;
+ padding: var(--contact-card-pad);
+ padding-bottom: 0.5rem;
+ background: linear-gradient(
+ 180deg,
+ rgba(var(--openms-blue-rgb), 0.04) 0%,
+ var(--openms-white) 100%
+ );
+}
+
+.contact-page__form-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.1rem, 2.6vw, 1.4rem);
+ font-weight: 800;
+ line-height: 1.25;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.contact-page__form-lead {
+ margin: 0;
+ max-width: 40rem;
+ font-size: clamp(0.88rem, 2.2vw, var(--openms-body-size));
+ line-height: 1.55;
+ color: var(--olib-text-muted);
+}
+
+.contact-page__form-body {
+ padding: clamp(0.5rem, 1.2vw, 0.75rem) var(--contact-card-pad) var(--contact-card-pad);
+}
+
+.contact-page__tally-iframe {
+ display: block;
+ width: 100%;
+ min-height: 16rem;
+ border: 0;
+ background: transparent;
+}
+
+/* Paths — email + alternative channels */
+
+.contact-page__paths {
+ padding-top: 0;
+}
+
+.contact-page__paths-grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: clamp(1.25rem, 3vw, 2rem);
+ align-items: start;
+}
+
+.contact-page__path-item {
+ display: grid;
+ gap: 0.75rem;
+ min-width: 0;
+}
+
+.contact-page__path-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.65rem;
+ height: 2.65rem;
+ border-radius: 0.65rem;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.09);
+}
+
+.contact-page__path-body {
+ display: grid;
+ gap: 0.35rem;
+}
+
+.contact-page__path-label {
+ margin: 0;
+ font-size: clamp(0.65rem, 2vw, 0.72rem);
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+}
+
+.contact-page__path-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 2.2vw, 1.15rem);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--openms-navy);
+}
+
+.contact-page__path-desc {
+ margin: 0;
+ font-size: clamp(0.88rem, 2.2vw, 0.95rem);
+ line-height: 1.55;
+ color: var(--olib-text-muted);
+}
+
+.contact-page__path-link {
+ display: inline-flex;
+ align-items: center;
+ width: fit-content;
+ margin-top: 0.15rem;
+ font-size: clamp(0.8rem, 2.2vw, var(--openms-text-min));
+ font-weight: 600;
+ line-height: 1.4;
+ color: var(--openms-blue);
+ text-decoration: underline;
+ text-underline-offset: 0.14em;
+ text-decoration-thickness: 0.08em;
+ word-break: break-word;
+ transition: color 0.15s ease;
+}
+
+.contact-page__path-link:hover,
+.contact-page__path-link:focus-visible {
+ color: var(--openms-navy);
+ outline: none;
+}
+
+/* Supporting OpenMS */
+
+.contact-page__support {
+ padding-top: 0;
+}
+
+.contact-page__support-list {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.85rem;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.contact-page__support-list > li {
+ display: flex;
+ min-width: 0;
+}
+
+.contact-page__support-card {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto auto;
+ grid-template-areas:
+ "icon body"
+ "action action";
+ column-gap: 0.85rem;
+ row-gap: 0.55rem;
+ width: 100%;
+ min-height: 100%;
+ padding: var(--contact-card-pad);
+ border-radius: var(--contact-card-radius);
+ border: 1px solid var(--contact-card-border);
+ background: var(--openms-white);
+ color: inherit;
+ text-decoration: none;
+ box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease,
+ transform 0.2s ease;
+}
+
+.contact-page__support-card--featured {
+ border-left: 4px solid var(--openms-navy);
+}
+
+.contact-page__support-card:hover,
+.contact-page__support-card:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
+ transform: translateY(-2px);
+ outline: none;
+}
+
+.contact-page__support-card--featured:hover,
+.contact-page__support-card--featured:focus-visible {
+ border-left-color: var(--openms-navy);
+}
+
+.contact-page__support-card:focus-visible {
+ box-shadow:
+ 0 0 0 3px var(--openms-navy),
+ 0 0 0 5px var(--openms-yellow),
+ 0 4px 18px rgba(15, 23, 42, 0.08);
+}
+
+.contact-page__support-card-icon {
+ grid-area: icon;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.65rem;
+ height: 2.65rem;
+ border-radius: 0.65rem;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.09);
+}
+
+.contact-page__support-card--featured .contact-page__support-card-icon {
+ color: var(--openms-navy);
+ background: rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.contact-page__support-card-body {
+ grid-area: body;
+ display: grid;
+ gap: 0.3rem;
+ align-content: start;
+ min-width: 0;
+}
+
+.contact-page__support-card-label {
+ font-size: clamp(0.65rem, 2vw, 0.72rem);
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+}
+
+.contact-page__support-card-title {
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 2.2vw, 1.15rem);
+ font-weight: 700;
+ line-height: 1.25;
+ color: var(--openms-navy);
+}
+
+.contact-page__support-card-desc {
+ font-size: clamp(0.88rem, 2.2vw, 0.95rem);
+ line-height: 1.55;
+ color: var(--olib-text-muted);
+}
+
+.contact-page__support-card-action {
+ grid-area: action;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.2rem;
+ padding-top: 0.1rem;
+ font-size: clamp(0.75rem, 2.2vw, var(--openms-text-min));
+ font-weight: 600;
+ color: var(--openms-blue);
+}
+
+.contact-page__support-card:hover .contact-page__support-card-action,
+.contact-page__support-card:focus-visible .contact-page__support-card-action {
+ color: var(--openms-navy);
+}
+
+.contact-page__support-card-action svg {
+ flex-shrink: 0;
+ transition: transform 0.2s ease;
+}
+
+.contact-page__support-card:hover .contact-page__support-card-action svg,
+.contact-page__support-card:focus-visible .contact-page__support-card-action svg {
+ transform: translateX(2px);
+}
+
+@media (max-width: 960px) {
+ .contact-page__paths-grid {
+ grid-template-columns: 1fr;
+ gap: clamp(1.25rem, 3vw, 1.75rem);
+ }
+
+ .contact-page__path-item {
+ padding-block: 0;
+ }
+
+ .contact-page__support-list {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 720px) {
+ .contact-page__form-body {
+ padding: 0.35rem 0.85rem 0.9rem;
+ }
+
+ .contact-page__form-head {
+ padding: 0.9rem 0.85rem 0.75rem;
+ }
+
+ .contact-page__support-card {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "icon"
+ "body"
+ "action";
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .contact-page-layout {
+ scroll-behavior: auto;
+ }
+
+ .contact-page__support-card:hover,
+ .contact-page__support-card:focus-visible {
+ transform: none;
+ }
+
+ .contact-page__support-card:hover .contact-page__support-card-action svg,
+ .contact-page__support-card:focus-visible .contact-page__support-card-action svg {
+ transform: none;
+ }
+}
diff --git a/assets/css/content_override.css b/assets/css/content_override.css
index e719ef7a..cc1bba2a 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/contribute-page.css b/assets/css/contribute-page.css
new file mode 100644
index 00000000..5fe4a0f7
--- /dev/null
+++ b/assets/css/contribute-page.css
@@ -0,0 +1,165 @@
+.contribute-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --contribute-max: 64rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.contribute-page-layout__content {
+ width: min(100%, var(--contribute-max));
+ max-width: var(--contribute-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.contribute-page {
+ margin-top: 0;
+}
+
+.contribute-page-hero {
+ margin-bottom: var(--olib-section-y);
+}
+
+.contribute-page__content {
+ display: grid;
+ gap: clamp(1.25rem, 2.5vw, 1.75rem);
+}
+
+.contribute-page__content hr {
+ margin: 0;
+ border: 0;
+ border-top: 1px solid rgba(var(--openms-navy-rgb), 0.12);
+}
+
+.contribute-page__content h2 {
+ margin: 0.5rem 0 0;
+ padding-top: 0.25rem;
+ font-family: var(--openms-font-heading);
+ font-size: var(--openms-secondary-heading-size-lg);
+ font-weight: 700;
+ line-height: 1.2;
+ color: var(--openms-navy);
+ letter-spacing: -0.01em;
+}
+
+.contribute-page__content h3 {
+ margin: 0.25rem 0 0;
+ font-family: var(--openms-font-heading);
+ font-size: var(--openms-secondary-heading-size);
+ font-weight: 700;
+ line-height: 1.25;
+ color: var(--openms-navy);
+}
+
+.contribute-page__content p,
+.contribute-page__content li {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-dark-rgb), 0.88);
+}
+
+.contribute-page__content ul,
+.contribute-page__content ol {
+ margin: 0;
+ padding-left: 1.35rem;
+}
+
+.contribute-page__content li + li {
+ margin-top: 0.35rem;
+}
+
+.contribute-page__content a {
+ color: var(--openms-blue);
+ font-weight: 500;
+ text-decoration: underline;
+ text-underline-offset: 0.14em;
+}
+
+.contribute-page__content a:hover {
+ color: var(--openms-navy);
+}
+
+/* Navbar-style CTA motion (contribute page) */
+.contribute-page-layout .openms-lib-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.contribute-page-layout .openms-lib-btn--primary {
+ gap: 0.5rem;
+ padding-inline: 1.15rem;
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.contribute-page-layout .openms-lib-btn--ghost {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.contribute-page-layout .openms-lib-btn--primary:hover,
+.contribute-page-layout .openms-lib-btn--primary:focus-visible,
+.contribute-page-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.contribute-page-layout .openms-lib-btn--ghost:hover,
+.contribute-page-layout .openms-lib-btn--ghost:focus-visible,
+.contribute-page-layout .openms-lib-btn--ghost:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.contribute-page-layout .openms-lib-btn--primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.contribute-page-layout .openms-lib-btn--ghost:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .contribute-page-layout .openms-lib-btn:hover,
+ .contribute-page-layout .openms-lib-btn:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/donate-page.css b/assets/css/donate-page.css
new file mode 100644
index 00000000..256c9080
--- /dev/null
+++ b/assets/css/donate-page.css
@@ -0,0 +1,93 @@
+.donate-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --donate-max: 64rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.donate-page-layout__content {
+ width: min(100%, var(--donate-max));
+ max-width: var(--donate-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.donate-page-hero {
+ margin-bottom: var(--olib-section-y);
+}
+
+.donate-page-layout__container {
+ max-width: min(100%, 64rem);
+}
+
+.donate-page__tax-note {
+ font-size: 0.95rem;
+ color: var(--openms-text-muted, #5a6474);
+}
+
+.donate-page__embed {
+ margin-top: 2rem;
+ border-radius: 0.75rem;
+ overflow: hidden;
+ border: 1px solid var(--openms-border, #e2e8f0);
+ background: #fff;
+ box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
+}
+
+.donate-page__zeffy-iframe {
+ display: block;
+ width: 100%;
+ min-height: 42rem;
+ border: 0;
+}
+
+.donate-page__actions {
+ margin-top: 1.25rem;
+}
+
+.donate-page__embed-hint {
+ margin-top: 1rem;
+ font-size: 0.9rem;
+ color: var(--openms-text-muted, #5a6474);
+}
+
+.donate-page__embed-hint code {
+ font-size: 0.85em;
+}
+
+.donate-page__pending {
+ margin-top: 1.5rem;
+ padding: 1.25rem 1.5rem;
+ border-radius: 0.5rem;
+ background: var(--openms-surface-muted, #f4f6f9);
+ border: 1px dashed var(--openms-border, #cbd5e1);
+}
+
+.donate-page__pending p {
+ margin: 0;
+ font-size: 0.95rem;
+}
+
+.donate-page__alt {
+ margin-top: 2.5rem;
+ padding-top: 0;
+}
+
+.donate-page__alt h3 {
+ font-size: 1.25rem;
+ margin-bottom: 0.75rem;
+}
+
+@media (max-width: 640px) {
+ .donate-page__zeffy-iframe {
+ min-height: 36rem;
+ }
+}
diff --git a/assets/css/ecosystem-home.css b/assets/css/ecosystem-home.css
new file mode 100644
index 00000000..132bedcd
--- /dev/null
+++ b/assets/css/ecosystem-home.css
@@ -0,0 +1,245 @@
+/* Homepage — ecosystem tool cards (bento layout) */
+
+.ecosystem-home {
+ --ecosystem-max: min(100%, 96rem);
+ max-width: var(--ecosystem-max);
+ margin: 0 auto;
+ padding: var(--home-section-pad) var(--home-pad-x, clamp(1.25rem, 4vw, 2.5rem));
+}
+
+.ecosystem-home__inner {
+ display: grid;
+ gap: clamp(1.5rem, 3vh, 2.25rem);
+}
+
+.ecosystem-home__header {
+ margin: 0;
+}
+
+.home-page .home-page__block--ecosystem .ecosystem-home__header-main {
+ max-width: min(100%, 58rem);
+}
+
+.ecosystem-home__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.ecosystem-home__title-accent {
+ color: var(--openms-blue);
+}
+
+.ecosystem-home__grid--bento {
+ display: grid;
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ grid-auto-rows: minmax(0, auto);
+ gap: clamp(0.85rem, 1.5vw, 1.15rem);
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ align-items: stretch;
+}
+
+.ecosystem-home__item {
+ display: flex;
+ min-width: 0;
+}
+
+.ecosystem-home__item--wide {
+ grid-column: span 7;
+}
+
+.ecosystem-home__item--standard {
+ grid-column: span 5;
+}
+
+.ecosystem-home__card {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100%;
+ padding: clamp(1rem, 2vw, 1.35rem);
+ border: 1px solid rgba(var(--openms-white-rgb), 0.12);
+ border-radius: 1rem;
+ background: var(--openms-navy);
+ color: var(--openms-white);
+ text-decoration: none;
+ box-shadow: 0 0.25rem 1rem rgba(var(--openms-navy-rgb), 0.28);
+ transition:
+ transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+ border-color 0.22s ease,
+ box-shadow 0.22s ease,
+ background-color 0.22s ease;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.ecosystem-home__card--wide {
+ padding: clamp(1.15rem, 2.2vw, 1.6rem);
+}
+
+.ecosystem-home__card:hover,
+.ecosystem-home__card:focus-visible {
+ transform: translateY(-2px);
+ border-color: rgba(var(--openms-white-rgb), 0.22);
+ background: color-mix(in srgb, var(--openms-blue) 14%, var(--openms-navy));
+ box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.38);
+ outline: none;
+}
+
+.ecosystem-home__card:focus-visible {
+ box-shadow:
+ 0 0 0 2px rgba(var(--openms-blue-rgb), 0.25),
+ 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.38);
+}
+
+.ecosystem-home__card-body {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ gap: 0.5rem;
+ min-width: 0;
+}
+
+.ecosystem-home__card--wide .ecosystem-home__card-body {
+ gap: 0.55rem;
+ justify-content: center;
+}
+
+.ecosystem-home__card-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.05rem, 1.8vw, 1.22rem);
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ color: var(--openms-white);
+}
+
+.ecosystem-home__card--wide .ecosystem-home__card-title {
+ font-size: clamp(1.15rem, 2vw, 1.4rem);
+}
+
+.ecosystem-home__card:hover .ecosystem-home__card-title,
+.ecosystem-home__card:focus-visible .ecosystem-home__card-title {
+ color: var(--openms-white);
+}
+
+.ecosystem-home__card-text {
+ flex: 1 1 auto;
+ margin: 0;
+ font-size: var(--openms-body-size);
+ line-height: 1.58;
+ color: rgba(var(--openms-white-rgb), 0.78);
+ text-wrap: pretty;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.ecosystem-home__card--standard .ecosystem-home__card-text {
+ -webkit-line-clamp: 3;
+}
+
+.ecosystem-home__card--wide .ecosystem-home__card-text {
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ -webkit-line-clamp: 2;
+ max-width: 56ch;
+}
+
+.ecosystem-home__card-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.2rem;
+ margin-top: auto;
+ padding-top: 0.25rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--openms-white);
+ transition: gap 0.15s ease;
+}
+
+.ecosystem-home__card:hover .ecosystem-home__card-link,
+.ecosystem-home__card:focus-visible .ecosystem-home__card-link {
+ gap: 0.35rem;
+ color: var(--openms-white);
+}
+
+.ecosystem-home__card-link-icon {
+ font-size: 1.05rem;
+ line-height: 1;
+}
+
+.home-page__block--ecosystem {
+ background: linear-gradient(
+ 180deg,
+ var(--home-bg-base, #fff) 0%,
+ var(--home-bg-soft, #f4f6fa) 100%
+ );
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.home-page--motion .home-page__block--ecosystem:not(.is-revealed) .ecosystem-home__header {
+ opacity: 0;
+ transform: translateY(1.25rem);
+}
+
+.home-page--motion .home-page__block--ecosystem .ecosystem-home__header {
+ transition:
+ opacity var(--home-reveal-duration, 0.65s) var(--home-reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+ transform var(--home-reveal-duration, 0.65s) var(--home-reveal-ease, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.home-page--motion .home-page__block--ecosystem.is-revealed .ecosystem-home__header {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.home-page--motion .home-page__block--ecosystem .ecosystem-home__item:not(.is-revealed) {
+ opacity: 0;
+ transform: translateY(1.1rem);
+}
+
+.home-page--motion .home-page__block--ecosystem .ecosystem-home__item {
+ transition:
+ opacity var(--home-reveal-duration, 0.65s) var(--home-reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+ transform var(--home-reveal-duration, 0.65s) var(--home-reveal-ease, cubic-bezier(0.22, 1, 0.36, 1));
+ transition-delay: calc(var(--ecosystem-reveal-index, 0) * 0.07s);
+}
+
+.home-page--motion .home-page__block--ecosystem .ecosystem-home__item.is-revealed {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+@media (max-width: 992px) {
+ .ecosystem-home__item--wide,
+ .ecosystem-home__item--standard {
+ grid-column: span 6;
+ }
+}
+
+@media (max-width: 768px) {
+ .ecosystem-home__grid--bento {
+ grid-template-columns: 1fr;
+ }
+
+ .ecosystem-home__item--wide,
+ .ecosystem-home__item--standard {
+ grid-column: span 1;
+ }
+
+ .ecosystem-home__card--wide .ecosystem-home__card-text {
+ -webkit-line-clamp: 3;
+ max-width: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .ecosystem-home__card:hover,
+ .ecosystem-home__card:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/governance.css b/assets/css/governance.css
new file mode 100644
index 00000000..805eb7fc
--- /dev/null
+++ b/assets/css/governance.css
@@ -0,0 +1,497 @@
+.governance-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --governance-max: 64rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.governance-page-layout__content {
+ width: min(100%, var(--governance-max));
+ max-width: var(--governance-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.governance-page-hero {
+ margin-bottom: var(--olib-section-y);
+}
+
+.governance-page {
+ display: grid;
+ gap: clamp(2rem, 3.8vw, 3.2rem);
+ margin-top: 0;
+}
+
+.governance-hero {
+ position: relative;
+ overflow: hidden;
+ padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem);
+ background: linear-gradient(
+ 135deg,
+ var(--openms-navy) 0%,
+ #1b318f 55%,
+ var(--openms-blue) 100%
+ );
+ color: var(--openms-white);
+}
+
+.governance-hero::before,
+.governance-hero::after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+ pointer-events: none;
+}
+
+.governance-hero::before {
+ width: 18rem;
+ height: 18rem;
+ right: -4rem;
+ top: -8rem;
+ background: radial-gradient(circle, rgba(var(--openms-white-rgb), 0.16) 0%, transparent 70%);
+}
+
+.governance-hero::after {
+ width: 14rem;
+ height: 14rem;
+ left: -5rem;
+ bottom: -7rem;
+ background: radial-gradient(circle, rgba(var(--openms-pink-rgb), 0.2) 0%, transparent 70%);
+}
+
+.governance-hero__eyebrow {
+ position: relative;
+ z-index: 1;
+ margin: 0 0 0.5rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-white-rgb), 0.82);
+}
+
+.governance-hero__title {
+ position: relative;
+ z-index: 1;
+ margin: 0;
+ max-width: 18ch;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 4.8vw, 3.2rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.02em;
+ text-wrap: balance;
+ color: var(--openms-white) !important;
+}
+
+.governance-hero__title span {
+ color: var(--openms-white) !important;
+}
+
+.governance-hero__description {
+ position: relative;
+ z-index: 1;
+ margin: 0.9rem 0 0;
+ max-width: 60ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-white-rgb), 0.92);
+}
+
+.governance-hero__meta {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.55rem;
+ margin-top: 1rem;
+}
+
+.governance-hero__meta a {
+ display: inline-flex;
+ align-items: center;
+ min-height: 2rem;
+ padding: 0.3rem 0.75rem;
+ border-radius: 999px;
+ background: rgba(var(--openms-white-rgb), 0.16);
+ color: var(--openms-white) !important;
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.governance-hero__meta a:hover,
+.governance-hero__meta a:focus-visible {
+ background: rgba(var(--openms-yellow-rgb), 0.22);
+ color: var(--openms-white) !important;
+}
+
+.governance-hero a,
+.governance-hero a:visited {
+ color: var(--openms-white) !important;
+}
+
+.governance-jump-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem 0.7rem;
+ align-items: center;
+}
+
+.governance-jump-links a {
+ display: inline-flex;
+ align-items: center;
+ min-height: 2.1rem;
+ padding: 0.35rem 0.8rem;
+ border-radius: 999px;
+ color: var(--openms-blue);
+ font-weight: 600;
+ text-decoration: none;
+ background: rgba(var(--openms-blue-rgb), 0.08);
+ transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.governance-jump-links a:hover,
+.governance-jump-links a:focus-visible {
+ background: rgba(var(--openms-blue-rgb), 0.16);
+ color: var(--openms-navy);
+ transform: translateY(-1px);
+}
+
+.governance-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: clamp(1rem, 2vw, 2rem);
+}
+
+.infrastructure-links {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.infrastructure-card h2 {
+ font-size: clamp(1.15rem, 2vw, 1.35rem);
+}
+
+.infrastructure-card h2 a {
+ color: var(--openms-navy);
+ text-decoration: none;
+}
+
+.infrastructure-card h2 a:hover,
+.infrastructure-card h2 a:focus-visible {
+ color: var(--openms-blue);
+ text-decoration: underline;
+ text-underline-offset: 0.12em;
+}
+
+.governance-card {
+ position: relative;
+ padding: 0.2rem 0.1rem 0.2rem 1.35rem;
+}
+
+.governance-card h2 {
+ margin-top: 0.05rem;
+ margin-bottom: 0.75rem;
+ font-size: clamp(1.15rem, 2.8vw, 1.5rem);
+ line-height: 1.25;
+ text-wrap: balance;
+ color: var(--openms-navy);
+}
+
+.governance-card::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0.2rem;
+ bottom: 0.2rem;
+ width: 0.24rem;
+ border-radius: 999px;
+ background: linear-gradient(
+ 180deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 100%
+ );
+}
+
+.governance-card__eyebrow {
+ margin: 0 0 0.2rem;
+ font-size: clamp(0.68rem, 2vw, var(--openms-text-min));
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+}
+
+.governance-card p,
+.governance-card li {
+ font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+}
+
+.governance-card ul {
+ margin: 0.75rem 0 0.65rem;
+ padding-left: 1.2rem;
+}
+
+.governance-card li {
+ margin-bottom: 0.35rem;
+}
+
+.governance-card__link {
+ margin-top: 0.75rem;
+ margin-bottom: 0;
+ font-weight: 600;
+}
+
+.governance-section {
+ padding: 0;
+}
+
+.governance-section h2 {
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+ font-size: clamp(1.2rem, 3vw, 1.65rem);
+ line-height: 1.25;
+ text-wrap: balance;
+ color: var(--openms-navy);
+}
+
+.governance-section p {
+ font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+}
+
+.governance-pillars {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.6rem 1rem;
+ margin: 1rem 0 0.9rem;
+ padding: 0;
+ list-style: none;
+}
+
+.governance-pillar {
+ position: relative;
+ padding-left: 1.25rem;
+ font-size: clamp(0.88rem, 2.2vw, var(--openms-body-size-lg));
+ line-height: 1.45;
+ color: var(--openms-dark);
+ font-weight: 600;
+}
+
+.governance-pillar::before {
+ content: "";
+ position: absolute;
+ left: 0.35rem;
+ top: 0.65em;
+ width: 0.4rem;
+ height: 0.4rem;
+ border-radius: 50%;
+ background: var(--openms-orange);
+}
+
+.governance-note {
+ margin-bottom: 0;
+ font-size: clamp(0.88rem, 2.2vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+ color: rgba(var(--openms-dark-rgb), 0.9);
+}
+
+.governance-section--contrast {
+ margin-top: -0.25rem;
+}
+
+.governance-compare {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1rem 1.4rem;
+ margin: 1rem 0 1.2rem;
+}
+
+.governance-compare > div {
+ position: relative;
+ padding-left: 1.1rem;
+}
+
+.governance-compare__title {
+ margin-top: 0;
+ margin-bottom: 0.4rem;
+ font-size: clamp(0.95rem, 2.4vw, var(--openms-secondary-heading-size-lg));
+ font-weight: 600;
+ line-height: 1.35;
+ color: var(--openms-blue);
+}
+
+.governance-compare p {
+ font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+}
+
+.governance-compare > div::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0.15rem;
+ bottom: 0.15rem;
+ width: 0.16rem;
+ border-radius: 999px;
+ background: rgba(var(--openms-blue-rgb), 0.35);
+}
+
+.governance-links h2 {
+ margin-bottom: 0.75rem;
+ font-size: clamp(1.2rem, 3vw, 1.65rem);
+ line-height: 1.25;
+ text-wrap: balance;
+}
+
+.governance-links p {
+ font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+}
+
+.governance-links ul {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 1.15rem;
+}
+
+.governance-links li {
+ margin-bottom: 0.3rem;
+}
+
+.governance-links a {
+ font-weight: 600;
+ text-decoration-thickness: 0.08em;
+ text-underline-offset: 0.14em;
+}
+
+/* Navbar-style CTA motion (governance page) */
+.governance-page-layout .openms-lib-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ width: fit-content;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.governance-page-layout .openms-lib-btn--primary {
+ gap: 0.5rem;
+ padding-inline: 1.15rem;
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.governance-page-layout .openms-lib-btn--ghost {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.governance-page-layout .governance-card__link a {
+ font-weight: 600;
+ text-decoration-thickness: 0.08em;
+ text-underline-offset: 0.14em;
+}
+
+.governance-page-layout .openms-lib-btn--primary:hover,
+.governance-page-layout .openms-lib-btn--primary:focus-visible,
+.governance-page-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.governance-page-layout .openms-lib-btn--ghost:hover,
+.governance-page-layout .openms-lib-btn--ghost:focus-visible,
+.governance-page-layout .openms-lib-btn--ghost:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.governance-page-layout .openms-lib-btn--primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.governance-page-layout .openms-lib-btn--ghost:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+@media (max-width: 1024px) {
+ .infrastructure-links {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 860px) {
+ .governance-grid,
+ .governance-pillars,
+ .governance-compare {
+ grid-template-columns: 1fr;
+ }
+
+ .governance-page {
+ gap: 1.8rem;
+ }
+
+ .governance-hero {
+ padding: 1rem 1rem 1.25rem;
+ }
+
+ .governance-hero__title {
+ max-width: none;
+ font-size: clamp(1.8rem, 8vw, 2.4rem);
+ }
+
+ .governance-jump-links {
+ gap: 0.5rem;
+ }
+
+ .governance-jump-links a {
+ min-height: 2rem;
+ padding-inline: 0.7rem;
+ }
+
+ .governance-card {
+ padding-left: 1.05rem;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .governance-page-layout .openms-lib-btn:hover,
+ .governance-page-layout .openms-lib-btn:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/help-page.css b/assets/css/help-page.css
new file mode 100644
index 00000000..6f4e9587
--- /dev/null
+++ b/assets/css/help-page.css
@@ -0,0 +1,155 @@
+.help-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --help-max: 64rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.help-page-layout__content {
+ width: min(100%, var(--help-max));
+ max-width: var(--help-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.help-page-hero {
+ margin-bottom: var(--olib-section-y);
+}
+
+.help-page {
+ margin-top: 0;
+}
+
+.help-page__hint {
+ margin-top: 0.75rem;
+ font-size: 0.9rem;
+ color: var(--openms-text-muted, #5a6474);
+}
+
+.help-page__resources {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.help-page__card--wide {
+ grid-column: 1 / -1;
+}
+
+.help-page-layout .help-page__resources .governance-card__link {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.75rem;
+ margin-top: 1rem;
+ font-size: 0;
+}
+
+.help-page-layout .help-page__resources .governance-card__link a {
+ font-size: var(--openms-text-min);
+}
+
+/* Navbar-style CTA motion (help page) */
+.help-page-layout .openms-lib-btn,
+.help-page-layout .help-page__resources .governance-card__link a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ width: fit-content;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.help-page-layout .openms-lib-btn--primary {
+ gap: 0.5rem;
+ padding-inline: 1.15rem;
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.help-page-layout .openms-lib-btn--ghost,
+.help-page-layout .help-page__resources .governance-card__link a {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.help-page-layout .help-page__resources .governance-card__link a {
+ margin-top: 0;
+}
+
+.help-page-layout .openms-lib-btn--primary:hover,
+.help-page-layout .openms-lib-btn--primary:focus-visible,
+.help-page-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.help-page-layout .openms-lib-btn--ghost:hover,
+.help-page-layout .openms-lib-btn--ghost:focus-visible,
+.help-page-layout .openms-lib-btn--ghost:active,
+.help-page-layout .help-page__resources .governance-card__link a:hover,
+.help-page-layout .help-page__resources .governance-card__link a:focus-visible,
+.help-page-layout .help-page__resources .governance-card__link a:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.help-page-layout .openms-lib-btn--primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.help-page-layout .openms-lib-btn--ghost:focus-visible,
+.help-page-layout .help-page__resources .governance-card__link a:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+@media (max-width: 860px) {
+ .help-page__resources {
+ grid-template-columns: 1fr;
+ }
+
+ .help-page__card--wide {
+ grid-column: auto;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .help-page-layout .openms-lib-btn:hover,
+ .help-page-layout .openms-lib-btn:focus-visible,
+ .help-page-layout .help-page__resources .governance-card__link a:hover,
+ .help-page-layout .help-page__resources .governance-card__link a:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/hero-saas.css b/assets/css/hero-saas.css
new file mode 100644
index 00000000..5c4ac74d
--- /dev/null
+++ b/assets/css/hero-saas.css
@@ -0,0 +1,596 @@
+/* Homepage hero — split layout (standard site typography & colors) */
+
+.hero-home {
+ position: relative;
+ overflow: visible;
+ background: var(--openms-white);
+ min-height: clamp(34rem, 88vh, 48rem);
+}
+
+.hero-home::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: min(55%, 42rem);
+ height: 100%;
+ background: linear-gradient(
+ 165deg,
+ rgba(var(--openms-blue-rgb), 0.06) 0%,
+ rgba(var(--openms-purple-rgb), 0.04) 45%,
+ transparent 100%
+ );
+ pointer-events: none;
+}
+
+.hero-home__main {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: inherit;
+ padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 4vw, 2.5rem)
+ clamp(3.5rem, 8vh, 5.5rem);
+}
+
+.hero-home__inner {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ gap: clamp(1.75rem, 4vh, 2.5rem);
+ align-items: start;
+ justify-items: stretch;
+ max-width: 75rem;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.hero-home__hero-grid {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ gap: clamp(2rem, 5vh, 3rem);
+ align-items: center;
+ width: 100%;
+}
+
+.hero-home__footer {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: clamp(1rem, 2vh, 1.35rem);
+ width: 100%;
+}
+
+.hero-home__highlights {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 0;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.hero-home__highlight {
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.72rem, 1.05vw, 0.8125rem);
+ font-weight: 500;
+ line-height: 1.45;
+ letter-spacing: 0.02em;
+ color: rgba(var(--openms-white-rgb), 0.74);
+ padding: 0;
+ border: 0;
+ background: transparent;
+ white-space: nowrap;
+}
+
+.hero-home__highlight + .hero-home__highlight::before {
+ content: "·";
+ margin: 0 clamp(0.45rem, 0.9vw, 0.65rem);
+ color: rgba(var(--openms-white-rgb), 0.32);
+ font-weight: 400;
+ pointer-events: none;
+}
+
+@media (min-width: 901px) {
+ .hero-home__hero-grid {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ grid-template-rows: auto auto;
+ column-gap: clamp(2.5rem, 5vw, 4.5rem);
+ row-gap: clamp(1.25rem, 2.5vh, 2rem);
+ align-items: center;
+ }
+
+ .hero-home__copy {
+ grid-column: 1;
+ grid-row: 1;
+ align-self: start;
+ }
+
+ .hero-home__footer {
+ grid-column: 1;
+ grid-row: 2;
+ align-self: end;
+ position: relative;
+ z-index: 2;
+ }
+
+ .hero-home__visual {
+ grid-column: 2;
+ grid-row: 1 / -1;
+ justify-self: end;
+ align-self: end;
+ width: min(100%, clamp(20rem, 44vw, 40rem));
+ margin-right: clamp(1.25rem, 3.5vw, 2.75rem);
+ align-items: stretch;
+ margin-top: 0;
+ padding-top: 0;
+ }
+
+ .hero-home__actions-block {
+ margin-top: 0;
+ }
+
+ .hero-home__highlights {
+ justify-content: center;
+ }
+}
+
+.hero-home__copy {
+ width: 100%;
+ min-width: 0;
+}
+
+.hero-home__visual {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-width: 0;
+}
+
+.hero-home__visual-shell {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 0;
+ padding: clamp(1rem, 2.2vw, 1.65rem) clamp(0.85rem, 1.8vw, 1.35rem) clamp(0.85rem, 1.8vw, 1.25rem);
+ border-radius: clamp(1rem, 2vw, 1.35rem);
+ background:
+ linear-gradient(
+ 165deg,
+ rgba(var(--openms-white-rgb), 0.07) 0%,
+ rgba(var(--openms-white-rgb), 0.025) 42%,
+ rgba(var(--openms-purple-rgb), 0.04) 100%
+ );
+ border: 1px solid rgba(var(--openms-white-rgb), 0.1);
+ box-shadow:
+ inset 0 1px 0 rgba(var(--openms-white-rgb), 0.08),
+ 0 1.5rem 3rem rgba(var(--openms-dark-rgb), 0.14);
+ overflow: visible;
+}
+
+.hero-home__visual-shell::before {
+ content: "";
+ position: absolute;
+ inset: 8% 10% 28%;
+ background: radial-gradient(
+ ellipse at 50% 38%,
+ rgba(var(--openms-purple-rgb), 0.22) 0%,
+ rgba(var(--openms-blue-rgb), 0.1) 42%,
+ transparent 72%
+ );
+ pointer-events: none;
+ z-index: 0;
+}
+
+.hero-home__visual-shell > .hero-logo-diagram,
+.hero-home__visual-shell > .hero-home__visual-caption {
+ position: relative;
+ z-index: 1;
+}
+
+.hero-home__visual-caption {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ margin-top: clamp(0.35rem, 0.8vh, 0.55rem);
+ padding-top: clamp(0.75rem, 1.4vh, 0.95rem);
+ border-top: 1px solid rgba(var(--openms-white-rgb), 0.1);
+}
+
+.hero-home__note--diagram {
+ justify-content: center;
+ text-align: center;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+}
+
+.hero-home__image {
+ display: block;
+ width: 100%;
+ max-width: min(100%, 30rem);
+ height: auto;
+ aspect-ratio: auto;
+ object-fit: contain;
+ border-radius: 0;
+ box-shadow: none;
+ background: transparent;
+}
+
+.hero-logo-diagram {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 0;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ background: transparent;
+}
+
+.hero-logo-diagram__chart {
+ width: 100%;
+ flex-shrink: 0;
+}
+
+.hero-logo-diagram__frame {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ padding-top: clamp(0.85rem, 2vh, 1.5rem);
+}
+
+.hero-logo-diagram__tags {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 0.45rem 0.55rem;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.hero-logo-diagram__tag {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 500;
+ line-height: 1.35;
+ letter-spacing: 0.01em;
+ color: rgba(var(--openms-white-rgb), 0.78);
+ padding: 0.38rem 0.72rem;
+ border-radius: 999px;
+ border: 1px solid rgba(var(--openms-white-rgb), 0.16);
+ background: rgba(var(--openms-white-rgb), 0.07);
+ white-space: nowrap;
+}
+
+.hero-logo-diagram__svg {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ aspect-ratio: 720 / 215;
+ min-height: clamp(10rem, 24vw, 16rem);
+ max-height: min(48vh, 24rem);
+ overflow: visible;
+ border-radius: 0;
+ box-shadow: none;
+ transform: translateY(clamp(0.35rem, 0.8vh, 0.65rem));
+}
+
+@media (max-width: 900px) {
+ .hero-home__visual {
+ width: 100%;
+ max-width: min(100%, 28rem);
+ margin-inline: auto;
+ }
+
+ .hero-logo-diagram__svg {
+ min-height: clamp(10rem, 38vw, 14rem);
+ max-height: min(42vh, 19rem);
+ }
+
+ .hero-home__highlight {
+ white-space: normal;
+ }
+}
+
+@media (min-width: 1200px) {
+ .hero-logo-diagram__svg {
+ min-height: clamp(13rem, 26vw, 19rem);
+ max-height: min(52vh, 26rem);
+ }
+}
+
+.hero-logo-diagram__wordmark {
+ margin: clamp(0.15rem, 0.4vh, 0.35rem) 0 0;
+ padding: 0;
+ text-align: center;
+ white-space: nowrap;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(0.95rem, 1.85vw, 1.2rem);
+ font-weight: 700;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ line-height: 1.2;
+ color: var(--openms-white);
+ text-shadow: 0 1px 3px rgba(var(--openms-dark-rgb), 0.4);
+}
+
+@supports (-webkit-background-clip: text) or (background-clip: text) {
+ .hero-logo-diagram__wordmark {
+ background: linear-gradient(
+ 90deg,
+ rgba(var(--openms-white-rgb), 0.98) 0%,
+ rgba(var(--openms-white-rgb), 0.82) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-shadow: none;
+ }
+}
+
+.hero-logo-diagram__stage {
+ transform-origin: center;
+ transform-box: fill-box;
+ animation: hero-logo-float 6.5s ease-in-out infinite;
+ opacity: 0.75;
+}
+
+.hero-logo-diagram__peaks {
+ opacity: 0.88;
+ transform-box: fill-box;
+ transform-origin: 50% 100%;
+ transform: scaleY(1.35);
+}
+
+.hero-logo-diagram__bar {
+ transform-box: fill-box;
+ transform-origin: 50% 100%;
+ animation: hero-logo-bar-pulse 3s ease-in-out infinite;
+ animation-delay: calc(var(--bar-i, 0) * 0.09s);
+}
+
+@keyframes hero-logo-float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 50% {
+ transform: translateY(-6px);
+ }
+}
+
+@keyframes hero-logo-bar-pulse {
+ 0%,
+ 100% {
+ transform: scaleY(0.72);
+ opacity: 0.88;
+ }
+
+ 50% {
+ transform: scaleY(1.28);
+ opacity: 1;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .hero-logo-diagram__stage,
+ .hero-logo-diagram__bar {
+ animation: none;
+ }
+
+ .hero-logo-diagram__stage {
+ opacity: 0.75;
+ }
+
+ .hero-logo-diagram__wordmark {
+ opacity: 1;
+ }
+
+ .hero-logo-diagram__peaks {
+ opacity: 0.68;
+ transform: scaleY(1.42);
+ }
+
+ .hero-logo-diagram__bar {
+ transform: scaleY(1);
+ opacity: 1;
+ }
+}
+
+.hero-home__content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: clamp(1.15rem, 2.2vh, 1.65rem);
+ max-width: 36rem;
+ margin-inline: 0;
+ text-align: left;
+}
+
+.hero-home__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 5vw, 3.75rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.035em;
+ color: var(--openms-navy);
+ text-align: left;
+ text-wrap: balance;
+}
+
+@media (min-width: 1200px) {
+ .hero-home__title {
+ font-size: clamp(3.5rem, 4.5vw, 4.5rem);
+ }
+}
+
+.hero-home__actions-block {
+ display: flex;
+ flex-direction: column;
+ gap: clamp(0.65rem, 1.2vh, 0.85rem);
+ margin-top: clamp(0.35rem, 0.8vh, 0.55rem);
+ justify-items: start;
+ width: 100%;
+}
+
+.hero-home__eyebrow {
+ display: inline-block;
+ margin: 0 0 0.85rem;
+ padding: 0.25rem 0.62rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.75rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.2);
+ border-radius: 999px;
+}
+
+.hero-home__title-accent {
+ display: inline;
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 55%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.hero-home__description {
+ margin: 0;
+ max-width: 42ch;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.65;
+ color: rgba(var(--openms-dark-rgb), 0.82);
+ text-align: left;
+ text-wrap: pretty;
+}
+
+.hero-home__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: clamp(0.65rem, 1.2vw, 0.85rem);
+ align-items: center;
+ justify-content: flex-start;
+}
+
+.hero-home__btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ text-decoration: none;
+}
+
+.hero-home__btn--secondary {
+ color: var(--openms-navy);
+ background: var(--openms-white);
+ border: 2px solid rgba(var(--openms-navy-rgb), 0.18);
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ box-shadow: 0 0 0 0 rgba(var(--openms-blue-rgb), 0.18);
+ transition: var(--openms-btn-motion, transform 0.35s cubic-bezier(0.44, 0, 0.56, 1),
+ box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1));
+}
+
+.hero-home__btn--secondary:hover,
+.hero-home__btn--secondary:focus-visible {
+ border-color: rgba(var(--openms-navy-rgb), 0.18);
+ color: var(--openms-navy);
+ transform: scale(var(--openms-btn-hover-scale, 1.03));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-blue-rgb), 0.18);
+ outline: none;
+}
+
+.hero-home__note {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 0.35rem 1.15rem;
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ line-height: 1.5;
+ color: rgba(var(--openms-dark-rgb), 0.62);
+ text-align: left;
+}
+
+.hero-home__note-sep {
+ color: rgba(var(--openms-navy-rgb), 0.28);
+ user-select: none;
+}
+
+.hero-home__panel {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: clamp(16rem, 32vh, 22rem);
+}
+
+.hero-home__panel-inner {
+ display: grid;
+ gap: 0.75rem;
+ width: 100%;
+ max-width: 22rem;
+ margin-inline: auto;
+}
+
+.hero-home__panel-label {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.55);
+}
+
+@media (max-width: 900px) {
+ .hero-home__inner {
+ gap: 1.5rem;
+ }
+
+ .hero-home::before {
+ width: 100%;
+ height: 45%;
+ top: auto;
+ bottom: 0;
+ }
+
+ .hero-home__description {
+ max-width: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .hero-home__btn--secondary:hover,
+ .hero-home__btn--secondary:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/hero-sponsors.css b/assets/css/hero-sponsors.css
new file mode 100644
index 00000000..9e8ebd42
--- /dev/null
+++ b/assets/css/hero-sponsors.css
@@ -0,0 +1,202 @@
+/* Sponsor strip — full band between hero and What is OpenMS? */
+
+.hero-modern-wrap {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+.hero-modern-wrap > .hero-modern {
+ flex-shrink: 0;
+}
+
+.hero-sponsors {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 100%;
+ min-height: clamp(11rem, 24vh, 17rem);
+ margin: 0;
+ padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.25rem, 4vw, 2.5rem)
+ clamp(2.5rem, 5vh, 3.75rem);
+ box-sizing: border-box;
+ background: var(--openms-white);
+ border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ border-bottom: none;
+}
+
+.hero-sponsors__inner {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: center;
+ gap: clamp(1rem, 2.5vh, 1.5rem);
+ width: 100%;
+ max-width: 75rem;
+ margin: 0 auto;
+ flex: 1 1 auto;
+}
+
+.hero-sponsors__intro {
+ margin: 0;
+ min-width: 0;
+ text-align: center;
+}
+
+.hero-sponsors__label {
+ display: inline-block;
+ margin: 0 0 0.65rem;
+ padding: 0.3rem 0.72rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.2);
+ border-radius: 999px;
+}
+
+.hero-sponsors__description {
+ margin: 0.35rem auto 0;
+ max-width: 36rem;
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.75rem, 1vw + 0.5rem, var(--openms-body-size));
+ line-height: 1.5;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+ text-wrap: pretty;
+}
+
+.hero-sponsors__logos {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ align-items: stretch;
+ gap: clamp(0.5rem, 1.5vw, 0.875rem);
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.hero-sponsors__logo-item {
+ min-width: 0;
+ display: flex;
+}
+
+.hero-sponsors__logo-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-height: clamp(2.75rem, 6vw, 3.4rem);
+ padding: clamp(0.4rem, 1.2vw, 0.65rem) clamp(0.55rem, 1.6vw, 0.85rem);
+ border-radius: 0.5rem;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+@media (hover: hover) {
+ .hero-sponsors__logo-link:hover,
+ .hero-sponsors__logo-link:focus-visible {
+ background: transparent;
+ transform: translateY(-2px);
+ box-shadow: none;
+ transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease,
+ box-shadow 0.2s ease;
+ }
+}
+
+.hero-sponsors__logo-link:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 3px;
+}
+
+.hero-sponsors__logo-img {
+ display: block;
+ max-height: clamp(1.35rem, 3.2vw, 1.95rem);
+ width: auto;
+ max-width: 100%;
+ object-fit: contain;
+ filter: brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(1038%)
+ hue-rotate(185deg) brightness(95%) contrast(96%);
+ opacity: 1;
+ transition: opacity 0.2s ease;
+}
+
+.hero-sponsors__logo-link:hover .hero-sponsors__logo-img,
+.hero-sponsors__logo-link:focus-visible .hero-sponsors__logo-img {
+ opacity: 1;
+}
+
+.hero-sponsors__logo-item:nth-child(2) .hero-sponsors__logo-img {
+ max-height: clamp(1.65rem, 3.8vw, 2.3rem);
+}
+
+/* Wide screens — logos span full inner width */
+@media (min-width: 48rem) {
+ .hero-sponsors__logos {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ max-width: none;
+ }
+}
+
+/* Tablet & mobile — room for stats bar overlapping from hero */
+@media (max-width: 48rem) {
+ .hero-sponsors {
+ min-height: clamp(14rem, 38vh, 20rem);
+ padding-top: clamp(6.25rem, 24vw, 8rem);
+ padding-bottom: clamp(1.75rem, 4vh, 2.5rem);
+ border-top: none;
+ }
+
+ .hero-sponsors__inner {
+ gap: 1rem;
+ }
+
+ .hero-sponsors__logos {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.5rem;
+ }
+
+ .hero-sponsors__logo-link {
+ min-height: 2.5rem;
+ padding: 0.4rem 0.35rem;
+ }
+
+ .hero-sponsors__logo-img {
+ max-height: 1.35rem;
+ }
+}
+
+@media (max-width: 24rem) {
+ .hero-sponsors__logos {
+ grid-template-columns: 1fr;
+ max-width: 14rem;
+ margin-inline: auto;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .hero-sponsors__logo-link:hover,
+ .hero-sponsors__logo-link:focus-visible {
+ transform: none;
+ }
+}
+
+@media (prefers-contrast: more) {
+ .hero-sponsors__label {
+ color: var(--openms-dark);
+ }
+
+ .hero-sponsors__logo-link {
+ border-color: var(--openms-white);
+ }
+
+ .hero-sponsors__logo-img {
+ opacity: 1;
+ }
+}
diff --git a/assets/css/hero.css b/assets/css/hero.css
new file mode 100644
index 00000000..937d8c22
--- /dev/null
+++ b/assets/css/hero.css
@@ -0,0 +1,880 @@
+/* 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 {
+ position: relative;
+ width: 100%;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below {
+ width: min(100%, 75rem);
+ max-width: 75rem;
+ margin: clamp(1rem, 2.5vh, 1.5rem) auto 0;
+ padding: clamp(1.25rem, 3vh, 1.75rem) clamp(1rem, 4vw, 2rem);
+ min-height: clamp(7rem, 16vh, 9.5rem);
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: clamp(0.85rem, 2vw, 1.35rem);
+ align-items: stretch;
+ grid-column: unset;
+ justify-self: unset;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ gap: 0.45rem;
+ min-height: clamp(5.25rem, 12vh, 6.75rem);
+ padding: clamp(1rem, 2.4vh, 1.35rem) clamp(0.85rem, 2vw, 1.25rem);
+ border-radius: 0;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ position: relative;
+ overflow: hidden;
+ isolation: isolate;
+ transition:
+ transform 0.22s ease,
+ box-shadow 0.22s ease,
+ border-color 0.22s ease;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card::before {
+ content: none;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card::after {
+ content: none;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(1)::before {
+ background: linear-gradient(180deg, var(--openms-yellow) 0%, var(--openms-orange) 100%);
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(1)::after {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(var(--openms-yellow-rgb), 0.2) 0%,
+ transparent 70%
+ );
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(3)::before {
+ background: linear-gradient(180deg, var(--openms-blue) 0%, var(--openms-purple) 100%);
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(3)::after {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(var(--openms-blue-rgb), 0.18) 0%,
+ transparent 70%
+ );
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(5)::before {
+ background: linear-gradient(180deg, var(--openms-pink) 0%, var(--openms-purple) 100%);
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(5)::after {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(var(--openms-pink-rgb), 0.16) 0%,
+ transparent 70%
+ );
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-sep {
+ display: none;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-number {
+ order: -1;
+ margin: 0;
+ min-width: 3ch;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.85rem, 3.2vw, 2.65rem);
+ font-weight: 800;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: -0.03em;
+ line-height: 1;
+ color: var(--openms-navy);
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-label {
+ margin: 0;
+ max-width: 12ch;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ font-weight: 600;
+ font-size: clamp(0.7rem, 0.95vw, 0.8rem);
+ line-height: 1.3;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-icon {
+ display: inline-flex;
+ width: 1.5rem;
+ height: 1.5rem;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.4rem;
+ color: rgba(var(--openms-navy-rgb), 0.9);
+ background: rgba(var(--openms-navy-rgb), 0.08);
+ flex: 0 0 auto;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-icon svg {
+ width: 1rem;
+ height: 1rem;
+ display: block;
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(1) .hero-modern__stat-icon {
+ color: rgba(var(--openms-orange-rgb), 0.95);
+ background: rgba(var(--openms-yellow-rgb), 0.2);
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(3) .hero-modern__stat-icon {
+ color: rgba(var(--openms-blue-rgb), 0.95);
+ background: rgba(var(--openms-blue-rgb), 0.16);
+}
+
+.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(5) .hero-modern__stat-icon {
+ color: rgba(var(--openms-pink-rgb), 0.92);
+ background: rgba(var(--openms-pink-rgb), 0.16);
+}
+
+@media (hover: hover) {
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card:hover {
+ transform: translateY(-3px);
+ border-color: transparent;
+ box-shadow: none;
+ }
+}
+
+@media (min-width: 1280px) {
+ .hero-modern-wrap > .hero-modern__stats--below {
+ padding: 1.5rem clamp(2rem, 4vw, 2.5rem);
+ gap: 1.35rem;
+ min-height: 9.5rem;
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card {
+ min-height: 6.75rem;
+ padding: 1.35rem 1.5rem;
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-number {
+ font-size: clamp(2.1rem, 2.4vw, 2.75rem);
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-label {
+ font-size: 0.8rem;
+ max-width: none;
+ }
+}
+
+.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: var(--openms-btn-padding, 0.7rem 1.25rem);
+ font-size: var(--openms-body-size-lg);
+ font-weight: 600;
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ text-decoration: none;
+ cursor: pointer;
+ transition: var(--openms-btn-motion, transform 0.35s cubic-bezier(0.44, 0, 0.56, 1),
+ box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1));
+}
+
+.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-blue-secondary);
+ border: 2px solid var(--openms-blue-secondary);
+ box-shadow: 0 0 0 0 rgba(var(--openms-blue-secondary-rgb), 0.22);
+}
+
+.hero-modern__btn--primary:hover,
+.hero-modern__btn--primary:focus-visible {
+ transform: scale(var(--openms-btn-hover-scale, 1.03));
+ background: var(--openms-blue-secondary);
+ border-color: var(--openms-blue-secondary);
+ box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-blue-secondary-rgb), 0.22);
+ color: var(--openms-white);
+}
+
+.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);
+ box-shadow: 0 0 0 0 rgba(var(--openms-white-rgb), 0.18);
+}
+
+.hero-modern__btn--secondary:hover,
+.hero-modern__btn--secondary:focus-visible {
+ transform: scale(var(--openms-btn-hover-scale, 1.03));
+ background: rgba(var(--openms-white-rgb), 0.15);
+ border-color: var(--openms-white);
+ box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-white-rgb), 0.18);
+ 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-wrap > .hero-modern__stats--below {
+ width: calc(100% - 1.5rem);
+ margin-top: 0.85rem;
+ min-height: clamp(6.5rem, 18vh, 8rem);
+ padding: 0.85rem 0.65rem;
+ gap: 0.5rem;
+ border-radius: 0.75rem;
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-sep {
+ display: none;
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card {
+ min-height: clamp(4.75rem, 14vh, 5.75rem);
+ padding: 0.75rem 0.35rem;
+ gap: 0.35rem;
+ border-radius: 0.6rem;
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-number {
+ font-size: clamp(1.5rem, 5.5vw, 1.85rem);
+ min-width: auto;
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-label {
+ font-size: var(--openms-text-min);
+ letter-spacing: 0.04em;
+ 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: var(--openms-btn-padding, 0.7rem 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-wrap > .hero-modern__stats--below {
+ gap: 0.375rem;
+ padding: 0.65rem 0.5rem;
+ min-height: 6rem;
+ }
+
+ .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card {
+ min-height: 4.5rem;
+ padding: 0.65rem 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/heroitems.css b/assets/css/heroitems.css
index 05ab7531..0fc458bc 100644
--- a/assets/css/heroitems.css
+++ b/assets/css/heroitems.css
@@ -1,20 +1,693 @@
-.heroItemTitle{
- margin-bottom: 0;
- padding: 1rem;
- border-top-right-radius: 5rem;
- border-top-left-radius: 5rem;
+/* OpenMS capabilities ("OpenMS allows users to") — feature cards */
+
+.openms-steps {
+ --openms-steps-accent: rgba(var(--openms-yellow-rgb), 1);
+ padding: clamp(2.75rem, 5.5vh, 4rem) clamp(1.25rem, 4vw, 2.5rem);
+ background: linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--openms-steps-accent) 14%, var(--openms-white)) 0%,
+ var(--openms-white) 32%
+ );
+ border-top: 3px solid var(--openms-steps-accent);
+}
+
+.openms-steps__inner {
+ max-width: 75rem;
+ margin: 0 auto;
+}
+
+.openms-steps__header {
+ max-width: 44rem;
+ margin: 0 auto clamp(1.75rem, 3.5vh, 2.5rem);
+ text-align: center;
+}
+
+.openms-steps__eyebrow {
+ display: inline-block;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.85rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--openms-navy);
+ background: color-mix(in srgb, var(--openms-steps-accent) 35%, var(--openms-white));
+ border: 1px solid color-mix(in srgb, var(--openms-steps-accent) 55%, transparent);
+ border-radius: 999px;
+}
+
+.openms-steps__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.openms-steps__title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-navy) 0%,
+ color-mix(in srgb, var(--openms-steps-accent) 70%, var(--openms-navy)) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.openms-steps__subtitle {
+ margin: 0.85rem auto 0;
+ max-width: 50ch;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-dark-rgb), 0.82);
+ text-wrap: pretty;
+}
+
+/* Capabilities — trusted-by style compact tiles */
+.openms-steps--users {
+ --showcase-media-min-h: clamp(14rem, 28vw, 20rem);
+ --showcase-img-max-h: clamp(11rem, 20vw, 16.5rem);
+
+ position: relative;
+ overflow: hidden;
+ border-top: none;
+ background: var(--openms-white);
+ color: var(--openms-dark);
+}
+
+.openms-steps--users::before,
+.openms-steps--users::after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.openms-steps--users::before {
+ top: -45%;
+ right: -10%;
+ width: 32rem;
+ height: 32rem;
+ background: radial-gradient(
+ circle,
+ rgba(var(--openms-blue-rgb), 0.1) 0%,
+ transparent 70%
+ );
+}
+
+.openms-steps--users::after {
+ bottom: -34%;
+ left: -6%;
+ width: 26rem;
+ height: 26rem;
+ background: radial-gradient(
+ circle,
+ rgba(var(--openms-orange-rgb), 0.1) 0%,
+ transparent 70%
+ );
+}
+
+.openms-steps--users .openms-steps__inner {
+ max-width: none;
+ width: 100%;
+ position: relative;
+ z-index: 1;
+}
+
+.openms-steps--users .openms-steps__header {
+ max-width: 50rem;
+ margin: 0 auto clamp(1.35rem, 3vh, 2rem);
+ text-align: center;
+}
+
+.openms-steps--users .openms-steps__eyebrow {
+ display: inline-block;
+ margin: 0 0 0.65rem;
+ padding: 0.3rem 0.72rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.2);
+ border-radius: 999px;
+}
+
+.openms-steps--users .openms-steps__subtitle {
+ margin-left: auto;
+ margin-right: auto;
+ color: rgba(var(--openms-dark-rgb), 0.82);
+}
+
+.openms-steps--users .openms-steps__title {
+ color: var(--openms-navy);
+}
+
+.openms-steps--users .openms-steps__title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 50%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.openms-steps--users .openms-steps__grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: clamp(1rem, 2vw, 1.5rem);
+ align-items: stretch;
+}
+
+/* Users — image-forward showcase cards */
+.openms-steps--users .openms-step--showcase {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ min-height: 100%;
+ padding: 0;
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+ border-radius: 1rem;
+ background: var(--openms-white);
+ box-shadow: 0 0.35rem 1.25rem rgba(var(--openms-dark-rgb), 0.07);
+ overflow: hidden;
+ transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
+}
+
+.openms-steps--users .openms-step--showcase:hover {
+ transform: translateY(-4px);
+ border-color: rgba(var(--openms-blue-rgb), 0.22);
+ box-shadow: 0 0.85rem 2rem rgba(var(--openms-blue-rgb), 0.16);
+}
+
+.openms-steps--users .openms-step--showcase .openms-step__media {
+ order: -1;
+ flex: 1 1 auto;
+ width: 100%;
+ min-height: var(--showcase-media-min-h);
+ margin: 0;
+ padding: clamp(0.85rem, 1.8vw, 1.35rem) clamp(0.85rem, 1.6vw, 1.25rem);
+ border: none;
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.06);
+ border-radius: 0;
+ background: linear-gradient(
+ 165deg,
+ rgba(var(--openms-blue-rgb), 0.08) 0%,
+ rgba(var(--openms-white-rgb), 1) 58%,
+ color-mix(in srgb, var(--openms-steps-accent) 18%, var(--openms-white)) 100%
+ );
+}
+
+.openms-steps--users .openms-step--showcase .openms-step__img,
+.openms-steps--users .openms-step--showcase .openms-step__img.img-fit {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ max-height: var(--showcase-img-max-h);
+ min-height: clamp(9rem, 16vw, 13.5rem);
+ margin: 0 auto;
+ object-fit: contain;
+ object-position: center;
+ filter: none;
+}
+
+.openms-steps--users .openms-step--showcase .openms-step__content {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ min-width: 0;
+ gap: 0.55rem;
+ padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.15rem, 2.2vw, 1.5rem)
+ clamp(1.25rem, 2.2vw, 1.5rem);
+}
+
+.openms-steps--users .openms-step--showcase .openms-step__title {
+ padding-right: 0;
+ font-size: clamp(1.12rem, 1.55vw, 1.3rem);
+ line-height: 1.24;
+ color: var(--openms-navy);
+}
+
+.openms-steps--users .openms-step--showcase .openms-step__subtitle {
+ font-size: clamp(0.92rem, 1.08vw, 1.02rem);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.8);
+ display: block;
+ overflow: visible;
+ -webkit-line-clamp: unset;
+}
+
+.openms-steps--users .openms-step--showcase .openms-step__cta {
+ align-self: flex-start;
+ margin-top: auto;
+ padding-top: 0.35rem;
+}
+
+@media (min-width: 1440px) {
+ .openms-steps--users {
+ padding-left: clamp(2.5rem, 6vw, 6rem);
+ padding-right: clamp(2.5rem, 6vw, 6rem);
+ }
+
+ .openms-steps--users .openms-steps__grid {
+ gap: 1.5rem;
+ }
+
+ .openms-steps--users {
+ --showcase-media-min-h: 21rem;
+ --showcase-img-max-h: 17.5rem;
+ }
+}
+
+/* Developers — two wide feature panels */
+.openms-steps--developers {
+ position: relative;
+ overflow: hidden;
+ background: var(--openms-navy);
+ color: var(--openms-white);
+ border-top-color: rgba(var(--openms-white-rgb), 0.08);
+}
+
+.openms-steps--developers::before,
+.openms-steps--developers::after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.openms-steps--developers::before {
+ top: -45%;
+ right: -8%;
+ width: 34rem;
+ height: 34rem;
+ background: radial-gradient(
+ circle,
+ rgba(var(--openms-white-rgb), 0.14) 0%,
+ transparent 70%
+ );
+}
+
+.openms-steps--developers::after {
+ bottom: -35%;
+ left: -6%;
+ width: 28rem;
+ height: 28rem;
+ background: radial-gradient(
+ circle,
+ rgba(var(--openms-purple-rgb), 0.18) 0%,
+ transparent 70%
+ );
+}
+
+.openms-steps--developers .openms-steps__eyebrow {
+ color: var(--openms-yellow);
+ background: rgba(var(--openms-white-rgb), 0.08);
+ border-color: rgba(var(--openms-white-rgb), 0.2);
+}
+
+.openms-steps--developers .openms-steps__inner {
+ position: relative;
+ z-index: 1;
+}
+
+.openms-steps--developers .openms-steps__header {
+ text-align: center;
+ margin: 0 auto clamp(1.5rem, 3vh, 2.25rem);
+ max-width: 56rem;
+ position: static;
+ top: auto;
+}
+
+.openms-steps--developers .openms-steps__title {
+ color: var(--openms-white);
+}
+
+.openms-steps--developers .openms-steps__title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-yellow) 0%,
+ var(--openms-orange) 42%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.openms-steps--developers .openms-steps__subtitle {
+ margin-left: auto;
+ margin-right: auto;
+ color: rgba(var(--openms-white-rgb), 0.9);
+}
+
+.openms-steps--developers .openms-steps__grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: clamp(0.85rem, 1.75vw, 1.25rem);
+}
+
+.openms-steps--developers .openms-step {
+ border-color: rgba(var(--openms-white-rgb), 0.16);
+ background: rgba(var(--openms-white-rgb), 0.08);
+ box-shadow: 0 0.35rem 1.25rem rgba(var(--openms-dark-rgb), 0.35);
+}
+
+.openms-steps--developers .openms-step__tag {
+ display: inline-block;
+ width: fit-content;
+ margin: 0 0 0.35rem;
+ padding: 0.28rem 0.6rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--openms-yellow);
+ background: rgba(var(--openms-white-rgb), 0.08);
+ border: 1px solid rgba(var(--openms-white-rgb), 0.18);
+ border-radius: 0.35rem;
}
-.heroBottomRadius{
- border-bottom-left-radius: 5rem;
- border-bottom-right-radius: 5rem;
+.openms-steps--developers .openms-step__title {
+ color: var(--openms-white);
+}
+
+.openms-steps--developers .openms-step__subtitle {
+ color: rgba(var(--openms-white-rgb), 0.9);
+}
+
+.openms-steps__grid {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
+ gap: clamp(0.75rem, 1.5vw, 1.15rem);
+}
+
+.openms-steps__item {
+ margin: 0;
+ min-width: 0;
+ display: flex;
+}
+
+.openms-step {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ border-radius: 0.9rem;
+ background: var(--openms-white);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ box-shadow: 0 0.25rem 1rem rgba(var(--openms-dark-rgb), 0.06);
+ overflow: hidden;
+ transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.openms-step:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ box-shadow: 0 0.5rem 1.35rem rgba(var(--openms-blue-rgb), 0.12);
+ transform: translateY(-2px);
+}
+
+.openms-step__index {
+ display: none;
+}
+
+.openms-step__media {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 9.5rem;
+ padding: clamp(1rem, 2.5vw, 1.35rem);
+ background: linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--openms-steps-accent) 10%, var(--openms-white)) 0%,
+ rgba(var(--openms-navy-rgb), 0.03) 100%
+ );
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.openms-step__img {
+ display: block;
+ max-width: 100%;
+ max-height: 8.5rem;
+ width: auto;
+ height: auto;
+ object-fit: contain;
+}
+
+.openms-step__img.img-fit {
+ max-height: 7rem;
+}
+
+.openms-step__terminal {
+ width: 100%;
+ max-width: 100%;
+}
+
+.openms-step__terminal .terminal-window {
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+}
+
+.openms-steps--developers .openms-step {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ min-height: 11.5rem;
+}
+
+.openms-steps--developers .openms-step__media {
+ order: 1;
+ min-height: 9.5rem;
+ border-left: none;
+ border-bottom: 1px solid rgba(var(--openms-white-rgb), 0.12);
+ background: rgba(var(--openms-white-rgb), 0.06);
+}
+
+.openms-steps--developers .openms-step__content {
+ order: 2;
+ justify-content: center;
+}
+
+.openms-steps--developers .openms-step--terminal .openms-step__media {
+ width: 100%;
+ padding: 0.65rem;
+ background: rgba(var(--openms-dark-rgb), 0.92);
+ border-bottom-color: rgba(var(--openms-white-rgb), 0.12);
+}
+
+.openms-steps--developers .openms-step:nth-child(even) .openms-step__media {
+ order: 2;
+ border-bottom: none;
+ border-top: 1px solid rgba(var(--openms-white-rgb), 0.12);
+}
+
+.openms-steps--developers .openms-step:nth-child(even) .openms-step__content {
+ order: 1;
+}
+
+.openms-steps--developers .openms-step--terminal .openms-step__terminal .terminal-window {
+ height: 11rem;
+ min-height: 11rem;
+ border-radius: 0.5rem;
+}
+
+.openms-steps--developers .openms-step--terminal .terminal-window section.terminal {
+ font-size: 0.625rem;
+ line-height: 1.45;
+}
+
+.openms-step__content {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ gap: 0.65rem;
+ padding: clamp(1rem, 2vw, 1.2rem) clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2vw, 1.35rem);
+}
+
+.openms-step__title {
+ margin: 0;
+ padding-right: 2rem;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 1.6vw, 1.125rem);
+ font-weight: 700;
+ line-height: 1.28;
+ color: var(--openms-navy);
+ letter-spacing: -0.01em;
+ text-wrap: balance;
+}
+
+.openms-step__subtitle {
+ margin: 0;
+ flex: 1 1 auto;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.8);
+ text-wrap: pretty;
+}
+
+.openms-step__cta {
+ margin-top: 0.25rem;
+}
+
+.openms-step__cta-arrow {
+ transition: transform 0.2s ease;
+}
+
+.openms-step__cta:hover .openms-step__cta-arrow,
+.openms-step__cta:focus-visible .openms-step__cta-arrow {
+ transform: translateX(0.15rem);
+}
+
+@media (max-width: 1024px) {
+ .openms-steps--users .openms-steps__inner {
+ max-width: none;
+ }
+
+ .openms-steps--users .openms-steps__header {
+ max-width: 52rem;
+ }
+
+ .openms-steps--users .openms-steps__grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .openms-steps--developers .openms-steps__inner {
+ display: block;
+ }
+
+ .openms-steps--developers .openms-steps__header {
+ max-width: 56rem;
+ }
+
+ .openms-steps--developers .openms-steps__grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 768px) {
+ .openms-steps--users .openms-steps__grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .openms-steps--users {
+ --showcase-media-min-h: clamp(12rem, 24vw, 14.5rem);
+ --showcase-img-max-h: clamp(9.5rem, 18vw, 11.5rem);
+ }
+
+ .openms-steps--users .openms-step--showcase .openms-step__img,
+ .openms-steps--users .openms-step--showcase .openms-step__img.img-fit {
+ min-height: clamp(8rem, 15vw, 9.5rem);
+ }
+
+ .openms-steps--developers .openms-step {
+ min-height: auto;
+ }
+
+ .openms-steps--developers .openms-step__media {
+ order: 1;
+ width: 100%;
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+ border-top: none;
+ min-height: 8.5rem;
+ }
+
+ .openms-steps--developers .openms-step__content {
+ order: 2;
+ }
+
+ .openms-steps--developers .openms-step:nth-child(even) .openms-step__media {
+ order: 1;
+ border-top: none;
+ }
+
+ .openms-steps--developers .openms-step:nth-child(even) .openms-step__content {
+ order: 2;
+ }
+
+ .openms-steps--developers .openms-step--terminal .openms-step__media {
+ min-height: 10rem;
+ }
+
+ .openms-steps--developers .openms-step--terminal .openms-step__terminal .terminal-window {
+ min-height: 9rem;
+ height: 9rem;
+ }
+}
+
+@media (max-width: 640px) {
+ .openms-steps__header {
+ text-align: left;
+ margin-inline: 0;
+ }
+
+ .openms-steps__grid,
+ .openms-steps--developers .openms-steps__grid {
+ grid-template-columns: 1fr;
+ }
+
+ .openms-step__cta {
+ width: 100%;
+ }
+
+ .openms-steps--users .openms-step__cta {
+ width: auto;
+ }
+}
+
+@media (max-width: 520px) {
+ .openms-steps--users .openms-steps__grid {
+ grid-template-columns: 1fr;
+ }
+
+ .openms-steps--users {
+ --showcase-media-min-h: clamp(13.5rem, 38vw, 16rem);
+ --showcase-img-max-h: clamp(11rem, 28vw, 13.5rem);
+ }
+
+ .openms-steps--users .openms-step--showcase .openms-step__img,
+ .openms-steps--users .openms-step--showcase .openms-step__img.img-fit {
+ min-height: clamp(9.5rem, 24vw, 11.5rem);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .openms-step:hover,
+ .openms-steps--users .openms-step--showcase:hover {
+ transform: none;
+ }
+
+ .openms-step__cta:hover,
+ .openms-step__cta:focus-visible {
+ transform: none;
+ }
+
+ .openms-step__cta-arrow {
+ transition: none;
+ }
}
-.hero-cta {
- display: inherit;
- justify-content: center;
+@media (prefers-contrast: more) {
+ .openms-step {
+ border-color: var(--openms-navy);
+ }
}
-.subtitle.is-5 {
- text-transform: none;
-}
\ No newline at end of file
diff --git a/assets/css/home-metrics.css b/assets/css/home-metrics.css
new file mode 100644
index 00000000..5098a0e0
--- /dev/null
+++ b/assets/css/home-metrics.css
@@ -0,0 +1,99 @@
+/* Homepage metrics — standalone section below hero */
+
+.home-metrics {
+ position: relative;
+ z-index: 2;
+ background: var(--home-bg-soft);
+ padding-block: var(--home-section-space-y);
+}
+
+.home-metrics__grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: clamp(1rem, 2.5vw, 1.5rem);
+ width: 100%;
+}
+
+.home-metrics__card {
+ position: relative;
+ display: grid;
+ gap: 0.65rem;
+ align-content: start;
+ padding: clamp(1rem, 2vw, 1.35rem);
+ border-radius: 0.75rem;
+ text-align: left;
+ background: var(--openms-white);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.home-metrics__label {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: 0.95rem;
+ font-weight: 600;
+ line-height: 1.3;
+ letter-spacing: -0.01em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.home-metrics__value {
+ display: flex;
+ align-items: flex-end;
+ flex-wrap: wrap;
+ gap: 0.1rem 0.15rem;
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-weight: 800;
+ font-variant-numeric: tabular-nums;
+ line-height: 0.9;
+ letter-spacing: -0.04em;
+ color: var(--openms-navy);
+}
+
+.home-metrics__prefix,
+.home-metrics__suffix {
+ font-size: clamp(2rem, 4.5vw, 3rem);
+ font-weight: 800;
+ line-height: 0.9;
+ letter-spacing: -0.04em;
+}
+
+.home-metrics__value .hero-modern__stat-number {
+ font: inherit;
+ color: inherit;
+ font-size: clamp(2.75rem, 6vw, 4.25rem);
+}
+
+.home-metrics__description {
+ margin: 0;
+ max-width: 18rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.9rem;
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.62);
+ text-wrap: pretty;
+}
+
+@media (max-width: 720px) {
+ .home-metrics__grid {
+ grid-template-columns: 1fr;
+ gap: 0.85rem;
+ }
+
+ .home-metrics__card {
+ padding: clamp(1rem, 2vw, 1.25rem);
+ }
+
+ .home-metrics__description {
+ max-width: none;
+ }
+}
+
+@media (max-width: 768px) {
+ .home-metrics__value .hero-modern__stat-number,
+ .home-metrics__prefix,
+ .home-metrics__suffix {
+ font-size: clamp(2rem, 9vw, 2.75rem);
+ }
+}
diff --git a/assets/css/home-section-head.css b/assets/css/home-section-head.css
new file mode 100644
index 00000000..813c3520
--- /dev/null
+++ b/assets/css/home-section-head.css
@@ -0,0 +1,129 @@
+/* Homepage — unified section hero headings (layout + typography) */
+
+.home-page {
+ --home-section-head-max: min(100%, 46rem);
+ --home-section-head-gap: clamp(2rem, 4vh, 2.75rem);
+ --home-section-head-title-size: clamp(2rem, 4.2vw, 3.15rem);
+}
+
+.home-page .home-page__block--projects .webapps-featured__header-main,
+.home-page .community-events-home__header-main,
+.home-page .contact-home__header,
+.home-page .home-page__block--ecosystem .ecosystem-home__header-main,
+.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__header-main {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+ max-width: var(--home-section-head-max);
+ margin-inline: 0;
+ text-align: left;
+}
+
+.home-page .home-page__block--projects .webapps-featured__header--home,
+.home-page .community-events-home__header,
+.home-page .home-page__block--ecosystem .ecosystem-home__header,
+.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__header {
+ display: block;
+ margin: 0 0 var(--home-section-head-gap);
+ text-align: left;
+}
+
+.home-page .home-page__block--projects .webapps-featured__eyebrow,
+.home-page .community-events-home__eyebrow,
+.home-page .contact-home__eyebrow,
+.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: none;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.18);
+ border-radius: 999px;
+}
+
+.home-page .home-page__block--projects .webapps-featured__title,
+.home-page .home-page__block--ecosystem .ecosystem-home__title,
+.home-page .community-events-home__title,
+.home-page .contact-home__title,
+.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: var(--home-section-head-title-size);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.03em;
+ color: var(--openms-navy);
+ text-align: left;
+ text-wrap: balance;
+}
+
+.home-page .home-page__block--projects .webapps-featured__title-accent,
+.home-page .home-page__block--ecosystem .ecosystem-home__title-accent,
+.home-page .community-events-home__title-accent,
+.home-page .contact-home__title-accent,
+.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__title-accent {
+ display: inline;
+ color: var(--openms-blue);
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ -webkit-text-fill-color: currentColor;
+}
+
+.home-page .home-page__block--projects .webapps-featured__header-main .webapps-featured__lead,
+.home-page .community-events-home__lead,
+.home-page .contact-home__description,
+.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead {
+ margin: 0.85rem 0 0;
+ max-width: 52ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ text-align: left;
+ text-wrap: pretty;
+}
+
+.home-page .home-page__block--projects .webapps-featured__header-main .webapps-featured__lead,
+.home-page .community-events-home__lead,
+.home-page .contact-home__description,
+.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead {
+ color: rgba(var(--openms-dark-rgb), 0.72);
+}
+
+/* Community — same heading scale on dark photo panel */
+.home-page .community-home__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: var(--home-section-head-title-size);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.03em;
+ color: var(--openms-white);
+ text-align: left;
+ text-wrap: balance;
+}
+
+.home-page .community-home__title-accent {
+ display: inline;
+ color: var(--openms-blue-secondary);
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ -webkit-text-fill-color: currentColor;
+}
+
+.home-page .community-home__lead {
+ margin: 0.85rem 0 0;
+ max-width: 52ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ text-align: left;
+ color: rgba(var(--openms-white-rgb), 0.88);
+}
diff --git a/assets/css/home.css b/assets/css/home.css
new file mode 100644
index 00000000..048b4a6b
--- /dev/null
+++ b/assets/css/home.css
@@ -0,0 +1,2222 @@
+/* Homepage — each section has its own layout pattern */
+
+.home-page {
+ --home-max: 75rem;
+ --home-pad-x: clamp(1.25rem, 4vw, 2.5rem);
+ --home-pad-y: clamp(3rem, 6.5vh, 5rem);
+ --home-section-space-y: clamp(3.75rem, 7.5vh, 5.75rem);
+ --home-projects-pad-y: clamp(4.5rem, 8.5vh, 6.5rem);
+ --home-section-pad: var(--home-section-space-y);
+ --home-section-gap: var(--home-section-space-y);
+ --home-head: clamp(1.85rem, 3.8vw, 2.65rem);
+ --home-lead: var(--openms-body-size-lg);
+ --home-line: rgba(var(--openms-navy-rgb), 0.1);
+ --home-reveal-distance: 1.5rem;
+ --home-reveal-duration: 0.65s;
+ --home-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+ --home-bg-base: #ffffff;
+ --home-bg-soft: #f4f6fa;
+ --home-bg-mist: #f8fafc;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+ background: var(--home-bg-base);
+}
+
+/* ── Section background blends (smooth transitions between blocks) ── */
+.site-header:has(.news-banner) #nav.navbar.is-fresh {
+ border-top: none;
+}
+
+.home-page__hero {
+ --hero-space-sm: clamp(0.75rem, 1.5vh, 1rem);
+ --hero-space-md: clamp(1.15rem, 2.2vh, 1.65rem);
+ --hero-space-lg: clamp(2rem, 4.5vh, 3.25rem);
+ --hero-col-gap: clamp(2rem, 5vw, 4.5rem);
+ --hero-diagram-max: clamp(20rem, 44vw, 40rem);
+ --hero-diagram-min-h: clamp(11rem, 24vw, 16rem);
+ --hero-diagram-max-h: min(48vh, 24rem);
+ --hero-diagram-inset-right: clamp(1.25rem, 3.5vw, 2.75rem);
+ margin: 0;
+ padding: 0;
+ position: relative;
+ z-index: 3;
+ background: var(--openms-chrome-bg);
+}
+
+.home-page__hero .hero-home {
+ background:
+ radial-gradient(
+ ellipse 80% 55% at 78% 38%,
+ rgba(var(--openms-purple-rgb), 0.14) 0%,
+ transparent 58%
+ ),
+ linear-gradient(
+ 180deg,
+ rgba(var(--openms-blue-rgb), 0.09) 0%,
+ rgba(var(--openms-purple-rgb), 0.05) 14%,
+ var(--openms-chrome-bg) 32%,
+ var(--openms-chrome-bg) 100%
+ );
+ min-height: clamp(34rem, 84vh, 48rem);
+ overflow: visible;
+}
+
+.home-page__hero .hero-home__main {
+ justify-content: flex-start;
+ overflow: visible;
+ padding: var(--hero-space-lg) clamp(1.25rem, 4vw, 2.5rem);
+ padding-bottom: clamp(5rem, 10vh, 7rem);
+}
+
+.home-page__hero .hero-home__hero-grid {
+ align-items: start;
+ gap: var(--hero-col-gap);
+}
+
+@media (min-width: 901px) {
+ .home-page__hero .hero-home__hero-grid {
+ grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
+ grid-template-rows: auto auto;
+ align-items: center;
+ row-gap: clamp(1.25rem, 2.5vh, 2rem);
+ column-gap: var(--hero-col-gap);
+ }
+
+ .home-page__hero .hero-home__copy {
+ grid-column: 1;
+ grid-row: 1;
+ padding-top: clamp(1rem, 3vh, 2.5rem);
+ align-self: start;
+ }
+
+ .home-page__hero .hero-home__footer {
+ grid-column: 1;
+ grid-row: 2;
+ align-self: end;
+ position: relative;
+ z-index: 6;
+ padding-top: 0;
+ }
+
+ .home-page__hero .hero-home__visual {
+ grid-column: 2;
+ grid-row: 1 / -1;
+ justify-self: end;
+ align-self: end;
+ width: min(100%, var(--hero-diagram-max));
+ max-width: var(--hero-diagram-max);
+ margin-right: var(--hero-diagram-inset-right);
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ margin-top: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ .home-page__hero .hero-home__highlights {
+ justify-content: center;
+ }
+
+ .home-page__hero .hero-home__actions-block {
+ margin-top: 0;
+ }
+}
+
+@media (min-width: 901px) and (max-width: 1199px) {
+ .home-page__hero {
+ --hero-diagram-max: clamp(18rem, 40vw, 32rem);
+ --hero-diagram-min-h: clamp(10rem, 22vw, 14rem);
+ }
+}
+
+@media (min-width: 1200px) {
+ .home-page__hero .hero-home__hero-grid {
+ grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
+ }
+
+ .home-page__hero {
+ --hero-diagram-max: clamp(22rem, 42vw, 42rem);
+ --hero-diagram-min-h: clamp(13rem, 26vw, 19rem);
+ --hero-diagram-max-h: min(52vh, 26rem);
+ }
+
+ .home-page__hero .hero-home__footer {
+ grid-template-columns: none;
+ }
+}
+
+.home-page__hero .hero-home__content {
+ gap: clamp(1.25rem, 2.4vh, 1.85rem);
+ max-width: min(100%, 36rem);
+}
+
+.home-page__hero .hero-home__title {
+ color: var(--openms-chrome-text);
+ letter-spacing: -0.04em;
+}
+
+.home-page__hero .hero-home__visual {
+ align-items: stretch;
+ justify-content: center;
+ overflow: visible;
+ padding-top: 0;
+ min-width: 0;
+}
+
+.home-page__hero .hero-home__visual-shell {
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+ overflow: visible;
+ border-color: rgba(var(--openms-white-rgb), 0.16);
+ background:
+ linear-gradient(
+ 165deg,
+ rgba(var(--openms-white-rgb), 0.1) 0%,
+ rgba(var(--openms-white-rgb), 0.04) 42%,
+ rgba(var(--openms-purple-rgb), 0.06) 100%
+ );
+}
+
+.home-page__hero .hero-home__visual-caption {
+ width: 100%;
+}
+
+.home-page__hero .hero-home__highlights {
+ justify-content: center;
+ position: relative;
+ z-index: 6;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+.home-page__hero .hero-logo-diagram {
+ position: relative;
+ z-index: 4;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0;
+ opacity: 1;
+ filter: none;
+}
+
+.home-page__hero .hero-logo-diagram__svg {
+ display: block;
+ width: 100%;
+ height: auto;
+ min-height: var(--hero-diagram-min-h, clamp(9rem, 20vw, 13rem));
+ max-height: var(--hero-diagram-max-h, min(40vh, 20rem));
+ aspect-ratio: 720 / 215;
+ overflow: visible;
+ transform: translateY(clamp(0.35rem, 0.8vh, 0.65rem));
+}
+
+.home-page__hero .hero-logo-diagram__frame {
+ overflow: visible;
+ padding-top: clamp(0.85rem, 2vh, 1.5rem);
+}
+
+.home-page__hero .hero-logo-diagram__wordmark {
+ position: relative;
+ z-index: 5;
+ opacity: 1;
+ margin: clamp(0.15rem, 0.4vh, 0.35rem) 0 0;
+ padding: 0;
+ text-align: center;
+}
+
+.home-page__hero .hero-logo-diagram__peaks {
+ opacity: 0.92;
+}
+
+.home-page__hero .hero-home__footer {
+ width: 100%;
+ position: relative;
+ z-index: 6;
+}
+
+.home-page__hero .hero-home__highlight {
+ color: rgba(var(--openms-white-rgb), 0.78);
+ text-wrap: balance;
+}
+
+.home-page__hero .hero-home__description {
+ color: rgba(var(--openms-white-rgb), 0.86);
+ max-width: 44ch;
+ margin: 0;
+ text-align: left;
+ font-size: clamp(1rem, 1.12vw, 1.125rem);
+ line-height: 1.62;
+}
+
+.home-page__hero .hero-home__actions-block {
+ width: 100%;
+ align-items: flex-start;
+ margin-top: 0;
+}
+
+.home-page__hero .hero-home__btn--primary {
+ min-width: clamp(8.5rem, 18vw, 10.5rem);
+}
+
+.home-page__hero .hero-home__copy {
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+}
+
+.home-page__hero .hero-logo-diagram__chart {
+ margin-top: 0;
+ overflow: visible;
+}
+
+.home-page__hero .hero-home__image {
+ max-width: min(100%, 38rem);
+ width: 100%;
+ opacity: 1;
+ filter: drop-shadow(0 1rem 2rem rgba(var(--openms-dark-rgb), 0.04));
+}
+
+.home-page__hero .hero-home__main {
+ position: relative;
+ z-index: 1;
+}
+
+.home-page__hero .hero-home::before,
+.home-page__hero .hero-home::after {
+ content: none;
+}
+
+.home-page__hero .hero-home__inner {
+ position: relative;
+ z-index: 1;
+ justify-items: stretch;
+ width: 100%;
+}
+
+.home-page__hero .hero-home__actions {
+ justify-content: flex-start;
+}
+
+.home-page__hero .hero-home__note {
+ justify-content: flex-start;
+ text-align: left;
+}
+
+.home-page__hero .hero-home__title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue-secondary) 0%,
+ var(--openms-purple) 50%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.home-page__hero .hero-home__actions-block .hero-home__note {
+ margin-top: 0;
+}
+
+.home-page__hero .hero-home__note {
+ color: var(--openms-chrome-text-muted);
+}
+
+.home-page__hero .hero-home__note-sep {
+ color: rgba(var(--openms-white-rgb), 0.22);
+}
+
+.home-page__hero .hero-home__btn--secondary {
+ color: var(--openms-white);
+ background: rgba(var(--openms-white-rgb), 0.06);
+ border-color: rgba(var(--openms-white-rgb), 0.22);
+ backdrop-filter: blur(6px);
+}
+
+.home-page__hero .hero-home__btn--secondary:hover,
+.home-page__hero .hero-home__btn--secondary:focus-visible {
+ color: var(--openms-white);
+ background: rgba(var(--openms-white-rgb), 0.12);
+ border-color: rgba(var(--openms-white-rgb), 0.38);
+ box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-white-rgb), 0.08);
+}
+
+@media (max-width: 900px) {
+ .home-page__hero {
+ --hero-diagram-max: min(100%, 32rem);
+ --hero-diagram-min-h: clamp(10rem, 38vw, 14rem);
+ --hero-diagram-max-h: min(42vh, 19rem);
+ }
+
+ .home-page__hero .hero-home {
+ min-height: clamp(30rem, 76vh, 40rem);
+ }
+
+ .home-page__hero .hero-home__hero-grid {
+ gap: clamp(1.75rem, 4vh, 2.5rem);
+ }
+
+ .home-page__hero .hero-home__visual {
+ justify-content: center;
+ align-items: stretch;
+ width: 100%;
+ max-width: var(--hero-diagram-max);
+ margin-inline: auto;
+ margin-top: clamp(0.75rem, 2vh, 1.25rem);
+ }
+
+ .home-page__hero .hero-home__visual-shell {
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+ padding: clamp(1rem, 3vw, 1.35rem);
+ }
+
+ .home-page__hero .hero-home__footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: clamp(1rem, 2.5vh, 1.35rem);
+ margin-top: clamp(0.5rem, 1.5vh, 1rem);
+ }
+
+ .home-page__hero .hero-home__image,
+ .home-page__hero .hero-logo-diagram {
+ max-width: 100%;
+ width: 100%;
+ }
+
+ .home-page__hero .hero-logo-diagram__svg {
+ min-height: var(--hero-diagram-min-h);
+ max-height: var(--hero-diagram-max-h);
+ }
+
+ .home-page__hero .hero-home__highlights {
+ justify-content: center;
+ gap: 0;
+ padding: 0;
+ }
+
+ .home-page__hero .hero-home__highlight {
+ font-size: clamp(0.7rem, 2.8vw, 0.78rem);
+ white-space: normal;
+ text-align: center;
+ }
+
+ .home-page__hero .hero-home__main {
+ padding: clamp(1.75rem, 4.5vh, 2.5rem) clamp(1.25rem, 4vw, 2rem);
+ padding-bottom: clamp(2.25rem, 5vh, 3rem);
+ }
+
+ .home-page__hero .hero-home__inner {
+ gap: clamp(1.25rem, 3vh, 1.75rem);
+ }
+
+ .home-page__hero .hero-home__content {
+ max-width: min(100%, 26rem);
+ align-items: center;
+ text-align: center;
+ }
+
+ .home-page__hero .hero-home__title {
+ font-size: clamp(1.75rem, 8vw, 2.5rem);
+ line-height: 1.12;
+ letter-spacing: -0.025em;
+ text-align: center;
+ }
+
+ .home-page__hero .hero-home__description {
+ font-size: clamp(0.86rem, 3.2vw, 0.98rem);
+ line-height: 1.55;
+ max-width: 36ch;
+ text-align: center;
+ }
+
+ .home-page__hero .hero-home__actions {
+ justify-content: center;
+ }
+
+ .home-page__hero .hero-home__actions-block {
+ align-items: center;
+ }
+
+ .home-page__hero .hero-logo-diagram__wordmark {
+ text-align: center;
+ margin: clamp(0.15rem, 0.4vh, 0.35rem) 0 0;
+ padding-right: 0;
+ }
+
+ .home-page__hero .hero-home__visual-shell::before {
+ inset: 0 -8% 8%;
+ }
+}
+
+@media (max-width: 480px) {
+ .home-page__hero .hero-home__title {
+ font-size: clamp(1.55rem, 7.2vw, 2rem);
+ }
+
+ .home-page__hero .hero-home__description {
+ font-size: 0.88rem;
+ max-width: 28ch;
+ }
+
+ .home-page__hero .hero-home__actions {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .home-page__hero .hero-home__actions .hero-home__btn {
+ width: 100%;
+ max-width: 18rem;
+ }
+}
+
+.home-page__block--partners {
+ background: var(--home-bg-base);
+}
+
+.home-page__hero + .home-page__block--partners {
+ background: var(--home-bg-base);
+}
+
+.home-page__block--projects:has(+ .home-page__block--overview) {
+ background: var(--home-bg-base);
+}
+
+.home-page__block--projects:not(:has(+ .home-page__block--overview)) {
+ background: var(--home-bg-base);
+}
+
+.home-page__block--overview {
+ background: linear-gradient(
+ 180deg,
+ var(--home-bg-base) 0%,
+ var(--home-bg-base) 14%,
+ var(--home-bg-base) 76%,
+ var(--home-bg-mist) 100%
+ );
+}
+
+/* ── Homepage scroll / load reveal ── */
+.home-page--motion .home-page__block--partners,
+.home-page--motion .home-page__block--ecosystem,
+.home-page--motion .home-page__block--overview,
+.home-page--motion .home-page__trust,
+.home-page--motion .home-page__block--panel,
+.home-page--motion .home-page__block--content {
+ opacity: 0;
+ transform: translateY(var(--home-reveal-distance));
+ transition:
+ opacity var(--home-reveal-duration) var(--home-reveal-ease),
+ transform var(--home-reveal-duration) var(--home-reveal-ease);
+}
+
+.home-page--motion .home-page__block--partners.is-revealed,
+.home-page--motion .home-page__block--ecosystem.is-revealed,
+.home-page--motion .home-page__block--overview.is-revealed,
+.home-page--motion .home-page__trust.is-revealed,
+.home-page--motion .home-page__block--panel.is-revealed,
+.home-page--motion .home-page__block--content.is-revealed {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Contact — header then action cards */
+.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__header {
+ opacity: 0;
+ transform: translate3d(0, 1.75rem, 0);
+}
+
+.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__grid {
+ opacity: 0;
+ transform: translate3d(0, 2rem, 0);
+}
+
+.home-page--motion .home-page__cta .contact-home__header,
+.home-page--motion .home-page__cta .contact-home__grid {
+ transition:
+ opacity 0.8s var(--home-reveal-ease),
+ transform 0.8s var(--home-reveal-ease);
+}
+
+.home-page--motion .home-page__cta.is-revealed .contact-home__header {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ transition-delay: 0.08s;
+}
+
+.home-page--motion .home-page__cta.is-revealed .contact-home__grid {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ transition-delay: 0.2s;
+}
+
+/* Hero — always visible (no JS-dependent hide) */
+.home-page__hero .hero-home__visual,
+.home-page__hero .hero-logo-diagram,
+.home-page__hero .hero-home__highlights,
+.home-page__hero .hero-home__visual-caption,
+.home-page__hero .hero-home__title,
+.home-page__hero .hero-home__description,
+.home-page__hero .hero-home__actions .hero-home__btn {
+ opacity: 1;
+ visibility: visible;
+ transform: none;
+}
+
+.home-page--motion .home-page__hero .hero-home__visual,
+.home-page--motion .home-page__hero .hero-logo-diagram,
+.home-page--motion .home-page__hero .hero-home__highlights,
+.home-page--motion .home-page__hero .hero-home__title,
+.home-page--motion .home-page__hero .hero-home__description,
+.home-page--motion .home-page__hero .hero-home__actions .hero-home__btn {
+ transition: none;
+}
+
+/* Metrics — always visible directly below hero */
+.home-page--motion .home-page__block--metrics,
+.home-page--motion .home-page__block--metrics .home-metrics__card {
+ opacity: 1;
+ transform: none;
+}
+
+.home-page--motion .home-page__block--projects:not(.is-revealed) .webapps-featured__header {
+ opacity: 0;
+ transform: translateY(1.15rem);
+}
+
+.home-page--motion .home-page__block--projects .webapps-featured__header {
+ transition:
+ opacity 0.6s var(--home-reveal-ease),
+ transform 0.6s var(--home-reveal-ease);
+}
+
+.home-page--motion .home-page__block--projects.is-revealed .webapps-featured__header {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.home-page > header,
+.home-page > section {
+ margin: 0;
+}
+
+.home-page__container {
+ width: min(100%, var(--home-max));
+ margin: 0 auto;
+ padding-inline: var(--home-pad-x);
+}
+
+.home-page__block {
+ margin: 0;
+}
+
+/* Section rhythm — featured apps follows metrics; partners follows featured apps */
+.home-page__hero + .home-page__block--metrics {
+ position: relative;
+ z-index: 1;
+ margin-top: clamp(3rem, 6vh, 4.5rem);
+}
+
+.home-page__block--metrics + .home-page__block--projects .webapps-featured--home {
+ padding-top: var(--home-projects-pad-y);
+}
+
+.home-page__block--projects:has(+ .home-page__block--partners) .webapps-featured--home {
+ padding-bottom: var(--home-projects-pad-y);
+}
+
+.home-page__block--projects + .home-page__block--partners .uni-partners--home {
+ padding-top: 0;
+}
+
+.home-page__block--partners:has(+ .home-page__block--overview) .uni-partners--home {
+ padding-bottom: var(--home-section-space-y);
+}
+
+.home-page__block--partners + .home-page__block--overview .keyfeatures-modern--home {
+ padding-top: 0;
+}
+
+.home-page__block--overview:has(+ .home-page__block--ecosystem) .keyfeatures-modern--home {
+ padding-bottom: 0;
+ border-bottom: none;
+}
+
+.home-page__block--overview + .home-page__block--ecosystem .ecosystem-home {
+ padding-top: var(--home-section-gap);
+}
+
+.home-page__block--ecosystem:has(+ .home-page__block--community) .ecosystem-home {
+ padding-bottom: var(--home-section-space-y);
+}
+
+.home-page__block--ecosystem + .home-page__block--community {
+ padding-top: 0;
+}
+
+.home-page__block--projects:has(+ .home-page__block--overview) .webapps-featured--home {
+ padding-bottom: 0;
+}
+
+.home-page__block--projects + .home-page__block--overview .keyfeatures-modern--home {
+ padding-top: var(--home-section-gap);
+ border-top: none;
+ border-bottom: none;
+}
+
+.home-page__block--overview:has(+ .home-page__trust) .keyfeatures-modern--home {
+ padding-bottom: 0;
+ border-bottom: none;
+}
+
+.home-page__block--community:has(+ .home-page__block--events) {
+ padding-bottom: 0;
+}
+
+.home-page__block--community + .home-page__block--events {
+ padding-top: 0;
+}
+
+.home-page__block--events .community-events-home {
+ padding-bottom: var(--home-section-pad);
+}
+
+.home-page__block--events:has(+ .home-page__cta) {
+ padding-bottom: 0;
+}
+
+.home-page__block--events + .home-page__cta {
+ padding-top: 0;
+}
+
+.home-page__block--overview + .home-page__trust,
+.home-page__block--overview + .home-page__cta {
+ padding-top: 0;
+}
+
+.home-page__block--projects:has(+ .home-page__trust):not(:has(+ .home-page__block--overview))
+ .webapps-featured--home {
+ padding-bottom: var(--home-section-gap);
+}
+
+.home-page__block--projects + .home-page__trust {
+ padding-top: 0;
+}
+
+.home-page__trust:has(+ .home-page__cta) {
+ padding-bottom: 0;
+}
+
+.home-page__trust:has(+ .home-page__cta)::after {
+ display: none;
+}
+
+.home-page__trust + .home-page__cta .contact-home,
+.home-page__block--overview + .home-page__cta .contact-home,
+.home-page__block--events + .home-page__cta .contact-home {
+ border-top: none;
+}
+
+/* ═══════════════════════════════════════════
+ 1. HERO — split copy + navy panel (hero-saas.css → .hero-home)
+ ═══════════════════════════════════════════ */
+
+/* ═══════════════════════════════════════════
+ 4. TRUSTED BY — split header + bento logo cards (matches projects / hero)
+ ═══════════════════════════════════════════ */
+.home-page__trust {
+ padding: var(--home-section-pad) var(--home-pad-x);
+ background: linear-gradient(
+ 180deg,
+ var(--home-bg-mist) 0%,
+ var(--home-bg-base) 16%,
+ var(--home-bg-base) 80%,
+ var(--home-bg-mist) 100%
+ );
+ border: none;
+}
+
+.home-page__trust .trusted-by--home,
+.home-page__trust .trusted-by--ribbon,
+.home-page__trust .trusted-by--wall {
+ padding: 0;
+ background: transparent;
+ border: none;
+}
+
+.home-page__trust .trusted-by--home::before,
+.home-page__trust .trusted-by--ribbon::before,
+.home-page__trust .trusted-by--wall::before {
+ content: none;
+}
+
+.home-page__trust .trusted-by__shell {
+ box-sizing: border-box;
+ width: min(100%, var(--home-max));
+ max-width: var(--home-max);
+ margin-inline: auto;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* Homepage trusted-by — centered header + logo row */
+.home-page__trust .trusted-by__home {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ gap: clamp(2.25rem, 4.5vh, 3.25rem);
+}
+
+.home-page__trust .trusted-by__home-header--center {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: clamp(1rem, 2.5vh, 1.75rem) auto 0;
+ width: 100%;
+ max-width: 42rem;
+ text-align: center;
+}
+
+.home-page__trust .trusted-by__home-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: none;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.18);
+ border-radius: 999px;
+}
+
+.home-page__trust .trusted-by__home-eyebrow-icon {
+ font-size: 0.75rem;
+ line-height: 1;
+ opacity: 0.85;
+}
+
+.home-page__trust .trusted-by__home-title {
+ margin: 0;
+ max-width: 36rem;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.5vw, 2.65rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.03em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.home-page__trust .trusted-by__home-title {
+ margin-inline: auto;
+ text-align: center;
+}
+
+.home-page__trust .trusted-by__home-title-accent {
+ display: inline;
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+}
+
+.home-page__trust .trusted-by__home-lead {
+ margin: 0.85rem 0 0;
+ max-width: 38rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+ text-wrap: pretty;
+}
+
+.home-page__trust .trusted-by__home-lead {
+ margin-inline: auto;
+ text-align: center;
+}
+
+.home-page__trust .trusted-by__home-grid--row {
+ list-style: none;
+ width: fit-content;
+ max-width: 100%;
+ margin: clamp(0.75rem, 2vh, 1.25rem) auto 0;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+.home-page__trust .trusted-by__home-item {
+ display: flex;
+ flex: 0 0 auto;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ padding: 0.25rem;
+}
+
+.home-page__trust .trusted-by__home-card {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ text-decoration: none;
+ color: inherit;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ border-radius: 0;
+}
+
+.home-page__trust .trusted-by__home-card--static {
+ cursor: default;
+}
+
+.home-page__trust .trusted-by__home-logo {
+ display: block;
+ width: auto;
+ height: auto;
+ max-width: min(100%, 10.5rem);
+ max-height: clamp(2.75rem, 7vh, 4rem);
+ object-fit: contain;
+ object-position: center;
+}
+
+.home-page__trust .trusted-by__home-card--logo-large .trusted-by__home-logo,
+.home-page__trust .trusted-by__home-logo--large {
+ max-width: min(100%, 18rem);
+ max-height: clamp(4rem, 10vh, 6.25rem);
+}
+
+.home-page__trust .trusted-by__home-monogram {
+ font-family: var(--openms-font-heading);
+ font-size: 1.25rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ color: rgba(var(--openms-navy-rgb), 0.45);
+}
+
+.home-page__trust a.trusted-by__home-card:focus-visible {
+ outline: 2px solid var(--openms-blue);
+ outline-offset: 4px;
+ border-radius: 0.25rem;
+}
+
+/* Trusted by → Contact — shared rhythm, softer handoff */
+
+@media (min-width: 1280px) {
+ .home-page__trust .trusted-by__home-grid--row {
+ gap: clamp(2.5rem, 4vw, 4rem);
+ }
+
+ .home-page__trust .trusted-by__home-header--center {
+ max-width: 46rem;
+ }
+
+}
+
+@media (max-width: 640px) {
+ .home-page__trust .trusted-by__home-grid--row {
+ gap: 1.25rem 1.5rem;
+ }
+
+ .home-page__trust .trusted-by__home-title {
+ font-size: clamp(1.5rem, 5vw, 2rem);
+ }
+
+ .home-page__trust .trusted-by__home-logo {
+ max-height: 2.75rem;
+ }
+
+ .home-page__trust .trusted-by__home-card--logo-large .trusted-by__home-logo,
+ .home-page__trust .trusted-by__home-logo--large {
+ max-width: min(100%, 14.5rem);
+ max-height: 4rem;
+ }
+}
+
+/* Ribbon minimal (homepage default) */
+.trusted-by__ribbon--minimal {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: clamp(1.25rem, 2.5vh, 1.75rem);
+ text-align: center;
+}
+
+.trusted-by__minimal-top {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.35rem;
+ max-width: 36rem;
+}
+
+.trusted-by__minimal-label {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 500;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.45);
+}
+
+.trusted-by__minimal-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.1rem, 2vw, 1.35rem);
+ font-weight: 600;
+ line-height: 1.35;
+ letter-spacing: -0.01em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.trusted-by__minimal-lead {
+ margin: -0.5rem 0 0;
+ max-width: 32rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.62);
+ text-wrap: pretty;
+}
+
+.trusted-by__minimal-logos {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ max-width: 56rem;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 0;
+ border-top: 1px solid var(--home-line);
+ border-bottom: 1px solid var(--home-line);
+}
+
+.trusted-by__minimal-item {
+ margin: 0;
+ flex: 1 1 8rem;
+ min-width: 0;
+ display: flex;
+}
+
+.trusted-by__minimal-item:not(:last-child) {
+ border-right: 1px solid var(--home-line);
+}
+
+.trusted-by__minimal-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-height: 4.5rem;
+ padding: clamp(1.25rem, 2.5vh, 1.75rem) clamp(1rem, 2.5vw, 1.5rem);
+ text-decoration: none;
+ color: inherit;
+ background: transparent;
+ transition: opacity 0.2s ease;
+}
+
+.trusted-by__minimal-link--static {
+ cursor: default;
+}
+
+.trusted-by__minimal-img {
+ display: block;
+ width: auto;
+ max-width: min(100%, 9rem);
+ height: clamp(2rem, 4.5vh, 2.75rem);
+ object-fit: contain;
+ object-position: center;
+ opacity: 0.72;
+ transition: opacity 0.2s ease;
+}
+
+.trusted-by__minimal-img--large,
+.trusted-by__minimal-link--large .trusted-by__minimal-img {
+ max-width: min(100%, 10.5rem);
+ height: clamp(2.25rem, 5vh, 3rem);
+}
+
+.trusted-by__minimal-text {
+ font-family: var(--openms-font-heading);
+ font-size: 1.125rem;
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ color: rgba(var(--openms-navy-rgb), 0.55);
+}
+
+.trusted-by__minimal-link:hover .trusted-by__minimal-img,
+.trusted-by__minimal-link:focus-visible .trusted-by__minimal-img {
+ opacity: 1;
+}
+
+.trusted-by__minimal-link:hover .trusted-by__minimal-text,
+.trusted-by__minimal-link:focus-visible .trusted-by__minimal-text {
+ color: var(--openms-navy);
+}
+
+.trusted-by__minimal-link:focus-visible {
+ outline: 2px solid var(--openms-blue);
+ outline-offset: -2px;
+}
+
+@media (max-width: 640px) {
+ .trusted-by__minimal-logos {
+ flex-direction: column;
+ }
+
+ .trusted-by__minimal-item {
+ flex: 1 1 auto;
+ width: 100%;
+ border-right: none !important;
+ border-bottom: 1px solid var(--home-line);
+ }
+
+ .trusted-by__minimal-item:last-child {
+ border-bottom: none;
+ }
+}
+
+.trusted-by__wall {
+ display: grid;
+ gap: clamp(1.25rem, 2.5vh, 1.75rem);
+}
+
+.trusted-by__wall-head {
+ max-width: 36rem;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.trusted-by__wall-eyebrow {
+ margin: 0 0 0.65rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.5);
+}
+
+.trusted-by__wall-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.5rem, 3vw, 2.1rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.12;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.trusted-by__wall-title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 55%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.trusted-by__wall-lead {
+ margin: 0.75rem 0 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-dark-rgb), 0.76);
+ text-wrap: pretty;
+}
+
+.trusted-by__wall-grid {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: clamp(1rem, 2vw, 1.35rem);
+ align-items: stretch;
+}
+
+.trusted-by__wall-item {
+ margin: 0;
+ min-width: 0;
+ display: flex;
+}
+
+.trusted-by__wall-card {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: clamp(11rem, 22vh, 14.5rem);
+ padding: 0;
+ overflow: hidden;
+ border-radius: 1rem;
+ border: 1px solid var(--home-line);
+ background: var(--openms-white);
+ text-decoration: none;
+ color: inherit;
+ box-shadow: 0 0.25rem 0.85rem rgba(var(--openms-navy-rgb), 0.05);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.trusted-by__wall-card--static {
+ cursor: default;
+}
+
+/* Logo area — most of the card */
+.trusted-by__wall-media {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: clamp(8.5rem, 16vh, 11.5rem);
+ padding: clamp(1.35rem, 3vh, 2rem) clamp(1.25rem, 3vw, 2rem);
+ background: linear-gradient(
+ 180deg,
+ rgba(var(--openms-blue-rgb), 0.04) 0%,
+ rgba(var(--openms-white-rgb), 1) 100%
+ );
+ border-bottom: 1px solid var(--home-line);
+}
+
+.trusted-by__wall-card--has-logo .trusted-by__wall-media {
+ min-height: clamp(9.5rem, 18vh, 12.5rem);
+ padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
+}
+
+.trusted-by__wall-logo {
+ display: block;
+ width: min(100%, 14rem);
+ height: clamp(3.5rem, 8vh, 5rem);
+ max-height: none;
+ max-width: none;
+ object-fit: contain;
+ object-position: center;
+ filter: none;
+ transition: transform 0.22s ease;
+}
+
+.trusted-by__wall-card--logo-large .trusted-by__wall-media {
+ min-height: clamp(10.5rem, 20vh, 13.5rem);
+}
+
+.trusted-by__wall-logo--large {
+ width: min(100%, 18rem);
+ height: clamp(4.5rem, 10vh, 6.5rem);
+}
+
+.trusted-by__wall-monogram {
+ display: grid;
+ place-items: center;
+ width: clamp(4rem, 10vw, 5.5rem);
+ height: clamp(4rem, 10vw, 5.5rem);
+ border-radius: 1rem;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.25rem, 2.5vw, 1.65rem);
+ font-weight: 800;
+ color: var(--openms-navy);
+ background: rgba(var(--openms-blue-rgb), 0.08);
+ border: 2px solid rgba(var(--openms-blue-rgb), 0.15);
+}
+
+.trusted-by__wall-footer {
+ flex: 0 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem 0.65rem;
+ padding: 0.65rem 0.85rem 0.75rem;
+ background: var(--openms-white);
+}
+
+.trusted-by__wall-name {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ line-height: 1.3;
+ color: rgba(var(--openms-navy-rgb), 0.75);
+ text-align: center;
+}
+
+.trusted-by__wall-cta {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ color: var(--openms-blue);
+ opacity: 0;
+ transform: translateY(2px);
+ transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.trusted-by__wall-cta::after {
+ content: " →";
+}
+
+.trusted-by__wall-card:hover,
+.trusted-by__wall-card:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.3);
+ box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.14);
+ transform: translateY(-2px);
+ outline: none;
+}
+
+.trusted-by__wall-card:hover .trusted-by__wall-logo,
+.trusted-by__wall-card:focus-visible .trusted-by__wall-logo {
+ transform: scale(1.06);
+}
+
+.trusted-by__wall-card:hover .trusted-by__wall-cta,
+.trusted-by__wall-card:focus-visible .trusted-by__wall-cta {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+@media (min-width: 900px) {
+ .trusted-by__wall-grid {
+ max-width: 52rem;
+ margin-inline: auto;
+ }
+
+ .trusted-by__wall-logo {
+ width: min(100%, 16rem);
+ height: clamp(4rem, 9vh, 5.5rem);
+ }
+
+ .trusted-by__wall-logo--large {
+ width: min(100%, 20rem);
+ height: clamp(5rem, 11vh, 7rem);
+ }
+}
+
+/* ═══════════════════════════════════════════
+ 3. OVERVIEW — sidebar headline + 2×2 card grid
+ ═══════════════════════════════════════════ */
+.home-page__block--overview .keyfeatures-modern--home {
+ --kf-section-pad-block: var(--home-section-pad);
+ margin: 0;
+ padding: var(--home-section-pad) var(--home-pad-x);
+ background: transparent;
+ border: none;
+ color: var(--openms-navy);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__inner {
+ max-width: var(--home-max);
+ margin: 0 auto;
+ padding: 0;
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__layout {
+ display: grid;
+ grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
+ grid-template-areas:
+ "header topics"
+ "note note";
+ gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
+ align-items: start;
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__header {
+ grid-area: header;
+ position: sticky;
+ top: 1.5rem;
+ text-align: left;
+ justify-items: start;
+ padding-top: 0;
+ max-width: none;
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__eyebrow {
+ margin: 0 0 0.65rem;
+ padding: 0.3rem 0.65rem;
+ letter-spacing: 0.08em;
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead {
+ text-align: left;
+ color: rgba(var(--openms-dark-rgb), 0.78);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topics {
+ grid-area: topics;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.75rem;
+ align-self: stretch;
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-card {
+ background: #f7f9fc;
+ border: 1px solid var(--home-line);
+ box-shadow: none;
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-card:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.3);
+ box-shadow: 0 0.35rem 1rem rgba(var(--openms-blue-rgb), 0.1);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-icon {
+ background: var(--openms-white);
+ border-color: var(--home-line);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-icon--mark {
+ color: var(--openms-navy);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-icon img {
+ filter: none;
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-title {
+ color: var(--openms-navy);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-text {
+ color: rgba(var(--openms-dark-rgb), 0.76);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note {
+ grid-area: note;
+ max-width: none;
+ color: rgba(var(--openms-dark-rgb), 0.82);
+ background: rgba(var(--openms-yellow-rgb), 0.12);
+ border: 1px solid rgba(var(--openms-orange-rgb), 0.25);
+ border-left: 4px solid var(--openms-orange);
+}
+
+.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note a {
+ color: var(--openms-blue);
+}
+
+/* ═══════════════════════════════════════════
+ 4. PATHWAYS — numbered vertical step list
+ ═══════════════════════════════════════════ */
+.home-page__block--pathways {
+ padding: var(--home-pad-y) 0;
+ background: linear-gradient(
+ 180deg,
+ rgba(var(--openms-blue-rgb), 0.04) 0%,
+ var(--openms-white) 100%
+ );
+ border-bottom: 1px solid var(--home-line);
+}
+
+.home-pathways--steps .home-pathways__container {
+ display: grid;
+ gap: clamp(1.5rem, 3vh, 2rem);
+}
+
+.home-pathways__head {
+ max-width: 28rem;
+}
+
+.home-pathways__eyebrow {
+ margin: 0 0 0.5rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.5);
+}
+
+.home-pathways__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: var(--home-head);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.12;
+ letter-spacing: -0.03em;
+ color: var(--openms-navy);
+}
+
+.home-pathways__steps {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.65rem;
+ counter-reset: home-step;
+}
+
+.home-pathways__step-link {
+ display: grid;
+ grid-template-columns: 3.25rem minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 1rem;
+ padding: clamp(1rem, 2vw, 1.2rem) clamp(1.1rem, 2vw, 1.35rem);
+ border-radius: 0.75rem;
+ border: 1px solid var(--home-line);
+ background: var(--openms-white);
+ text-decoration: none;
+ color: inherit;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.home-pathways__step:nth-child(1) .home-pathways__step-link {
+ border-left: 4px solid var(--openms-blue);
+}
+
+.home-pathways__step:nth-child(2) .home-pathways__step-link {
+ border-left: 4px solid var(--openms-purple);
+}
+
+.home-pathways__step:nth-child(3) .home-pathways__step-link {
+ border-left: 4px solid var(--openms-pink);
+}
+
+.home-pathways__step-link:hover,
+.home-pathways__step-link:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.35);
+ box-shadow: 0 0.4rem 1.2rem rgba(var(--openms-blue-rgb), 0.1);
+ transform: translateX(4px);
+ outline: none;
+}
+
+.home-pathways__step-num {
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.35rem, 2vw, 1.65rem);
+ font-weight: 800;
+ line-height: 1;
+ color: rgba(var(--openms-navy-rgb), 0.2);
+}
+
+.home-pathways__step-body {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ min-width: 0;
+}
+
+.home-pathways__step-label {
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.02rem, 1.2vw, 1.12rem);
+ font-weight: 700;
+ color: var(--openms-navy);
+}
+
+.home-pathways__step-text {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.74);
+}
+
+.home-pathways__step-go {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--openms-blue);
+}
+
+/* ═══════════════════════════════════════════
+ 5. PROJECTS — minimalist catalog grid
+ ═══════════════════════════════════════════ */
+.home-page__block--projects .webapps-featured--home {
+ padding: var(--home-projects-pad-y) var(--home-pad-x);
+ background: transparent;
+ color: var(--openms-navy);
+ border: none;
+ --projects-logo-height: clamp(3.5rem, 5.5vw, 4.5rem);
+ --projects-max: min(100%, 90rem);
+ --projects-grid-gap: clamp(0.85rem, 1.5vw, 1.15rem);
+}
+
+.home-page__block--projects .webapps-featured--home::before {
+ content: none;
+}
+
+.home-page__block--projects .webapps-modern-wrap--home {
+ margin: 0;
+}
+
+.home-page__block--projects .webapps-featured__inner {
+ max-width: var(--projects-max);
+ margin: 0 auto;
+ display: block;
+}
+
+.home-page__block--projects .webapps-featured__header--home {
+ display: block;
+ margin: 0 0 var(--home-section-head-gap, clamp(2rem, 4vh, 2.75rem));
+ text-align: left;
+}
+
+.home-page__block--projects .webapps-featured__header-main {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+ max-width: min(100%, 46rem);
+ margin-inline: 0;
+}
+
+.home-page__block--projects .webapps-featured__show-all {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ white-space: nowrap;
+}
+
+.home-page__block--projects .webapps-featured__explore-icon {
+ font-size: 1.15em;
+ line-height: 1;
+}
+
+.home-page__block--projects .webapps-featured__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: none;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.18);
+ border-radius: 999px;
+}
+
+.home-page__block--projects .webapps-featured__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 4.2vw, 3.15rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.03em;
+ color: var(--openms-navy);
+ text-align: left;
+ text-wrap: balance;
+}
+
+.home-page__block--projects .webapps-featured__title-accent {
+ color: var(--openms-blue);
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ -webkit-text-fill-color: unset;
+}
+
+.home-page__block--projects .webapps-featured__header-main .webapps-featured__lead {
+ margin: 0.85rem 0 0;
+ max-width: 52ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+ text-align: left;
+ text-wrap: pretty;
+}
+
+.home-page__block--projects .webapps-featured__grid--catalog {
+ display: grid;
+ grid-template-columns: 1fr;
+ align-items: stretch;
+ gap: var(--projects-grid-gap);
+}
+
+@media (min-width: 768px) {
+ .home-page__block--projects .webapps-featured__grid--catalog {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 992px) {
+ .home-page__block--projects .webapps-featured__grid--catalog {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+}
+
+.home-page__block--projects .webapps-featured__item {
+ display: flex;
+ min-width: 0;
+ height: 100%;
+}
+
+@media (max-width: 767px) {
+ .home-page__block--projects .webapps-featured__header--home {
+ margin-bottom: clamp(1.5rem, 4vh, 2rem);
+ }
+}
+
+@media (min-width: 1280px) {
+ .home-page__block--projects .webapps-featured--home {
+ --projects-max: min(100%, 96rem);
+ }
+
+ .home-page__block--projects .webapps-featured__grid--catalog {
+ --projects-logo-height: clamp(3.5rem, 5vw, 4.25rem);
+ --projects-grid-gap: clamp(1rem, 1.5vw, 1.25rem);
+ }
+}
+
+.home-page--motion .home-page__block--projects .webapps-featured__item:not(.is-revealed) {
+ opacity: 0;
+ transform: translateY(1.35rem);
+}
+
+.home-page--motion .home-page__block--projects .webapps-featured__item {
+ transition:
+ opacity 0.55s var(--home-reveal-ease),
+ transform 0.55s var(--home-reveal-ease);
+}
+
+.home-page--motion .home-page__block--projects .webapps-featured__item.is-revealed {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.home-page--motion .home-page__block--projects .webapps-featured__footer:not(.is-revealed) {
+ opacity: 0;
+ transform: translateY(1rem);
+}
+
+.home-page--motion .home-page__block--projects .webapps-featured__footer {
+ transition:
+ opacity 0.5s var(--home-reveal-ease),
+ transform 0.5s var(--home-reveal-ease);
+}
+
+.home-page--motion .home-page__block--projects .webapps-featured__footer.is-revealed {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Catalog card */
+.home-page__block--projects .webapps-project-card--catalog {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ min-height: 100%;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ height: 100%;
+ min-height: calc(var(--projects-logo-height) + 2rem);
+ gap: 0;
+ padding: 0;
+ overflow: hidden;
+ border-radius: 0.75rem;
+ background: var(--openms-white);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ box-shadow: 0 0.35rem 1.15rem rgba(var(--openms-navy-rgb), 0.08);
+ text-decoration: none;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease,
+ transform 0.2s ease;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover,
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.22);
+ box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.12);
+ transform: translateY(-2px);
+ outline: none;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible {
+ box-shadow: 0 0 0 2px rgba(var(--openms-blue-rgb), 0.25);
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__media {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ align-self: flex-start;
+ padding: 1rem 1rem 0.5rem;
+ background: transparent;
+ border: none;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__image {
+ display: block;
+ width: auto;
+ max-width: min(9rem, 75%);
+ height: var(--projects-logo-height);
+ object-fit: contain;
+ object-position: left top;
+ transition: transform 0.25s ease;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__image--large {
+ height: calc(var(--projects-logo-height) * 1.5);
+ max-width: min(11.5rem, 90%);
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__image--xlarge {
+ height: calc(var(--projects-logo-height) * 1.85);
+ max-width: min(13rem, 95%);
+ transform: translateY(-0.6rem);
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__media:has(.webapps-project-card__image--xlarge) {
+ padding: 1rem 1rem 0.35rem;
+ margin-top: -0.35rem;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:has(.webapps-project-card__image--xlarge) .webapps-project-card__content {
+ padding-top: 0;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__image,
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__image {
+ transform: scale(1.05);
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__image--xlarge,
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__image--xlarge {
+ transform: translateY(-0.6rem) scale(1.05);
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ flex: 1 1 auto;
+ gap: 0.5rem;
+ width: 100%;
+ min-width: 0;
+ padding: 0 1rem 1.1rem;
+ background: transparent;
+ text-align: left;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__name {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: 1.0625rem;
+ font-weight: 700;
+ line-height: 1.35;
+ letter-spacing: -0.01em;
+ color: var(--openms-white);
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__name,
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__name {
+ color: var(--openms-white);
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__text {
+ margin: 0;
+ flex: 1 1 auto;
+ width: 100%;
+ max-width: none;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ font-weight: 400;
+ line-height: 1.6;
+ color: rgba(var(--openms-navy-rgb), 0.78);
+ text-wrap: pretty;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.2rem;
+ margin-top: 0.35rem;
+ padding: 0;
+ font-family: var(--openms-font-body);
+ font-size: 0.9375rem;
+ font-weight: 600;
+ line-height: 1.2;
+ color: var(--openms-blue);
+ background: none;
+ border: none;
+ border-radius: 0;
+ transition: color 0.15s ease, gap 0.15s ease;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta-icon {
+ color: inherit;
+ font-size: 1.05rem;
+ line-height: 1;
+}
+
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__cta,
+.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__cta {
+ color: var(--openms-navy);
+ gap: 0.35rem;
+}
+
+.home-page__block--projects .webapps-featured__footer {
+ margin-top: clamp(2rem, 4vh, 2.75rem);
+ margin-bottom: clamp(3.5rem, 7vh, 5rem);
+ text-align: center;
+}
+
+.home-page__block--projects .webapps-featured__footer--home {
+ margin-top: clamp(1.75rem, 3.5vh, 2.25rem);
+}
+
+/* ═══════════════════════════════════════════
+ 6. PARTNERS — Neurox-style trust line + logo marquee
+ ═══════════════════════════════════════════ */
+.home-page__block--partners .uni-partners--home {
+ padding: var(--home-section-space-y) 0;
+ background: transparent;
+ border: none;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__inner {
+ width: min(100%, var(--home-max));
+ max-width: var(--home-max);
+ margin-inline: auto;
+ padding-inline: var(--home-pad-x);
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__header--trust {
+ display: block;
+ max-width: none;
+ margin: 0 auto clamp(1rem, 2vh, 1.35rem);
+ padding-inline: 0;
+ text-align: center;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__header-main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ max-width: 36rem;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__trust-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.3rem, 2.6vw, 1.85rem);
+ font-weight: 700;
+ line-height: 1.25;
+ letter-spacing: -0.02em;
+ color: rgba(var(--openms-navy-rgb), 0.82);
+ text-align: center;
+ text-wrap: balance;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__trust-eyebrow {
+ display: block;
+ margin: 0 0 0.35rem;
+ padding: 0;
+ font: inherit;
+ color: inherit;
+ background: none;
+ border: none;
+ border-radius: 0;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__trust-title-main {
+ display: block;
+ font: inherit;
+ text-wrap: balance;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__marquee {
+ margin-top: clamp(1.25rem, 2.5vh, 1.75rem);
+ margin-bottom: 0;
+ margin-inline: calc(-1 * var(--home-pad-x));
+ width: calc(100% + 2 * var(--home-pad-x));
+ background: transparent;
+ border: none;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__marquee::before,
+.home-page__block--partners .uni-partners--home .uni-partners__marquee::after {
+ width: clamp(2.5rem, 6vw, 4.5rem);
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__marquee::before {
+ background: linear-gradient(90deg, var(--home-bg-base) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__marquee::after {
+ background: linear-gradient(270deg, var(--home-bg-base) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__track {
+ padding: 0.15rem 0;
+ animation-duration: 32s;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__row {
+ gap: clamp(1.5rem, 3.5vw, 2.25rem);
+ padding: 0 clamp(1.25rem, 3vw, 2rem);
+}
+
+.home-page__block--partners .uni-partners--home {
+ --uni-home-logo-slot-w: 8.5rem;
+ --uni-home-logo-slot-h: 3.25rem;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__item {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 var(--uni-home-logo-slot-w);
+ width: var(--uni-home-logo-slot-w);
+ height: var(--uni-home-logo-slot-h);
+ min-width: var(--uni-home-logo-slot-w);
+ max-width: var(--uni-home-logo-slot-w);
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__item:hover,
+.home-page__block--partners .uni-partners--home .uni-partners__item:focus-visible {
+ transform: none;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__item img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ object-position: center;
+ opacity: 0.55;
+ filter: grayscale(100%);
+ transition: opacity 0.25s ease, filter 0.25s ease;
+}
+
+.home-page__block--partners .uni-partners--home .uni-partners__item:hover img,
+.home-page__block--partners .uni-partners--home .uni-partners__item:focus-visible img {
+ opacity: 1;
+ filter: grayscale(0%);
+}
+
+@media (max-width: 768px) {
+ .home-page__block--partners .uni-partners--home .uni-partners__inner {
+ width: 100%;
+ max-width: none;
+ }
+
+ .home-page__block--partners .uni-partners--home {
+ --uni-home-logo-slot-w: 6.75rem;
+ --uni-home-logo-slot-h: 2.65rem;
+ }
+
+ .home-page__block--partners .uni-partners--home .uni-partners__row {
+ gap: 1.35rem;
+ padding-inline: 1rem;
+ }
+
+ .home-page__block--partners .uni-partners--home .uni-partners__trust-title {
+ font-size: clamp(1.2rem, 4.2vw, 1.55rem);
+ }
+}
+
+/* ═══════════════════════════════════════════
+ 7. SPONSORS — split intro + logo tiles
+ ═══════════════════════════════════════════ */
+.home-page__block--sponsors .hero-sponsors {
+ min-height: 0;
+ padding: var(--home-pad-y) var(--home-pad-x);
+ background: #f0f4fa;
+ border: none;
+}
+
+.home-page__block--sponsors .hero-sponsors__inner {
+ max-width: var(--home-max);
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+ gap: clamp(1.5rem, 3vw, 2.5rem);
+ align-items: center;
+}
+
+.home-page__block--sponsors .hero-sponsors__intro {
+ text-align: left;
+}
+
+.home-page__block--sponsors .hero-sponsors__label {
+ margin: 0 0 0.65rem;
+ color: var(--openms-navy);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border-color: rgba(var(--openms-blue-rgb), 0.2);
+}
+
+.home-page__block--sponsors .hero-sponsors__description {
+ margin: 0;
+ max-width: 32ch;
+ text-align: left;
+ color: rgba(var(--openms-dark-rgb), 0.78);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+}
+
+.home-page__block--sponsors .hero-sponsors__logos {
+ gap: 0.75rem;
+}
+
+.home-page__block--sponsors .hero-sponsors__logo-link {
+ min-height: 5rem;
+ border-radius: 0.85rem;
+ background: var(--openms-white);
+ border: 1px solid var(--home-line);
+ box-shadow: 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05);
+}
+
+/* ═══════════════════════════════════════════
+ 8. CTA — homepage contact (contact-area.css → .contact-home)
+ ═══════════════════════════════════════════ */
+.home-page__cta {
+ margin: 0;
+ padding: 0;
+}
+
+/* ─── Responsive ─── */
+@media (max-width: 1024px) {
+ .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__layout {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "header"
+ "topics"
+ "note";
+ }
+
+ .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__header {
+ position: static;
+ }
+
+ .home-page__block--projects .webapps-featured__header--home {
+ gap: 1.25rem;
+ }
+
+ .home-page__block--projects .webapps-featured__title {
+ font-size: clamp(1.75rem, 5vw, 2.35rem);
+ }
+
+ .home-page__block--sponsors .hero-sponsors__inner {
+ grid-template-columns: 1fr;
+ text-align: center;
+ }
+
+ .home-page__block--sponsors .hero-sponsors__intro,
+ .home-page__block--sponsors .hero-sponsors__description {
+ text-align: center;
+ margin-inline: auto;
+ }
+
+}
+
+@media (max-width: 768px) {
+ .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topics {
+ grid-template-columns: 1fr;
+ }
+
+ .home-pathways__step-link {
+ grid-template-columns: 2.5rem minmax(0, 1fr) auto;
+ }
+}
+
+@media (max-width: 520px) {
+ .trusted-by__wall-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .trusted-by__wall-card {
+ min-height: 12rem;
+ }
+
+ .trusted-by__wall-cta {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .home-page--motion .home-page__block--partners,
+ .home-page--motion .home-page__block--overview,
+ .home-page--motion .home-page__trust,
+ .home-page--motion .home-page__block--panel,
+ .home-page--motion .home-page__block--content,
+ .home-page--motion .home-page__cta .contact-home__header,
+ .home-page--motion .home-page__cta .contact-home__grid,
+ .home-page--motion .home-page__hero .hero-home::before,
+ .home-page--motion .home-page__hero .hero-home__visual,
+ .home-page--motion .home-page__hero .hero-home__image,
+ .home-page--motion .home-page__hero .hero-logo-diagram,
+ .home-page--motion .home-page__hero .hero-home__eyebrow,
+ .home-page--motion .home-page__hero .hero-home__title,
+ .home-page--motion .home-page__hero .hero-home__description,
+ .home-page--motion .home-page__hero .hero-home__actions .hero-home__btn,
+ .home-page--motion .home-page__hero .hero-home__highlights,
+ .home-page--motion .home-page__block--projects .webapps-featured__header,
+ .home-page__block--projects .webapps-featured__item,
+ .home-page__block--projects .webapps-featured__footer {
+ opacity: 1;
+ transform: none;
+ transition: none;
+ }
+
+ .home-pathways__step-link:hover,
+ .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover,
+ .home-page__block--projects .webapps-project-card__surface:hover,
+ .contact-area__cta-secondary:hover,
+ .trusted-by__wall-card:hover {
+ transform: none;
+ }
+
+ .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__image,
+ .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__image {
+ transform: none;
+ }
+
+ .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__image--xlarge {
+ transform: translateY(-0.6rem);
+ }
+
+ .trusted-by__wall-card:hover .trusted-by__wall-logo {
+ transform: none;
+ }
+}
diff --git a/assets/css/keyfeatures-modern.css b/assets/css/keyfeatures-modern.css
new file mode 100644
index 00000000..155c93d5
--- /dev/null
+++ b/assets/css/keyfeatures-modern.css
@@ -0,0 +1,261 @@
+/* What is OpenMS? — hero transition + split layout */
+
+.keyfeatures-modern {
+ --kf-gap: clamp(0.9rem, 2vw, 1.25rem);
+ --kf-radius: 1rem;
+ --kf-card-pad: clamp(1rem, 2vw, 1.3rem);
+ --kf-section-pad-block: clamp(8.5rem, 15vh, 12rem);
+ --kf-layout-gap: clamp(3.25rem, 6.5vh, 4.5rem);
+
+ margin: 0;
+ padding-block: var(--kf-section-pad-block);
+ padding-inline: clamp(2rem, 6vw, 3.5rem);
+ color: var(--openms-white);
+ background: var(--openms-navy);
+}
+
+.keyfeatures-modern__inner {
+ width: 100%;
+ max-width: 75rem;
+ margin: 0 auto;
+ padding-block: clamp(1.25rem, 3vh, 2.25rem);
+}
+
+.keyfeatures-modern__layout {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--kf-layout-gap);
+ align-items: start;
+}
+
+.keyfeatures-modern__header {
+ position: static;
+ top: auto;
+ align-self: start;
+ display: grid;
+ gap: clamp(1.15rem, 2.5vh, 1.65rem);
+ max-width: 66rem;
+ padding-top: clamp(0.75rem, 2vh, 1.35rem);
+}
+
+.keyfeatures-modern__eyebrow {
+ display: inline-block;
+ width: fit-content;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.8rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--openms-yellow);
+ background: rgba(var(--openms-white-rgb), 0.08);
+ border: 1px solid rgba(var(--openms-white-rgb), 0.2);
+ border-radius: 999px;
+}
+
+.keyfeatures-modern__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.4vw, 2.5rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ color: var(--openms-white);
+}
+
+.keyfeatures-modern__title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-yellow) 0%,
+ var(--openms-orange) 40%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.keyfeatures-modern__lead {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-white-rgb), 0.9);
+ text-wrap: pretty;
+}
+
+.keyfeatures-modern__lead p {
+ margin: 0;
+}
+
+.keyfeatures-modern__note {
+ margin: 0;
+ padding: clamp(1rem, 2vh, 1.15rem) clamp(1.05rem, 2vw, 1.2rem);
+ border-radius: 0.75rem;
+ border: 1px solid rgba(var(--openms-white-rgb), 0.18);
+ border-left: 4px solid var(--openms-yellow);
+ background: rgba(var(--openms-white-rgb), 0.08);
+}
+
+.keyfeatures-modern__note p {
+ margin: 0;
+}
+
+.keyfeatures-modern__note a {
+ color: var(--openms-yellow);
+ font-weight: 600;
+ text-decoration: underline;
+ text-underline-offset: 0.16em;
+}
+
+.keyfeatures-modern__note a:hover {
+ color: var(--openms-white);
+}
+
+.keyfeatures-modern__topics {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: clamp(0.8rem, 1.7vw, 1.2rem);
+ align-items: start;
+ align-self: stretch;
+}
+
+.keyfeatures-modern__topic {
+ margin: 0;
+ min-width: 0;
+ height: 100%;
+}
+
+.keyfeatures-modern__topic-card {
+ position: relative;
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr);
+ align-items: start;
+ gap: 0.8rem;
+ padding: clamp(1rem, 2.1vw, 1.3rem);
+ height: 100%;
+ border-radius: var(--kf-radius);
+ border: none;
+ background: var(--openms-navy);
+ transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.keyfeatures-modern__topic-card:hover,
+.keyfeatures-modern__topic-card:focus-within {
+ transform: translateY(-2px);
+ box-shadow: 0 0.9rem 1.9rem rgba(var(--openms-dark-rgb), 0.32);
+}
+
+.keyfeatures-modern__topic-index {
+ display: none;
+}
+
+.keyfeatures-modern__topic-icon {
+ width: 2.35rem;
+ height: 2.35rem;
+ border-radius: 0.72rem;
+ display: grid;
+ place-items: center;
+ border: 1px solid rgba(var(--openms-white-rgb), 0.2);
+ background: rgba(var(--openms-white-rgb), 0.12);
+ position: relative;
+ z-index: 1;
+}
+
+.keyfeatures-modern__topic-icon--mark {
+ font-family: var(--openms-font-heading);
+ font-size: 1.05rem;
+ font-weight: 700;
+ color: var(--openms-white);
+}
+
+.keyfeatures-modern__topic-icon img {
+ width: 1.45rem;
+ height: 1.45rem;
+ object-fit: contain;
+ filter: brightness(0) invert(1);
+}
+
+.keyfeatures-modern__topic-title {
+ margin: 0 0 0.3rem;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 1.2vw, 1.12rem);
+ font-weight: 700;
+ line-height: 1.28;
+ color: var(--openms-white);
+}
+
+.keyfeatures-modern__topic-text {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.9rem, 0.95vw, 0.98rem);
+ line-height: 1.5;
+ color: rgba(var(--openms-white-rgb), 0.9);
+ text-wrap: pretty;
+}
+
+@media (max-width: 1000px) {
+ .keyfeatures-modern {
+ --kf-layout-gap: clamp(2.75rem, 5.5vh, 3.5rem);
+ }
+
+ .keyfeatures-modern__layout {
+ grid-template-columns: 1fr;
+ gap: var(--kf-layout-gap);
+ }
+
+ .keyfeatures-modern__header {
+ position: static;
+ top: auto;
+ }
+
+ .keyfeatures-modern__topics {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ align-self: stretch;
+ }
+
+ .keyfeatures-modern__topic-card {
+ padding: 1rem;
+ }
+}
+
+@media (max-width: 640px) {
+ .keyfeatures-modern__topics {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 48rem) {
+ .hero-sponsors {
+ min-height: clamp(14rem, 36vh, 20rem);
+ padding-top: clamp(5.5rem, 20vw, 7rem);
+ padding-bottom: clamp(2rem, 4.5vh, 2.75rem);
+ }
+
+ .keyfeatures-modern {
+ --kf-section-pad-block: clamp(6.5rem, 13vh, 8.5rem);
+ --kf-layout-gap: clamp(2.25rem, 5vh, 3rem);
+ padding-inline: clamp(1.25rem, 5vw, 1.85rem);
+ }
+
+ .keyfeatures-modern__inner {
+ padding-block: clamp(0.85rem, 2.5vh, 1.5rem);
+ }
+
+ .keyfeatures-modern__topic-card {
+ gap: 0.75rem;
+ padding: 0.95rem;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .keyfeatures-modern__topic-card:hover,
+ .keyfeatures-modern__topic-card:focus-within {
+ transform: none;
+ }
+}
+
diff --git a/assets/css/keyfeatures_override.css b/assets/css/keyfeatures_override.css
index 7d6bd2d9..11617df1 100644
--- a/assets/css/keyfeatures_override.css
+++ b/assets/css/keyfeatures_override.css
@@ -2,9 +2,16 @@
padding: 20px;
}
-.keyfeatures a:hover {
+/* Modern homepage keyfeatures — spacing lives in keyfeatures-modern.css */
+.keyfeatures.keyfeatures-modern {
+ margin: 0;
+ width: 100%;
+ max-width: none;
+}
+
+.keyfeatures:not(.keyfeatures-modern) a:hover {
text-decoration: none;
- color:black
+ color: var(--openms-dark);
}
.keyfeatures-img{
@@ -19,9 +26,6 @@
.keyfeatures-title {
display: flex;
justify-content: center;
- letter-spacing: 1.5px;
- font-size: 27px;
- font-weight: bold;
}
.keyfeatures-box-container {
@@ -38,18 +42,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;
+.keyfeatures:not(.keyfeatures-modern) a {
+ color: var(--openms-blue) !important;
}
.keyfeatures-box-title {
margin: 15px;
- font-size: 16px;
- text-transform: uppercase;
- font-weight: bold;
}
.keyfeatures-box-text {
@@ -70,5 +71,5 @@
}
.keyfeatures-underline:before {
- background: rgb(1, 50, 67);
+ background: var(--openms-blue);
}
\ No newline at end of file
diff --git a/assets/css/landing-page.css b/assets/css/landing-page.css
new file mode 100644
index 00000000..af7b43ab
--- /dev/null
+++ b/assets/css/landing-page.css
@@ -0,0 +1 @@
+/* Deprecated: homepage layout lives in home.css (class .home-page) */
diff --git a/assets/css/mailchimp.css b/assets/css/mailchimp.css
index 00894e70..349d4c1e 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 0ddb3e8d..320e1df8 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 00000000..e770769c
--- /dev/null
+++ b/assets/css/navbar-responsive.css
@@ -0,0 +1,1150 @@
+/* Navbar — burger menu through md/lg (≤1279px), SM layout; horizontal bar from 1280px (xl) */
+
+.site-header {
+ max-width: 100%;
+}
+
+.site-header #nav.navbar.is-fresh {
+ max-width: 100%;
+}
+
+.navbar-backdrop {
+ display: none;
+}
+
+.site-header #nav.navbar.is-fresh .navbar-burger.is-active span:nth-child(1),
+#navbar-clone.navbar.is-fresh .navbar-burger.is-active span:nth-child(1) {
+ top: calc(50% - 1px);
+ transform: rotate(45deg);
+}
+
+.site-header #nav.navbar.is-fresh .navbar-burger.is-active span:nth-child(2),
+#navbar-clone.navbar.is-fresh .navbar-burger.is-active span:nth-child(2) {
+ opacity: 0;
+}
+
+.site-header #nav.navbar.is-fresh .navbar-burger.is-active span:nth-child(3),
+#navbar-clone.navbar.is-fresh .navbar-burger.is-active span:nth-child(3) {
+ top: calc(50% - 1px);
+ transform: rotate(-45deg);
+}
+
+/* Mobile bar CTAs — hidden on desktop */
+.navbar-mobile-ctas,
+.navbar-mobile-ctas-end {
+ display: none;
+}
+
+.navbar-brand-actions {
+ display: flex;
+ align-items: center;
+}
+
+.navbar-links,
+.navbar-actions {
+ display: flex;
+ align-items: center;
+}
+
+/* Logo — one size on all viewports */
+.site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo,
+#navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo {
+ max-height: var(--openms-navbar-logo-height, 60px) !important;
+ height: var(--openms-navbar-logo-height, 60px) !important;
+ width: auto !important;
+ max-width: 100%;
+ object-fit: contain;
+ object-position: left center;
+}
+
+/* Desktop XL — horizontal bar (1280px+) */
+@media (min-width: 1280px) {
+ .navbar-mobile-ctas,
+ .navbar-mobile-ctas-end,
+ .navbar-brand-actions {
+ display: none;
+ }
+
+ .navbar-mobile-social {
+ display: none !important;
+ }
+
+ .navbar-desktop-cta {
+ display: contents;
+ }
+
+ .navbar-cta-label--short {
+ display: none;
+ }
+
+ .navbar-cta-label--full {
+ display: inline;
+ }
+
+ .navbar.is-fresh .navbar-burger,
+ #navbar-clone.navbar.is-fresh .navbar-burger {
+ display: none;
+ }
+
+ .site-header #nav.navbar.is-fresh,
+ #navbar-clone.navbar.is-fresh {
+ min-height: var(--openms-header-bar-min-height, 5.5rem);
+ overflow: visible;
+ }
+
+ .site-header #nav.navbar.is-fresh .container,
+ #navbar-clone.navbar.is-fresh .container {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+ align-items: center;
+ width: 100%;
+ max-width: 100%;
+ min-height: var(--openms-header-bar-min-height, 5.5rem);
+ padding-inline: var(--openms-navbar-container-pad-inline);
+ gap: clamp(0.5rem, 1.5vw, 1rem);
+ overflow: visible;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-brand,
+ #navbar-clone.navbar.is-fresh .navbar-brand {
+ display: flex;
+ align-items: center;
+ grid-column: 1;
+ grid-row: 1;
+ justify-self: start;
+ align-self: center;
+ position: relative;
+ z-index: 2;
+ min-width: 0;
+ min-height: inherit;
+ width: auto;
+ max-width: 100%;
+ }
+
+ .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: 100%;
+ height: 100%;
+ }
+
+ .navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ display: grid !important;
+ grid-column: 1 / -1;
+ grid-row: 1;
+ grid-template-columns: subgrid;
+ align-items: center;
+ min-width: 0;
+ position: static;
+ box-shadow: none;
+ background: transparent;
+ overflow: visible;
+ pointer-events: none;
+ }
+
+ @supports not (grid-template-columns: subgrid) {
+ .navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+ }
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu__panel,
+ .site-header #nav.navbar.is-fresh .navbar-menu__nav,
+ .site-header #nav.navbar.is-fresh .navbar-end,
+ #navbar-clone.navbar.is-fresh .navbar-menu__panel,
+ #navbar-clone.navbar.is-fresh .navbar-menu__nav,
+ #navbar-clone.navbar.is-fresh .navbar-end {
+ display: contents;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu__footer,
+ #navbar-clone.navbar.is-fresh .navbar-menu__footer {
+ display: none !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-links,
+ #navbar-clone.navbar.is-fresh .navbar-links {
+ grid-column: 2;
+ justify-self: center;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: center;
+ gap: var(--openms-navbar-desktop-gap);
+ min-width: 0;
+ max-width: min(100%, calc(100vw - 24rem));
+ overflow: visible;
+ pointer-events: auto;
+ position: relative;
+ z-index: 1;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-links > .navbar-item,
+ .site-header #nav.navbar.is-fresh .navbar-links > a.navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-links > a.navbar-item {
+ flex-shrink: 0;
+ }
+
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown {
+ position: relative;
+ flex-shrink: 0;
+ }
+
+ /* Invisible bridge — keeps dropdown open while moving pointer from link to panel */
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable::before,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 100%;
+ height: 0.5rem;
+ background: transparent;
+ pointer-events: auto;
+ }
+
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown {
+ position: absolute;
+ top: 100%;
+ left: auto;
+ right: 0;
+ margin-top: 0;
+ transform: none;
+ z-index: 400;
+ overflow: hidden;
+ display: none;
+ box-sizing: border-box;
+ }
+
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown,
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown {
+ display: block !important;
+ }
+
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ max-width: none;
+ overflow: visible;
+ text-overflow: clip;
+ padding-right: 0.45rem !important;
+ }
+
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link::after {
+ position: relative;
+ top: 0.1em;
+ right: auto;
+ margin-left: 0.25rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-actions,
+ #navbar-clone.navbar.is-fresh .navbar-actions {
+ grid-column: 3;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: flex-end;
+ justify-self: end;
+ gap: var(--openms-navbar-actions-gap);
+ flex-shrink: 0;
+ min-width: 0;
+ pointer-events: auto;
+ position: relative;
+ z-index: 10;
+ }
+
+ .navbar.is-fresh .navbar-item,
+ .navbar.is-fresh .navbar-link,
+ .navbar.is-fresh a.navbar-item.is-secondary,
+ #navbar-clone.navbar.is-fresh .navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-link,
+ #navbar-clone.navbar.is-fresh a.navbar-item.is-secondary {
+ padding-left: var(--openms-navbar-desktop-pad-x);
+ padding-right: var(--openms-navbar-desktop-pad-x);
+ font-size: var(--openms-navbar-desktop-font-size);
+ white-space: nowrap;
+ }
+
+ .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link {
+ padding-left: var(--openms-navbar-desktop-pad-x);
+ white-space: nowrap;
+ }
+
+ .navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link {
+ padding-left: calc(var(--openms-navbar-desktop-pad-x) + 0.05rem);
+ }
+
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate {
+ min-height: clamp(2.25rem, 3.5vw, 2.5rem);
+ padding: clamp(0.4rem, 0.8vw, 0.55rem) clamp(0.75rem, 1.2vw, 1rem) !important;
+ font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
+ }
+}
+
+/* Compact desktop — scale logo so centered links keep room */
+@media (min-width: 1280px) and (max-width: 1439px) {
+ .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo,
+ #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo {
+ max-height: clamp(52px, 5.5vw, 68px) !important;
+ height: clamp(52px, 5.5vw, 68px) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .container,
+ #navbar-clone.navbar.is-fresh .container {
+ min-height: calc(clamp(52px, 5.5vw, 68px) + 0.65rem);
+ }
+}
+
+/* Tablet, md & mobile — collapsible burger menu */
+@media (max-width: 1279px) {
+ .site-header {
+ overflow-x: clip;
+ }
+
+ .site-header #nav.navbar.is-fresh,
+ #navbar-clone.navbar.is-fresh {
+ min-height: auto;
+ overflow: visible;
+ }
+
+ .site-header #nav.navbar.is-fresh.is-menu-open .navbar-backdrop,
+ #navbar-clone.navbar.is-fresh.is-menu-open .navbar-backdrop {
+ display: block;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: var(--openms-header-height, 4.5rem);
+ bottom: 0;
+ z-index: 240;
+ margin: 0;
+ border: none;
+ padding: 0;
+ background: var(--openms-chrome-nav-backdrop, rgba(var(--openms-navy-rgb), 0.52));
+ cursor: pointer;
+ }
+
+ .site-header #nav.navbar.is-fresh .container,
+ #navbar-clone.navbar.is-fresh .container {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ min-height: var(--openms-header-bar-min-height, 5.5rem);
+ 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: var(--openms-header-bar-min-height, 5.5rem);
+ 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: 1 1 auto;
+ min-width: 0;
+ max-width: 100%;
+ height: 100%;
+ }
+
+ .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: search → burger */
+ .navbar-mobile-ctas-end {
+ display: flex !important;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: 0.35rem;
+ flex-shrink: 0;
+ margin-left: auto;
+ overflow: visible;
+ max-width: 100%;
+ }
+
+ .navbar-mobile-ctas-end .navbar-search--mobile {
+ order: 1;
+ }
+
+ .navbar-mobile-ctas-end .navbar-burger {
+ order: 2;
+ 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);
+ transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
+ }
+
+ /* Overlay menu — slide-in panel */
+ .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, 4.25rem);
+ bottom: 0;
+ height: auto !important;
+ min-height: calc(100dvh - var(--openms-header-height, 4.25rem));
+ z-index: 250;
+ margin: 0;
+ padding: 0;
+ background: var(--openms-chrome-nav-surface);
+ color: var(--openms-navy);
+ box-shadow: none;
+ border-top: none;
+ max-height: none;
+ overflow: hidden;
+ pointer-events: auto;
+ transform: translateX(100%);
+ transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s ease;
+ visibility: hidden;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active {
+ transform: translateX(0);
+ visibility: visible;
+ }
+
+ .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__panel,
+ #navbar-clone.navbar.is-fresh .navbar-menu__panel {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ width: 100%;
+ min-height: 0;
+ height: 100%;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu__panel::before,
+ #navbar-clone.navbar.is-fresh .navbar-menu__panel::before {
+ display: none;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu__nav,
+ #navbar-clone.navbar.is-fresh .navbar-menu__nav {
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ overscroll-behavior: contain;
+ scroll-padding-bottom: 1.25rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu__footer,
+ #navbar-clone.navbar.is-fresh .navbar-menu__footer {
+ flex-shrink: 0;
+ margin-top: auto;
+ border-top: none;
+ background: var(--openms-white);
+ }
+
+ .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: 0 0 auto;
+ width: 100%;
+ min-height: 0;
+ }
+
+ .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;
+ min-height: 0;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active .navbar-links,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active .navbar-links {
+ flex: 0 0 auto;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ overflow: visible;
+ padding: 0.35rem 0 1.25rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ align-items: stretch;
+ gap: 0.75rem;
+ width: 100%;
+ flex-shrink: 0;
+ margin-top: 0;
+ padding: 1rem 1.15rem 0.75rem;
+ border-top: none;
+ border-bottom: none;
+ background: var(--openms-white);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--full,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--full {
+ display: inline;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--short,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--short {
+ display: none;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item {
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+ width: 100% !important;
+ max-width: none;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important;
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ border-bottom: none !important;
+ font-size: 0.9375rem;
+ text-align: center;
+ white-space: nowrap;
+ transition: var(--openms-btn-motion, transform 0.35s cubic-bezier(0.44, 0, 0.56, 1),
+ box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1));
+ }
+
+ /* Framer CTA — override flat mobile nav link styles */
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta {
+ border: 2px solid var(--openms-blue) !important;
+ background: var(--openms-blue) !important;
+ background-color: var(--openms-blue) !important;
+ color: var(--openms-white) !important;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow, rgba(var(--openms-blue-rgb), 0.22)) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate {
+ border: 2px solid rgba(var(--openms-navy-rgb), 0.18) !important;
+ background: transparent !important;
+ background-color: transparent !important;
+ color: var(--openms-navy) !important;
+ box-shadow: none !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:active,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:active,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:active,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:active {
+ background: var(--openms-blue) !important;
+ background-color: var(--openms-blue) !important;
+ border-color: var(--openms-blue) !important;
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale, 1.03));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px)
+ var(--openms-btn-glow, rgba(var(--openms-blue-rgb), 0.22)) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active {
+ background: rgba(var(--openms-navy-rgb), 0.05) !important;
+ background-color: rgba(var(--openms-navy-rgb), 0.05) !important;
+ border-color: rgba(var(--openms-navy-rgb), 0.28) !important;
+ color: var(--openms-navy) !important;
+ transform: none;
+ box-shadow: none !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate .navbar-cta-label,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate .navbar-cta-label {
+ color: inherit !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-links,
+ #navbar-clone.navbar.is-fresh .navbar-links {
+ flex-direction: column;
+ align-items: stretch;
+ width: 100%;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-actions,
+ #navbar-clone.navbar.is-fresh .navbar-actions {
+ display: none !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-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,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item),
+ #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link {
+ width: 100%;
+ justify-content: flex-start;
+ text-align: left;
+ min-height: 3.25rem;
+ padding: 0.8rem 1.15rem;
+ font-weight: 600;
+ font-size: 1rem;
+ color: var(--openms-chrome-nav-text) !important;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link {
+ color: var(--openms-chrome-nav-text) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ flex-wrap: nowrap;
+ gap: 0;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown:last-child,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown:last-child {
+ border-bottom: none;
+ }
+
+ .navbar.is-fresh .navbar-item.has-dropdown .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link {
+ width: 100%;
+ justify-content: space-between;
+ text-align: left;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link {
+ color: var(--openms-chrome-nav-text) !important;
+ background: transparent;
+ background-color: transparent;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after {
+ transform: rotate(180deg);
+ border-color: rgba(var(--openms-navy-rgb), 0.45) !important;
+ }
+
+ .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: 0.1em;
+ right: auto;
+ margin-left: 0.35rem;
+ border-color: rgba(var(--openms-navy-rgb), 0.45) !important;
+ }
+
+ .navbar.is-fresh .navbar-item.has-dropdown .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link {
+ gap: 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 !important;
+ top: auto !important;
+ left: auto !important;
+ right: auto !important;
+ bottom: auto !important;
+ transform: none !important;
+ display: none !important;
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ background-color: transparent;
+ order: 2;
+ }
+
+ .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: left;
+ padding: 0.55rem 1rem 0.35rem;
+ border-top: none;
+ color: var(--openms-chrome-nav-text-muted) !important;
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item {
+ justify-content: flex-start;
+ text-align: left;
+ min-height: 2.75rem;
+ padding: 0.65rem 1rem;
+ font-weight: 500;
+ font-size: 0.9375rem;
+ color: var(--openms-chrome-nav-text) !important;
+ border: none;
+ border-radius: 0;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:last-child,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:last-child {
+ border-bottom: none;
+ }
+
+ .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: 0.9rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .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: flex-start;
+ align-items: center;
+ gap: 0.65rem;
+ width: 100%;
+ margin-top: 0;
+ padding: 0.75rem 1.15rem max(1rem, env(safe-area-inset-bottom, 0px));
+ border-top: none;
+ }
+
+ .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;
+ transition: color 0.2s ease;
+ }
+
+ .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;
+ }
+
+}
+
+/* Mobile + MD (≤1279px) — refinements */
+@media (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .navbar-brand-actions,
+ #navbar-clone.navbar.is-fresh .navbar-brand-actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.25rem;
+ flex: 0 1 auto;
+ min-width: 0;
+ }
+
+ .site-header #nav.navbar.is-fresh .container,
+ #navbar-clone.navbar.is-fresh .container {
+ min-height: var(--openms-header-bar-min-height, 5.5rem);
+ padding-left: var(--openms-navbar-container-pad-inline-mobile);
+ padding-right: var(--openms-navbar-container-pad-inline-mobile);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-brand,
+ #navbar-clone.navbar.is-fresh .navbar-brand {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ column-gap: 0.65rem;
+ min-height: var(--openms-header-bar-min-height, 5.5rem);
+ width: 100%;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-brand-link,
+ #navbar-clone.navbar.is-fresh .navbar-brand-link {
+ grid-column: 1;
+ max-width: 100%;
+ min-width: 0;
+ height: 100%;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-brand-actions,
+ #navbar-clone.navbar.is-fresh .navbar-brand-actions {
+ grid-column: 2;
+ flex: none;
+ margin-left: 0;
+ min-width: 0;
+ }
+
+ .navbar-mobile-toolbar.navbar-mobile-ctas-end {
+ gap: 0.2rem;
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle,
+ .navbar-mobile-toolbar .navbar-burger {
+ width: 2.75rem;
+ height: 2.75rem;
+ min-width: 2.75rem;
+ min-height: 2.75rem;
+ border: none;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .navbar-mobile-toolbar .navbar-search--mobile.is-open .navbar-search__toggle,
+ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:hover,
+ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:focus-visible,
+ .navbar-mobile-toolbar .navbar-burger.is-active,
+ .navbar-mobile-toolbar .navbar-burger:hover,
+ .navbar-mobile-toolbar .navbar-burger:focus-visible {
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-end,
+ #navbar-clone.navbar.is-fresh .navbar-end {
+ padding-bottom: 0;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu {
+ padding: 1rem 1rem 0.65rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item {
+ min-height: 2.65rem;
+ padding: 0.55rem 0.75rem !important;
+ font-size: 0.8125rem;
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links {
+ align-items: stretch;
+ justify-content: flex-start;
+ padding: 0.35rem 0 0.75rem;
+ }
+
+ .navbar-mobile-toolbar.navbar-mobile-ctas-end {
+ gap: 0.2rem;
+ }
+
+ /* Mobile drawer — link hover tint */
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item):hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item):hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover {
+ background: var(--openms-navbar-link-hover-bg, rgba(var(--openms-navy-rgb), 0.06)) !important;
+ background-color: var(--openms-navbar-link-hover-bg, rgba(var(--openms-navy-rgb), 0.06)) !important;
+ color: var(--openms-navbar-link-hover-color, var(--openms-blue)) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover {
+ background: var(--openms-navbar-dropdown-hover-bg) !important;
+ background-color: var(--openms-navbar-dropdown-hover-bg) !important;
+ color: var(--openms-navbar-dropdown-hover-text) !important;
+ font-weight: 500;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a {
+ color: rgba(var(--openms-navy-rgb), 0.72);
+ border: none;
+ border-radius: 0;
+ padding: 0.55rem;
+ min-width: 2.65rem;
+ min-height: 2.65rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible {
+ color: var(--openms-chrome-nav-text);
+ background: transparent;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item svg.icon,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg.icon,
+ #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg.icon,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg.icon {
+ color: rgba(var(--openms-navy-rgb), 0.55);
+ fill: currentColor;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item:hover svg.icon,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link:hover svg.icon,
+ #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item:hover svg.icon,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:hover svg.icon {
+ color: var(--openms-chrome-nav-text);
+ fill: currentColor;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after {
+ border-color: rgba(var(--openms-navy-rgb), 0.45) !important;
+ }
+
+ /* SM–MD header chrome icons */
+ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle {
+ color: var(--openms-navbar-link-color);
+ }
+
+ .navbar-mobile-toolbar .navbar-search--mobile.is-open .navbar-search__toggle,
+ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:hover,
+ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:focus-visible {
+ color: var(--openms-navbar-link-color);
+ background: transparent;
+ }
+
+ .navbar-mobile-toolbar .navbar-burger {
+ color: var(--openms-navbar-link-color);
+ }
+
+ .navbar-mobile-toolbar .navbar-burger span {
+ background-color: var(--openms-navbar-link-color);
+ }
+
+ .navbar-mobile-toolbar .navbar-burger.is-active span,
+ .navbar-mobile-toolbar .navbar-burger:hover span,
+ .navbar-mobile-toolbar .navbar-burger:focus-visible span {
+ background-color: var(--openms-navbar-link-color);
+ }
+
+ /* Tablet / md — right drawer menu, roomier top bar */
+ @media (min-width: 768px) and (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .container,
+ #navbar-clone.navbar.is-fresh .container {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-brand,
+ #navbar-clone.navbar.is-fresh .navbar-brand {
+ column-gap: 0.85rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item {
+ min-height: 2.75rem;
+ padding: 0.6rem 0.85rem !important;
+ font-size: 0.875rem;
+ }
+
+ .navbar-mobile-toolbar.navbar-mobile-ctas-end {
+ gap: 0.25rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ left: auto;
+ right: 0;
+ width: min(22rem, 92vw);
+ max-width: 22rem;
+ border-left: none;
+ box-shadow: -0.5rem 0 1.75rem rgba(var(--openms-navy-rgb), 0.16);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-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-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item),
+ #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link {
+ padding-left: 1.35rem;
+ padding-right: 1.35rem;
+ }
+ }
+
+ @media (max-width: 767px) {
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ left: auto;
+ right: 0;
+ width: min(100%, 22.5rem);
+ max-width: 22.5rem;
+ border-left: none;
+ box-shadow: -0.5rem 0 1.75rem rgba(var(--openms-navy-rgb), 0.18);
+ }
+ }
+
+ @media (max-width: 480px) {
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu {
+ grid-template-columns: 1fr;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem 0.65rem;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item {
+ min-height: 2.5rem;
+ padding: 0.55rem 1rem !important;
+ font-size: 0.875rem;
+ }
+ }
+
+ @media (max-width: 380px) {
+ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle,
+ .navbar-mobile-toolbar .navbar-burger {
+ width: 2.5rem;
+ height: 2.5rem;
+ min-width: 2.5rem;
+ min-height: 2.5rem;
+ }
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .site-header #nav.navbar.is-fresh .navbar-burger.is-active span,
+ #navbar-clone.navbar.is-fresh .navbar-burger.is-active span {
+ transition: none;
+ }
+
+ @media (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ transition: none;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:focus-visible {
+ transform: none;
+ }
+ }
+}
+
diff --git a/assets/css/navbar-search.css b/assets/css/navbar-search.css
new file mode 100644
index 00000000..f7bc90c7
--- /dev/null
+++ b/assets/css/navbar-search.css
@@ -0,0 +1,256 @@
+/* Navbar site search — minimal underline bar under header */
+
+.navbar-search {
+ position: relative;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+.navbar-search__toggle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 2.75rem;
+ height: 2.75rem;
+ margin: 0;
+ padding: 0;
+ border: none;
+ border-radius: 0.5rem;
+ background: transparent;
+ color: var(--openms-navbar-link-color, #000);
+ cursor: pointer;
+ transition: color 0.15s ease;
+}
+
+.navbar-search__toggle:hover,
+.navbar-search.is-open .navbar-search__toggle {
+ color: var(--openms-navbar-link-hover-color, var(--openms-blue));
+ outline: none;
+}
+
+.navbar-search__toggle:focus-visible {
+ color: var(--openms-navbar-link-hover-color, var(--openms-blue));
+ outline: none;
+}
+
+.navbar-search__toggle-icon {
+ display: block;
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.navbar-search__panel {
+ position: fixed;
+ top: var(--openms-header-height, 4.5rem);
+ left: 0;
+ right: 0;
+ z-index: 190;
+ padding: 0.7rem clamp(1rem, 3vw, 1.5rem) 0.85rem;
+ background: var(--openms-white);
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.navbar-search__panel[hidden] {
+ display: none !important;
+}
+
+.navbar-search__panel-inner {
+ width: min(34rem, 100%);
+ margin: 0 auto;
+}
+
+.navbar-search__label {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.navbar-search__field {
+ display: flex;
+ align-items: center;
+ gap: 0.55rem;
+ width: 100%;
+ padding: 0.35rem 0 0.5rem;
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.16);
+ transition: border-color 0.15s ease;
+}
+
+.navbar-search__field:focus-within {
+ border-bottom-color: var(--openms-blue);
+}
+
+.navbar-search__field-icon {
+ flex-shrink: 0;
+ width: 1.1rem;
+ height: 1.1rem;
+ color: rgba(var(--openms-navy-rgb), 0.45);
+}
+
+.navbar-search__field:focus-within .navbar-search__field-icon {
+ color: var(--openms-blue);
+}
+
+.navbar-search__input {
+ flex: 1;
+ min-width: 0;
+ border: none;
+ background: transparent;
+ padding: 0;
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.94rem, 1.2vw, 1rem);
+ font-weight: 400;
+ line-height: 1.4;
+ color: var(--openms-dark);
+ outline: none;
+}
+
+.navbar-search__input::placeholder {
+ color: rgba(var(--openms-dark-rgb), 0.42);
+}
+
+.navbar-search__input::-webkit-search-cancel-button {
+ cursor: pointer;
+}
+
+.navbar-search__close {
+ flex-shrink: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.75rem;
+ height: 1.75rem;
+ margin: 0;
+ padding: 0;
+ border: none;
+ border-radius: 999px;
+ background: transparent;
+ color: rgba(var(--openms-navy-rgb), 0.5);
+ cursor: pointer;
+ transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.navbar-search__close:hover,
+.navbar-search__close:focus-visible {
+ color: var(--openms-navy);
+ background: rgba(var(--openms-navy-rgb), 0.06);
+ outline: none;
+}
+
+.navbar-search__results {
+ max-height: min(16rem, 42vh);
+ overflow-x: hidden;
+ overflow-y: auto;
+ margin: 0.15rem 0 0;
+ padding: 0;
+}
+
+.navbar-search__results:not([hidden]) {
+ display: block;
+}
+
+.navbar-search__result {
+ display: block;
+ padding: 0.55rem 0;
+ text-decoration: none;
+ color: var(--openms-dark);
+ border-top: 1px solid rgba(var(--openms-navy-rgb), 0.06);
+}
+
+.navbar-search__result:first-child {
+ border-top: none;
+ padding-top: 0.35rem;
+}
+
+.navbar-search__result:hover,
+.navbar-search__result:focus-visible {
+ color: var(--openms-blue);
+ outline: none;
+}
+
+.navbar-search__result-title {
+ display: block;
+ font-size: 0.94rem;
+ font-weight: 500;
+ line-height: 1.35;
+}
+
+.navbar-search__result-meta {
+ display: block;
+ margin-top: 0.1rem;
+ font-size: 0.78rem;
+ color: rgba(var(--openms-dark-rgb), 0.5);
+ line-height: 1.3;
+}
+
+.navbar-search__empty,
+.navbar-search__status {
+ padding: 0.5rem 0;
+ font-size: 0.84rem;
+ color: rgba(var(--openms-dark-rgb), 0.55);
+}
+
+body.navbar-search-open::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ top: var(--openms-header-height, 4.5rem);
+ z-index: 185;
+ background: rgba(var(--openms-navy-rgb), 0.1);
+}
+
+@media (min-width: 1280px) {
+ .navbar-search--desktop {
+ display: flex;
+ position: relative;
+ z-index: 520;
+ }
+
+ .navbar-search--mobile {
+ display: none !important;
+ }
+
+ .navbar-search--desktop .navbar-search__toggle {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+
+ .navbar-search__toggle-icon {
+ width: 1.625rem;
+ height: 1.625rem;
+ }
+}
+
+@media (max-width: 1279px) {
+ .navbar-search--desktop {
+ display: none !important;
+ }
+
+ .navbar-search--mobile {
+ display: flex;
+ }
+
+ .navbar-search--mobile .navbar-search__toggle {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+
+ .navbar-search__panel {
+ padding-block: 0.65rem 0.75rem;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .navbar-search__toggle,
+ .navbar-search__field,
+ .navbar-search__close {
+ transition: none;
+ }
+}
diff --git a/assets/css/navbar-surface.css b/assets/css/navbar-surface.css
new file mode 100644
index 00000000..ec53923c
--- /dev/null
+++ b/assets/css/navbar-surface.css
@@ -0,0 +1,131 @@
+/* Site chrome navbar — full-width navy bar on all pages */
+
+:root {
+ --openms-navbar-max-width: 100%;
+ --openms-navbar-float-radius: 0;
+ --openms-navbar-float-shadow: none;
+ --openms-navbar-float-pad-y: 0;
+ --openms-navbar-float-pad-x: 0;
+}
+
+.site-header {
+ background: transparent;
+ padding: 0;
+}
+
+.site-header #nav.navbar.is-fresh {
+ padding: 0;
+ background: var(--openms-chrome-bg) !important;
+ border: none !important;
+ backdrop-filter: none;
+}
+
+.site-header #nav.navbar.is-fresh .container {
+ width: 100%;
+ max-width: 100%;
+ margin-inline: auto;
+ background: transparent;
+ border: none;
+ border-top: none;
+ border-radius: 0;
+ box-shadow: none;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+}
+
+.site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo,
+#navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo {
+ max-height: var(--openms-navbar-logo-height, 52px) !important;
+ height: var(--openms-navbar-logo-height, 52px) !important;
+}
+
+.navbar.is-fresh .navbar-item:not(.navbar-cta-item),
+.navbar.is-fresh .navbar-link,
+.navbar.is-fresh a.navbar-item.is-secondary,
+#navbar-clone.navbar.is-fresh .navbar-item:not(.navbar-cta-item),
+#navbar-clone.navbar.is-fresh .navbar-link,
+#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary {
+ font-weight: 500;
+ border-radius: 999px;
+ transition:
+ color 0.2s ease,
+ background-color 0.2s ease;
+}
+
+.navbar-cta-item .navbar-cta-arrow {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 0;
+ transition: transform 0.25s cubic-bezier(0.44, 0, 0.56, 1);
+}
+
+.navbar-cta-item .navbar-cta-arrow svg {
+ display: block;
+ width: 0.95rem;
+ height: 0.95rem;
+}
+
+.navbar-cta-item:hover .navbar-cta-arrow,
+.navbar-cta-item:focus-visible .navbar-cta-arrow {
+ transform: translateX(2px);
+}
+
+@media (min-width: 1280px) {
+ .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown {
+ margin-top: 0;
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+ border-radius: 0.85rem;
+ border-top-color: rgba(var(--openms-navy-rgb), 0.08);
+ box-shadow:
+ 0 0.35rem 1.25rem rgba(var(--openms-dark-rgb), 0.08),
+ 0 0.125rem 0.35rem rgba(var(--openms-dark-rgb), 0.04);
+ overflow: hidden;
+ }
+
+ .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 {
+ min-height: calc(var(--openms-navbar-logo-height, 52px) + 0.65rem);
+ padding-left: var(--openms-navbar-container-pad-inline);
+ padding-right: var(--openms-navbar-container-pad-inline);
+ }
+}
+
+@media (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .container,
+ #navbar-clone.navbar.is-fresh .container {
+ border-radius: 0;
+ min-height: calc(var(--openms-navbar-logo-height, 52px) + 0.55rem);
+ padding-left: var(--openms-navbar-container-pad-inline-mobile);
+ padding-right: var(--openms-navbar-container-pad-inline-mobile);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-brand,
+ #navbar-clone.navbar.is-fresh .navbar-brand {
+ min-height: calc(var(--openms-navbar-logo-height, 52px) + 0.55rem);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ border-top: none;
+ border-radius: 0;
+ box-shadow: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .navbar-cta-item .navbar-cta-arrow {
+ transition: none;
+ }
+
+ .navbar-cta-item:hover .navbar-cta-arrow,
+ .navbar-cta-item:focus-visible .navbar-cta-arrow {
+ transform: none;
+ }
+}
diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css
new file mode 100644
index 00000000..38ebec98
--- /dev/null
+++ b/assets/css/news-banner.css
@@ -0,0 +1,117 @@
+/* Site announcement — chrome stack: banner → nav → hero */
+
+.news-banner {
+ --news-banner-max: min(92rem, calc(100% - 1.5rem));
+ --news-banner-pad-x: clamp(0.75rem, 1.5vw, 1.35rem);
+ --news-banner-bg: color-mix(in srgb, var(--openms-blue-secondary) 10%, var(--openms-white));
+ --news-banner-border: rgba(var(--openms-blue-rgb), 0.14);
+ --news-banner-label-color: var(--openms-white);
+ --news-banner-label-bg: var(--openms-orange);
+ --news-banner-label-border: var(--openms-orange);
+ --news-banner-text-color: rgba(var(--openms-navy-rgb), 0.9);
+ --news-banner-focus-ring: rgba(var(--openms-blue-secondary-rgb), 0.45);
+ position: relative;
+ z-index: 100;
+ overflow: hidden;
+ background-color: var(--news-banner-bg);
+ border-bottom: 1px solid var(--news-banner-border);
+}
+
+.news-banner::before {
+ content: none;
+}
+
+.news-banner::after {
+ content: none;
+}
+
+.news-banner__inner {
+ position: relative;
+ z-index: 1;
+ max-width: var(--news-banner-max);
+ margin: 0 auto;
+ padding: 0.65rem var(--news-banner-pad-x);
+}
+
+.news-banner__link,
+.news-banner__message {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 0.5rem 0.75rem;
+ margin: 0;
+ min-height: 2rem;
+ text-align: center;
+}
+
+.news-banner__link {
+ width: 100%;
+ color: inherit;
+ text-decoration: none;
+}
+
+a.news-banner__link:hover,
+a.news-banner__link:focus-visible {
+ outline: none;
+}
+
+a.news-banner__link:focus-visible {
+ box-shadow: 0 0 0 2px var(--news-banner-focus-ring);
+}
+
+a.news-banner__link:hover .news-banner__text,
+a.news-banner__link:focus-visible .news-banner__text {
+ color: var(--openms-blue);
+}
+
+.news-banner__label {
+ flex-shrink: 0;
+ display: inline-flex;
+ align-items: center;
+ padding: 0.2rem 0.55rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--news-banner-label-color);
+ background: var(--news-banner-label-bg);
+ border: none;
+ border-radius: 999px;
+}
+
+.news-banner__text {
+ flex: 0 1 auto;
+ min-width: 0;
+ max-width: 60ch;
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.92rem, 1.4vw, 1rem);
+ font-weight: 500;
+ line-height: 1.5;
+ letter-spacing: 0.01em;
+ color: var(--news-banner-text-color);
+ text-wrap: pretty;
+ transition: color 0.2s ease;
+}
+
+@media (min-width: 768px) {
+ .news-banner__inner {
+ padding-block: 0.7rem;
+ }
+}
+
+@media (max-width: 767px) {
+ .news-banner__link,
+ .news-banner__message {
+ align-items: center;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .news-banner__link,
+ .news-banner__text {
+ transition: none;
+ }
+}
diff --git a/assets/css/news-section.css b/assets/css/news-section.css
new file mode 100644
index 00000000..bed8cf9a
--- /dev/null
+++ b/assets/css/news-section.css
@@ -0,0 +1,490 @@
+/* News — listing & single articles */
+
+.news-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --news-max: 68rem;
+ --news-gap: clamp(2rem, 4vw, 3rem);
+ --news-card-radius: 0.85rem;
+ --news-card-border: rgba(var(--openms-navy-rgb), 0.12);
+ --news-card-pad: clamp(1rem, 2vw, 1.25rem);
+
+ display: block;
+ width: 100%;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.news-page-layout__content {
+ width: min(100%, var(--news-max));
+ max-width: var(--news-max);
+ margin-inline: auto;
+ padding-inline: clamp(1.25rem, 4vw, 2rem);
+}
+
+.openms-lib-hero.news-page-hero {
+ margin-bottom: clamp(2rem, 4vh, 3rem);
+}
+
+.news-page-hero--article .openms-lib-hero__title {
+ max-width: min(28ch, 100%);
+}
+
+.news-body {
+ display: grid;
+ gap: var(--news-gap);
+}
+
+.news-body__intro {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.55;
+ color: rgba(var(--openms-navy-rgb), 0.82);
+}
+
+/* —— News bibliography (matches publications layout) —— */
+.news-bibliography {
+ display: grid;
+ gap: 1rem;
+ margin: 0;
+ padding-top: 0.25rem;
+}
+
+.news-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 0.75rem 1.25rem;
+ padding: 0.15rem 0 0.35rem;
+}
+
+.news-toolbar__intro {
+ display: grid;
+ gap: 0.2rem;
+ min-width: min(100%, 14rem);
+}
+
+.news-toolbar__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.1rem, 2vw, 1.3rem);
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.news-toolbar__filter {
+ display: flex;
+ flex-direction: column;
+ gap: 0.3rem;
+ min-width: min(100%, 9rem);
+}
+
+.news-toolbar__select {
+ min-height: 2.5rem;
+ min-width: 7.5rem;
+ padding: 0.4rem 2rem 0.4rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ font-weight: 600;
+ color: var(--openms-navy);
+ background-color: var(--openms-white);
+ border: 1px solid var(--news-card-border);
+ border-radius: 0.5rem;
+ cursor: pointer;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230c2171' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 0.7rem center;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.news-toolbar__select:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.35);
+}
+
+.news-toolbar__select:focus {
+ outline: none;
+}
+
+.news-toolbar__select:focus-visible {
+ border-color: var(--openms-blue);
+ box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.18);
+}
+
+.news-bibliography__entries {
+ display: grid;
+ gap: 0.85rem;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ overflow: visible;
+}
+
+.news-year {
+ margin: 0;
+ padding: 0;
+}
+
+.news-page:not(.news-year-filter--ready) .news-year[data-news-year] {
+ display: none;
+}
+
+.news-year[hidden] {
+ display: none;
+}
+
+.news-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: 0.85rem;
+}
+
+.news-year .news-entry {
+ display: grid;
+ gap: 0.45rem;
+ margin: 0;
+ padding: var(--news-card-pad);
+ border: 1px solid var(--news-card-border);
+ border-radius: var(--news-card-radius);
+ background: var(--openms-white);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.news-year .news-entry:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+}
+
+.news-entry p {
+ margin: 0;
+}
+
+.news-entry__title {
+ font-family: var(--openms-font-heading);
+ font-size: var(--openms-body-size-lg);
+ font-weight: 700;
+ line-height: 1.4;
+ color: var(--openms-navy);
+ text-wrap: pretty;
+}
+
+.news-entry__title-link {
+ color: inherit;
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.news-entry__title-link:hover,
+.news-entry__title-link:focus-visible {
+ color: var(--openms-blue);
+ text-decoration: underline;
+ text-underline-offset: 0.14em;
+ outline: none;
+}
+
+.news-entry__meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.35rem 0.5rem;
+ font-size: var(--openms-text-min);
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.65);
+}
+
+.news-entry__date {
+ font-weight: 600;
+ color: rgba(var(--openms-navy-rgb), 0.78);
+}
+
+.news-entry__sep {
+ color: rgba(var(--openms-navy-rgb), 0.35);
+}
+
+.news-entry__summary {
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: rgba(var(--openms-navy-rgb), 0.75);
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.news-entry__summary p {
+ margin: 0;
+}
+
+.news-entry__action {
+ justify-self: start;
+ margin-top: 0.15rem;
+ font-size: 0.8rem;
+ font-weight: 700;
+ color: var(--openms-blue);
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.news-entry__action:hover,
+.news-entry__action:focus-visible {
+ color: var(--openms-navy);
+ text-decoration: underline;
+ outline: none;
+}
+
+.news-bibliography--undated .news-year--undated {
+ display: block !important;
+}
+
+@media (max-width: 720px) {
+ .news-page-hero--article .openms-lib-hero__title {
+ max-width: none;
+ }
+}
+
+@media (max-width: 960px) {
+ .news-toolbar {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .news-toolbar__filter,
+ .news-toolbar__select {
+ width: 100%;
+ }
+}
+
+/* Hero actions (single article) */
+.news-page-layout .openms-lib-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ text-decoration: none;
+ transition: var(--openms-btn-motion);
+}
+
+.news-page-layout .openms-lib-btn--primary {
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+/* Date badge (single article header) */
+.news-card__date-block {
+ flex-shrink: 0;
+}
+
+.news-card__date {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-width: 3.5rem;
+ padding: 0.5rem 0.625rem;
+ border-radius: 0.5rem;
+ background: rgba(var(--openms-navy-rgb), 0.06);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ text-align: center;
+ line-height: 1.1;
+}
+
+.news-card__date-month {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: var(--openms-orange);
+}
+
+.news-card__date-day {
+ font-family: var(--openms-font-heading);
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--openms-navy);
+}
+
+.news-card__date-year {
+ margin-top: 0.125rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.625rem;
+ font-weight: 600;
+ color: rgba(var(--openms-dark-rgb), 0.55);
+}
+
+.news-card__authors {
+ font-size: var(--openms-text-min);
+ line-height: 1.5;
+ color: rgba(var(--openms-navy-rgb), 0.6);
+}
+
+/* --- Single news article --- */
+
+.news-article {
+ padding: 0;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+.news-article__header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.75rem 1.25rem;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.25rem;
+ border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+}
+
+.news-article__meta {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.4;
+ color: rgba(var(--openms-dark-rgb), 0.75);
+}
+
+.news-article__content {
+ max-width: none;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ font-weight: var(--openms-body-weight);
+ line-height: 1.65;
+ color: rgba(var(--openms-dark-rgb), 0.88);
+}
+
+.news-article__content p {
+ margin: 0 0 1rem;
+}
+
+.news-article__content strong {
+ font-weight: 600;
+ color: var(--openms-navy);
+}
+
+.news-article__content a {
+ color: var(--openms-blue);
+ font-weight: 500;
+ text-decoration: underline;
+ text-underline-offset: 0.15em;
+ transition: color 0.2s ease;
+}
+
+.news-article__content a:hover {
+ color: var(--openms-navy);
+}
+
+.news-article__content a:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 2px;
+ border-radius: 0.125rem;
+}
+
+.news-article__content h2,
+.news-article__content h3,
+.news-article__content h4 {
+ margin: 1.75rem 0 0.75rem;
+ font-family: var(--openms-font-heading);
+ color: var(--openms-navy);
+ letter-spacing: -0.01em;
+}
+
+.news-article__content h2 {
+ font-size: var(--openms-secondary-heading-size-lg);
+ font-weight: 700;
+}
+
+.news-article__content h3 {
+ font-size: var(--openms-secondary-heading-size);
+ font-weight: 700;
+}
+
+.news-article__content ul,
+.news-article__content ol {
+ margin: 0 0 1rem;
+ padding-left: 1.25rem;
+}
+
+.news-article__content li {
+ margin-bottom: 0.35rem;
+}
+
+.news-article__content img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+}
+
+.news-article__footer {
+ margin-top: 2rem;
+ padding-top: 1.25rem;
+ border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+}
+
+.news-article__back-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ box-shadow: 0 0 0 0 rgba(var(--openms-navy-rgb), 0.22);
+ color: var(--openms-white);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ font-weight: 600;
+ text-decoration: none;
+ transition: var(--openms-btn-motion, transform 0.35s cubic-bezier(0.44, 0, 0.56, 1),
+ box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1));
+}
+
+.news-article__back-link:hover,
+.news-article__back-link:focus-visible {
+ transform: scale(var(--openms-btn-hover-scale, 1.03));
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-navy-rgb), 0.22);
+ color: var(--openms-white);
+}
+
+.news-article__back-link:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 2px;
+}
+
+@media (max-width: 768px) {
+ .news-article__header {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .news-article__back-link:hover,
+ .news-article__back-link:focus-visible {
+ transform: none;
+ }
+
+ .news-page-layout .openms-lib-btn:hover,
+ .news-page-layout .openms-lib-btn:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/openms-buttons.css b/assets/css/openms-buttons.css
new file mode 100644
index 00000000..95c23e49
--- /dev/null
+++ b/assets/css/openms-buttons.css
@@ -0,0 +1,359 @@
+/* Shared CTA system — Framer-style pill + glow ring on hover (no fill/color shift) */
+
+:root {
+ --openms-btn-pill-radius: 999px;
+ --openms-btn-glow: rgba(var(--openms-blue-rgb), 0.22);
+ --openms-btn-glow-size: 6px;
+ --openms-btn-hover-scale: 1.03;
+ --openms-btn-padding-y: 0.7rem;
+ --openms-btn-padding-x: 1.25rem;
+ --openms-btn-padding: var(--openms-btn-padding-y) var(--openms-btn-padding-x);
+ --openms-btn-motion: transform 0.35s cubic-bezier(0.44, 0, 0.56, 1),
+ box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1);
+}
+
+/* Primary blue CTA — same design as Contact us (.openms-step__cta) */
+
+.openms-btn-primary,
+.openms-step__cta,
+.about-cta-btn--sponsor,
+.openms-btn-primary.about-cta-btn--sponsor,
+.footer-redesign .footer-sponsor-btn,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ width: fit-content;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ border: 2px solid var(--openms-blue);
+ background: var(--openms-blue);
+ color: var(--openms-white) !important;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ text-decoration: none;
+ white-space: nowrap;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.openms-btn-primary:visited,
+.openms-step__cta:visited,
+.about-cta-btn--sponsor:visited,
+.footer-redesign .footer-sponsor-btn:visited,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:visited,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:visited,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:visited,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:visited,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:visited,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:visited {
+ color: var(--openms-white) !important;
+}
+
+.openms-btn-primary:hover,
+.openms-btn-primary:focus-visible,
+.openms-btn-primary:active,
+.openms-step__cta:hover,
+.openms-step__cta:focus-visible,
+.openms-step__cta:active,
+.about-cta-btn--sponsor:hover,
+.about-cta-btn--sponsor:focus-visible,
+.about-cta-btn--sponsor:active,
+.footer-redesign .footer-sponsor-btn:hover,
+.footer-redesign .footer-sponsor-btn:focus-visible,
+.footer-redesign .footer-sponsor-btn:active,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:hover,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:active,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:hover,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:active,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:hover,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:active,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:hover,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:active,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:active,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:active {
+ background: var(--openms-blue);
+ border-color: var(--openms-blue);
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+ text-shadow: none;
+}
+
+.openms-btn-primary:focus-visible,
+.openms-step__cta:focus-visible,
+.contact-area__actions .contact-area__cta:focus-visible,
+.about-cta-btn--sponsor:focus-visible,
+.footer-redesign .footer-sponsor-btn:focus-visible,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow) !important;
+}
+
+/* Bulma / navbar — keep brand colors, inherit Framer hover from rules above */
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta,
+.footer-redesign .footer-sponsor-btn,
+.footer-redesign .footer-sponsor-btn:visited {
+ background: var(--openms-blue) !important;
+ background-color: var(--openms-blue) !important;
+ border: 2px solid var(--openms-blue) !important;
+ border-color: var(--openms-blue) !important;
+ color: var(--openms-white) !important;
+}
+
+.contact-area__actions .contact-area__cta:hover,
+.contact-area__actions .contact-area__cta:focus-visible,
+.contact-area__actions .contact-area__cta:active {
+ color: var(--openms-white) !important;
+}
+
+.contact-area__actions .openms-btn-primary,
+.contact-area__actions .openms-step__cta {
+ width: 100%;
+}
+
+.hero-modern__btn.openms-btn-primary {
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ background: var(--openms-blue) !important;
+ border-color: var(--openms-blue) !important;
+ color: var(--openms-white) !important;
+}
+
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate {
+ padding: var(--openms-btn-padding) !important;
+ min-height: 2.75rem;
+ font-size: var(--openms-text-min);
+ line-height: 1.3;
+}
+
+/* Extra space between Sponsor and Donate — room for hover glow + scale */
+.navbar.is-fresh .navbar-actions .navbar-cta-item + .navbar-cta-item,
+#navbar-clone.navbar.is-fresh .navbar-actions .navbar-cta-item + .navbar-cta-item {
+ margin-inline-start: calc(var(--openms-btn-glow-size) * 2 + 0.85rem);
+}
+
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary .navbar-cta-label,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta .navbar-cta-label,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate .navbar-cta-label,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary .navbar-cta-label,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta .navbar-cta-label,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate .navbar-cta-label,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta .navbar-cta-label,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate .navbar-cta-label {
+ color: inherit !important;
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+}
+
+/* Outline Donate CTA — blue border, no fill */
+
+.about-cta-btn--donate,
+.footer-redesign .footer-donate-btn.signup-button.secondary-btn,
+.governance-links a.about-cta-btn--donate {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+ text-decoration: none;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.about-cta-btn--donate:visited,
+.governance-links a.about-cta-btn--donate:visited {
+ color: var(--openms-blue) !important;
+}
+
+.about-cta-btn--donate:hover,
+.about-cta-btn--donate:focus-visible,
+.about-cta-btn--donate:active,
+.governance-links a.about-cta-btn--donate:hover,
+.governance-links a.about-cta-btn--donate:focus-visible,
+.governance-links a.about-cta-btn--donate:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.about-cta-btn--donate:focus-visible,
+.governance-links a.about-cta-btn--donate:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+/* Footer donate — white text on navy footer, Framer glow on hover */
+.footer-redesign .footer-donate-btn.signup-button.secondary-btn,
+.footer-redesign .footer-donate-btn.signup-button.secondary-btn:visited {
+ min-height: 2.75rem;
+ height: auto !important;
+ padding: var(--openms-btn-padding) !important;
+ font-size: var(--openms-text-min) !important;
+ line-height: 1.3 !important;
+ border-radius: var(--openms-btn-pill-radius) !important;
+ background: transparent !important;
+ background-color: transparent !important;
+ border: 2px solid var(--openms-blue) !important;
+ border-color: var(--openms-blue) !important;
+ color: var(--openms-white) !important;
+ text-decoration: none;
+ text-shadow: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow) !important;
+ transition: var(--openms-btn-motion) !important;
+}
+
+.footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover,
+.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible,
+.footer-redesign .footer-donate-btn.signup-button.secondary-btn:active {
+ background: transparent !important;
+ background-color: transparent !important;
+ border-color: var(--openms-blue) !important;
+ color: var(--openms-white) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important;
+ outline: none;
+ text-decoration: none;
+ text-shadow: none;
+}
+
+.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow) !important;
+}
+
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: 2px solid rgba(var(--openms-white-rgb), 0.34) !important;
+ border-color: rgba(var(--openms-white-rgb), 0.34) !important;
+ color: var(--openms-white) !important;
+}
+
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:active,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:active {
+ background: var(--openms-chrome-surface-hover) !important;
+ background-color: var(--openms-chrome-surface-hover) !important;
+ border-color: rgba(var(--openms-white-rgb), 0.5) !important;
+ color: var(--openms-white) !important;
+}
+
+@media (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:visited,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:visited,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active {
+ border: 2px solid rgba(var(--openms-navy-rgb), 0.22) !important;
+ border-color: rgba(var(--openms-navy-rgb), 0.22) !important;
+ color: var(--openms-chrome-nav-text) !important;
+ background: transparent !important;
+ background-color: transparent !important;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .openms-btn-primary:hover,
+ .openms-btn-primary:focus-visible,
+ .openms-step__cta:hover,
+ .openms-step__cta:focus-visible,
+ .about-cta-btn--sponsor:hover,
+ .about-cta-btn--sponsor:focus-visible,
+ .footer-redesign .footer-sponsor-btn:hover,
+ .footer-redesign .footer-sponsor-btn:focus-visible,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:hover,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:hover,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:hover,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:hover,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+ .about-cta-btn--donate:hover,
+ .about-cta-btn--donate:focus-visible,
+ .footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover,
+ .footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible,
+ .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover,
+ .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible,
+ .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover,
+ .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible,
+ .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover,
+ .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/openms-lib.css b/assets/css/openms-lib.css
new file mode 100644
index 00000000..a3b75ada
--- /dev/null
+++ b/assets/css/openms-lib.css
@@ -0,0 +1,3561 @@
+/* OpenMS-lib — unified section & list-row design system */
+
+.openms-lib-layout .shortcuts-container,
+.content-padding:has(.openms-lib-layout) .shortcuts-container {
+ display: none;
+}
+
+.openms-lib-layout {
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(4.5rem, 9vh, 6.5rem);
+}
+
+.openms-lib-layout a:focus-visible {
+ outline: 2px solid var(--openms-blue);
+ outline-offset: 3px;
+}
+
+/* ── Tokens ── */
+.openms-lib-page {
+ --olib-max: 72rem;
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(6rem, 12vh, 8rem);
+ --olib-block-gap: clamp(3.5rem, 7vh, 5.5rem);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --olib-line: rgba(var(--openms-navy-rgb), 0.08);
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-bg-soft: #f4f6f9;
+ --olib-thumb: clamp(5.5rem, 9vw, 6.75rem);
+ --olib-img-max: clamp(3.25rem, 5.5vw, 4.25rem);
+ --olib-radius: 1.25rem;
+ --olib-radius-sm: 0.65rem;
+ --olib-shadow: 0 0.35rem 1.5rem rgba(var(--openms-navy-rgb), 0.06);
+ --olib-shadow-hover: 0 0.75rem 2rem rgba(var(--openms-navy-rgb), 0.1);
+ --olib-ease: cubic-bezier(0.22, 1, 0.36, 1);
+ --olib-feature-gap: clamp(2rem, 4vw, 3.5rem);
+ --olib-card-gap: clamp(1.25rem, 2.5vw, 1.75rem);
+
+ color: var(--openms-navy);
+ background: var(--openms-white);
+ overflow-x: clip;
+}
+
+.openms-lib-page__intro {
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+ padding-inline: 0;
+ overflow-x: clip;
+ background: linear-gradient(
+ 180deg,
+ var(--openms-white) 0%,
+ color-mix(in srgb, var(--olib-bg-soft) 40%, var(--openms-white)) 100%
+ );
+}
+
+.openms-lib-page__intro-panel {
+ display: flex;
+ flex-direction: column;
+ gap: var(--olib-block-gap);
+ width: min(100%, var(--olib-max));
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+ padding-top: clamp(2rem, 4vw, 3.25rem);
+ padding-bottom: clamp(6.5rem, 12vh, 9rem);
+}
+
+.openms-lib-page__body {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+ margin-top: clamp(3.5rem, 6vh, 5rem);
+ padding-inline: 0;
+ overflow-x: clip;
+}
+
+.openms-lib-page__outro {
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+ margin-top: clamp(1.5rem, 3vh, 2.5rem);
+ padding-inline: 0;
+ overflow-x: clip;
+ background: var(--olib-bg-soft);
+ border-top: 1px solid var(--olib-line);
+}
+
+.openms-lib-page__body > .openms-lib-page__anchor {
+ width: 100%;
+ padding-block: clamp(5.5rem, 11vh, 7.5rem);
+ padding-inline: max(var(--olib-pad-x), calc((100% - var(--olib-max)) / 2 + var(--olib-pad-x)));
+}
+
+.openms-lib-page__body > .openms-lib-page__anchor:nth-child(even) {
+ background: var(--olib-bg-soft);
+}
+
+.openms-lib-page__body .keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles,
+.openms-lib-page__body .openms-steps--openms-lib.openms-steps--lib-capabilities,
+.openms-lib-page__body .openms-steps--openms-lib.openms-steps--lib-developers {
+ padding-block: 0;
+}
+
+.openms-lib-page__outro .openms-lib-block {
+ gap: 0;
+ padding-block: 0;
+}
+
+.openms-lib-page__outro .openms-lib-block--resources,
+.openms-lib-page__outro .openms-lib-block--developers {
+ display: grid;
+ gap: clamp(2.5rem, 5vw, 3.5rem);
+ width: min(100%, var(--olib-max));
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+ padding-block: clamp(5.5rem, 11vh, 7.5rem) clamp(4.5rem, 9vh, 6rem);
+}
+
+.openms-lib-page__anchor {
+ scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem);
+}
+
+.openms-lib-page__nav {
+ position: sticky;
+ top: var(--openms-header-height, 4.25rem);
+ z-index: 15;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.45rem;
+ overflow-x: auto;
+ overscroll-behavior-x: contain;
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: none;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0.65rem max(var(--olib-pad-x), calc((100% - var(--olib-max)) / 2 + var(--olib-pad-x))) 0.85rem;
+ background: color-mix(in srgb, var(--openms-white) 96%, transparent);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--olib-line);
+ box-shadow: 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.04);
+}
+
+.openms-lib-page__nav::-webkit-scrollbar {
+ display: none;
+}
+
+.openms-lib-page__nav-link {
+ flex: 0 0 auto;
+ display: inline-flex;
+ align-items: center;
+ min-height: 2.1rem;
+ padding: 0.35rem 0.85rem;
+ border-radius: 999px;
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ color: var(--openms-blue);
+ text-decoration: none;
+ background: rgba(var(--openms-blue-rgb), 0.07);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.12);
+ white-space: nowrap;
+ transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.openms-lib-page__nav-link:hover,
+.openms-lib-page__nav-link:focus-visible {
+ color: var(--openms-navy);
+ background: rgba(var(--openms-blue-rgb), 0.12);
+ border-color: rgba(var(--openms-blue-rgb), 0.22);
+}
+
+.openms-lib-page__body,
+.openms-lib-page__outro {
+ border: none;
+}
+
+.openms-lib-band__inner {
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+ padding-inline: 0;
+}
+
+/* ── Section blocks ── */
+.openms-lib-block {
+ display: grid;
+ gap: 0;
+ padding-block: var(--olib-section-y);
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--overview {
+ padding-inline: 0;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--overview:not(.keyfeatures-modern--lib-tiles),
+.openms-steps--openms-lib.openms-steps--lib-list:not(.openms-steps--lib-capabilities):not(.openms-steps--lib-developers) {
+ margin: 0;
+ padding: var(--olib-section-y) 0;
+ color: var(--openms-navy);
+ background: var(--openms-white);
+ border: none;
+ overflow: visible;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities,
+.openms-steps--openms-lib.openms-steps--lib-developers {
+ margin: 0;
+ padding: var(--olib-section-y) 0;
+ border: none;
+ overflow: visible;
+}
+
+/* Neutralize homepage variant styles (capabilities / developers cards) */
+.openms-steps--openms-lib.openms-steps--users::before,
+.openms-steps--openms-lib.openms-steps--users::after,
+.openms-steps--openms-lib.openms-steps--developers:not(.openms-steps--lib-developers)::before,
+.openms-steps--openms-lib.openms-steps--developers:not(.openms-steps--lib-developers)::after {
+ display: none;
+}
+
+.openms-steps--openms-lib .openms-steps__header {
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.openms-steps--openms-lib .openms-step {
+ width: auto;
+ height: auto;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ overflow: visible;
+ transform: none;
+}
+
+.openms-steps--openms-lib .openms-step:hover,
+.openms-steps--openms-lib .openms-step:focus-within {
+ border: none;
+ box-shadow: none;
+ transform: none;
+}
+
+.openms-steps--openms-lib .openms-step--showcase,
+.openms-steps--openms-lib .openms-step--developer {
+ min-height: 0;
+ padding: 0;
+ background: transparent;
+}
+
+.openms-steps--openms-lib:not(.openms-steps--lib-capabilities) .openms-step--showcase .openms-step__media,
+.openms-steps--openms-lib:not(.openms-steps--lib-developers) .openms-step--developer .openms-step__media {
+ order: unset;
+ flex: none;
+ min-height: 0;
+ border: 1px solid var(--olib-line);
+ border-radius: 0.5rem;
+ background: var(--olib-bg-soft);
+}
+
+.openms-steps--openms-lib .openms-step--showcase .openms-step__img,
+.openms-steps--openms-lib .openms-step--showcase .openms-step__img.img-fit {
+ min-height: 0;
+ max-height: var(--olib-img-max);
+}
+
+.openms-steps--openms-lib .openms-step--showcase .openms-step__content,
+.openms-steps--openms-lib:not(.openms-steps--lib-developers) .openms-step--developer .openms-step__content {
+ flex: none;
+ padding: 0;
+}
+
+.openms-steps--openms-lib .openms-step__index {
+ display: block;
+}
+
+.keyfeatures-modern--overview .keyfeatures-modern__inner,
+.openms-steps--lib-list .openms-steps__inner {
+ display: grid;
+ gap: 0;
+ padding-block: 0;
+}
+
+.openms-steps--lib-list::before,
+.openms-steps--lib-list::after {
+ display: none;
+}
+
+/* ── Shared section header (centered, Stratex-style) ── */
+.openms-lib-block__head,
+.keyfeatures-modern--overview .keyfeatures-modern__header,
+.openms-steps--lib-list .openms-steps__header {
+ display: grid;
+ gap: 0.65rem;
+ justify-items: center;
+ max-width: 46rem;
+ width: 100%;
+ margin: 0 auto clamp(3rem, 6vw, 4.5rem);
+ padding: 0;
+ border: none;
+ text-align: center;
+}
+
+.openms-lib-block__eyebrow,
+.keyfeatures-modern--overview .keyfeatures-modern__eyebrow,
+.openms-steps--lib-list .openms-steps__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+ margin: 0;
+ padding: 0.35rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ text-transform: none;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.18);
+ border-radius: 999px;
+}
+
+.openms-lib-block__eyebrow::before,
+.keyfeatures-modern--overview .keyfeatures-modern__eyebrow::before,
+.openms-steps--lib-list .openms-steps__eyebrow::before {
+ content: "";
+ flex-shrink: 0;
+ width: 0.45rem;
+ height: 0.45rem;
+ border-radius: 50%;
+ background: var(--openms-blue);
+}
+
+.openms-lib-block__title,
+.keyfeatures-modern--overview .keyfeatures-modern__title,
+.openms-steps--lib-list .openms-steps__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.4vw, 2.5rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.openms-lib-block__title-accent,
+.keyfeatures-modern--overview .keyfeatures-modern__title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.openms-steps--lib-list .openms-steps__title-accent {
+ color: var(--openms-blue);
+ background: none;
+ -webkit-text-fill-color: currentColor;
+}
+
+.openms-lib-block__lead,
+.keyfeatures-modern--overview .keyfeatures-modern__lead,
+.openms-steps--lib-list .openms-steps__subtitle {
+ margin: 0.35rem 0 0;
+ max-width: 42ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.65;
+ color: var(--olib-text-muted);
+ text-align: center;
+}
+
+.openms-lib-block__lead p,
+.keyfeatures-modern--overview .keyfeatures-modern__lead p {
+ margin: 0;
+}
+
+.openms-lib-block__lead a {
+ color: var(--openms-blue);
+ font-weight: 600;
+ text-decoration: none;
+}
+
+.openms-lib-block__lead a:hover,
+.openms-lib-block__lead a:focus-visible {
+ color: var(--openms-navy);
+ text-decoration: underline;
+}
+
+/* ── Shared list container ── */
+.openms-lib-list,
+.keyfeatures-modern--overview .keyfeatures-modern__topics,
+.openms-steps--lib-list .openms-steps__grid {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ border: 1px solid var(--olib-line);
+ border-radius: 0.65rem;
+ overflow: hidden;
+ background: var(--openms-white);
+}
+
+.openms-lib-list__row + .openms-lib-list__row,
+.openms-lib-list > li + li,
+.openms-lib-list > .keyfeatures-modern__topic + .keyfeatures-modern__topic,
+.openms-lib-list > .openms-steps__item + .openms-steps__item {
+ border-top: 1px solid var(--olib-line);
+}
+
+.openms-lib-list > li,
+.openms-lib-list > .keyfeatures-modern__topic,
+.openms-lib-list > .openms-steps__item {
+ margin: 0;
+ min-width: 0;
+ display: block;
+}
+
+.openms-lib-list > .keyfeatures-modern__topic,
+.openms-lib-list > .openms-steps__item {
+ min-width: 0;
+}
+
+/* ── Shared list row ── */
+.openms-lib-list:not(.openms-lib-list--capabilities):not(.openms-lib-list--developers):not(.openms-lib-list--split):not(.openms-lib-list--overview):not(.openms-lib-list--tiles):not(.openms-lib-list--resource-grid)
+ .openms-lib-list__row,
+.keyfeatures-modern--overview:not(.keyfeatures-modern--lib-tiles) .keyfeatures-modern__topic-card--overview,
+.openms-steps--lib-list:not(.openms-steps--lib-capabilities):not(.openms-steps--lib-developers) .openms-step--list-row {
+ display: grid;
+ grid-template-columns: 2.75rem var(--olib-thumb) minmax(0, 1fr);
+ grid-template-areas: "index media content";
+ align-items: start;
+ gap: clamp(0.85rem, 1.6vw, 1.25rem);
+ padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.35rem);
+ background: var(--openms-white);
+ transition: background-color 0.15s ease;
+}
+
+.openms-lib-list:not(.openms-lib-list--capabilities):not(.openms-lib-list--developers):not(.openms-lib-list--split):not(.openms-lib-list--overview):not(.openms-lib-list--tiles):not(.openms-lib-list--resource-grid)
+ .openms-lib-list__row:hover,
+.openms-lib-list:not(.openms-lib-list--capabilities):not(.openms-lib-list--developers):not(.openms-lib-list--split):not(.openms-lib-list--overview):not(.openms-lib-list--tiles):not(.openms-lib-list--resource-grid)
+ .openms-lib-list__row:focus-within,
+.keyfeatures-modern--overview:not(.keyfeatures-modern--lib-tiles) .keyfeatures-modern__topic-card--overview:hover,
+.keyfeatures-modern--overview:not(.keyfeatures-modern--lib-tiles) .keyfeatures-modern__topic-card--overview:focus-within,
+.openms-steps--lib-list:not(.openms-steps--lib-capabilities):not(.openms-steps--lib-developers) .openms-step--list-row:hover,
+.openms-steps--lib-list:not(.openms-steps--lib-capabilities):not(.openms-steps--lib-developers) .openms-step--list-row:focus-within {
+ background: var(--olib-bg-soft);
+}
+
+.openms-lib-list__index,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-index,
+.openms-steps--lib-list .openms-step__index {
+ grid-area: index;
+ display: block;
+ align-self: start;
+ margin-top: 0.15rem;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.35rem, 2vw, 1.55rem);
+ font-weight: 800;
+ line-height: 1;
+ letter-spacing: -0.03em;
+ color: rgba(var(--openms-blue-rgb), 0.22);
+}
+
+.openms-lib-list__media,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-media,
+.openms-steps--lib-list .openms-step__media {
+ grid-area: media;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--olib-thumb);
+ height: var(--olib-thumb);
+ margin: 0;
+ padding: 0.55rem;
+ border: 1px solid var(--olib-line);
+ border-radius: 0.5rem;
+ background: var(--olib-bg-soft);
+ overflow: hidden;
+}
+
+.openms-lib-list__mark,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-mark {
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.35rem, 2vw, 1.6rem);
+ font-weight: 800;
+ line-height: 1;
+ color: var(--openms-blue);
+}
+
+.openms-lib-list__img,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-img,
+.openms-steps--lib-list .openms-step__img,
+.openms-steps--lib-list .openms-step__img.img-fit {
+ display: block;
+ width: auto;
+ max-width: 100%;
+ height: auto;
+ max-height: var(--olib-img-max);
+ min-height: 0;
+ margin: 0 auto;
+ object-fit: contain;
+ object-position: center;
+ filter: none;
+}
+
+.openms-lib-list__body,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-body,
+.openms-steps--lib-list .openms-step__content {
+ grid-area: content;
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+ min-width: 0;
+ padding: 0;
+}
+
+.openms-lib-list__tags,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-tags,
+.openms-steps--lib-list .openms-step__tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem;
+}
+
+.openms-lib-list__tag,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-tag,
+.openms-steps--lib-list .openms-step__tag {
+ display: inline-flex;
+ margin: 0;
+ padding: 0.18rem 0.5rem;
+ font-size: 0.68rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.07);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.14);
+ border-radius: 999px;
+}
+
+.openms-lib-list__title,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-title,
+.openms-steps--lib-list .openms-step__title {
+ margin: 0;
+ padding: 0;
+ 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;
+ color: var(--openms-navy);
+}
+
+.openms-lib-list__text,
+.keyfeatures-modern--overview .keyfeatures-modern__topic-text,
+.openms-steps--lib-list .openms-step__subtitle {
+ margin: 0;
+ max-width: 52ch;
+ font-size: var(--openms-body-size);
+ line-height: 1.62;
+ color: var(--olib-text-muted);
+}
+
+.openms-lib-list__bullets {
+ margin: 0.15rem 0 0;
+ padding-left: 1.15rem;
+ font-size: var(--openms-body-size);
+ line-height: 1.6;
+ color: var(--olib-text-muted);
+}
+
+.openms-lib-list__bullets li + li {
+ margin-top: 0.25rem;
+}
+
+.openms-lib-list__bullets a {
+ color: var(--openms-blue);
+ font-weight: 600;
+ text-decoration: none;
+}
+
+.openms-lib-list__bullets a:hover,
+.openms-lib-list__bullets a:focus-visible {
+ text-decoration: underline;
+}
+
+.openms-lib-list__link,
+.openms-steps--lib-list .openms-step__cta {
+ display: inline-flex;
+ align-items: center;
+ align-self: flex-start;
+ gap: 0.3rem;
+ margin-top: 0.25rem;
+ padding: 0;
+ min-height: 0;
+ width: auto;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--openms-blue) !important;
+ background: none;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.openms-lib-list__link:hover,
+.openms-lib-list__link:focus-visible,
+.openms-steps--lib-list .openms-step__cta:hover,
+.openms-steps--lib-list .openms-step__cta:focus-visible {
+ color: var(--openms-navy) !important;
+ background: none;
+ border: none;
+ box-shadow: none;
+ transform: none;
+}
+
+.openms-steps--lib-list .openms-step__cta-arrow {
+ transition: transform 0.15s ease;
+}
+
+.openms-steps--lib-list .openms-step__cta:hover .openms-step__cta-arrow,
+.openms-steps--lib-list .openms-step__cta:focus-visible .openms-step__cta-arrow {
+ transform: translateX(0.15rem);
+}
+
+/* ── Shared footnote ── */
+.openms-lib-block__note,
+.keyfeatures-modern--overview .keyfeatures-modern__note {
+ max-width: none;
+ margin: clamp(1rem, 2vw, 1.25rem) 0 0;
+ padding: clamp(0.85rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.25rem);
+ font-size: var(--openms-body-size);
+ line-height: 1.62;
+ color: var(--olib-text-muted);
+ background: var(--olib-bg-soft);
+ border: 1px solid var(--olib-line);
+ border-radius: 0.65rem;
+}
+
+.openms-lib-block__note p,
+.keyfeatures-modern--overview .keyfeatures-modern__note p {
+ margin: 0;
+}
+
+.openms-lib-block__note a,
+.keyfeatures-modern--overview .keyfeatures-modern__note a {
+ color: var(--openms-blue);
+ font-weight: 600;
+ text-decoration: none;
+}
+
+.openms-lib-block__note a:hover,
+.openms-lib-block__note a:focus-visible,
+.keyfeatures-modern--overview .keyfeatures-modern__note a:hover,
+.keyfeatures-modern--overview .keyfeatures-modern__note a:focus-visible {
+ color: var(--openms-navy);
+ text-decoration: underline;
+}
+
+/* ── Developer terminal row ── */
+.openms-steps--lib-list .openms-step--terminal .openms-step__media {
+ padding: 0.5rem;
+ background: #141820;
+ border-color: rgba(var(--openms-navy-rgb), 0.2);
+}
+
+.openms-steps--lib-list .openms-step--terminal .openms-step__terminal {
+ width: 100%;
+ height: 100%;
+}
+
+.openms-steps--lib-list .openms-step--terminal .openms-step__terminal .terminal-window {
+ width: 100%;
+ height: 100%;
+ min-height: calc(var(--olib-thumb) - 1.1rem);
+ margin: 0;
+ border-radius: 0.35rem;
+ border: 1px solid rgba(var(--openms-white-rgb), 0.1);
+ box-shadow: none;
+}
+
+.openms-steps--lib-list .openms-step--terminal .terminal-window section.terminal {
+ font-size: clamp(0.5rem, 0.75vw, 0.62rem);
+ line-height: 1.45;
+}
+
+/* ── Feature icon (Stratex-style navy tile) ── */
+.openms-lib-feature-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 3.35rem;
+ height: 3.35rem;
+ margin-inline: auto;
+ padding: 0.55rem;
+ border: none;
+ border-radius: var(--olib-radius-sm);
+ background: var(--openms-navy);
+ box-shadow: none;
+}
+
+.openms-lib-feature-icon .openms-lib-list__mark {
+ font-family: var(--openms-font-heading);
+ font-size: 1.15rem;
+ font-weight: 700;
+ color: var(--openms-white);
+}
+
+.openms-lib-list--capabilities .openms-lib-feature-icon,
+.openms-lib-list--developers .openms-lib-feature-icon,
+.openms-steps--lib-capabilities .openms-lib-feature-icon,
+.openms-steps--lib-developers .openms-lib-feature-icon {
+ flex-shrink: 0;
+ width: 3.35rem;
+ height: 3.35rem;
+ min-height: 0;
+ max-height: 3.35rem;
+}
+
+.openms-lib-feature-icon .openms-lib-list__img,
+.openms-lib-feature-icon .openms-step__img,
+.openms-steps--lib-capabilities .openms-step__img,
+.openms-steps--lib-developers .openms-step__img {
+ display: block;
+ width: auto;
+ max-width: 2rem;
+ max-height: 2rem;
+ min-height: 0;
+ height: auto;
+ margin: 0;
+ object-fit: contain;
+ filter: none;
+}
+
+.openms-lib-feature-icon .openms-step__terminal,
+.openms-lib-feature-icon .openms-step__terminal .terminal-window {
+ width: 100%;
+ min-height: 0;
+ height: 2.35rem;
+ border-radius: 0.35rem;
+ overflow: hidden;
+}
+
+.openms-lib-feature-icon .terminal-window section.terminal {
+ font-size: 0.45rem;
+ line-height: 1.35;
+}
+
+/* ── Hero (full-viewport background band) ── */
+.openms-lib-hero {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0 0 clamp(2.5rem, 5vh, 4rem);
+ padding: clamp(2rem, 4.5vw, 3.25rem) var(--olib-pad-x) clamp(2.25rem, 4.5vw, 3rem);
+ color: var(--openms-navy);
+ background: linear-gradient(
+ 180deg,
+ var(--olib-hero-bg-top) 0%,
+ color-mix(in srgb, var(--openms-blue) 4%, var(--openms-white)) 55%,
+ var(--openms-white) 100%
+ );
+ overflow: visible;
+ isolation: isolate;
+}
+
+.openms-lib-hero::after {
+ content: "";
+ position: absolute;
+ z-index: 0;
+ left: 0;
+ right: 0;
+ bottom: -1px;
+ height: clamp(2rem, 4vw, 3rem);
+ background: linear-gradient(180deg, transparent 0%, var(--openms-white) 100%);
+ pointer-events: none;
+}
+
+.openms-lib-hero__panel {
+ position: relative;
+ z-index: 1;
+ padding: 0;
+ background: transparent;
+ text-align: center;
+}
+
+.openms-lib-hero__panel::after {
+ display: none;
+}
+
+.openms-lib-page__intro .openms-lib-block {
+ width: 100%;
+ max-width: none;
+ margin-inline: 0;
+ padding-inline: 0;
+}
+
+.openms-lib-hero + .openms-lib-page__intro-panel .openms-lib-block--overview,
+.openms-lib-hero + .openms-lib-block--overview {
+ padding-top: 0;
+}
+
+.openms-lib-hero__content {
+ position: relative;
+ width: 100%;
+ max-width: 46rem;
+ margin-inline: auto;
+}
+
+.openms-lib-hero__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+ margin: 0 auto 0.85rem;
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ text-transform: none;
+ color: var(--olib-text-muted);
+}
+
+.openms-lib-hero__eyebrow::before {
+ content: "";
+ width: 0.45rem;
+ height: 0.45rem;
+ border-radius: 50%;
+ background: var(--openms-blue);
+}
+
+.openms-lib-hero__title {
+ margin: 0 auto;
+ max-width: 30ch;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 4.8vw, 3.2rem);
+ font-weight: var(--openms-heading-xl-weight);
+ line-height: 1.08;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-align: center;
+ text-wrap: balance;
+}
+
+.openms-lib-hero__accent {
+ color: var(--openms-blue);
+}
+
+.openms-lib-hero__accent--warm {
+ color: var(--openms-pink);
+}
+
+.openms-lib-hero__lead {
+ margin: 1rem auto 0;
+ max-width: 46ch;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ font-weight: var(--openms-body-weight);
+ line-height: 1.65;
+ color: var(--olib-text-muted);
+ text-align: center;
+}
+
+.openms-lib-hero__chips {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.45rem;
+ margin: 1.25rem 0 0;
+ padding: 0;
+ list-style: none;
+}
+
+.openms-lib-hero__chip {
+ display: inline-flex;
+ padding: 0.32rem 0.7rem;
+ font-size: 0.72rem;
+ font-weight: 600;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.07);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.14);
+ border-radius: 999px;
+}
+
+.openms-lib-hero__actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+ justify-content: center;
+ gap: 0.75rem;
+ margin-top: 1.5rem;
+}
+
+.openms-lib-hero__actions .openms-lib-btn {
+ box-sizing: border-box;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ border-width: 2px;
+ border-style: solid;
+ line-height: 1.3;
+ text-decoration: none;
+}
+
+.openms-lib-hero__actions .openms-lib-btn--primary {
+ gap: 0.35rem;
+ border-color: var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-hero__actions .openms-lib-btn--primary::after {
+ display: none;
+}
+
+.openms-lib-hero__actions .openms-lib-btn--ghost {
+ border-color: var(--openms-blue);
+ background: transparent;
+ color: var(--openms-blue) !important;
+ text-decoration: none;
+}
+
+.openms-lib-btn--install {
+ gap: 0.65rem;
+}
+
+.openms-lib-btn__platforms {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+ padding-left: 0.55rem;
+ margin-left: 0.1rem;
+ border-left: 1px solid rgba(var(--openms-white-rgb), 0.28);
+ font-size: 0.95rem;
+ line-height: 1;
+ opacity: 0.92;
+}
+
+.openms-lib-btn__platforms i {
+ display: block;
+}
+
+.openms-lib-hero__actions .openms-lib-btn--ghost .fab {
+ margin-right: 0.35rem;
+ font-size: 1.05em;
+ line-height: 1;
+}
+
+/* Page heroes — split layout (matches homepage hero structure) */
+.openms-lib-hero[class*="-page-hero"],
+.openms-lib-hero.community-calendar-hero {
+ display: flex;
+ align-items: center;
+ min-height: clamp(18rem, 40vh, 26rem);
+ padding: clamp(3rem, 7vh, 5rem) var(--olib-pad-x) clamp(2.75rem, 6vh, 4rem);
+ overflow: hidden;
+}
+
+.openms-lib-hero[class*="-page-hero"]::before,
+.openms-lib-hero.community-calendar-hero::before {
+ content: "";
+ position: absolute;
+ z-index: 0;
+ top: 0;
+ right: 0;
+ width: min(55%, 36rem);
+ height: 100%;
+ background: linear-gradient(
+ 165deg,
+ rgba(var(--openms-blue-rgb), 0.06) 0%,
+ rgba(var(--openms-purple-rgb), 0.04) 45%,
+ transparent 100%
+ );
+ pointer-events: none;
+}
+
+.openms-lib-hero[class*="-page-hero"]::after,
+.openms-lib-hero.community-calendar-hero::after {
+ display: none;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__panel,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__panel {
+ width: 100%;
+ max-width: 75rem;
+ margin-inline: auto;
+ text-align: left;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__content,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__content {
+ display: grid;
+ grid-template-columns: minmax(0, 1.08fr) minmax(12rem, 0.92fr);
+ gap: clamp(0.85rem, 2vh, 1.25rem) clamp(2rem, 4vw, 3.5rem);
+ align-items: center;
+ max-width: none;
+ margin: 0;
+}
+
+.openms-lib-hero[class*="-page-hero"]
+ .openms-lib-hero__content:not(:has(.openms-lib-hero__actions, .openms-lib-hero__chips)),
+.openms-lib-hero.community-calendar-hero
+ .openms-lib-hero__content:not(:has(.openms-lib-hero__actions, .openms-lib-hero__chips)) {
+ grid-template-columns: minmax(0, 1fr);
+ max-width: 38rem;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow {
+ grid-column: 1;
+ justify-self: start;
+ display: inline-block;
+ margin: 0 0 0.85rem;
+ padding: 0.25rem 0.62rem;
+ font-family: var(--openms-font-body);
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.2);
+ border-radius: 999px;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow::before,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow::before {
+ display: none;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__title {
+ grid-column: 1;
+ margin: 0 0 1rem;
+ text-align: left;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 55%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent--warm,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__accent--warm {
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ color: var(--openms-pink);
+ -webkit-text-fill-color: var(--openms-pink);
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__lead {
+ grid-column: 1;
+ margin: 0;
+ text-align: left;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chips,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__chips {
+ grid-column: 2;
+ grid-row: 1 / -1;
+ align-self: center;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: center;
+ gap: 0.5rem;
+ width: 100%;
+ max-width: 14rem;
+ margin: 0;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chip,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__chip {
+ justify-content: center;
+ text-align: center;
+}
+
+/* Page layout heroes — shared typography & responsive actions */
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__title {
+ max-width: min(28ch, 100%);
+ font-size: clamp(2.25rem, 6vw, 3.75rem);
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__lead {
+ max-width: min(46ch, 100%);
+ font-size: clamp(0.95rem, 2.8vw, var(--openms-body-size-lg));
+ line-height: 1.6;
+}
+
+.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow,
+.openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow {
+ font-size: clamp(0.72rem, 2.2vw, var(--openms-text-min));
+}
+
+[class$="-page-layout"] .openms-lib-hero__actions,
+.community-calendar-layout .openms-lib-hero__actions {
+ grid-column: 2;
+ grid-row: 1 / -1;
+ align-self: center;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: stretch;
+ gap: 0.75rem;
+ width: 100%;
+ max-width: 16rem;
+ margin: 0;
+}
+
+[class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn,
+.community-calendar-layout .openms-lib-hero__actions .openms-lib-btn {
+ flex: 0 0 auto;
+ width: 100%;
+ min-width: 0;
+ max-width: none;
+ font-size: clamp(0.75rem, 2.4vw, var(--openms-text-min));
+}
+
+/* ── Buttons (hero only) ── */
+.openms-lib-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+ border-radius: var(--openms-btn-pill-radius, 999px);
+ border: 2px solid transparent;
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ text-decoration: none;
+ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.openms-lib-btn--primary {
+ gap: 0.35rem;
+ border-color: var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-hero .openms-lib-btn--primary::after {
+ content: "→";
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.65rem;
+ height: 1.65rem;
+ border-radius: 50%;
+ font-size: 0.85rem;
+ line-height: 1;
+ background: var(--openms-white);
+ color: var(--openms-navy);
+}
+
+.openms-lib-btn--primary:hover,
+.openms-lib-btn--primary:focus-visible {
+ background: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue));
+ border-color: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue));
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-btn--ghost {
+ padding-inline: 0.15rem;
+ background: transparent;
+ border-color: transparent;
+ color: var(--openms-blue) !important;
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+}
+
+.openms-lib-btn--ghost:hover,
+.openms-lib-btn--ghost:focus-visible {
+ background: transparent;
+ color: var(--openms-navy) !important;
+}
+
+.openms-lib-btn--navy {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-btn--navy:hover,
+.openms-lib-btn--navy:focus-visible {
+ background: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue));
+ border-color: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue));
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-btn--outline {
+ background: var(--openms-white);
+ border-color: var(--olib-line);
+ color: var(--openms-navy) !important;
+}
+
+.openms-lib-btn--outline:hover,
+.openms-lib-btn--outline:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.35);
+ background: var(--olib-bg-soft);
+ color: var(--openms-navy) !important;
+}
+
+/* ── Navbar-style CTA motion (openms-lib page only) ── */
+.openms-lib-page .openms-lib-btn,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta,
+.openms-lib-page .openms-lib-block--overview .openms-lib-list__link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.openms-lib-page .openms-lib-btn--primary {
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-page .openms-lib-btn--ghost,
+.openms-lib-page .openms-lib-btn--outline,
+.openms-lib-page .openms-lib-block--overview .openms-lib-list__link {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.openms-lib-page .openms-lib-btn--navy {
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta {
+ align-self: center;
+ margin-top: 0.75rem;
+ width: auto;
+ min-height: 2.75rem;
+ border: 2px solid var(--openms-blue);
+ background: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-page .openms-lib-block--overview .openms-lib-list__link {
+ align-self: flex-start;
+ margin-top: 0.25rem;
+}
+
+.openms-lib-page .openms-lib-btn--primary:hover,
+.openms-lib-page .openms-lib-btn--primary:focus-visible,
+.openms-lib-page .openms-lib-btn--primary:active,
+.openms-lib-page .openms-lib-btn--navy:hover,
+.openms-lib-page .openms-lib-btn--navy:focus-visible,
+.openms-lib-page .openms-lib-btn--navy:active,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta:hover,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta:focus-visible,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta:active,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta:hover,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta:focus-visible,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta:active {
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.openms-lib-page .openms-lib-btn--primary:hover,
+.openms-lib-page .openms-lib-btn--primary:focus-visible,
+.openms-lib-page .openms-lib-btn--primary:active,
+.openms-lib-page .openms-lib-btn--navy:hover,
+.openms-lib-page .openms-lib-btn--navy:focus-visible,
+.openms-lib-page .openms-lib-btn--navy:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta:hover,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta:focus-visible,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta:active,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta:hover,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta:focus-visible,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta:active {
+ background: var(--openms-blue);
+ border-color: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-page .openms-lib-btn--ghost:hover,
+.openms-lib-page .openms-lib-btn--ghost:focus-visible,
+.openms-lib-page .openms-lib-btn--ghost:active,
+.openms-lib-page .openms-lib-btn--outline:hover,
+.openms-lib-page .openms-lib-btn--outline:focus-visible,
+.openms-lib-page .openms-lib-btn--outline:active,
+.openms-lib-page .openms-lib-block--overview .openms-lib-list__link:hover,
+.openms-lib-page .openms-lib-block--overview .openms-lib-list__link:focus-visible,
+.openms-lib-page .openms-lib-block--overview .openms-lib-list__link:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.openms-lib-page .openms-lib-btn--primary:focus-visible,
+.openms-lib-page .openms-lib-btn--navy:focus-visible,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta:focus-visible,
+.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.openms-lib-page .openms-lib-btn--ghost:focus-visible,
+.openms-lib-page .openms-lib-btn--outline:focus-visible,
+.openms-lib-page .openms-lib-block--overview .openms-lib-list__link:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.openms-lib-page .openms-steps--openms-lib .openms-step__cta-arrow {
+ transition: transform 0.15s ease;
+}
+
+.openms-lib-page .openms-steps--openms-lib .openms-step__cta:hover .openms-step__cta-arrow,
+.openms-lib-page .openms-steps--openms-lib .openms-step__cta:focus-visible .openms-step__cta-arrow {
+ transform: translateX(0.15rem);
+}
+
+.openms-lib-page .openms-lib-page__cta-actions {
+ gap: calc(var(--openms-btn-glow-size, 6px) * 2 + 0.75rem);
+}
+
+/* ── Clickable cards ── */
+.openms-lib-card-hit {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ border-radius: inherit;
+ text-decoration: none;
+}
+
+/* ── Page footer CTA ── */
+.openms-lib-page__cta {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: clamp(3rem, 6vw, 4rem);
+ padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.6rem);
+ border-radius: var(--olib-radius);
+ text-align: center;
+ background: var(--openms-white);
+ border: 1px solid var(--olib-line);
+ box-shadow: var(--olib-shadow);
+}
+
+.openms-lib-page__cta-text {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ font-weight: 600;
+ color: var(--openms-navy);
+}
+
+.openms-lib-page__cta-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.55rem;
+ align-items: stretch;
+ justify-content: center;
+}
+
+.openms-lib-page__cta-actions .openms-lib-btn,
+.openms-lib-block--resources .openms-lib-page__cta-actions .openms-lib-btn {
+ box-sizing: border-box;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding, 0.7rem 1.25rem);
+}
+
+/* ══════════════════════════════════════════
+ Section variants — Stratex-inspired feature grids
+ ══════════════════════════════════════════ */
+
+/* Shared feature cell layout */
+.openms-lib-list--split .openms-lib-list__row,
+.openms-lib-list--tiles .openms-lib-list__row,
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-card--overview,
+.openms-lib-list--capabilities .openms-lib-list__row,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row,
+.openms-lib-list--developers .openms-lib-list__row,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "media"
+ "content";
+ gap: 1rem;
+ align-items: start;
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+ text-align: center;
+}
+
+.openms-lib-list--split .openms-lib-list__body,
+.openms-lib-list--tiles .openms-lib-list__body,
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-body,
+.openms-lib-list--capabilities .openms-lib-list__body,
+.openms-steps--lib-capabilities .openms-step__content,
+.openms-lib-list--developers .openms-lib-list__body,
+.openms-steps--lib-developers .openms-step__content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.openms-lib-list--split .openms-lib-list__tags,
+.openms-lib-list--tiles .openms-lib-list__tags,
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-tags,
+.openms-lib-list--capabilities .openms-lib-list__tags,
+.openms-steps--lib-capabilities .openms-step__tags,
+.openms-lib-list--developers .openms-lib-list__tags,
+.openms-steps--lib-developers .openms-step__tags {
+ display: none;
+}
+
+.openms-lib-list--split .openms-lib-list__text,
+.openms-lib-list--tiles .openms-lib-list__text,
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-text,
+.openms-lib-list--capabilities .openms-lib-list__text,
+.openms-steps--lib-capabilities .openms-step__subtitle,
+.openms-lib-list--developers .openms-lib-list__text,
+.openms-steps--lib-developers .openms-step__subtitle {
+ max-width: 28ch;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.openms-lib-list--split .openms-lib-list__link,
+.openms-steps--lib-capabilities .openms-step__cta,
+.openms-steps--lib-developers .openms-step__cta {
+ align-self: center;
+}
+
+/* 1. Overview — accent editorial panels */
+.openms-lib-block--overview {
+ padding-bottom: 0;
+}
+
+.openms-lib-block--overview .openms-lib-block__head {
+ max-width: 52rem;
+ margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
+}
+
+.openms-lib-block--overview .openms-lib-block__lead {
+ max-width: 50ch;
+}
+
+.openms-lib-list--overview {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--olib-card-gap);
+ align-items: stretch;
+ border: none;
+ background: transparent;
+ box-shadow: none;
+ overflow: visible;
+}
+
+.openms-lib-list--overview::before {
+ display: none;
+}
+
+.openms-lib-list--overview .openms-lib-list__row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ align-items: start;
+ height: 100%;
+ margin: 0;
+ padding: clamp(1.5rem, 2.8vw, 2rem);
+ padding-left: clamp(1.35rem, 2.5vw, 1.65rem);
+ border: none;
+ border-left: 4px solid var(--openms-blue);
+ border-radius: 0 var(--olib-radius) var(--olib-radius) 0;
+ background: var(--openms-white);
+ box-shadow: none;
+ text-align: left;
+ transition:
+ border-color 0.2s var(--olib-ease),
+ background-color 0.2s var(--olib-ease),
+ transform 0.2s var(--olib-ease);
+}
+
+.openms-lib-list--overview .openms-lib-list__row:last-child {
+ border-left-color: var(--openms-pink);
+ background: color-mix(in srgb, var(--olib-bg-soft) 50%, var(--openms-white));
+}
+
+.openms-lib-list--overview .openms-lib-list__row:hover {
+ border-left-color: color-mix(in srgb, var(--openms-blue) 80%, var(--openms-navy));
+ background: color-mix(in srgb, var(--openms-blue) 5%, var(--openms-white));
+ transform: translateX(3px);
+}
+
+.openms-lib-list--overview .openms-lib-list__row:last-child:hover {
+ border-left-color: color-mix(in srgb, var(--openms-pink) 85%, var(--openms-navy));
+ background: color-mix(in srgb, var(--openms-pink) 6%, var(--openms-white));
+}
+
+.openms-lib-list--overview .openms-lib-list__row:focus-within {
+ outline: 2px solid var(--openms-blue);
+ outline-offset: 3px;
+}
+
+.openms-lib-list--overview .openms-lib-list__body {
+ align-items: flex-start;
+ gap: 0.5rem;
+}
+
+.openms-lib-list--overview .openms-lib-list__tags {
+ display: flex;
+}
+
+.openms-lib-list--overview .openms-lib-list__title {
+ font-size: clamp(1.1rem, 2.1vw, 1.25rem);
+ line-height: 1.3;
+}
+
+.openms-lib-list--overview .openms-lib-list__text {
+ max-width: none;
+ font-size: var(--openms-body-size);
+ line-height: 1.62;
+}
+
+.openms-lib-list--overview .openms-lib-list__bullets {
+ display: block;
+ margin: 0.65rem 0 0;
+ padding-left: 1.15rem;
+ list-style: disc;
+}
+
+.openms-lib-list--overview .openms-lib-list__bullets li {
+ display: list-item;
+ margin: 0;
+ padding: 0;
+ font-size: var(--openms-body-size);
+ line-height: 1.55;
+ color: var(--olib-text-muted);
+ background: none;
+ border: none;
+ border-radius: 0;
+}
+
+.openms-lib-list--overview .openms-lib-list__bullets li + li {
+ margin-top: 0.35rem;
+}
+
+.openms-lib-list--overview .openms-lib-list__bullets li strong {
+ color: var(--openms-navy);
+}
+
+.openms-lib-list--overview .openms-lib-list__bullets a {
+ font-weight: 600;
+ color: var(--openms-blue);
+}
+
+.openms-lib-list--overview .openms-lib-list__row + .openms-lib-list__row {
+ border-top: none;
+}
+
+.openms-lib-list--overview .openms-lib-list__link {
+ align-self: flex-start;
+ margin-top: 0.5rem;
+ font-size: var(--openms-text-min);
+}
+
+.openms-lib-page__intro-panel #core-tools {
+ margin-top: clamp(2rem, 4vh, 3.5rem);
+ margin-bottom: clamp(2.5rem, 5vh, 4.5rem);
+}
+
+/* TOPP & pyOpenMS — borderless showcase */
+.openms-lib-block--core-tools {
+ padding-block: clamp(1.5rem, 3vw, 2.5rem);
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+.openms-lib-block--core-tools .openms-lib-block__head {
+ justify-items: center;
+ max-width: 40rem;
+ margin-inline: auto;
+ margin-bottom: clamp(2rem, 4vw, 3rem);
+ text-align: center;
+}
+
+.openms-lib-block--core-tools .openms-lib-block__lead {
+ max-width: 46ch;
+ text-align: center;
+}
+
+.openms-lib-core-tools {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--olib-card-gap);
+ align-items: stretch;
+}
+
+.openms-lib-core-tools__card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: clamp(0.85rem, 2vw, 1.15rem);
+ min-height: clamp(12.5rem, 22vw, 16rem);
+ padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ color: inherit;
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ overflow: visible;
+ transition: transform 0.22s var(--olib-ease);
+}
+
+.openms-lib-core-tools__card::after {
+ display: none;
+}
+
+.openms-lib-core-tools__card:hover {
+ transform: translateY(-2px);
+}
+
+.openms-lib-core-tools__card:focus-visible {
+ transform: translateY(-2px);
+ outline: 2px solid var(--openms-blue);
+ outline-offset: 3px;
+}
+
+.openms-lib-core-tools__card-head {
+ display: grid;
+ gap: 0.45rem;
+}
+
+.openms-lib-core-tools__label {
+ display: inline-flex;
+ align-self: flex-start;
+ padding: 0.22rem 0.55rem;
+ font-size: 0.65rem;
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.08);
+ border-radius: 0.35rem;
+}
+
+.openms-lib-core-tools__card--pyopenms .openms-lib-core-tools__label {
+ color: var(--openms-pink);
+ background: rgba(var(--openms-pink-rgb), 0.1);
+}
+
+.openms-lib-core-tools__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.35rem, 2.6vw, 1.65rem);
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.openms-lib-core-tools__text {
+ flex: 1 1 auto;
+ margin: 0;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.65;
+ color: var(--olib-text-muted);
+}
+
+.openms-lib-core-tools__link {
+ display: inline-flex;
+ align-items: center;
+ align-self: flex-start;
+ gap: 0.3rem;
+ margin-top: auto;
+ padding-top: clamp(0.75rem, 2vw, 1.25rem);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--openms-blue);
+ transition: gap 0.15s ease, color 0.15s ease;
+}
+
+.openms-lib-core-tools__card--pyopenms .openms-lib-core-tools__link {
+ color: color-mix(in srgb, var(--openms-pink) 80%, var(--openms-navy));
+}
+
+.openms-lib-core-tools__card:hover .openms-lib-core-tools__link,
+.openms-lib-core-tools__card:focus-visible .openms-lib-core-tools__link {
+ gap: 0.45rem;
+ color: var(--openms-navy);
+}
+
+.openms-lib-list--split {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--olib-feature-gap);
+ border: none;
+ background: transparent;
+ overflow: visible;
+}
+
+.openms-lib-list--split .openms-lib-list__row:hover,
+.openms-lib-list--split .openms-lib-list__row:focus-within {
+ background: transparent;
+ transform: none;
+}
+
+.openms-lib-list--split .openms-lib-list__bullets {
+ text-align: left;
+ margin-inline: auto;
+ max-width: 28ch;
+}
+
+.openms-lib-page__intro-panel .openms-lib-block {
+ padding-block: 0;
+}
+
+.openms-lib-page__intro-panel .openms-lib-block__head {
+ margin-bottom: clamp(2rem, 4vw, 3rem);
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-card--overview {
+ height: 100%;
+ padding: clamp(1.15rem, 2vw, 1.35rem);
+ border: 1px solid var(--olib-line);
+ border-radius: var(--olib-radius);
+ background: var(--openms-white);
+ box-shadow: var(--olib-shadow);
+ transition: border-color 0.2s var(--olib-ease), box-shadow 0.2s var(--olib-ease);
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-card--overview:hover,
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-card--overview:focus-within {
+ border-color: rgba(var(--openms-blue-rgb), 0.2);
+ box-shadow: var(--olib-shadow-hover);
+}
+
+/* 2. What is OpenMS? — checklist highlights */
+.openms-lib-block--highlights {
+ margin: 0;
+ padding: var(--olib-section-y) 0;
+ color: var(--openms-navy);
+ background: transparent;
+}
+
+.openms-lib-highlights__inner {
+ width: 100%;
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ display: grid;
+ gap: clamp(1.25rem, 2.5vw, 1.75rem);
+}
+
+.openms-lib-highlights__head {
+ width: 100%;
+ max-width: 46rem;
+ margin-inline: auto;
+ margin-bottom: 0;
+ text-align: center;
+}
+
+.openms-lib-highlights__head .openms-lib-block__title {
+ margin: 0;
+ text-align: center;
+}
+
+.openms-lib-highlights__head .openms-lib-block__lead {
+ max-width: 42ch;
+ margin-inline: auto;
+}
+
+.openms-lib-highlights__list {
+ display: grid;
+ gap: 0.75rem;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.openms-lib-highlights__list--grid {
+ gap: var(--olib-card-gap);
+}
+
+.openms-lib-highlights__list--count-2,
+.openms-lib-highlights__list--count-4 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.openms-lib-highlights__list--count-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.openms-lib-highlights__item {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.85rem;
+ min-height: 100%;
+ padding: clamp(1.15rem, 2.2vw, 1.45rem) clamp(1.2rem, 2.4vw, 1.5rem);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ border-radius: var(--olib-radius);
+ background: var(--openms-white);
+ box-shadow: var(--olib-shadow);
+}
+
+.openms-lib-highlights__check,
+.openms-lib-highlights__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+ width: 2.15rem;
+ height: 2.15rem;
+ border-radius: 0.75rem;
+ background: rgba(var(--openms-blue-rgb), 0.12);
+ color: var(--openms-blue);
+}
+
+.openms-lib-highlights__icon {
+ font-size: 0.95rem;
+ line-height: 1;
+}
+
+.openms-lib-highlights__check {
+ width: 1.35rem;
+ height: 1.35rem;
+ border-radius: 999px;
+}
+
+.openms-lib-highlights__check::before {
+ content: "";
+ display: block;
+ width: 0.45rem;
+ height: 0.7rem;
+ margin-top: -0.1rem;
+ border-right: 2px solid currentColor;
+ border-bottom: 2px solid currentColor;
+ transform: rotate(45deg);
+}
+
+.openms-lib-highlights__body {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.35rem;
+ min-width: 0;
+}
+
+.openms-lib-highlights__item-title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1rem, 1.85vw, 1.08rem);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--openms-navy);
+}
+
+.openms-lib-highlights__text {
+ margin: 0;
+ font-size: var(--openms-text-min);
+ line-height: 1.55;
+ color: var(--olib-text-muted);
+}
+
+.openms-lib-highlights__text--solo {
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.55;
+ color: rgba(var(--openms-dark-rgb), 0.84);
+}
+
+.openms-lib-highlights__note {
+ width: min(100%, 46rem);
+ margin-inline: auto;
+ text-align: center;
+}
+
+/* Legacy tile layout (homepage keyfeatures on openms-lib embed) */
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles {
+ margin: 0;
+ padding: var(--olib-section-y) 0;
+ color: var(--openms-navy);
+ background: transparent;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__inner.openms-lib-band__inner {
+ width: 100%;
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ padding-inline: 0;
+ justify-items: center;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__header {
+ align-self: center;
+ justify-self: center;
+ justify-items: center;
+ width: 100%;
+ max-width: 46rem;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__eyebrow,
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .openms-lib-block__eyebrow {
+ margin-inline: auto;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__title,
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .openms-lib-block__title {
+ text-align: center;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__lead,
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .openms-lib-block__lead {
+ margin-inline: auto;
+ text-align: center;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles::before {
+ display: none;
+}
+
+.openms-lib-list--tiles,
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__topics {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--olib-feature-gap);
+ width: min(100%, var(--olib-max));
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ border: none;
+ background: transparent;
+ overflow: visible;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .openms-lib-list--tiles,
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topics {
+ justify-content: center;
+ justify-items: stretch;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic {
+ width: 100%;
+ max-width: none;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-card--overview {
+ width: 100%;
+ justify-items: center;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .openms-lib-list__media {
+ justify-self: center;
+ margin-inline: auto;
+}
+
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .openms-lib-list__title,
+.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-title {
+ text-align: center;
+}
+
+.openms-lib-list--tiles > li + li,
+.openms-lib-list--tiles > .keyfeatures-modern__topic + .keyfeatures-modern__topic {
+ border-top: none;
+}
+
+.openms-lib-list--tiles > li,
+.openms-lib-list--tiles > .keyfeatures-modern__topic {
+ display: flex;
+}
+
+.openms-lib-list--tiles .openms-lib-list__row:hover,
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-card--overview:hover,
+.openms-lib-list--tiles .openms-lib-list__row:focus-within,
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-card--overview:focus-within {
+ background: transparent;
+ transform: none;
+}
+
+.keyfeatures-modern--lib-tiles .keyfeatures-modern__note {
+ max-width: 40rem;
+ margin-inline: auto;
+ text-align: center;
+ background: var(--olib-bg-soft);
+ border: 1px solid var(--olib-line);
+ border-left: none;
+ border-radius: var(--olib-radius-sm);
+}
+
+/* 3. Capabilities — workflow showcase cards */
+.openms-steps--openms-lib.openms-steps--lib-capabilities {
+ margin: 0;
+ padding: var(--olib-section-y) 0;
+ color: var(--openms-navy);
+ background: transparent;
+ border-top: none;
+ overflow: visible;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities::before,
+.openms-steps--openms-lib.openms-steps--lib-capabilities::after {
+ display: none;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-steps__inner.openms-lib-band__inner {
+ width: 100%;
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ padding-inline: 0;
+ justify-items: center;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-steps__header {
+ align-self: center;
+ justify-self: center;
+ justify-items: center;
+ width: 100%;
+ max-width: 46rem;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-steps__eyebrow,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-lib-block__eyebrow {
+ margin-inline: auto;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-steps__subtitle,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-lib-block__lead {
+ margin-inline: auto;
+ text-align: center;
+}
+
+.openms-lib-list--capabilities,
+.openms-steps--lib-capabilities .openms-steps__grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: var(--olib-card-gap);
+ width: 100%;
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ border: none;
+ background: transparent;
+ overflow: visible;
+ align-items: stretch;
+}
+
+.openms-lib-list--capabilities > li + li,
+.openms-lib-list--capabilities > .openms-steps__item + .openms-steps__item {
+ border-top: none;
+}
+
+.openms-lib-list--capabilities > li,
+.openms-lib-list--capabilities > .openms-steps__item {
+ display: flex;
+ min-width: 0;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ border: 1px solid var(--olib-line);
+ border-radius: var(--olib-radius);
+ background: var(--openms-white);
+ box-shadow: var(--olib-shadow);
+ overflow: hidden;
+ text-align: left;
+ transition:
+ border-color 0.22s var(--olib-ease),
+ box-shadow 0.22s var(--olib-ease),
+ transform 0.22s var(--olib-ease);
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:hover,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:focus-within {
+ border-color: color-mix(in srgb, var(--openms-steps-accent) 45%, var(--openms-blue));
+ box-shadow: var(--olib-shadow-hover);
+ transform: translateY(-3px);
+}
+
+.openms-lib-list--capabilities .openms-lib-list__index,
+.openms-steps--lib-capabilities .openms-step__index {
+ display: none;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__media {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: auto;
+ min-height: clamp(9rem, 18vw, 11.5rem);
+ margin: 0;
+ padding: clamp(1.35rem, 3vw, 1.85rem);
+ border: none;
+ border-bottom: 1px solid var(--olib-line);
+ border-radius: 0;
+ background: linear-gradient(
+ 165deg,
+ color-mix(in srgb, var(--openms-steps-accent) 22%, var(--openms-white)) 0%,
+ color-mix(in srgb, var(--openms-steps-accent) 8%, var(--olib-bg-soft)) 100%
+ );
+ overflow: hidden;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--showcase .openms-step__img,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--showcase .openms-step__img.img-fit {
+ display: block;
+ width: auto;
+ max-width: min(88%, 14rem);
+ height: auto;
+ max-height: clamp(4.5rem, 9vw, 6.5rem);
+ min-height: 0;
+ margin: 0 auto;
+ object-fit: contain;
+ filter: none;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex: 1 1 auto;
+ gap: 0.55rem;
+ padding: clamp(1.15rem, 2.2vw, 1.45rem);
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__tags,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-lib-list__tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem;
+ justify-content: flex-start;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__tag,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-lib-list__tag {
+ display: inline-flex;
+ padding: 0.2rem 0.55rem;
+ font-size: 0.65rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: var(--openms-navy);
+ background: color-mix(in srgb, var(--openms-steps-accent) 28%, var(--openms-white));
+ border: 1px solid color-mix(in srgb, var(--openms-steps-accent) 40%, transparent);
+ border-radius: 999px;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__title,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-lib-list__title {
+ text-align: left;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__subtitle,
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-lib-list__text {
+ max-width: none;
+ margin: 0;
+ text-align: left;
+ line-height: 1.62;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta {
+ align-self: flex-start;
+ margin-top: auto;
+ padding-top: 0.35rem;
+}
+
+/* 4. For developers — split-panel advanced cards */
+.openms-steps--openms-lib.openms-steps--lib-developers {
+ margin: 0;
+ padding: var(--olib-section-y) 0;
+ color: var(--openms-navy);
+ background: transparent;
+ border-top: none;
+ overflow: visible;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers::before,
+.openms-steps--openms-lib.openms-steps--lib-developers::after {
+ display: none;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-steps__inner.openms-lib-band__inner {
+ width: 100%;
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ padding-inline: 0;
+ justify-items: center;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-steps__header {
+ align-self: center;
+ justify-self: center;
+ justify-items: center;
+ width: 100%;
+ max-width: 46rem;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-steps__eyebrow,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-lib-block__eyebrow {
+ margin-inline: auto;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-steps__subtitle,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-lib-block__lead {
+ margin-inline: auto;
+ text-align: center;
+}
+
+.openms-lib-list--developers,
+.openms-steps--lib-developers .openms-steps__grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--olib-card-gap);
+ width: 100%;
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ border: none;
+ background: transparent;
+ overflow: visible;
+ align-items: stretch;
+}
+
+.openms-lib-list--developers > li + li,
+.openms-lib-list--developers > .openms-steps__item + .openms-steps__item {
+ border-top: none;
+}
+
+.openms-lib-list--developers > li,
+.openms-lib-list--developers > .openms-steps__item {
+ display: flex;
+ min-width: 0;
+}
+
+.openms-lib-list--developers .openms-lib-list__index,
+.openms-steps--lib-developers .openms-step__index {
+ display: none;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row {
+ display: grid;
+ grid-template-columns: minmax(8.5rem, 36%) minmax(0, 1fr);
+ grid-template-areas: "media content";
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ min-height: clamp(11rem, 20vw, 13.5rem);
+ margin: 0;
+ padding: 0;
+ border: 1px solid var(--olib-line);
+ border-radius: var(--olib-radius);
+ background: var(--openms-white);
+ box-shadow: var(--olib-shadow);
+ overflow: hidden;
+ text-align: left;
+ transition:
+ border-color 0.22s var(--olib-ease),
+ box-shadow 0.22s var(--olib-ease),
+ transform 0.22s var(--olib-ease);
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:hover,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:focus-within {
+ border-color: color-mix(in srgb, var(--openms-steps-accent) 55%, var(--openms-navy));
+ box-shadow: var(--olib-shadow-hover);
+ transform: translateY(-3px);
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__media {
+ grid-area: media;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ min-height: 100%;
+ margin: 0;
+ padding: clamp(1rem, 2.2vw, 1.35rem);
+ border: none;
+ border-right: 1px solid var(--olib-line);
+ border-radius: 0;
+ background: linear-gradient(
+ 155deg,
+ color-mix(in srgb, var(--openms-steps-accent) 30%, var(--openms-white)) 0%,
+ color-mix(in srgb, var(--openms-steps-accent) 12%, var(--olib-bg-soft)) 100%
+ );
+ overflow: hidden;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--developer .openms-step__img,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--developer .openms-step__img.img-fit {
+ display: block;
+ width: auto;
+ max-width: min(88%, 12rem);
+ height: auto;
+ max-height: clamp(4rem, 8vw, 5.75rem);
+ min-height: 0;
+ margin: 0 auto;
+ object-fit: contain;
+ filter: none;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .openms-step__media {
+ padding: clamp(0.85rem, 2vw, 1.15rem);
+ background: linear-gradient(
+ 160deg,
+ var(--openms-navy) 0%,
+ color-mix(in srgb, var(--openms-navy) 90%, black) 100%
+ );
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .openms-step__terminal,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .openms-step__terminal .terminal-window {
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ min-height: clamp(6.5rem, 12vw, 8.5rem);
+ max-height: none;
+ border-radius: 0.45rem;
+ overflow: hidden;
+ box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.28);
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .terminal-window section.terminal {
+ font-size: clamp(0.44rem, 1.05vw, 0.54rem);
+ line-height: 1.38;
+ padding: 0.45rem 0.55rem;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__content {
+ grid-area: content;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ flex: 1 1 auto;
+ gap: 0.55rem;
+ padding: clamp(1.15rem, 2.2vw, 1.5rem);
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__tags,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-lib-list__tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem;
+ justify-content: flex-start;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__tag,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-lib-list__tag {
+ display: inline-flex;
+ padding: 0.2rem 0.55rem;
+ font-size: 0.65rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: var(--openms-navy);
+ background: color-mix(in srgb, var(--openms-steps-accent) 32%, var(--openms-white));
+ border: 1px solid color-mix(in srgb, var(--openms-steps-accent) 45%, transparent);
+ border-radius: 999px;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__title,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-lib-list__title {
+ padding-right: 0;
+ text-align: left;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__subtitle,
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-lib-list__text {
+ max-width: none;
+ margin: 0;
+ text-align: left;
+ line-height: 1.62;
+}
+
+.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta {
+ align-self: flex-start;
+ margin-top: auto;
+ padding-top: 0.35rem;
+}
+
+/* 5. Get started — resource directory */
+.openms-lib-block--resources .openms-lib-block__head {
+ justify-items: center;
+ max-width: 46rem;
+ width: 100%;
+ margin-inline: auto;
+ margin-bottom: 0;
+ text-align: center;
+}
+
+.openms-lib-block--resources .openms-lib-block__lead {
+ max-width: 50ch;
+ margin-inline: auto;
+}
+
+.openms-lib-list--resource-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--olib-card-gap);
+ width: 100%;
+ max-width: var(--olib-max);
+ margin-inline: auto;
+ border: none;
+ background: transparent;
+ overflow: visible;
+}
+
+.openms-lib-resource-card {
+ position: relative;
+ text-decoration: none;
+ color: inherit;
+ cursor: pointer;
+ transition:
+ border-color 0.22s var(--olib-ease),
+ box-shadow 0.22s var(--olib-ease),
+ transform 0.22s var(--olib-ease);
+}
+
+.openms-lib-list--resource-grid .openms-lib-list__row,
+.openms-lib-list--resource-grid .openms-lib-resource-card {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: center;
+ height: 100%;
+ min-height: 0;
+ padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.15rem, 2.2vw, 1.4rem);
+ border: 1px solid var(--olib-line);
+ border-radius: var(--olib-radius);
+ background: var(--openms-white);
+ box-shadow: var(--olib-shadow);
+ text-align: left;
+}
+
+.openms-lib-list--resource-grid .openms-lib-list__row + .openms-lib-list__row,
+.openms-lib-list--resource-grid .openms-resource-card + .openms-resource-card {
+ border-top: none;
+}
+
+.openms-lib-list--resource-grid .openms-lib-list__row:hover,
+.openms-lib-list--resource-grid .openms-lib-list__row:focus-visible,
+.openms-lib-list--resource-grid .openms-lib-resource-card:hover,
+.openms-lib-list--resource-grid .openms-lib-resource-card:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.24);
+ box-shadow: var(--olib-shadow-hover);
+ transform: translateY(-2px);
+ outline: none;
+}
+
+.openms-lib-list--resource-grid .openms-lib-list__index {
+ display: none;
+}
+
+.openms-lib-list--resource-grid .openms-lib-list__body {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.35rem;
+ min-width: 0;
+ width: 100%;
+}
+
+.openms-lib-resource-card__tag,
+.openms-lib-list--resource-grid .openms-lib-list__tag {
+ display: inline-flex;
+ align-self: flex-start;
+ padding: 0.18rem 0.5rem;
+ font-size: 0.62rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.08);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.14);
+ border-radius: 999px;
+}
+
+.openms-lib-list--resource-grid .openms-lib-list__title {
+ margin: 0;
+ font-size: clamp(1rem, 1.8vw, 1.08rem);
+ line-height: 1.3;
+}
+
+.openms-lib-list--resource-grid .openms-lib-list__text {
+ display: block;
+ max-width: none;
+ margin: 0;
+ font-size: var(--openms-text-min);
+ line-height: 1.55;
+ color: var(--olib-text-muted);
+ text-align: left;
+}
+
+.openms-lib-resource-card .openms-lib-list__link {
+ align-self: flex-start;
+ margin-top: 0.15rem;
+ padding: 0;
+ border: none;
+ background: transparent;
+ min-height: 0;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--openms-blue);
+ box-shadow: none;
+ pointer-events: none;
+}
+
+.openms-lib-resource-card--static {
+ cursor: default;
+}
+
+.openms-lib-resource-card--static:hover,
+.openms-lib-resource-card--static:focus-within {
+ transform: none;
+}
+
+.openms-lib-resource-card__platforms {
+ margin-top: 0.65rem;
+}
+
+.openms-lib-block--resources .openms-lib-block__note {
+ max-width: 52rem;
+ margin: 0 auto;
+ padding: clamp(1rem, 2vw, 1.2rem) clamp(1.15rem, 2.5vw, 1.5rem);
+ text-align: center;
+ background: var(--openms-white);
+ border: 1px solid var(--olib-line);
+ border-left: 4px solid var(--openms-blue);
+ border-radius: 0 var(--olib-radius-sm) var(--olib-radius-sm) 0;
+ box-shadow: var(--olib-shadow);
+}
+
+.openms-lib-block--resources .openms-lib-page__cta {
+ margin-top: 0;
+ padding: clamp(1.65rem, 3vw, 2.1rem) clamp(1.35rem, 3vw, 2rem);
+ border-radius: var(--olib-radius);
+ background: linear-gradient(
+ 135deg,
+ var(--openms-navy) 0%,
+ color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue)) 100%
+ );
+ border: none;
+ box-shadow: 0 0.75rem 2rem rgba(var(--openms-navy-rgb), 0.18);
+}
+
+.openms-lib-block--resources .openms-lib-page__cta-text {
+ max-width: 36ch;
+ color: rgba(var(--openms-white-rgb), 0.95);
+}
+
+.openms-lib-block--resources .openms-lib-page__cta-actions {
+ justify-content: center;
+}
+
+.openms-lib-block--resources .openms-lib-btn--navy {
+ border-color: var(--openms-white);
+ background: var(--openms-white);
+ color: var(--openms-navy) !important;
+}
+
+.openms-lib-block--resources .openms-lib-btn--navy:hover,
+.openms-lib-block--resources .openms-lib-btn--navy:focus-visible,
+.openms-lib-block--resources .openms-lib-btn--navy:active {
+ border-color: var(--openms-white);
+ background: color-mix(in srgb, var(--openms-white) 92%, var(--openms-blue));
+ color: var(--openms-navy) !important;
+}
+
+.openms-lib-block--resources .openms-lib-btn--outline {
+ border-color: rgba(var(--openms-white-rgb), 0.55);
+ background: transparent;
+ color: var(--openms-white) !important;
+}
+
+.openms-lib-block--resources .openms-lib-btn--outline:hover,
+.openms-lib-block--resources .openms-lib-btn--outline:focus-visible,
+.openms-lib-block--resources .openms-lib-btn--outline:active {
+ border-color: var(--openms-white);
+ background: rgba(var(--openms-white-rgb), 0.1);
+ color: var(--openms-white) !important;
+}
+
+/* 6. For Developers — contribute resources */
+.openms-lib-block--developers .openms-lib-developers__head {
+ justify-items: center;
+ max-width: 40rem;
+ width: 100%;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.openms-lib-developers__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2.35rem, 6vw, 3.75rem);
+ font-weight: 800;
+ line-height: 1.05;
+ letter-spacing: -0.04em;
+ color: var(--openms-navy);
+}
+
+.openms-lib-developers__lead {
+ margin: 0.75rem 0 0;
+ max-width: 42ch;
+ margin-inline: auto;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: var(--olib-text-muted);
+}
+
+.openms-lib-developers__content {
+ display: grid;
+ gap: clamp(1.25rem, 2.5vw, 2rem);
+ width: 100%;
+}
+
+.openms-lib-developers__content--with-cite {
+ grid-template-columns: minmax(0, 1.65fr) minmax(17.5rem, 1fr);
+ align-items: start;
+}
+
+.openms-lib-developers__grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--olib-card-gap);
+ width: 100%;
+ min-width: 0;
+}
+
+.openms-lib-developers__grid--count-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.openms-lib-developers__card {
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+ padding: clamp(1.15rem, 2.2vw, 1.45rem) clamp(1.2rem, 2.4vw, 1.5rem);
+ border: 1px solid var(--olib-line);
+ border-radius: var(--olib-radius);
+ background: var(--openms-white);
+ box-shadow: var(--olib-shadow);
+ text-decoration: none;
+ color: inherit;
+ transition:
+ border-color 0.22s var(--olib-ease),
+ box-shadow 0.22s var(--olib-ease),
+ transform 0.22s var(--olib-ease);
+}
+
+.openms-lib-developers__card--link:hover,
+.openms-lib-developers__card--link:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.24);
+ box-shadow: var(--olib-shadow-hover);
+ transform: translateY(-2px);
+ outline: none;
+}
+
+.openms-lib-developers__card-body {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.45rem;
+ min-width: 0;
+}
+
+.openms-lib-developers__card-title {
+ display: flex;
+ align-items: flex-start;
+ gap: 0.55rem;
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.02rem, 1.9vw, 1.12rem);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--openms-navy);
+}
+
+.openms-lib-developers__card-icon {
+ flex: 0 0 auto;
+ margin-top: 0.12rem;
+ font-size: 0.95em;
+ line-height: 1;
+ color: var(--openms-blue);
+}
+
+.openms-lib-developers__card-tag {
+ display: inline-flex;
+ align-self: flex-start;
+ padding: 0.18rem 0.5rem;
+ font-size: 0.62rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.08);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.14);
+ border-radius: 999px;
+}
+
+.openms-lib-developers__card-text {
+ margin: 0;
+ font-size: var(--openms-text-min);
+ line-height: 1.55;
+ color: var(--olib-text-muted);
+}
+
+.openms-lib-developers__card-link {
+ margin-top: auto;
+ padding-top: 0.35rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ color: var(--openms-blue);
+}
+
+.openms-lib-developers__card--build {
+ cursor: default;
+}
+
+.openms-lib-developers__platforms {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.55rem;
+ width: 100%;
+ margin-top: 0.65rem;
+}
+
+.openms-lib-developers__platform-btn {
+ min-height: 2.35rem;
+ padding: 0.45rem 0.85rem;
+ font-size: 0.82rem;
+ gap: 0.4rem;
+}
+
+.openms-lib-developers__platform-btn .fab {
+ font-size: 1em;
+ line-height: 1;
+}
+
+.openms-lib-developers__cite {
+ display: grid;
+ gap: 0.85rem;
+ width: 100%;
+ min-width: 0;
+ margin-inline: auto;
+ margin-top: 0.25rem;
+}
+
+.openms-lib-developers__cite--panel {
+ margin-top: 0;
+ padding: clamp(1.2rem, 2.2vw, 1.5rem);
+ border: 1px solid var(--olib-line);
+ border-radius: var(--olib-radius);
+ background: var(--openms-white);
+ box-shadow: var(--olib-shadow);
+}
+
+.openms-lib-developers__content--with-cite .openms-lib-developers__cite--panel {
+ position: sticky;
+ top: calc(var(--openms-header-height, 4.25rem) + 1.25rem);
+}
+
+.openms-lib-developers__cite--panel .openms-lib-developers__cite-card {
+ border: none;
+ padding: 0;
+ box-shadow: none;
+ background: transparent;
+}
+
+.openms-lib-developers__cite--panel .openms-lib-developers__cite-card:hover {
+ border-color: transparent;
+ box-shadow: none;
+}
+
+.openms-lib-developers__cite-intro {
+ margin: 0;
+ text-align: left;
+ font-size: var(--openms-body-size-lg);
+ font-weight: 600;
+ line-height: 1.45;
+ color: var(--openms-navy);
+}
+
+.openms-lib-developers__cite-card {
+ width: 100%;
+ margin: 0;
+}
+
+.openms-lib-developers__cite-actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.65rem 1.15rem;
+ margin-top: 0.15rem;
+}
+
+.openms-lib-developers__cite-more {
+ font-size: 0.8rem;
+ font-weight: 700;
+ color: rgba(var(--openms-navy-rgb), 0.72);
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.openms-lib-developers__cite-more:hover,
+.openms-lib-developers__cite-more:focus-visible {
+ color: var(--openms-navy);
+ text-decoration: underline;
+ outline: none;
+}
+
+/* ── Responsive ── */
+
+/* Neutralize homepage heroitems/keyfeatures rules on this page */
+.openms-steps--openms-lib .openms-steps__header,
+.keyfeatures-modern--openms-lib .keyfeatures-modern__header {
+ text-align: center;
+ margin-inline: auto;
+}
+
+.openms-steps--openms-lib .openms-step__cta {
+ width: auto;
+}
+
+@media (max-width: 1100px) {
+ .openms-lib-developers__content--with-cite {
+ grid-template-columns: 1fr;
+ }
+
+ .openms-lib-developers__content--with-cite .openms-lib-developers__cite--panel {
+ position: static;
+ }
+
+ .openms-lib-developers__grid--count-3 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 901px) {
+ .openms-lib-developers__content--with-cite .openms-lib-developers__grid--count-3 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+.openms-lib-block--developers {
+ display: grid;
+ gap: clamp(1.75rem, 3.5vw, 2.75rem);
+}
+
+.openms-lib-page__outro .openms-lib-block--developers {
+ gap: clamp(1.75rem, 3.5vw, 2.75rem);
+}
+
+@media (max-width: 1024px) {
+ .openms-lib-highlights__list--count-3 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .openms-lib-list--capabilities,
+ .openms-steps--lib-capabilities .openms-steps__grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .openms-lib-list--split {
+ gap: clamp(1.25rem, 3vw, 2rem);
+ }
+}
+
+@media (max-width: 900px) {
+ .openms-lib-list--overview {
+ grid-template-columns: 1fr;
+ gap: var(--olib-card-gap);
+ }
+
+ .openms-lib-core-tools {
+ grid-template-columns: 1fr;
+ gap: var(--olib-card-gap);
+ }
+
+ .openms-lib-core-tools__card:hover,
+ .openms-lib-core-tools__card:focus-visible {
+ transform: none;
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:hover,
+ .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:focus-within {
+ transform: none;
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:hover,
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:focus-within {
+ transform: none;
+ }
+
+ .openms-lib-list--resource-grid .openms-lib-resource-card:hover,
+ .openms-lib-list--resource-grid .openms-lib-resource-card:focus-visible {
+ transform: none;
+ }
+
+ .openms-lib-list--overview .openms-lib-list__row:hover {
+ transform: none;
+ }
+
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__content,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__content {
+ grid-template-columns: 1fr;
+ max-width: none;
+ }
+
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__actions,
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chips,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__chips,
+ [class$="-page-layout"] .openms-lib-hero__actions,
+ .community-calendar-layout .openms-lib-hero__actions {
+ grid-column: 1;
+ grid-row: auto;
+ max-width: none;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ margin-top: 1.25rem;
+ }
+
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chips,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__chips {
+ flex-direction: row;
+ }
+}
+
+@media (max-width: 960px) {
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__title {
+ max-width: none;
+ font-size: clamp(2rem, 6.5vw, 3rem);
+ }
+
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__lead {
+ font-size: clamp(0.92rem, 3.2vw, 1.05rem);
+ }
+
+ [class$="-page-layout"] .openms-lib-btn,
+ .community-calendar-layout .openms-lib-btn {
+ white-space: normal;
+ text-wrap: balance;
+ }
+
+ [class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn,
+ .community-calendar-layout .openms-lib-hero__actions .openms-lib-btn {
+ flex: 1 1 calc(50% - 0.375rem);
+ }
+}
+
+@media (max-width: 720px) {
+ .openms-lib-page {
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-block-gap: clamp(2.75rem, 5.5vh, 4rem);
+ --olib-feature-gap: clamp(1.5rem, 4vw, 2.25rem);
+ --olib-card-gap: clamp(1rem, 3vw, 1.35rem);
+ --olib-pad-x: clamp(1rem, 4vw, 1.25rem);
+ --olib-thumb: clamp(3.25rem, 14vw, 4.5rem);
+ --olib-img-max: clamp(2.5rem, 10vw, 3.25rem);
+ }
+
+ [class$="-page-layout"],
+ .community-calendar-layout {
+ --olib-section-y: clamp(2.75rem, 6vh, 3.5rem);
+ --olib-pad-x: clamp(1rem, 4vw, 1.25rem);
+ }
+
+ .openms-lib-hero__title {
+ max-width: none;
+ font-size: clamp(1.75rem, 7vw, 2.25rem);
+ }
+
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__title {
+ max-width: none;
+ font-size: clamp(1.85rem, 8.5vw, 2.5rem);
+ }
+
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__lead {
+ font-size: clamp(0.9rem, 3.8vw, 1rem);
+ line-height: 1.55;
+ }
+
+ .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow,
+ .openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow {
+ font-size: clamp(0.68rem, 2.8vw, 0.8rem);
+ }
+
+ [class$="-page-layout"] .openms-lib-hero__actions,
+ .community-calendar-layout .openms-lib-hero__actions {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 0.55rem;
+ max-width: none;
+ }
+
+ [class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn,
+ .community-calendar-layout .openms-lib-hero__actions .openms-lib-btn {
+ width: 100%;
+ flex: 1 1 auto;
+ min-width: 0;
+ justify-content: center;
+ }
+
+ .openms-lib-block__title,
+ .keyfeatures-modern--overview .keyfeatures-modern__title,
+ .openms-steps--lib-list .openms-steps__title {
+ font-size: clamp(1.45rem, 5.5vw, 1.85rem);
+ }
+
+ .openms-lib-list--split,
+ .openms-lib-list--tiles,
+ .keyfeatures-modern--lib-tiles .keyfeatures-modern__topics,
+ .openms-lib-list--capabilities,
+ .openms-steps--lib-capabilities .openms-steps__grid,
+ .openms-lib-list--developers,
+ .openms-steps--lib-developers .openms-steps__grid,
+ .openms-lib-list--resource-grid,
+ .openms-lib-developers__grid,
+ .openms-lib-developers__grid--count-3,
+ .openms-lib-highlights__list--grid,
+ .openms-lib-highlights__list--count-2,
+ .openms-lib-highlights__list--count-3,
+ .openms-lib-highlights__list--count-4 {
+ grid-template-columns: 1fr;
+ }
+
+ .openms-lib-developers__content--with-cite {
+ grid-template-columns: 1fr;
+ }
+
+ .openms-lib-developers__content--with-cite .openms-lib-developers__cite--panel {
+ position: static;
+ }
+
+ .openms-lib-developers__cite-intro {
+ text-align: center;
+ }
+
+ .keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .openms-lib-list--tiles,
+ .keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topics {
+ width: 100%;
+ max-width: none;
+ }
+
+ .keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles .keyfeatures-modern__topic {
+ max-width: none;
+ margin-inline: 0;
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "media"
+ "content";
+ min-height: 0;
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__media {
+ min-height: clamp(7.25rem, 22vw, 9rem);
+ border-right: none;
+ border-bottom: 1px solid var(--olib-line);
+ }
+
+ .openms-lib-list--split .openms-lib-list__bullets {
+ max-width: none;
+ width: 100%;
+ }
+
+ .openms-lib-list--split .openms-lib-list__text,
+ .openms-lib-list--tiles .openms-lib-list__text,
+ .keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-text,
+ .openms-lib-list--capabilities .openms-lib-list__text,
+ .openms-steps--lib-capabilities .openms-step__subtitle,
+ .openms-lib-list--developers .openms-lib-list__text,
+ .openms-steps--lib-developers .openms-step__subtitle,
+ .openms-lib-list--resource-grid .openms-lib-list__text {
+ max-width: none;
+ }
+
+ .openms-lib-hero__actions {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 0.55rem;
+ max-width: 22rem;
+ margin-inline: auto;
+ }
+
+ .openms-lib-hero__actions .openms-lib-btn {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .openms-lib-hero__actions .openms-lib-btn--ghost {
+ align-self: stretch;
+ padding-inline: 1rem;
+ text-align: center;
+ }
+
+ .openms-lib-page__nav {
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ margin-top: 0;
+ padding-block: 0.55rem 0.7rem;
+ }
+
+ .openms-lib-page__nav-link {
+ min-height: 2.25rem;
+ padding-inline: 0.75rem;
+ }
+
+ .openms-lib-page__intro-panel #core-tools {
+ margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
+ margin-bottom: clamp(2rem, 4vh, 3rem);
+ }
+
+ .openms-lib-block--core-tools {
+ padding-block: clamp(1rem, 2.5vw, 1.5rem);
+ }
+
+ .openms-lib-block--core-tools .openms-lib-block__head {
+ justify-items: center;
+ max-width: none;
+ margin-inline: auto;
+ margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
+ text-align: center;
+ }
+
+ .openms-lib-block--core-tools .openms-lib-block__lead {
+ text-align: center;
+ }
+
+ .openms-lib-core-tools__card {
+ min-height: clamp(10.5rem, 28vw, 13rem);
+ padding-block: clamp(1.15rem, 3.5vw, 1.65rem);
+ }
+
+ .openms-lib-core-tools__card-head {
+ gap: 0.4rem;
+ }
+
+ .openms-lib-list--resource-grid .openms-lib-resource-card,
+ .openms-lib-list--resource-grid .openms-lib-list__row {
+ padding: 0.95rem 1rem;
+ }
+
+ .openms-lib-block--resources .openms-lib-page__cta-actions {
+ flex-direction: column;
+ align-items: stretch;
+ width: 100%;
+ }
+
+ .openms-lib-block--resources .openms-lib-page__cta-actions .openms-lib-btn {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .openms-lib-list--capabilities .openms-lib-list__media,
+ .openms-steps--lib-capabilities .openms-step__media {
+ min-height: clamp(7.5rem, 24vw, 9.5rem);
+ padding: clamp(1rem, 3.5vw, 1.35rem);
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--showcase .openms-step__img,
+ .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--showcase .openms-step__img.img-fit {
+ max-height: clamp(3.75rem, 14vw, 5rem);
+ max-width: min(90%, 12rem);
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--developer .openms-step__img,
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--developer .openms-step__img.img-fit {
+ max-height: clamp(3.5rem, 12vw, 4.75rem);
+ max-width: min(90%, 10rem);
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .openms-step__terminal,
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .terminal-window {
+ min-height: clamp(5.5rem, 20vw, 7rem);
+ }
+
+ .openms-lib-page__cta {
+ align-items: stretch;
+ text-align: center;
+ }
+
+ .openms-lib-page__cta-actions {
+ flex-direction: column;
+ align-items: stretch;
+ width: 100%;
+ }
+
+ .openms-lib-page__cta-actions .openms-lib-btn {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+@media (max-width: 600px) {
+ .openms-lib-list--overview .openms-lib-list__row {
+ padding: clamp(1.15rem, 3.5vw, 1.35rem);
+ padding-left: clamp(1rem, 3vw, 1.25rem);
+ }
+
+ .openms-lib-core-tools__title {
+ font-size: 1.1rem;
+ }
+
+ .openms-lib-core-tools__text {
+ font-size: var(--openms-text-min);
+ line-height: 1.55;
+ }
+}
+
+@media (max-width: 480px) {
+ .openms-lib-hero {
+ padding-block: clamp(1.65rem, 5vw, 2.25rem) clamp(2rem, 5vw, 2.75rem);
+ margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
+ }
+
+ .openms-lib-hero__chip {
+ font-size: 0.68rem;
+ padding: 0.28rem 0.6rem;
+ }
+
+ .openms-lib-hero__chips {
+ gap: 0.35rem;
+ }
+
+ .openms-lib-page__nav-link {
+ font-size: 0.72rem;
+ padding-inline: 0.65rem;
+ }
+
+ .openms-lib-block__head,
+ .keyfeatures-modern--overview .keyfeatures-modern__header,
+ .openms-steps--lib-list .openms-steps__header {
+ margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
+ }
+}
+
+.openms-lib-btn--install .fab {
+ margin-left: 0.15rem;
+ font-size: 1.05em;
+ line-height: 1;
+}
+
+.openms-lib-btn--install .openms-lib-btn__platforms + .fab,
+.openms-lib-btn--install .openms-lib-btn__label + .fab:not(.openms-lib-btn__platforms *) {
+ padding-left: 0;
+ margin-left: 0.45rem;
+ border-left: none;
+}
+
+/* Product pages — pyOpenMS, WebApps, pyopenms_viz */
+.openms-lib-page--product {
+ --olib-product-section-y: clamp(2.75rem, 5.5vh, 3.75rem);
+ --olib-product-head-gap: clamp(1.15rem, 2.2vh, 1.65rem);
+ --olib-product-band-gap: clamp(0.25rem, 0.6vh, 0.5rem);
+}
+
+.openms-lib-page--product .openms-lib-page__intro .openms-lib-hero {
+ margin-bottom: 0;
+}
+
+.openms-lib-page--product .openms-lib-page__body {
+ margin-top: 0;
+}
+
+.openms-lib-page--product .openms-lib-page__outro {
+ margin-top: 0;
+ border-top: none;
+}
+
+.openms-lib-page--product .openms-lib-page__body > .openms-lib-page__anchor {
+ padding-top: var(--olib-product-section-y);
+ padding-bottom: var(--olib-product-section-y);
+}
+
+.openms-lib-page--product .openms-lib-page__body > .openms-lib-page__anchor + .openms-lib-page__anchor {
+ padding-top: var(--olib-product-band-gap);
+}
+
+.openms-lib-page--product .openms-lib-page__body > .openms-lib-page__anchor:not(:last-child) {
+ padding-bottom: var(--olib-product-band-gap);
+}
+
+.openms-lib-page--product .openms-lib-page__body > .openms-lib-page__anchor:last-child {
+ padding-bottom: var(--olib-product-band-gap);
+}
+
+.openms-lib-page--product .openms-lib-block__head,
+.openms-lib-page--product .openms-lib-highlights__head,
+.openms-lib-page--product .openms-lib-developers__head {
+ margin-bottom: var(--olib-product-head-gap);
+}
+
+.openms-lib-page--product .openms-lib-page__body .openms-lib-block--highlights,
+.openms-lib-page--product .openms-lib-page__body .openms-lib-block--resources {
+ display: grid;
+ gap: var(--olib-product-head-gap);
+ padding-block: 0;
+ margin: 0;
+ width: min(100%, var(--olib-max));
+ margin-inline: auto;
+}
+
+.openms-lib-page--product .openms-lib-highlights__inner {
+ gap: var(--olib-product-head-gap);
+}
+
+.openms-lib-page--product .openms-lib-highlights__head {
+ margin-bottom: 0;
+}
+
+.openms-lib-page--product .openms-lib-highlights__check,
+.openms-lib-page--product .openms-lib-highlights__icon {
+ background: rgba(var(--openms-pink-rgb), 0.12);
+ color: color-mix(in srgb, var(--openms-pink) 85%, var(--openms-navy));
+}
+
+.openms-lib-page--product .openms-lib-highlights__item {
+ border-color: rgba(var(--openms-pink-rgb), 0.14);
+ background: var(--openms-white);
+}
+
+.openms-lib-page--product .openms-lib-page__outro .openms-lib-block--developers {
+ padding-top: var(--olib-product-band-gap);
+ padding-bottom: clamp(3rem, 6vh, 4.25rem);
+ gap: clamp(1.75rem, 3.5vw, 2.5rem);
+}
+
+.openms-lib-page--product .openms-lib-developers__cite {
+ margin-top: 0;
+}
+
+.openms-lib-page--product .openms-lib-developers__card-tag {
+ color: color-mix(in srgb, var(--openms-pink) 80%, var(--openms-navy));
+ background: rgba(var(--openms-pink-rgb), 0.1);
+ border-color: rgba(var(--openms-pink-rgb), 0.18);
+}
+
+.openms-lib-page--product .openms-lib-developers__card-icon {
+ color: color-mix(in srgb, var(--openms-pink) 82%, var(--openms-navy));
+}
+
+.openms-lib-page--product .openms-lib-developers__cite--panel {
+ border-color: rgba(var(--openms-pink-rgb), 0.16);
+ background: linear-gradient(
+ 160deg,
+ rgba(var(--openms-pink-rgb), 0.05) 0%,
+ var(--openms-white) 55%
+ );
+}
+
+.openms-lib-page--product .openms-lib-block__head--resources {
+ gap: 0.65rem;
+ margin-bottom: 0;
+}
+
+.openms-lib-page--product .openms-lib-block--resources .openms-lib-block__lead {
+ max-width: 42ch;
+}
+
+.openms-lib-list--resource-grid--getting-started {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.openms-lib-list--resource-grid--getting-started .openms-lib-resource-card--online {
+ grid-column: 1 / -1;
+}
+
+.openms-lib-resource-card--online {
+ background: linear-gradient(
+ 135deg,
+ rgba(var(--openms-pink-rgb), 0.05) 0%,
+ var(--openms-white) 58%
+ );
+ border-color: rgba(var(--openms-pink-rgb), 0.16);
+}
+
+.openms-lib-resource-card--online .openms-lib-list__title {
+ font-size: clamp(1.05rem, 1.9vw, 1.15rem);
+}
+
+.openms-lib-page--product .openms-lib-resource-card__tag {
+ color: color-mix(in srgb, var(--openms-pink) 80%, var(--openms-navy));
+ background: rgba(var(--openms-pink-rgb), 0.1);
+ border-color: rgba(var(--openms-pink-rgb), 0.18);
+}
+
+.openms-lib-page--product .openms-lib-list--resource-grid .openms-lib-list__link {
+ color: color-mix(in srgb, var(--openms-pink) 82%, var(--openms-navy));
+}
+
+.openms-lib-page--product .openms-lib-list--resource-grid .openms-lib-list__row:hover,
+.openms-lib-page--product .openms-lib-list--resource-grid .openms-lib-list__row:focus-visible {
+ border-color: rgba(var(--openms-pink-rgb), 0.28);
+}
+
+.openms-lib-page--product .openms-lib-developers__platform-btn,
+.openms-lib-page--product .openms-lib-resource-card__platforms .openms-lib-developers__platform-btn {
+ border-color: rgba(var(--openms-pink-rgb), 0.28);
+ color: color-mix(in srgb, var(--openms-pink) 85%, var(--openms-navy)) !important;
+}
+
+.openms-lib-page--product .openms-lib-developers__platform-btn:hover,
+.openms-lib-page--product .openms-lib-developers__platform-btn:focus-visible,
+.openms-lib-page--product .openms-lib-resource-card__platforms .openms-lib-developers__platform-btn:hover,
+.openms-lib-page--product .openms-lib-resource-card__platforms .openms-lib-developers__platform-btn:focus-visible {
+ border-color: color-mix(in srgb, var(--openms-pink) 70%, var(--openms-navy));
+ background: rgba(var(--openms-pink-rgb), 0.08);
+}
+
+.openms-lib-page--product .openms-lib-developers__card-link {
+ color: color-mix(in srgb, var(--openms-pink) 82%, var(--openms-navy));
+}
+
+.openms-lib-page--product .openms-lib-developers__card--link:hover,
+.openms-lib-page--product .openms-lib-developers__card--link:focus-visible {
+ border-color: rgba(var(--openms-pink-rgb), 0.24);
+}
+
+@media (max-width: 768px) {
+ .openms-lib-list--resource-grid--getting-started {
+ grid-template-columns: 1fr;
+ }
+
+ .openms-lib-list--resource-grid--getting-started .openms-lib-resource-card--online {
+ grid-column: auto;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .openms-lib-page .openms-lib-btn:hover,
+ .openms-lib-page .openms-lib-btn:focus-visible,
+ .openms-lib-page .openms-steps--openms-lib .openms-step__cta:hover,
+ .openms-lib-page .openms-steps--openms-lib .openms-step__cta:focus-visible,
+ .openms-lib-page .openms-lib-block--overview .openms-lib-list__link:hover,
+ .openms-lib-page .openms-lib-block--overview .openms-lib-list__link:focus-visible {
+ transform: none;
+ }
+
+ .openms-steps--lib-list .openms-step__cta-arrow,
+ .openms-lib-list--split .openms-lib-list__row,
+ .openms-lib-list--tiles .openms-lib-list__row,
+ .openms-lib-list--overview .openms-lib-list__row,
+ .openms-lib-list--capabilities .openms-lib-list__row,
+ .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row,
+ .openms-lib-list--developers .openms-lib-list__row,
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row,
+ .openms-lib-resource-card {
+ transition: none;
+ }
+
+ .openms-lib-core-tools__card {
+ transition: none;
+ }
+
+ .openms-lib-core-tools__card:hover,
+ .openms-lib-core-tools__card:focus-visible {
+ transform: none;
+ }
+
+ .openms-lib-list--overview .openms-lib-list__row:hover {
+ transform: none;
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:hover,
+ .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:focus-within {
+ transform: none;
+ }
+
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:hover,
+ .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:focus-within {
+ transform: none;
+ }
+
+ .openms-lib-list--tiles .openms-lib-list__row:hover,
+ .openms-lib-resource-card:hover {
+ transform: none;
+ }
+}
diff --git a/assets/css/publications.css b/assets/css/publications.css
new file mode 100644
index 00000000..72ab5e54
--- /dev/null
+++ b/assets/css/publications.css
@@ -0,0 +1,436 @@
+/* Publications page — unified layout and bibliography UX */
+
+.publications-page-layout {
+ --pub-max: 68rem;
+ --pub-gap: clamp(2rem, 4vw, 3rem);
+ --pub-line: rgba(var(--openms-navy-rgb), 0.1);
+ --pub-card-radius: 0.85rem;
+ --pub-card-border: rgba(var(--openms-navy-rgb), 0.12);
+ --pub-card-pad: clamp(1rem, 2vw, 1.25rem);
+
+ display: block;
+ width: 100%;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.publications-page-layout__content {
+ width: min(100%, var(--pub-max));
+ max-width: var(--pub-max);
+ margin-inline: auto;
+ padding-inline: clamp(1.25rem, 4vw, 2rem);
+}
+
+.publications-page-hero {
+ margin-bottom: clamp(2rem, 4vh, 3rem);
+}
+
+.publications-body {
+ display: grid;
+ gap: var(--pub-gap);
+}
+
+/* Shared section label */
+.publications-section-label {
+ margin: 0 0 0.85rem;
+ font-family: var(--openms-font-body);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.55);
+}
+
+/* —— Key publications —— */
+.publications-featured {
+ margin: 0;
+ padding: 0;
+}
+
+.publications-featured__list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: 0.85rem;
+}
+
+.publications-cite-card {
+ display: grid;
+ gap: 0.5rem;
+ margin: 0;
+ padding: var(--pub-card-pad);
+ border: 1px solid var(--pub-card-border);
+ border-radius: var(--pub-card-radius);
+ background: var(--openms-white);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.publications-cite-card:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+}
+
+.publications-cite-card--primary {
+ border-left: 4px solid var(--openms-navy);
+}
+
+.publications-cite-card--secondary {
+ border-left: 4px solid var(--openms-blue);
+}
+
+.publications-cite-card__top {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.4rem 0.6rem;
+}
+
+.publications-cite-card__badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.18rem 0.5rem;
+ font-size: 0.65rem;
+ font-weight: 800;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--openms-navy);
+ background: rgba(var(--openms-navy-rgb), 0.08);
+ border-radius: 999px;
+}
+
+.publications-cite-card--secondary .publications-cite-card__badge {
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+}
+
+.publications-cite-card__topic {
+ font-size: 0.75rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-navy-rgb), 0.5);
+}
+
+.publications-cite-card__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.05rem, 1.9vw, 1.25rem);
+ font-weight: 800;
+ line-height: 1.35;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.publications-cite-card--primary .publications-cite-card__title {
+ font-size: clamp(1.1rem, 2vw, 1.35rem);
+}
+
+.publications-cite-card__title a {
+ color: inherit;
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.publications-cite-card__title a:hover,
+.publications-cite-card__title a:focus-visible {
+ color: var(--openms-blue);
+ outline: none;
+}
+
+.publications-cite-card__meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.35rem 0.6rem;
+ margin: 0;
+ font-size: var(--openms-body-size);
+ font-weight: 600;
+ color: rgba(var(--openms-navy-rgb), 0.75);
+}
+
+.publications-cite-card__journal {
+ color: var(--openms-blue);
+}
+
+.publications-cite-card__year::before {
+ content: "·";
+ margin-right: 0.6rem;
+ color: rgba(var(--openms-navy-rgb), 0.35);
+ font-weight: 400;
+}
+
+.publications-cite-card__authors {
+ margin: 0;
+ font-size: var(--openms-text-min);
+ line-height: 1.55;
+ color: rgba(var(--openms-navy-rgb), 0.62);
+}
+
+.publications-cite-card__action {
+ justify-self: start;
+ margin-top: 0.15rem;
+ font-size: 0.8rem;
+ font-weight: 700;
+ color: var(--openms-blue);
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.publications-cite-card__action:hover,
+.publications-cite-card__action:focus-visible {
+ color: var(--openms-navy);
+ text-decoration: underline;
+ outline: none;
+}
+
+@media (min-width: 900px) {
+ .publications-featured__list {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ align-items: stretch;
+ }
+}
+
+/* —— Bibliography —— */
+.publications-bibliography {
+ display: grid;
+ gap: 1rem;
+ margin: 0;
+ padding-top: 0.25rem;
+}
+
+.publications-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 0.75rem 1.25rem;
+ padding: 0.15rem 0 0.35rem;
+}
+
+.publications-toolbar__intro {
+ display: grid;
+ gap: 0.2rem;
+ min-width: min(100%, 14rem);
+}
+
+.publications-toolbar__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.1rem, 2vw, 1.3rem);
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+}
+
+.publications-toolbar__filter {
+ display: flex;
+ flex-direction: column;
+ gap: 0.3rem;
+ min-width: min(100%, 9rem);
+}
+
+.publications-toolbar__select {
+ min-height: 2.5rem;
+ min-width: 7.5rem;
+ padding: 0.4rem 2rem 0.4rem 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ font-weight: 600;
+ color: var(--openms-navy);
+ background-color: var(--openms-white);
+ border: 1px solid var(--pub-card-border);
+ border-radius: 0.5rem;
+ cursor: pointer;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230c2171' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 0.7rem center;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.publications-toolbar__select:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.35);
+}
+
+.publications-toolbar__select:focus {
+ outline: none;
+}
+
+.publications-toolbar__select:focus-visible {
+ border-color: var(--openms-blue);
+ box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.18);
+}
+
+.publications-bibliography__entries {
+ display: grid;
+ gap: 0.85rem;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ overflow: visible;
+}
+
+/* Year blocks */
+.publications-year {
+ margin: 0;
+ padding: 0;
+}
+
+.publications-page:not(.publications-year-filter--ready) .publications-year {
+ display: none;
+}
+
+.publications-year[hidden] {
+ display: none;
+}
+
+.publication-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: 0.85rem;
+}
+
+.publications-year .publication-entry {
+ display: grid;
+ gap: 0.45rem;
+ margin: 0;
+ padding: var(--pub-card-pad);
+ border: 1px solid var(--pub-card-border);
+ border-radius: var(--pub-card-radius);
+ background: var(--openms-white);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.publications-year .publication-entry:hover {
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+}
+
+.publication-entry p {
+ margin: 0;
+}
+
+.publication-title {
+ font-family: var(--openms-font-heading);
+ font-size: var(--openms-body-size-lg);
+ font-weight: 700;
+ line-height: 1.4;
+ color: var(--openms-navy);
+ text-wrap: pretty;
+}
+
+.publication-title-link {
+ color: inherit;
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.publication-title-link:hover,
+.publication-title-link:focus-visible {
+ color: var(--openms-blue);
+ text-decoration: underline;
+ text-underline-offset: 0.14em;
+ outline: none;
+}
+
+.publication-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.35rem 0.5rem;
+ font-size: var(--openms-text-min);
+ line-height: 1.45;
+ color: rgba(var(--openms-navy-rgb), 0.65);
+}
+
+.publication-journal {
+ font-style: italic;
+ font-weight: 500;
+ color: rgba(var(--openms-navy-rgb), 0.78);
+}
+
+.publication-year {
+ font-weight: 600;
+}
+
+.publication-year::before {
+ content: "·";
+ margin-right: 0.45rem;
+ color: rgba(var(--openms-navy-rgb), 0.35);
+}
+
+.publications-page[data-active-year] .publication-year {
+ display: none;
+}
+
+.publication-authors {
+ font-size: var(--openms-text-min);
+ line-height: 1.5;
+ color: rgba(var(--openms-navy-rgb), 0.6);
+}
+
+/* Hero actions */
+.publications-page-layout .openms-lib-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ text-decoration: none;
+ transition: var(--openms-btn-motion);
+}
+
+.publications-page-layout .openms-lib-btn--primary {
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.publications-page-layout .openms-lib-btn--ghost {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.publications-page-layout .openms-lib-btn--primary:hover,
+.publications-page-layout .openms-lib-btn--primary:focus-visible,
+.publications-page-layout .openms-lib-btn--ghost:hover,
+.publications-page-layout .openms-lib-btn--ghost:focus-visible {
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+@media (max-width: 640px) {
+ .publication-title {
+ font-size: var(--openms-body-size);
+ }
+
+ .publications-toolbar {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .publications-toolbar__filter {
+ width: 100%;
+ }
+
+ .publications-toolbar__select {
+ width: 100%;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .publications-page-layout .openms-lib-btn:hover,
+ .publications-page-layout .openms-lib-btn:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/quick-facts.css b/assets/css/quick-facts.css
index ab77a289..78003a84 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/research-partnerships-page.css b/assets/css/research-partnerships-page.css
new file mode 100644
index 00000000..f3bb8edf
--- /dev/null
+++ b/assets/css/research-partnerships-page.css
@@ -0,0 +1,176 @@
+.research-partnerships-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --partnerships-max: 64rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.research-partnerships-page-layout__content {
+ width: min(100%, var(--partnerships-max));
+ max-width: var(--partnerships-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.research-partnerships-page-hero {
+ margin-bottom: var(--olib-section-y);
+}
+
+.about-donate-actions.research-partnerships-page__actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+ gap: 0.75rem;
+ width: fit-content;
+ max-width: 100%;
+}
+
+.about-donate-actions.research-partnerships-page__actions > a {
+ box-sizing: border-box;
+ flex: 1 1 11.75rem;
+ min-width: 11.75rem;
+ height: 2.75rem;
+ margin-top: 0;
+ text-align: center;
+}
+
+/* Navbar-style CTA motion (research partnerships page) */
+.research-partnerships-page-layout .openms-lib-btn,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > a,
+.research-partnerships-page-layout .governance-card__link a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ width: fit-content;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.research-partnerships-page-layout .openms-lib-btn--primary {
+ gap: 0.5rem;
+ padding-inline: 1.15rem;
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.research-partnerships-page-layout .openms-lib-btn--ghost,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate,
+.research-partnerships-page-layout .governance-card__link a {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary {
+ border: 2px solid var(--openms-blue);
+ background: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.research-partnerships-page-layout .governance-card__link a {
+ margin-top: 0;
+}
+
+.research-partnerships-page-layout .openms-lib-btn--primary:hover,
+.research-partnerships-page-layout .openms-lib-btn--primary:focus-visible,
+.research-partnerships-page-layout .openms-lib-btn--primary:active,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:hover,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:focus-visible,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:active {
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.research-partnerships-page-layout .openms-lib-btn--primary:hover,
+.research-partnerships-page-layout .openms-lib-btn--primary:focus-visible,
+.research-partnerships-page-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:hover,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:focus-visible,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:active {
+ background: var(--openms-blue);
+ border-color: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.research-partnerships-page-layout .openms-lib-btn--ghost:hover,
+.research-partnerships-page-layout .openms-lib-btn--ghost:focus-visible,
+.research-partnerships-page-layout .openms-lib-btn--ghost:active,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:hover,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:focus-visible,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:active,
+.research-partnerships-page-layout .governance-card__link a:hover,
+.research-partnerships-page-layout .governance-card__link a:focus-visible,
+.research-partnerships-page-layout .governance-card__link a:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.research-partnerships-page-layout .openms-lib-btn--primary:focus-visible,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.research-partnerships-page-layout .openms-lib-btn--ghost:focus-visible,
+.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:focus-visible,
+.research-partnerships-page-layout .governance-card__link a:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+@media (max-width: 720px) {
+ .about-donate-actions.research-partnerships-page__actions {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .about-donate-actions.research-partnerships-page__actions > a {
+ flex: 1 1 auto;
+ width: 100%;
+ min-width: 0;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .research-partnerships-page-layout .openms-lib-btn:hover,
+ .research-partnerships-page-layout .openms-lib-btn:focus-visible,
+ .research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > a:hover,
+ .research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > a:focus-visible,
+ .research-partnerships-page-layout .governance-card__link a:hover,
+ .research-partnerships-page-layout .governance-card__link a:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/shell.css b/assets/css/shell.css
index 46eaed37..6afefcb9 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/shortcuts_override.css b/assets/css/shortcuts_override.css
index 34c9b1b9..f34b4219 100644
--- a/assets/css/shortcuts_override.css
+++ b/assets/css/shortcuts_override.css
@@ -1,3 +1,104 @@
-.shortcuts-H2 {
- font-weight: bold;
+/* Global polish for "On this page" */
+.shortcuts-container {
+ border-radius: 0.75rem;
+}
+
+.shortcuts-title {
+ font-family: var(--openms-font-heading);
+ font-size: var(--openms-secondary-heading-size);
+ font-weight: 700;
+ color: var(--openms-navy);
+}
+
+#shortcuts {
+ max-height: min(65vh, 36rem);
+ overflow: auto;
+ padding-right: 0.2rem;
+}
+
+#shortcuts > div {
+ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+#shortcuts > div:not(.active) {
+ border-left-color: rgba(var(--openms-blue-rgb), 0.35);
+}
+
+#shortcuts > div.active {
+ color: var(--openms-blue);
+ border-left-color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.08);
+}
+
+.shortcuts-H2,
+.shortcuts-H3,
+.shortcuts-H4 {
+ border-radius: 0 0.45rem 0.45rem 0;
+}
+
+.shortcuts-H2:hover,
+.shortcuts-H3:hover,
+.shortcuts-H4:hover {
+ background: rgba(var(--openms-blue-rgb), 0.08);
+}
+
+/* Governance page: use top jump links only (hide left TOC) */
+.content-padding:has(.governance-page) .shortcuts-container,
+.governance-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* About page: hide left TOC */
+.content-padding:has(.about-page) .shortcuts-container,
+.about-page-layout .shortcuts-container,
+.research-partnerships-page-layout .shortcuts-container,
+.sponsor-us-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* Contact page: hide left TOC */
+.content-padding:has(.contact-page) .shortcuts-container,
+.contact-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* Help page: hide left TOC */
+.content-padding:has(.help-page) .shortcuts-container,
+.help-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* News listing & articles: hide left TOC */
+.content-padding:has(.news-page-layout) .shortcuts-container,
+.news-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* Donate page: hide left TOC */
+.content-padding:has(.donate-page-layout) .shortcuts-container,
+.donate-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* Community calendar: hide left TOC */
+.content-padding:has(.community-calendar-layout) .shortcuts-container,
+.community-calendar-layout .shortcuts-container {
+ display: none;
+}
+
+/* Contribute page: hide left TOC */
+.content-padding:has(.contribute-page-layout) .shortcuts-container,
+.contribute-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* Applications listing: hide left TOC */
+.content-padding:has(.applications-page-layout) .shortcuts-container,
+.applications-page-layout .shortcuts-container {
+ display: none;
+}
+
+/* OpenMS-lib page: hide left TOC */
+.content-padding:has(.openms-lib-layout) .shortcuts-container {
+ display: none;
}
diff --git a/assets/css/site-header.css b/assets/css/site-header.css
new file mode 100644
index 00000000..4fbfc1b4
--- /dev/null
+++ b/assets/css/site-header.css
@@ -0,0 +1,115 @@
+/* Sticky site header — white banner + blue navbar only */
+
+.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 200;
+ width: 100%;
+ background: transparent;
+ overflow: visible;
+}
+
+.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%;
+}
+
+body.navbar-menu-open {
+ overflow: hidden;
+}
+
+#navbar-clone.navbar.is-fresh {
+ display: none !important;
+}
+
+@media (min-width: 1280px) {
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown {
+ background: var(--openms-navbar-dropdown-bg);
+ border-color: var(--openms-navbar-dropdown-border);
+ }
+
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown a.navbar-item,
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown .navbar-item.is-nested,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown a.navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown .navbar-item.is-nested {
+ color: var(--openms-navbar-dropdown-text) !important;
+ }
+
+ .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown-heading,
+ #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown-heading {
+ color: var(--openms-navbar-dropdown-heading) !important;
+ }
+}
+
+@media (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ background: var(--openms-chrome-nav-surface);
+ border-top: none;
+ /* Drawer uses dark text — override inherited white header tokens */
+ --openms-navbar-link-color: var(--openms-chrome-nav-text);
+ --openms-navbar-link-hover-color: var(--openms-blue);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading {
+ color: var(--openms-chrome-nav-text-muted) !important;
+ border-top-color: var(--openms-chrome-nav-border);
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested {
+ color: var(--openms-chrome-nav-text) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:visited,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:visited,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active {
+ color: var(--openms-chrome-nav-text) !important;
+ background: transparent !important;
+ border-color: rgba(var(--openms-navy-rgb), 0.22) !important;
+ }
+}
+
+.navbar-search__toggle:hover,
+.navbar-search.is-open .navbar-search__toggle {
+ color: var(--openms-navbar-link-hover-color);
+}
+
+.navbar-search__toggle:focus-visible {
+ color: var(--openms-blue-secondary);
+}
+
+@media (min-width: 1280px) {
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate {
+ color: var(--openms-white) !important;
+ background: transparent !important;
+ border-color: rgba(var(--openms-white-rgb), 0.34) !important;
+ }
+
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover,
+ .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover,
+ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible {
+ color: var(--openms-white) !important;
+ background: var(--openms-chrome-surface-hover) !important;
+ border-color: rgba(var(--openms-white-rgb), 0.5) !important;
+ }
+}
diff --git a/assets/css/sponsor-us-page.css b/assets/css/sponsor-us-page.css
new file mode 100644
index 00000000..02a56886
--- /dev/null
+++ b/assets/css/sponsor-us-page.css
@@ -0,0 +1,176 @@
+.sponsor-us-page-layout {
+ --olib-pad-x: clamp(1.25rem, 4vw, 2rem);
+ --olib-section-y: clamp(4rem, 8vh, 5.5rem);
+ --olib-bg-soft: #f4f6f9;
+ --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68);
+ --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft));
+ --sponsor-us-max: 64rem;
+
+ display: block;
+ width: 100%;
+ max-width: none;
+ margin: 0;
+ padding: 0 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.sponsor-us-page-layout__content {
+ width: min(100%, var(--sponsor-us-max));
+ max-width: var(--sponsor-us-max);
+ margin-inline: auto;
+ padding-inline: var(--olib-pad-x);
+}
+
+.sponsor-us-page-hero {
+ margin-bottom: var(--olib-section-y);
+}
+
+.about-donate-actions.sponsor-us-page__actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+ gap: 0.75rem;
+ width: fit-content;
+ max-width: 100%;
+}
+
+.about-donate-actions.sponsor-us-page__actions > a {
+ box-sizing: border-box;
+ flex: 1 1 12.25rem;
+ min-width: 12.25rem;
+ height: 2.75rem;
+ margin-top: 0;
+ text-align: center;
+}
+
+/* Navbar-style CTA motion (sponsor us page) */
+.sponsor-us-page-layout .openms-lib-btn,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > a,
+.sponsor-us-page-layout .governance-card__link a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ width: fit-content;
+ min-height: 2.75rem;
+ padding: var(--openms-btn-padding);
+ border-radius: var(--openms-btn-pill-radius);
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+ text-decoration: none;
+ box-shadow: 0 0 0 0 var(--openms-btn-glow);
+ transition: var(--openms-btn-motion);
+}
+
+.sponsor-us-page-layout .openms-lib-btn--primary {
+ gap: 0.5rem;
+ padding-inline: 1.15rem;
+ border: 2px solid var(--openms-navy);
+ background: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.sponsor-us-page-layout .openms-lib-btn--ghost,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate,
+.sponsor-us-page-layout .governance-card__link a {
+ border: 2px solid var(--openms-blue);
+ background: transparent;
+ background-color: transparent;
+ color: var(--openms-blue) !important;
+}
+
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary {
+ border: 2px solid var(--openms-blue);
+ background: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.sponsor-us-page-layout .governance-card__link a {
+ margin-top: 0;
+}
+
+.sponsor-us-page-layout .openms-lib-btn--primary:hover,
+.sponsor-us-page-layout .openms-lib-btn--primary:focus-visible,
+.sponsor-us-page-layout .openms-lib-btn--primary:active,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:hover,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:focus-visible,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:active {
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.sponsor-us-page-layout .openms-lib-btn--primary:hover,
+.sponsor-us-page-layout .openms-lib-btn--primary:focus-visible,
+.sponsor-us-page-layout .openms-lib-btn--primary:active {
+ background: var(--openms-navy);
+ border-color: var(--openms-navy);
+ color: var(--openms-white) !important;
+}
+
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:hover,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:focus-visible,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:active {
+ background: var(--openms-blue);
+ border-color: var(--openms-blue);
+ color: var(--openms-white) !important;
+}
+
+.sponsor-us-page-layout .openms-lib-btn--ghost:hover,
+.sponsor-us-page-layout .openms-lib-btn--ghost:focus-visible,
+.sponsor-us-page-layout .openms-lib-btn--ghost:active,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:hover,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:focus-visible,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:active,
+.sponsor-us-page-layout .governance-card__link a:hover,
+.sponsor-us-page-layout .governance-card__link a:focus-visible,
+.sponsor-us-page-layout .governance-card__link a:active {
+ background: transparent;
+ background-color: transparent;
+ border-color: var(--openms-blue);
+ color: var(--openms-blue) !important;
+ transform: scale(var(--openms-btn-hover-scale));
+ box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow);
+ outline: none;
+ text-decoration: none;
+}
+
+.sponsor-us-page-layout .openms-lib-btn--primary:focus-visible,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:focus-visible {
+ box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+.sponsor-us-page-layout .openms-lib-btn--ghost:focus-visible,
+.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:focus-visible,
+.sponsor-us-page-layout .governance-card__link a:focus-visible {
+ box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)),
+ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow);
+}
+
+@media (max-width: 720px) {
+ .about-donate-actions.sponsor-us-page__actions {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .about-donate-actions.sponsor-us-page__actions > a {
+ flex: 1 1 auto;
+ width: 100%;
+ min-width: 0;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .sponsor-us-page-layout .openms-lib-btn:hover,
+ .sponsor-us-page-layout .openms-lib-btn:focus-visible,
+ .sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > a:hover,
+ .sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > a:focus-visible,
+ .sponsor-us-page-layout .governance-card__link a:hover,
+ .sponsor-us-page-layout .governance-card__link a:focus-visible {
+ transform: none;
+ }
+}
diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css
index ef8a8b82..9261d00f 100644
--- a/assets/css/styles_override.css
+++ b/assets/css/styles_override.css
@@ -1,52 +1,551 @@
-/* Back to top – colour override to match footer theme */
-#backtotop a {
- background-color: #0b214a;
- border: 2px solid rgba(255, 255, 255, 0.25);
+.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.is-fresh .navbar-dropdown .navbar-item,
+.navbar.is-fresh .navbar-dropdown-heading,
+.navbar.is-fresh .navbar-cta-label,
+#navbar-clone.navbar.is-fresh .navbar-cta-label {
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
}
-#backtotop.visible a:hover {
- background-color: #1a3a7a;
+@media (min-width: 1280px) {
+ .navbar.is-fresh .navbar-links > a.navbar-item.is-secondary,
+ .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-links > a.navbar-item.is-secondary,
+ #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link {
+ font-size: var(--openms-navbar-font-size);
+ color: var(--openms-navbar-link-color) !important;
+ }
}
-.hero-title-content {
- max-width: 1200px;
- margin: 1vh auto;
+.navbar.is-fresh .navbar-link,
+#navbar-clone.navbar.is-fresh .navbar-link {
+ font-size: var(--openms-navbar-font-size);
}
-.hero-logo {
- max-height: 200px;
+.navbar.is-fresh .navbar-dropdown .navbar-item,
+.navbar.is-fresh .navbar-dropdown-heading,
+#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item,
+#navbar-clone.navbar.is-fresh .navbar-dropdown-heading {
+ font-size: var(--openms-navbar-font-size);
}
-.navbar.is-fresh .navbar-item.has-dropdown .navbar-link {
- color: var(--colorPrimaryDark);
+.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-brand img {
- max-height: 50px !important;
- height: 50px;
+.navbar.is-fresh a.navbar-item.is-secondary,
+.navbar.is-fresh .navbar-link,
+.navbar.is-fresh .navbar-item:not(.navbar-cta-item):not(.navbar-brand-link),
+#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary,
+#navbar-clone.navbar.is-fresh .navbar-link,
+#navbar-clone.navbar.is-fresh .navbar-item:not(.navbar-cta-item):not(.navbar-brand-link) {
+ transition: color 0.2s ease;
}
-@media only screen and (max-width: 850px) {
- .social-media-icons {
+.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link,
+#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+}
+
+@media (min-width: 1280px) {
+ .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-navbar-link-color) !important;
+ }
+}
+
+@media (min-width: 1280px) {
+ .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: 0.1em;
+ right: auto;
+ margin-left: 0.25rem;
+ }
+}
+
+.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown,
+#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown {
+ background: var(--openms-navbar-dropdown-bg);
+ border: 1px solid var(--openms-navbar-dropdown-border);
+ border-top: 2px solid var(--openms-blue);
+ box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-dark-rgb), 0.1);
+}
+
+/* Mobile drawer — stack submenus; navy text on white panel */
+@media (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .navbar-menu.is-static,
+ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed {
+ --openms-navbar-link-color: var(--openms-chrome-nav-text);
+ --openms-navbar-link-hover-color: var(--openms-blue);
+ --openms-navbar-link-hover-bg: rgba(var(--openms-navy-rgb), 0.06);
+ }
+
+ .navbar.is-fresh .navbar-menu .navbar-item.has-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .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 !important;
+ top: auto !important;
+ left: auto !important;
+ right: auto !important;
+ transform: none !important;
+ float: none;
width: 100%;
}
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown > .navbar-link {
+ font-size: 1rem;
+ color: var(--openms-chrome-nav-text) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link {
+ color: var(--openms-chrome-nav-text) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link {
+ color: var(--openms-chrome-nav-text) !important;
+ background: transparent !important;
+ background-color: transparent !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:hover {
+ color: var(--openms-navbar-link-hover-color) !important;
+ background: var(--openms-navbar-link-hover-bg) !important;
+ background-color: var(--openms-navbar-link-hover-bg) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-link::after {
+ border-color: rgba(var(--openms-navy-rgb), 0.5) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after {
+ border-color: rgba(var(--openms-navy-rgb), 0.5) !important;
+ }
+
+ .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 {
+ border: none !important;
+ border-top: none !important;
+ box-shadow: none !important;
+ background: transparent !important;
+ background-color: transparent !important;
+ }
}
-@media only screen and (max-width: 600px) {
- .hero-logo {
- max-height: 150px;
+@media (min-width: 1280px) {
+ .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown {
+ --openms-navbar-dropdown-width: 18.5rem;
+ width: var(--openms-navbar-dropdown-width);
+ min-width: var(--openms-navbar-dropdown-width);
+ max-width: var(--openms-navbar-dropdown-width);
+ box-sizing: border-box;
+ margin-top: 0;
+ padding-top: 0.45rem;
+ padding-bottom: 0.35rem;
+ overflow: hidden;
}
+
+ .navbar.is-fresh .navbar-dropdown .navbar-item,
+ .navbar.is-fresh .navbar-dropdown-heading,
+ #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-dropdown-heading {
+ white-space: nowrap;
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
+ }
+
+ .navbar.is-fresh .navbar-dropdown .navbar-item,
+ #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ font-weight: 500;
+ font-synthesis: none;
+ min-height: 2.25rem;
+ display: flex;
+ align-items: center;
+ border: none;
+ border-radius: 0;
+ transition:
+ color 0.2s ease,
+ background-color 0.2s ease;
+ }
+}
+
+.navbar.is-fresh .navbar-dropdown a.navbar-item,
+.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested,
+#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item,
+#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested {
+ color: var(--openms-navbar-dropdown-text) !important;
+ font-weight: 500;
+ font-synthesis: none;
+ box-sizing: border-box;
+}
+
+.navbar.is-fresh .navbar-dropdown-heading,
+#navbar-clone.navbar.is-fresh .navbar-dropdown-heading {
+ color: var(--openms-navbar-dropdown-heading) !important;
}
-@media only screen and (max-width: 400px) {
- .hero-logo {
- max-height: 120px;
+@media (min-width: 1280px) {
+ .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link,
+ .navbar.is-fresh .navbar-links > a.navbar-item.is-secondary,
+ #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-links > a.navbar-item.is-secondary {
+ color: var(--openms-navbar-link-color) !important;
+ min-height: 2.25rem;
+ display: inline-flex;
+ align-items: center;
+ border: 1px solid transparent;
+ box-sizing: border-box;
+ transition:
+ color 0.2s ease,
+ background-color 0.2s ease,
+ border-color 0.2s ease;
+ }
+
+ /* Navbar links — pill hover on navy bar */
+ .navbar.is-fresh .navbar-links > a.navbar-item.is-secondary:hover,
+ .navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link,
+ .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover,
+ #navbar-clone.navbar.is-fresh .navbar-links > a.navbar-item.is-secondary:hover,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover {
+ background: var(--openms-navbar-link-hover-bg) !important;
+ background-color: var(--openms-navbar-link-hover-bg) !important;
+ color: var(--openms-navbar-link-hover-color) !important;
+ border-color: rgba(var(--openms-white-rgb), 0.14);
+ }
+
+ .navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link::after,
+ .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover::after,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover::after {
+ border-color: var(--openms-navbar-link-hover-color) !important;
+ }
+
+ .navbar.is-fresh a.navbar-item.is-secondary:focus-visible,
+ .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:focus-visible,
+ #navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:focus-visible,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:focus-visible {
+ background: var(--openms-navbar-link-hover-bg) !important;
+ background-color: var(--openms-navbar-link-hover-bg) !important;
+ color: var(--openms-navbar-link-hover-color) !important;
+ border-color: rgba(var(--openms-white-rgb), 0.14);
+ }
+
+ .navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link {
+ background: var(--openms-navbar-link-hover-bg) !important;
+ background-color: var(--openms-navbar-link-hover-bg) !important;
+ color: var(--openms-navbar-link-hover-color) !important;
+ border-color: rgba(var(--openms-white-rgb), 0.14);
+ }
+
+ .navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link::after,
+ #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link::after {
+ border-color: var(--openms-navbar-link-hover-color) !important;
}
}
-@media only screen and (max-width: 320px) {
- .hero-logo {
- max-height: 100px;
+.navbar.is-fresh .navbar-dropdown a.navbar-item:hover,
+.navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:hover,
+#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item:hover,
+#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:hover {
+ background: var(--openms-navbar-dropdown-hover-bg) !important;
+ background-color: var(--openms-navbar-dropdown-hover-bg) !important;
+ color: var(--openms-navbar-dropdown-hover-text) !important;
+ font-weight: 500;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ border: none;
+ margin: 0;
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
+}
+
+.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested:hover,
+#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested:hover {
+ padding-left: 1.5rem;
+}
+
+.navbar.is-fresh .navbar-dropdown a.navbar-item:focus-visible,
+.navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:focus-visible,
+#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item:focus-visible,
+#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:focus-visible {
+ background: var(--openms-navbar-dropdown-hover-bg) !important;
+ background-color: var(--openms-navbar-dropdown-hover-bg) !important;
+ color: var(--openms-navbar-dropdown-hover-text) !important;
+ font-weight: 500;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ border: none;
+ margin: 0;
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
+}
+
+.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested:focus-visible,
+#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested:focus-visible {
+ padding-left: 1.5rem;
+}
+
+/* Logo — no hover background */
+.navbar.is-fresh .navbar-brand .navbar-brand-link:hover,
+.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible,
+#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover,
+#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible {
+ background: transparent !important;
+ background-color: transparent !important;
+ color: inherit !important;
+ box-shadow: none !important;
+ outline: none;
+}
+
+.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text,
+.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible .navbar-logo-text,
+#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text,
+#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible .navbar-logo-text {
+ color: var(--openms-navbar-link-color) !important;
+}
+
+/* Navbar CTAs — sizing in openms-buttons.css */
+.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary {
+ display: inline-flex !important;
+ flex-shrink: 0;
+}
+
+.navbar.is-fresh .navbar-burger,
+#navbar-clone.navbar.is-fresh .navbar-burger {
+ color: var(--openms-navbar-link-color);
+ width: 3.5rem;
+ height: 3.5rem;
+ margin-right: 1rem;
+}
+
+@media (max-width: 1279px) {
+ .navbar.is-fresh .navbar-burger,
+ #navbar-clone.navbar.is-fresh .navbar-burger {
+ margin-right: 0;
+ }
+}
+
+.navbar.is-fresh .navbar-burger span,
+#navbar-clone.navbar.is-fresh .navbar-burger span {
+ background-color: var(--openms-navbar-link-color);
+ 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;
+}
+
+@media (min-width: 1280px) {
+ .navbar.is-fresh {
+ min-height: var(--openms-header-bar-min-height, 5.5rem);
+ }
+
+ .navbar.is-fresh .container,
+ .navbar.is-fresh .navbar-brand {
+ min-height: var(--openms-header-bar-min-height, 5.5rem);
+ }
+}
+
+/* Top-level dropdown labels (e.g. Partner with OpenMS) — white on navy bar only */
+@media (min-width: 1280px) {
+ .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;
+ color: var(--openms-navbar-link-color) !important;
+ }
+}
+
+.navbar.is-fresh .navbar-search__toggle:hover,
+.navbar.is-fresh .navbar-search.is-open .navbar-search__toggle {
+ color: var(--openms-navbar-link-hover-color);
+}
+
+.navbar.is-fresh .navbar-search__toggle:focus-visible {
+ color: var(--openms-navbar-link-hover-color);
+}
+
+/* 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-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: none;
+ color: var(--openms-navbar-dropdown-heading) !important;
+ border-top: 1px solid var(--openms-navbar-dropdown-border);
+ 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;
+}
+
+.navbar.is-fresh .navbar-actions .navbar-cta-item,
+#navbar-clone.navbar.is-fresh .navbar-actions .navbar-cta-item {
+ flex-shrink: 0;
+}
+
+.navbar.is-fresh .navbar-brand .navbar-brand-link {
+ display: flex;
+ align-items: center;
+ gap: 0.875rem;
+ align-self: stretch;
+ width: 100%;
+ min-width: 2.75rem;
+ min-height: 2.75rem;
+ padding: 0.35rem 0.5rem;
+ margin-inline: 0;
+ border-radius: 0;
+}
+
+.navbar.is-fresh .navbar-brand img.navbar-logo,
+#navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo {
+ max-height: var(--openms-navbar-logo-height, 52px) !important;
+ height: var(--openms-navbar-logo-height, 52px) !important;
+ width: auto !important;
+ max-width: 100%;
+ object-fit: contain;
+ object-position: left center;
+ 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-navbar-link-color) !important;
+ line-height: 1;
+}
+
+/* Navbar Sponsor CTA — white text */
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:visited,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:visited,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:hover,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:hover,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:active,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:active,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:visited,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:visited,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:hover,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:hover,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary:active,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:active,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:visited,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:visited,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:active,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:active {
+ color: var(--openms-white) !important;
+}
+
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary .navbar-cta-label,
+.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta .navbar-cta-label,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary .navbar-cta-label,
+#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta .navbar-cta-label,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label,
+.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta .navbar-cta-label {
+ color: inherit !important;
+}
+
+@media only screen and (max-width: 850px) {
+ .social-media-icons {
+ width: 100%;
}
}
@@ -54,97 +553,145 @@
FOOTER — REDESIGN
============================================= */
+.bg-navy {
+ background-color: var(--openms-bg-navy);
+}
+
+#footer.footer-redesign,
+#footer.bg-navy {
+ background-color: var(--openms-bg-navy);
+}
+
.footer-redesign {
- background-color: #0b214a;
- color: #e2e8f0;
- padding: 3rem 0 0;
- font-family: inherit;
+ position: relative;
+ color: rgba(var(--openms-white-rgb), 0.86);
+ padding: clamp(2.75rem, 5vw, 3.75rem) 0 0;
+ font-family: var(--openms-font-body);
}
-/* ---- Inner wrapper (brand + link grid) ---- */
.footer-inner {
- max-width: 1200px;
+ max-width: 75rem;
margin: 0 auto;
- padding: 0 2rem 2.5rem;
- display: flex;
- gap: 3rem;
- align-items: flex-start;
+ padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
-/* ---- Brand block ---- */
-.footer-brand {
- flex: 0 0 200px;
+/* ---- Main row: brand + link columns ---- */
+.footer-top {
+ display: grid;
+ grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
+ gap: clamp(2rem, 5vw, 3.5rem);
+ align-items: start;
+ padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
-.footer-title {
- font-size: 1.75rem;
- font-weight: 800;
- color: #ffffff;
- margin-bottom: 1.5rem;
- letter-spacing: -0.3px;
+.footer-brand {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
}
-/* ---- Partner logo row ---- */
-.footer-partners {
+.footer-brand__intro {
display: flex;
- flex-wrap: wrap;
- gap: 1.25rem;
- align-items: center;
- /* Removed container-level opacity */
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.625rem;
}
-.footer-partners a {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- /* Ensure touch target is large enough */
- min-height: 44px;
+.footer-tagline {
+ margin: 0;
+ max-width: 18rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ font-weight: 400;
+ line-height: 1.5;
+ color: rgba(var(--openms-white-rgb), 0.72);
}
-.footer-link-group ul li a:focus-visible,
-.footer-socials a:focus-visible {
- color: #ffffff;
- outline: 2px solid rgba(255, 255, 255, 0.45);
- outline-offset: 4px;
+.footer-logo {
+ display: inline-flex;
+ align-items: center;
}
-.footer-partners img {
- max-height: 36px;
+.footer-logo img {
+ display: block;
+ max-height: 120px;
+ max-width: min(100%, 320px);
width: auto;
+ height: auto;
object-fit: contain;
filter: brightness(0) invert(1);
- opacity: 0.7;
- /* Individual logo is dimmed */
- transition: opacity 0.2s ease;
}
-.footer-partners a:hover img,
-.footer-partners a:focus-visible img {
- opacity: 1;
- /* Lights up to full brightness on hover/focus */
+.footer-logo:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 4px;
+ border-radius: 4px;
+}
+
+.footer-brand__actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+
+.footer-brand-btn.signup-button {
+ display: inline-flex !important;
+}
+
+/* Footer donate — beat Bulma .button hover/focus defaults */
+#footer.footer-redesign .footer-donate-btn.button:hover,
+#footer.footer-redesign .footer-donate-btn.button:focus,
+#footer.footer-redesign .footer-donate-btn.button:focus-visible,
+#footer.footer-redesign .footer-donate-btn.button:active {
+ background: transparent !important;
+ background-color: transparent !important;
+ border-color: var(--openms-blue) !important;
+ color: var(--openms-white) !important;
+}
+
+/* Footer Donate — secondary blue (openms-buttons.css) */
+
+.footer-title {
+ color: var(--openms-white);
+ margin: 0;
}
-/* ---- Link columns grid ---- */
-.footer-links {
- flex: 1;
+.footer-nav {
display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 2rem;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: clamp(1rem, 2.5vw, 2rem);
+ padding-top: clamp(1.25rem, 2.5vw, 2rem);
+}
+
+.footer-links-area {
+ display: flex;
+ flex-direction: column;
+ gap: clamp(1.25rem, 3vw, 2rem);
+}
+
+.footer-section-label {
+ margin: 0 0 0.75rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-white-rgb), 0.58);
}
-/* ---- Column heading ---- */
.footer-group-heading {
- font-size: 0.68rem;
+ margin: 0 0 0.75rem;
+ font-family: var(--openms-font-heading);
+ font-size: var(--openms-text-min);
font-weight: 700;
- letter-spacing: 0.12em;
+ letter-spacing: 0.1em;
text-transform: uppercase;
- color: rgba(255, 255, 255, 0.45);
- margin: 0 0 0.875rem 0;
- padding: 0;
+ color: rgba(var(--openms-white-rgb), 0.55);
}
-/* ---- Link list ---- */
.footer-link-group ul {
list-style: none;
margin: 0;
@@ -152,101 +699,293 @@
}
.footer-link-group ul li a {
- color: #c8d4e8;
+ display: inline-flex;
+ align-items: center;
+ min-height: 2.25rem;
+ padding: 0.2rem 0.4rem;
+ margin: 0 -0.4rem;
+ border-radius: 0.375rem;
+ color: rgba(var(--openms-white-rgb), 0.72);
+ font-size: var(--openms-body-size);
text-decoration: none;
- font-size: 0.9rem;
+ transition: color 0.2s ease;
+}
+
+.footer-link-group ul li a.footer-link-contact-us {
+ font-size: var(--openms-text-min);
+}
+
+.footer-link-group ul li a:hover,
+.footer-link-group ul li a:focus-visible {
+ color: var(--openms-white);
+ background: transparent;
+ text-decoration: none;
+}
+
+.footer-link-group ul li a:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 2px;
+}
+
+.footer-socials a:focus-visible,
+.footer-sponsors__logos a:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 3px;
+}
+
+/* ---- Sponsors strip ---- */
+.footer-sponsors {
+ padding: clamp(1.25rem, 3vw, 1.75rem) 0;
+}
+
+.footer-sponsors .footer-section-label {
+ margin-bottom: 1rem;
+}
+
+.footer-sponsors__logos {
display: flex;
+ flex-wrap: wrap;
align-items: center;
- min-height: 44px;
- transition: color 0.2s ease;
+ gap: 0.5rem 1.25rem;
}
-.footer-link-group ul li a:hover {
- color: #ffffff;
- text-decoration: underline;
+.footer-sponsors__logos a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2.875rem;
+ min-height: 2.875rem;
+ padding: 0.35rem 0.5rem;
+ border-radius: 0.5rem;
+ transition: background 0.2s ease;
+}
+
+.footer-sponsors__logos img {
+ max-height: 2rem;
+ width: auto;
+ object-fit: contain;
+ filter: brightness(0) invert(1);
+ opacity: 0.72;
+ transition: opacity 0.2s ease;
+}
+
+.footer-sponsors__logo-link--elixir {
+ min-width: 4rem;
+ padding-inline: 0.6rem;
+}
+
+.footer-sponsors__logo-link--elixir img {
+ max-height: 3.35rem;
+ max-width: min(100%, 10rem);
+}
+
+.footer-sponsors__logos a:hover,
+.footer-sponsors__logos a:focus-visible {
+ background: transparent;
+}
+
+.footer-sponsors__logos a:hover img,
+.footer-sponsors__logos a:focus-visible img {
+ opacity: 1;
+}
+
+/* ---- Brand social icons (under logo) ---- */
+.footer-brand .footer-socials {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.25rem;
+ margin-top: 0.25rem;
}
/* ---- Bottom bar ---- */
.footer-bottom {
- max-width: 1200px;
+ max-width: 75rem;
margin: 0 auto;
- padding: 1.25rem 2rem;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
display: flex;
+ flex-wrap: wrap;
align-items: center;
justify-content: space-between;
- flex-wrap: wrap;
- gap: 1rem;
+ gap: 1rem 1.5rem;
+}
+
+.footer-deploy {
+ display: inline-flex;
+ align-items: center;
+ flex-shrink: 0;
+ padding: 0.25rem;
+ border-radius: 0.375rem;
+ transition: opacity 0.2s ease;
+}
+
+.footer-deploy:hover,
+.footer-deploy:focus-visible {
+ opacity: 0.9;
+ outline: none;
+}
+
+.footer-deploy:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 3px;
+}
+
+.footer-deploy img {
+ display: block;
+ width: auto;
+ max-width: min(100%, 7.125rem);
+ height: auto;
+ max-height: 2rem;
+ object-fit: contain;
}
-/* ---- Social icons ---- */
.footer-socials {
display: flex;
- gap: 0.75rem;
+ flex-wrap: wrap;
align-items: center;
+ gap: 0.35rem;
}
.footer-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
- min-width: 44px;
- min-height: 44px;
- color: #c8d4e8;
- transition: color 0.2s ease;
+ min-width: 2.875rem;
+ min-height: 2.875rem;
+ color: rgba(var(--openms-white-rgb), 0.72);
+ border-radius: 0.5rem;
+ transition: color 0.2s ease, opacity 0.2s ease;
}
-.footer-socials a:hover {
- color: #ffffff;
+.footer-socials a:hover,
+.footer-socials a:focus-visible {
+ color: var(--openms-white);
+ background: transparent;
}
.footer-socials svg.icon {
- width: 1.4rem;
- height: 1.4rem;
+ width: 1.5rem;
+ height: 1.5rem;
fill: currentColor;
}
-/* ---- Copyright ---- */
+.footer-socials a svg,
+.footer-socials a svg * {
+ fill: currentColor !important;
+ stroke: currentColor !important;
+ color: currentColor !important;
+ opacity: 1 !important;
+ transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
+}
+
.footer-copyright {
- color: rgba(255, 255, 255, 0.45);
- font-size: 0.85rem;
+ margin: 0;
+ color: rgba(var(--openms-white-rgb), 0.55);
+ font-size: var(--openms-text-min);
+ line-height: 1.5;
+}
+
+.back-to-top {
+ position: fixed;
+ right: clamp(1rem, 2vw, 1.5rem);
+ bottom: clamp(1rem, 2vw, 1.5rem);
+ width: 2.5rem;
+ height: 2.5rem;
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.22);
+ border-radius: 999px;
+ background: rgba(var(--openms-white-rgb), 0.96);
+ color: var(--openms-navy);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 0.25rem 0.8rem rgba(var(--openms-dark-rgb), 0.12);
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(6px);
+ transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+ z-index: 35;
+}
+
+.back-to-top.is-visible {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.back-to-top:hover,
+.back-to-top:focus-visible {
+ background: var(--openms-blue);
+ border-color: var(--openms-blue);
+ color: var(--openms-white);
+ outline: none;
+}
+
+.back-to-top__icon {
+ display: block;
}
/* =============================================
- FOOTER — MOBILE (max-width: 768px)
+ FOOTER — RESPONSIVE
============================================= */
-@media (max-width: 768px) {
- .footer-inner {
- flex-direction: column;
+@media (max-width: 1024px) {
+ .footer-top {
+ grid-template-columns: 1fr;
gap: 2rem;
- padding: 0 1.25rem 2rem;
}
- .footer-brand {
- flex: unset;
- width: 100%;
+ .footer-nav {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1.5rem 2rem;
+ padding-top: clamp(1rem, 2vw, 1.5rem);
}
- .footer-partners {
- flex-direction: row;
- flex-wrap: wrap;
- gap: 1rem;
+ .footer-links-area {
+ gap: 1.25rem;
+ padding-top: 0;
}
+}
- .footer-links {
- width: 100%;
- grid-template-columns: repeat(2, 1fr);
+@media (max-width: 768px) {
+ .footer-redesign {
+ padding-top: 2.5rem;
+ }
+
+ .footer-inner {
+ padding-inline: 1.25rem;
+ }
+
+ .footer-logo img {
+ max-height: 96px;
+ max-width: min(85vw, 280px);
+ }
+
+ .footer-nav {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem 1rem;
}
- .footer-link-group ul li a {
- text-align: left;
+ .footer-sponsors__logos {
+ gap: 0.5rem 1rem;
}
.footer-bottom {
- padding: 1.25rem;
flex-direction: column;
- align-items: flex-start;
+ justify-content: center;
+ text-align: center;
+ padding-inline: 1.25rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .footer-nav {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-sponsors__logos {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ justify-items: start;
}
}
@@ -255,4 +994,529 @@
============================================= */
.img-fit {
object-fit: contain;
-}
\ No newline at end of file
+}
+
+/* =============================================
+ LANDING — legacy section spacing (non-home pages)
+ Homepage rhythm: assets/css/landing-page.css
+ ============================================= */
+.landing-section {
+ margin-top: clamp(2rem, 4.5vw, 4rem);
+}
+
+.landing-section--first {
+ margin-top: 0;
+}
+
+.landing-section--after-hero {
+ margin-top: 0;
+ margin-bottom: clamp(2.5rem, 5vw, 4rem);
+}
+
+.webapps-modern-wrap {
+ margin-top: clamp(2rem, 4.5vw, 4rem);
+}
+
+@media (max-width: 768px) {
+ .landing-section {
+ margin-top: clamp(1.5rem, 4vw, 2.25rem);
+ }
+}
+/* =============================================
+ GOVERNANCE & PUBLICATIONS PAGES
+ (also in assets/css/governance.css + publications.css)
+ ============================================= */
+.governance-page {
+ display: grid;
+ gap: clamp(2rem, 3.8vw, 3.2rem);
+ margin-top: 0.5rem;
+}
+
+.governance-hero {
+ position: relative;
+ overflow: hidden;
+ padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem);
+ background: linear-gradient(
+ 135deg,
+ var(--openms-navy) 0%,
+ #1b318f 55%,
+ var(--openms-blue) 100%
+ );
+ color: var(--openms-white);
+}
+
+.governance-hero::before,
+.governance-hero::after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+ pointer-events: none;
+}
+
+.governance-hero::before {
+ width: 18rem;
+ height: 18rem;
+ right: -4rem;
+ top: -8rem;
+ background: radial-gradient(circle, rgba(var(--openms-white-rgb), 0.16) 0%, transparent 70%);
+}
+
+.governance-hero::after {
+ width: 14rem;
+ height: 14rem;
+ left: -5rem;
+ bottom: -7rem;
+ background: radial-gradient(circle, rgba(var(--openms-pink-rgb), 0.2) 0%, transparent 70%);
+}
+
+.governance-hero__eyebrow {
+ position: relative;
+ z-index: 1;
+ margin: 0 0 0.5rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: rgba(var(--openms-white-rgb), 0.82);
+}
+
+.governance-hero__title {
+ position: relative;
+ z-index: 1;
+ margin: 0;
+ max-width: 18ch;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(2rem, 4.8vw, 3.2rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: -0.02em;
+ text-wrap: balance;
+ color: var(--openms-white) !important;
+}
+
+.governance-hero__title span {
+ color: var(--openms-white) !important;
+}
+
+.governance-hero__description {
+ position: relative;
+ z-index: 1;
+ margin: 0.9rem 0 0;
+ max-width: 60ch;
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.6;
+ color: rgba(var(--openms-white-rgb), 0.92);
+}
+
+.governance-hero__meta {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.55rem;
+ margin-top: 1rem;
+}
+
+.governance-hero__meta a {
+ display: inline-flex;
+ align-items: center;
+ min-height: 2rem;
+ padding: 0.3rem 0.75rem;
+ border-radius: 999px;
+ background: rgba(var(--openms-white-rgb), 0.16);
+ color: var(--openms-white) !important;
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.governance-hero__meta a:hover,
+.governance-hero__meta a:focus-visible {
+ background: rgba(var(--openms-yellow-rgb), 0.22);
+ color: var(--openms-white) !important;
+}
+
+.governance-hero a,
+.governance-hero a:visited {
+ color: var(--openms-white) !important;
+}
+
+.governance-jump-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem 0.7rem;
+ align-items: center;
+}
+
+.governance-jump-links a {
+ display: inline-flex;
+ align-items: center;
+ min-height: 2.1rem;
+ padding: 0.35rem 0.8rem;
+ border-radius: 999px;
+ color: var(--openms-blue);
+ font-weight: 600;
+ text-decoration: none;
+ background: rgba(var(--openms-blue-rgb), 0.08);
+ transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.governance-jump-links a:hover,
+.governance-jump-links a:focus-visible {
+ background: rgba(var(--openms-blue-rgb), 0.16);
+ color: var(--openms-navy);
+ transform: translateY(-1px);
+}
+
+.governance-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: clamp(1rem, 2vw, 2rem);
+}
+
+.governance-card {
+ position: relative;
+ padding: 0.2rem 0.1rem 0.2rem 1.35rem;
+}
+
+.governance-card h2 {
+ margin-top: 0.05rem;
+ margin-bottom: 0.75rem;
+ color: var(--openms-navy);
+}
+
+.governance-card::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0.2rem;
+ bottom: 0.2rem;
+ width: 0.24rem;
+ border-radius: 999px;
+ background: linear-gradient(
+ 180deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 100%
+ );
+}
+
+.governance-card__eyebrow {
+ margin: 0 0 0.2rem;
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+}
+
+.governance-card ul {
+ margin: 0.75rem 0 0.65rem;
+ padding-left: 1.2rem;
+}
+
+.governance-card li {
+ margin-bottom: 0.35rem;
+}
+
+.governance-card__link {
+ margin-top: 0.75rem;
+ margin-bottom: 0;
+ font-weight: 600;
+}
+
+.governance-section {
+ padding: 0;
+}
+
+.governance-section h2 {
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+ color: var(--openms-navy);
+}
+
+.governance-pillars {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.6rem 1rem;
+ margin: 1rem 0 0.9rem;
+ padding: 0;
+ list-style: none;
+}
+
+.governance-pillar {
+ position: relative;
+ padding-left: 1.25rem;
+ color: var(--openms-dark);
+ font-weight: 600;
+}
+
+.governance-pillar::before {
+ content: "";
+ position: absolute;
+ left: 0.35rem;
+ top: 0.65em;
+ width: 0.4rem;
+ height: 0.4rem;
+ border-radius: 50%;
+ background: var(--openms-orange);
+}
+
+.governance-note {
+ margin-bottom: 0;
+ color: rgba(var(--openms-dark-rgb), 0.9);
+}
+
+.governance-section--contrast {
+ margin-top: -0.25rem;
+}
+
+.governance-compare {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1rem 1.4rem;
+ margin: 1rem 0 1.2rem;
+}
+
+.governance-compare > div {
+ position: relative;
+ padding-left: 1.1rem;
+}
+
+.governance-compare__title {
+ margin-top: 0;
+ margin-bottom: 0.4rem;
+ color: var(--openms-blue);
+ font-size: var(--openms-secondary-heading-size-lg);
+ font-weight: 600;
+ line-height: 1.35;
+}
+
+.governance-compare > div::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0.15rem;
+ bottom: 0.15rem;
+ width: 0.16rem;
+ border-radius: 999px;
+ background: rgba(var(--openms-blue-rgb), 0.35);
+}
+
+.governance-links h2 {
+ margin-bottom: 0.75rem;
+}
+
+.governance-links ul {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 1.15rem;
+}
+
+.governance-links li {
+ margin-bottom: 0.3rem;
+}
+
+.governance-links a {
+ font-weight: 600;
+ text-decoration-thickness: 0.08em;
+ text-underline-offset: 0.14em;
+}
+
+@media (max-width: 860px) {
+ .governance-grid,
+ .governance-pillars,
+ .governance-compare {
+ grid-template-columns: 1fr;
+ }
+
+ .governance-page {
+ gap: 1.8rem;
+ }
+
+ .governance-hero {
+ padding: 1rem 1rem 1.25rem;
+ }
+
+ .governance-hero__title {
+ max-width: none;
+ font-size: clamp(1.8rem, 8vw, 2.4rem);
+ }
+
+ .governance-jump-links {
+ gap: 0.5rem;
+ }
+
+ .governance-jump-links a {
+ min-height: 2rem;
+ padding-inline: 0.7rem;
+ }
+
+ .governance-card {
+ padding-left: 1.05rem;
+ }
+}
+
+/* Page heroes — classic centered layout (matches About) */
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"],
+.community-calendar-layout .openms-lib-hero {
+ display: block;
+ min-height: 0;
+ padding: clamp(2rem, 4.5vw, 3.25rem) var(--olib-pad-x) clamp(2.5rem, 5vw, 3.5rem);
+ overflow: visible;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"]::before,
+.community-calendar-layout .openms-lib-hero::before {
+ display: none;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"]::after,
+.community-calendar-layout .openms-lib-hero::after {
+ display: block;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__panel,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__panel {
+ width: auto;
+ max-width: none;
+ text-align: center;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__content,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__content {
+ display: block;
+ max-width: 46rem;
+ margin-inline: auto;
+}
+
+.news-page-layout .openms-lib-hero.news-page-hero--article .openms-lib-hero__content {
+ max-width: 52rem;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+ margin: 0 auto 0.85rem;
+ padding: 0;
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ text-transform: none;
+ color: var(--olib-text-muted);
+ background: transparent;
+ border: none;
+ border-radius: 0;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow::before,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__eyebrow::before {
+ display: block;
+ content: "";
+ width: 0.45rem;
+ height: 0.45rem;
+ border-radius: 50%;
+ background: var(--openms-blue);
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__title {
+ margin: 0 auto;
+ max-width: 22ch;
+ text-align: center;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__accent {
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ color: var(--openms-blue);
+ -webkit-text-fill-color: unset;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent--warm,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__accent--warm {
+ color: var(--openms-pink);
+ -webkit-text-fill-color: var(--openms-pink);
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__lead {
+ margin: 1rem auto 0;
+ text-align: center;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chips,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__chips {
+ grid-column: unset;
+ grid-row: unset;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin: 1.25rem auto 0;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions {
+ grid-column: unset;
+ grid-row: unset;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ width: 100%;
+ max-width: 36rem;
+ margin: 1.5rem auto 0;
+}
+
+[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions .openms-lib-btn,
+.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .openms-lib-btn {
+ flex: 1 1 auto;
+ width: auto;
+ min-width: min(100%, 10.5rem);
+ max-width: 100%;
+}
+
+@media (max-width: 900px) {
+ [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions,
+ .community-calendar-layout .openms-lib-hero .openms-lib-hero__actions {
+ margin-top: 1.5rem;
+ }
+}
+
+@media (max-width: 720px) {
+ [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions .openms-lib-btn,
+ .community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .openms-lib-btn {
+ width: 100%;
+ flex: 1 1 auto;
+ min-width: 0;
+ justify-content: center;
+ }
+}
+
+/* Mobile drawer — ensure nav text is never white-on-white */
+@media (max-width: 1279px) {
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item:not(.navbar-cta-item),
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-item:not(.navbar-cta-item):not(.has-dropdown),
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item:not(.navbar-cta-item),
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-item:not(.navbar-cta-item):not(.has-dropdown) {
+ color: var(--openms-chrome-nav-text) !important;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-item.has-dropdown.is-emphasized > .navbar-link,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-item.has-dropdown.is-emphasized > .navbar-link {
+ color: var(--openms-blue) !important;
+ font-weight: 700;
+ }
+
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg.icon,
+ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg.icon,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg.icon,
+ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg.icon {
+ color: var(--openms-chrome-nav-text-muted);
+ fill: currentColor;
+ }
+}
+
diff --git a/assets/css/tabs.css b/assets/css/tabs.css
index a7c39bcd..f69d395c 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 d41efda0..45b162ca 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/trusted-by.css b/assets/css/trusted-by.css
new file mode 100644
index 00000000..f2a42441
--- /dev/null
+++ b/assets/css/trusted-by.css
@@ -0,0 +1,375 @@
+/* Trusted by — vertical showcase wall (distinct from project / partner tiles) */
+
+.trusted-by {
+ position: relative;
+ overflow: hidden;
+ padding: clamp(2.75rem, 6vh, 4.25rem) clamp(1.25rem, 4vw, 2.5rem);
+ background: linear-gradient(
+ 180deg,
+ rgba(var(--openms-navy-rgb), 0.04) 0%,
+ var(--openms-white) 28%,
+ var(--openms-white) 100%
+ );
+ border-block: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+}
+
+.trusted-by::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(
+ 90deg,
+ var(--openms-yellow) 0%,
+ var(--openms-orange) 28%,
+ var(--openms-pink) 58%,
+ var(--openms-blue) 100%
+ );
+ pointer-events: none;
+}
+
+.trusted-by__shell {
+ position: relative;
+ z-index: 1;
+ max-width: 75rem;
+ margin: 0 auto;
+ display: grid;
+ gap: clamp(1.75rem, 3.5vh, 2.5rem);
+}
+
+.trusted-by__intro {
+ display: grid;
+ gap: 0.65rem;
+ max-width: 46rem;
+}
+
+.trusted-by__eyebrow {
+ display: inline-block;
+ width: fit-content;
+ margin: 0;
+ padding: 0.3rem 0.72rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--openms-navy);
+ background: rgba(var(--openms-yellow-rgb), 0.22);
+ border: 1px solid rgba(var(--openms-orange-rgb), 0.35);
+ border-radius: 999px;
+}
+
+.trusted-by__title {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.4vw, 2.35rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.trusted-by__title-accent {
+ background: linear-gradient(
+ 90deg,
+ var(--openms-blue) 0%,
+ var(--openms-purple) 55%,
+ var(--openms-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.trusted-by__subtitle {
+ margin: 0;
+ max-width: 52ch;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-dark-rgb), 0.8);
+ text-wrap: pretty;
+}
+
+.trusted-by__showcase {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: clamp(0.85rem, 1.8vw, 1.15rem);
+ align-items: stretch;
+}
+
+.trusted-by__item {
+ margin: 0;
+ min-width: 0;
+ display: flex;
+}
+
+.trusted-by__card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 11.5rem;
+ padding: 0;
+ overflow: hidden;
+ text-decoration: none;
+ color: inherit;
+ background: var(--openms-white);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ border-radius: 0.85rem;
+ box-shadow: 0 0.25rem 0.9rem rgba(var(--openms-navy-rgb), 0.06);
+ transition:
+ transform 0.22s ease,
+ box-shadow 0.22s ease,
+ border-color 0.22s ease;
+}
+
+.trusted-by__card-accent {
+ display: block;
+ height: 4px;
+ flex: 0 0 auto;
+ background: var(--openms-blue);
+}
+
+.trusted-by__item:nth-child(4n + 1) .trusted-by__card-accent {
+ background: linear-gradient(90deg, var(--openms-yellow), var(--openms-orange));
+}
+
+.trusted-by__item:nth-child(4n + 2) .trusted-by__card-accent {
+ background: linear-gradient(90deg, var(--openms-blue), var(--openms-blue-secondary));
+}
+
+.trusted-by__item:nth-child(4n + 3) .trusted-by__card-accent {
+ background: linear-gradient(90deg, var(--openms-pink), var(--openms-purple));
+}
+
+.trusted-by__item:nth-child(4n) .trusted-by__card-accent {
+ background: linear-gradient(90deg, var(--openms-orange), var(--openms-pink));
+}
+
+.trusted-by__card-media {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 6.5rem;
+ padding: clamp(1rem, 2.5vh, 1.35rem) clamp(0.85rem, 2vw, 1.1rem);
+ background: linear-gradient(
+ 180deg,
+ rgba(var(--openms-blue-rgb), 0.04) 0%,
+ transparent 100%
+ );
+}
+
+.trusted-by__card--logo-large .trusted-by__card-media {
+ min-height: 9rem;
+ padding-block: clamp(1.15rem, 2.8vh, 1.5rem);
+}
+
+.trusted-by__logo {
+ display: block;
+ max-height: 2.75rem;
+ max-width: min(100%, 9.5rem);
+ width: auto;
+ height: auto;
+ object-fit: contain;
+ filter: grayscale(0.15) contrast(1.02);
+ transition: filter 0.22s ease, transform 0.22s ease;
+}
+
+.trusted-by__card--logo-large .trusted-by__logo {
+ max-height: 5.5rem;
+ max-width: min(100%, 11rem);
+}
+
+.trusted-by__monogram {
+ display: grid;
+ place-items: center;
+ width: 3.25rem;
+ height: 3.25rem;
+ border-radius: 50%;
+ font-family: var(--openms-font-heading);
+ font-size: 1.1rem;
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ background: rgba(var(--openms-navy-rgb), 0.06);
+ border: 2px solid rgba(var(--openms-navy-rgb), 0.12);
+ transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
+}
+
+.trusted-by__item:nth-child(4n + 1) .trusted-by__monogram {
+ color: var(--openms-navy);
+ background: rgba(var(--openms-yellow-rgb), 0.2);
+ border-color: rgba(var(--openms-orange-rgb), 0.4);
+}
+
+.trusted-by__item:nth-child(4n + 2) .trusted-by__monogram {
+ background: rgba(var(--openms-blue-rgb), 0.12);
+ border-color: rgba(var(--openms-blue-rgb), 0.35);
+}
+
+.trusted-by__item:nth-child(4n + 3) .trusted-by__monogram {
+ background: rgba(var(--openms-pink-rgb), 0.12);
+ border-color: rgba(var(--openms-pink-rgb), 0.35);
+}
+
+.trusted-by__item:nth-child(4n) .trusted-by__monogram {
+ background: rgba(var(--openms-orange-rgb), 0.12);
+ border-color: rgba(var(--openms-orange-rgb), 0.35);
+}
+
+.trusted-by__card-footer {
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+ padding: 0.75rem 0.9rem 0.85rem;
+ border-top: 1px solid rgba(var(--openms-navy-rgb), 0.08);
+ background: rgba(var(--openms-grey-rgb), 0.08);
+}
+
+.trusted-by__card-name {
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.82rem, 1vw, 0.92rem);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--openms-navy);
+ text-wrap: balance;
+}
+
+.trusted-by__card-action {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ color: var(--openms-blue);
+ line-height: 1.2;
+}
+
+.trusted-by__card-action-icon {
+ display: inline-flex;
+ transition: transform 0.2s ease;
+}
+
+.trusted-by__card--link {
+ cursor: pointer;
+}
+
+.trusted-by__card--link:hover,
+.trusted-by__card--link:focus-visible {
+ transform: translateY(-3px);
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ box-shadow: 0 0.65rem 1.65rem rgba(var(--openms-blue-rgb), 0.14);
+ outline: none;
+}
+
+.trusted-by__card--link:hover .trusted-by__logo,
+.trusted-by__card--link:focus-visible .trusted-by__logo {
+ filter: none;
+ transform: scale(1.03);
+}
+
+.trusted-by__card--link:hover .trusted-by__monogram,
+.trusted-by__card--link:focus-visible .trusted-by__monogram {
+ background: var(--openms-navy);
+ color: var(--openms-white);
+ border-color: var(--openms-navy);
+}
+
+.trusted-by__card--link:hover .trusted-by__card-action,
+.trusted-by__card--link:focus-visible .trusted-by__card-action {
+ color: var(--openms-navy);
+}
+
+.trusted-by__card--link:hover .trusted-by__card-action-icon,
+.trusted-by__card--link:focus-visible .trusted-by__card-action-icon {
+ transform: translateX(3px);
+}
+
+.trusted-by__card--link:focus-visible {
+ box-shadow:
+ 0 0 0 3px var(--openms-blue),
+ 0 0 0 5px var(--openms-yellow),
+ 0 0.65rem 1.65rem rgba(var(--openms-blue-rgb), 0.14);
+}
+
+.trusted-by__card--static {
+ cursor: default;
+}
+
+@media (max-width: 1024px) {
+ .trusted-by__showcase {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 1025px) {
+ .trusted-by__shell {
+ grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+ align-items: center;
+ gap: clamp(1.5rem, 3vw, 2.25rem);
+ }
+
+ .trusted-by__showcase {
+ grid-column: 1 / -1;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .trusted-by__intro {
+ grid-column: 1 / -1;
+ max-width: none;
+ text-align: center;
+ justify-items: center;
+ }
+
+ .trusted-by__subtitle {
+ text-align: center;
+ }
+}
+
+@media (max-width: 768px) {
+ .trusted-by__intro {
+ text-align: left;
+ justify-items: start;
+ }
+
+ .trusted-by__subtitle {
+ text-align: left;
+ }
+}
+
+@media (max-width: 520px) {
+ .trusted-by {
+ padding-inline: 1rem;
+ }
+
+ .trusted-by__showcase {
+ grid-template-columns: 1fr;
+ }
+
+ .trusted-by__card {
+ min-height: 10rem;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .trusted-by__card--link:hover,
+ .trusted-by__card--link:focus-visible {
+ transform: none;
+ }
+
+ .trusted-by__card--link:hover .trusted-by__logo,
+ .trusted-by__card--link:focus-visible .trusted-by__logo,
+ .trusted-by__card--link:hover .trusted-by__card-action-icon,
+ .trusted-by__card--link:focus-visible .trusted-by__card-action-icon {
+ transform: none;
+ }
+}
diff --git a/assets/css/typography.css b/assets/css/typography.css
new file mode 100644
index 00000000..c207a6fe
--- /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 {
+ 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 */
+.hero-modern__stat-label,
+.hero-modern__btn,
+.footer-tagline,
+.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/university-partners.css b/assets/css/university-partners.css
new file mode 100644
index 00000000..6194f779
--- /dev/null
+++ b/assets/css/university-partners.css
@@ -0,0 +1,280 @@
+/* University partners — carousel ticker with modern section heading */
+
+.uni-partners {
+ padding-block: clamp(2.25rem, 5vh,3.5rem);
+ padding-inline: 0;
+ background: var(--openms-white);
+}
+
+.uni-partners__inner {
+ max-width: none;
+ width: 100%;
+ margin: 0;
+}
+
+.uni-partners__header {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: clamp(0.8rem, 2vw, 1.15rem);
+ max-width: 90rem;
+ margin: 0 auto clamp(1.75rem, 3.5vh, 2.5rem);
+ padding-inline: clamp(1.25rem, 4vw, 2.5rem);
+ text-align: center;
+}
+
+.uni-partners__header-main {
+ min-width: 0;
+ max-width: 52rem;
+ margin-inline: auto;
+}
+
+.uni-partners__eyebrow {
+ display: inline-block;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.85rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.2);
+ border-radius: 999px;
+}
+
+.uni-partners__title {
+ margin: 0 auto;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.4vw, 2.35rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+ max-width: none;
+}
+
+.uni-partners__title-accent {
+ display: inline;
+ 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;
+}
+
+.uni-partners__lead {
+ margin: 0.85rem auto 0;
+ max-width: 42rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ line-height: 1.62;
+ color: rgba(var(--openms-dark-rgb), 0.8);
+ text-wrap: pretty;
+}
+
+.uni-partners__marquee {
+ position: relative;
+ overflow: hidden;
+ border-radius: 0;
+ background: var(--openms-white);
+}
+
+.uni-partners__marquee::before,
+.uni-partners__marquee::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 5rem;
+ pointer-events: none;
+ z-index: 2;
+}
+
+.uni-partners__marquee::before {
+ left: 0;
+ background: linear-gradient(90deg, var(--openms-white) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.uni-partners__marquee::after {
+ right: 0;
+ background: linear-gradient(270deg, var(--openms-white) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.uni-partners__track {
+ display: flex;
+ width: max-content;
+ align-items: center;
+ gap: 0;
+ padding: 1rem 0;
+ will-change: transform;
+ animation: uni-partners-marquee 28s linear infinite;
+}
+
+.uni-partners__row {
+ display: flex;
+ align-items: center;
+ gap: clamp(1.25rem, 3vw, 2.25rem);
+ padding: 0 clamp(1.25rem, 4vw, 2.5rem);
+}
+
+.uni-partners__item {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 5rem;
+ min-width: 8.5rem;
+ padding: 0.7rem 0.95rem;
+ border-radius: 0.6rem;
+
+
+ text-decoration: none;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.uni-partners__item:hover,
+.uni-partners__item:focus-visible {
+ transform: translateY(-2px);
+
+ outline: none;
+}
+
+.uni-partners__item:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 2px;
+}
+
+.uni-partners__item img {
+ max-height: 3.5rem;
+ max-width: 10.5rem;
+ width: auto;
+ height: auto;
+ object-fit: contain;
+ display: block;
+}
+
+.uni-partners__item-abbr {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2.75rem;
+ min-height: 2.75rem;
+ padding: 0.35rem 0.65rem;
+ border-radius: 0.5rem;
+ font-size: 0.95rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ color: var(--openms-navy, #1a2b4a);
+ background: rgba(var(--openms-white-rgb), 0.92);
+}
+
+@keyframes uni-partners-marquee {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+/* Fallback / non-animated layout */
+.uni-partners__static {
+ display: none;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ max-width: 75rem;
+ margin: 0 auto;
+ padding-inline: clamp(1.25rem, 4vw, 2.5rem);
+}
+
+.uni-partners--static .uni-partners__marquee {
+ display: none;
+}
+
+.uni-partners--static .uni-partners__static {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 0.75rem;
+ max-width: 75rem;
+ margin: 0 auto;
+ padding-inline: clamp(1.25rem, 4vw, 2.5rem);
+}
+
+.uni-partners--static .uni-partners__item {
+ min-width: 0;
+ height: 5.25rem;
+ padding: 0.75rem 1rem;
+ border: none;
+ border-radius: 0.6rem;
+ background: rgba(var(--openms-white-rgb), 0.95);
+}
+
+.uni-partners--static .uni-partners__item img {
+ width: 100%;
+ max-width: 10rem;
+ height: 3rem;
+ max-height: 3rem;
+ object-fit: contain;
+ object-position: center;
+}
+
+.uni-partners--static .uni-partners__static .uni-partners__item:nth-last-child(-n+4) img {
+ max-width: 14.8rem;
+ height: 4.9rem;
+ max-height: 4.9rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .uni-partners__track {
+ animation: none;
+ transform: none;
+ }
+ .uni-partners__marquee {
+ display: none;
+ }
+ .uni-partners__static {
+ display: flex;
+ }
+}
+
+@media (max-width: 768px) {
+ .uni-partners__item {
+ height: 4.35rem;
+ min-width: 7.5rem;
+ }
+
+ .uni-partners__item img {
+ max-height: 2.8rem;
+ max-width: 9rem;
+ }
+
+ .uni-partners__marquee::before,
+ .uni-partners__marquee::after {
+ width: 3.5rem;
+ }
+
+ .uni-partners--static .uni-partners__static {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .uni-partners--static .uni-partners__item {
+ height: 4.75rem;
+ }
+}
+
+@media (max-width: 520px) {
+ .uni-partners--static .uni-partners__static {
+ grid-template-columns: 1fr;
+ }
+
+ .uni-partners--static .uni-partners__item {
+ height: 4.5rem;
+ }
+}
+
diff --git a/assets/css/vars_override.css b/assets/css/vars_override.css
deleted file mode 100644
index d0697dc7..00000000
--- 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 f7826447..ff91de2c 100644
--- a/assets/css/webapps.css
+++ b/assets/css/webapps.css
@@ -1,144 +1,434 @@
-.webapps-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 30px;
+/* Open Source Projects — light section, elevated project cards */
+
+.webapps-modern-wrap {
+ display: block;
+ position: relative;
+ width: 100%;
+}
+
+section.webapps-featured {
+ --webapps-card-radius: 1rem;
+ --webapps-logo-size: clamp(4.5rem, 10vw, 5.5rem);
+ --webapps-card-text-lines: 3;
+ --openms-webapps-focus-ring: 0 0 0 3px var(--openms-blue),
+ 0 0 0 5px rgba(var(--openms-blue-rgb), 0.2);
+
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ box-sizing: border-box;
+ color: var(--openms-navy);
+ background: var(--openms-white);
+ padding: clamp(2.75rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
+ border-block: 1px solid rgba(var(--openms-navy-rgb), 0.08);
}
-.swiper {
- position: relative;
- padding: 0 50px 0 50px;
- box-sizing: border-box;
- width: 1350px;
- height: 420px;
- overflow: hidden;
+section.webapps-featured::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: var(--openms-blue);
+ pointer-events: none;
}
-.swiper-wrapper {
- box-sizing: border-box;
+section.webapps-featured::after {
+ content: none;
}
-.swiper-slide {
- box-sizing: border-box;
- cursor: pointer;
+.webapps-featured__inner {
+ position: relative;
+ z-index: 1;
+ max-width: 90rem;
+ margin: 0 auto;
}
+.webapps-featured__header {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: clamp(0.8rem, 2vw, 1.15rem);
+ margin-bottom: clamp(2rem, 4vh, 2.75rem);
+ text-align: center;
+}
-.swiper-wrapper .swiper-slide {
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 60%;
- border: 1px solid lightgray;
- border-radius: 25px;
- box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
- transition: height 0.6s ease;
+.webapps-featured__header-main {
+ min-width: 0;
+ max-width: 42rem;
+ margin-inline: auto;
}
-.swiper-slide img {
- width: 95%;
+.webapps-featured__eyebrow {
+ display: inline-block;
+ margin: 0 0 0.85rem;
+ padding: 0.35rem 0.85rem;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--openms-blue);
+ background: rgba(var(--openms-blue-rgb), 0.1);
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.2);
+ border-radius: 999px;
}
-.swiper-slide p {
- margin: 0px;
- padding-top: 3px;
- margin-left: 13px;
- margin-right: 10px;
- display: none;
- transition: display 2.5s ease;
- font-weight: 600;
- margin-bottom: 10px;
+.webapps-featured__title {
+ margin: 0 auto;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(1.75rem, 3.4vw, 2.35rem);
+ font-weight: var(--openms-heading-lg-weight);
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ color: var(--openms-navy);
+ text-wrap: balance;
+ max-width: none;
}
-/* slide-0: FLASHApp */
-.swiper-slide.slide-0 img {
- height: 230px;
- margin-top: 10px;
+.webapps-featured__title-accent {
+ display: inline;
+ color: var(--openms-blue);
}
-.swiper-slide.slide-0 p {
- margin-top: 20px;
+
+.webapps-featured__lead {
+ margin: 0.85rem auto 0;
+ max-width: 40rem;
+ font-family: var(--openms-font-body);
+ font-size: clamp(0.95rem, 1.25vw, 1.08rem);
+ line-height: 1.65;
+ color: rgba(var(--openms-navy-rgb), 0.78);
+ text-wrap: pretty;
}
-/* slide-1: umetaflow */
-.swiper-slide.slide-1 img {
- width: 100%;
- height: 250px;
+.webapps-featured .webapps-featured__grid {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: clamp(1rem, 2vw, 1.35rem);
+ align-items: stretch;
+}
+
+.webapps-featured__item {
+ display: flex;
+ margin: 0;
+ min-width: 0;
+ width: 100%;
}
-.swiper-slide.slide-1 p {
- margin-top: 10px;
+
+/* Project cards — app-tile layout (logo frame + visible copy) */
+.webapps-project-card {
+ display: flex;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ height: 100%;
}
-/* slide-2: NuXL */
-.swiper-slide.slide-2 img {
- height: 150px;
- margin-top: 60px;
+.webapps-project-card__surface {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ padding: clamp(1rem, 2vw, 1.2rem);
+ gap: 0.9rem;
+ overflow: hidden;
+ border-radius: var(--webapps-card-radius);
+ border: 1px solid rgba(var(--openms-navy-rgb), 0.1);
+ background: linear-gradient(
+ 165deg,
+ rgba(var(--openms-blue-rgb), 0.06) 0%,
+ var(--openms-white) 38%
+ );
+ text-decoration: none;
+ color: inherit;
+ box-shadow: 0 0.2rem 0.85rem rgba(var(--openms-navy-rgb), 0.06);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease,
+ background 0.2s ease;
}
-.swiper-slide.slide-2 p {
- margin-top: 50px;
+
+.webapps-project-card__accent {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: var(--openms-blue);
+ opacity: 0.55;
+ transition: opacity 0.2s ease, height 0.2s ease;
}
-/* slide-3: MHCQuant */
-.swiper-slide.slide-3 img {
- height: 180px;
- margin-top: 40px;
+.webapps-project-card__surface:hover,
+.webapps-project-card__surface:focus-visible {
+ border-color: rgba(var(--openms-blue-rgb), 0.28);
+ background: linear-gradient(
+ 165deg,
+ rgba(var(--openms-blue-rgb), 0.1) 0%,
+ var(--openms-white) 42%
+ );
+ box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.14);
+ transform: translateY(-4px);
}
-.swiper-slide.slide-3 p {
- margin-top: 40px;
+
+.webapps-project-card__surface:hover .webapps-project-card__accent,
+.webapps-project-card__surface:focus-visible .webapps-project-card__accent {
+ opacity: 1;
+ height: 4px;
}
-/* slide-4: TOPPView-lite */
-.swiper-slide.slide-4 img {
- height: 180px;
- margin-top: 40px;
+.webapps-project-card__surface:focus-visible {
+ outline: none;
+ box-shadow: var(--openms-webapps-focus-ring),
+ 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.14);
}
-.swiper-slide.slide-4 p {
- margin-top: 40px;
+
+.webapps-project-card__logo-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ align-self: center;
+ width: var(--webapps-logo-size);
+ height: var(--webapps-logo-size);
+ flex-shrink: 0;
+ padding: 0.65rem;
+ border-radius: 0.85rem;
+ border: 1px solid rgba(var(--openms-blue-rgb), 0.14);
+ background: var(--openms-white);
+ box-shadow: inset 0 0 0 1px rgba(var(--openms-white-rgb), 0.8),
+ 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.07);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
-/* slide-5: NASEWEIS */
-.swiper-slide.slide-5 img {
- height: 100px;
- margin-top: 80px;
+.webapps-project-card__logo {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ object-position: center;
+ transition: transform 0.25s ease;
}
-.swiper-slide.slide-5 p {
- margin-top: 80px;
+
+.webapps-project-card__surface:hover .webapps-project-card__logo-wrap,
+.webapps-project-card__surface:focus-visible .webapps-project-card__logo-wrap {
+ border-color: rgba(var(--openms-blue-rgb), 0.35);
+ box-shadow: inset 0 0 0 1px rgba(var(--openms-white-rgb), 0.9),
+ 0 0.5rem 1.25rem rgba(var(--openms-blue-rgb), 0.12);
+ transform: scale(1.03);
}
-/* slide-6: StreamSage */
-.swiper-slide.slide-6 img {
- width: 100%;
- height: 250px;
+.webapps-project-card__surface:hover .webapps-project-card__logo,
+.webapps-project-card__surface:focus-visible .webapps-project-card__logo {
+ transform: scale(1.04);
+}
+
+.webapps-project-card__body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: 0.45rem;
+ min-width: 0;
+ text-align: left;
+}
+
+.webapps-project-card__name {
+ margin: 0;
+ font-family: var(--openms-font-heading);
+ font-size: clamp(0.95rem, 1.15vw, 1.05rem);
+ font-weight: 700;
+ line-height: 1.3;
+ letter-spacing: -0.01em;
+ color: var(--openms-navy);
+ transition: color 0.2s ease;
+}
+
+.webapps-project-card__surface:hover .webapps-project-card__name,
+.webapps-project-card__surface:focus-visible .webapps-project-card__name {
+ color: var(--openms-blue);
+}
+
+.webapps-project-card__text {
+ margin: 0;
+ flex: 1;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.52;
+ color: rgba(var(--openms-navy-rgb), 0.72);
+ display: -webkit-box;
+ -webkit-line-clamp: var(--webapps-card-text-lines);
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.webapps-project-card__text:empty {
+ display: none;
+}
+
+.webapps-project-card__cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ margin-top: 0.15rem;
+ width: fit-content;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-text-min);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--openms-blue);
+ transition: gap 0.2s ease, color 0.2s ease;
+}
+
+.webapps-project-card__cta-icon {
+ display: inline-block;
+ transition: transform 0.2s ease;
+}
+
+.webapps-project-card__surface:hover .webapps-project-card__cta,
+.webapps-project-card__surface:focus-visible .webapps-project-card__cta {
+ color: var(--openms-navy);
+ gap: 0.5rem;
}
-.swiper-slide.slide-6 p {
- margin-top: 10px;
+
+.webapps-project-card__surface:hover .webapps-project-card__cta-icon,
+.webapps-project-card__surface:focus-visible .webapps-project-card__cta-icon {
+ transform: translateX(3px);
+}
+
+.webapps-featured__footer {
+ margin-top: clamp(2rem, 4vh, 2.75rem);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: clamp(1.25rem, 2.5vw, 1.75rem);
+}
+
+.webapps-featured__extras {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: clamp(1rem, 2.5vw, 1.5rem);
+ width: 100%;
+ max-width: 42rem;
+}
+
+.webapps-featured__extra {
+ display: grid;
+ gap: 0.35rem;
+ text-align: center;
+}
+
+.webapps-featured__extra-link {
+ display: inline-block;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size-lg);
+ font-weight: 600;
+ color: var(--openms-blue);
+ text-decoration: underline;
+ text-underline-offset: 0.14em;
+ transition: color 0.2s ease;
+}
+
+.webapps-featured__extra-desc {
+ margin: 0;
+ font-family: var(--openms-font-body);
+ font-size: var(--openms-body-size);
+ line-height: 1.5;
+ color: rgba(var(--openms-dark-rgb), 0.72);
+}
+
+.webapps-featured__extra-link:hover,
+.webapps-featured__extra-link:focus-visible {
+ color: var(--openms-navy);
+ outline: none;
+}
+
+.webapps-featured__extra-link:focus-visible {
+ outline: 2px solid var(--openms-yellow);
+ outline-offset: 3px;
+ border-radius: 0.125rem;
}
-.swiper-button-prev,
-.swiper-button-next {
- color: #000080;
- position: absolute;
- top: 40%;
+.webapps-featured__show-all {
+ min-width: min(100%, 13rem);
}
-@media (max-width: 1349px) {
- .swiper {
- width: 1000px;
- }
+.webapps-featured__show-all:focus {
+ outline: none;
}
-@media (max-width: 999px) {
- .swiper {
- width: 700px;
- }
+@media (hover: none) {
+ .webapps-project-card__surface {
+ transform: none;
+ }
}
-@media (max-width: 699px) {
- .swiper {
- width: 350px;
- }
-
- .swiper-slide p {
- font-size: 15px;
- }
+@media (max-width: 991px) {
+ .webapps-featured .webapps-featured__grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+}
-}
\ No newline at end of file
+@media (max-width: 768px) {
+ .webapps-featured__header {
+ gap: 0.75rem;
+ }
+
+ .webapps-featured__extras {
+ grid-template-columns: 1fr;
+ max-width: 28rem;
+ }
+
+ .webapps-featured__show-all {
+ width: 100%;
+ max-width: none;
+ }
+}
+
+@media (max-width: 520px) {
+ .webapps-featured .webapps-featured__grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.85rem;
+ }
+
+ .webapps-project-card__surface {
+ padding: 0.85rem;
+ gap: 0.75rem;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .webapps-project-card__surface,
+ .webapps-project-card__logo,
+ .webapps-project-card__logo-wrap,
+ .webapps-project-card__cta-icon {
+ transition-duration: 0.01ms;
+ }
+
+ .webapps-project-card__surface:hover,
+ .webapps-project-card__surface:focus-visible {
+ transform: none;
+ }
+
+ .webapps-featured__show-all:hover,
+ .webapps-featured__show-all:focus-visible {
+ transform: none;
+ }
+}
+
+@media (prefers-contrast: more) {
+ section.webapps-featured {
+ border-block-color: var(--openms-navy);
+ }
+
+ .webapps-project-card__surface {
+ border-color: var(--openms-navy);
+ box-shadow: none;
+ }
+
+ .webapps-project-card__surface {
+ border-width: 2px;
+ box-shadow: none;
+ }
+}
diff --git a/assets/icons/linkedin.svg b/assets/icons/linkedin.svg
new file mode 100644
index 00000000..f820eafc
--- /dev/null
+++ b/assets/icons/linkedin.svg
@@ -0,0 +1 @@
+
diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js
new file mode 100644
index 00000000..b096359a
--- /dev/null
+++ b/assets/js/back-to-top.js
@@ -0,0 +1,19 @@
+(function () {
+ var trigger = document.querySelector(".back-to-top");
+ if (!trigger) return;
+
+ var toggleVisibility = function () {
+ if (window.scrollY > 320) {
+ trigger.classList.add("is-visible");
+ } else {
+ trigger.classList.remove("is-visible");
+ }
+ };
+
+ trigger.addEventListener("click", function () {
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ });
+
+ window.addEventListener("scroll", toggleVisibility, { passive: true });
+ toggleVisibility();
+})();
diff --git a/assets/js/events-year-filter.js b/assets/js/events-year-filter.js
new file mode 100644
index 00000000..a2a06145
--- /dev/null
+++ b/assets/js/events-year-filter.js
@@ -0,0 +1,94 @@
+(function () {
+ "use strict";
+
+ var root = document.querySelector("[data-events-year-filter]");
+ if (!root) return;
+
+ var selectEl = root.querySelector("[data-events-year-select]");
+ var allSections = root.querySelectorAll("[data-events-year]");
+ if (!selectEl || !allSections.length) return;
+
+ var allYears = [];
+ allSections.forEach(function (section) {
+ var year = section.getAttribute("data-events-year");
+ if (year && allYears.indexOf(year) === -1) {
+ allYears.push(year);
+ }
+ });
+ allYears.sort(function (a, b) {
+ return Number(b) - Number(a);
+ });
+
+ function getYearFromUrl() {
+ try {
+ return new URLSearchParams(window.location.search).get("year");
+ } catch (e) {
+ return null;
+ }
+ }
+
+ function setYearInUrl(year) {
+ var url = new URL(window.location.href);
+ if (!year || year === allYears[0]) {
+ url.searchParams.delete("year");
+ } else {
+ url.searchParams.set("year", year);
+ }
+ window.history.replaceState({}, "", url);
+ }
+
+ function applyFilter(year) {
+ allSections.forEach(function (section) {
+ var sectionYear = section.getAttribute("data-events-year") || "";
+ var show = sectionYear === year;
+ section.hidden = !show;
+ section.setAttribute("aria-hidden", show ? "false" : "true");
+ });
+
+ root.setAttribute("data-active-year", year);
+ }
+
+ function selectYear(year) {
+ if (allYears.indexOf(year) === -1) {
+ year = allYears[0];
+ }
+ selectEl.value = year;
+ applyFilter(year);
+ setYearInUrl(year);
+ }
+
+ function initYear() {
+ var fromUrl = getYearFromUrl();
+ if (fromUrl && allYears.indexOf(fromUrl) !== -1) {
+ return fromUrl;
+ }
+ return allYears[0];
+ }
+
+ function buildSelect() {
+ var current = selectEl.value;
+ selectEl.innerHTML = "";
+
+ allYears.forEach(function (year) {
+ var opt = document.createElement("option");
+ opt.value = year;
+ opt.textContent = year;
+ if (year === current) {
+ opt.selected = true;
+ }
+ selectEl.appendChild(opt);
+ });
+ }
+
+ selectEl.addEventListener("change", function () {
+ selectYear(selectEl.value);
+ });
+
+ buildSelect();
+ selectYear(initYear());
+ root.classList.add("events-year-filter--ready");
+
+ window.addEventListener("popstate", function () {
+ selectYear(initYear());
+ });
+})();
diff --git a/assets/js/hero-stats.js b/assets/js/hero-stats.js
new file mode 100644
index 00000000..1eb84d47
--- /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/home-scroll-reveal.js b/assets/js/home-scroll-reveal.js
new file mode 100644
index 00000000..de9b5575
--- /dev/null
+++ b/assets/js/home-scroll-reveal.js
@@ -0,0 +1,222 @@
+(function () {
+ var page = document.querySelector(".home-page");
+ if (!page) return;
+
+ var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ var hero = page.querySelector(".home-page__hero");
+ var scrollSections = page.querySelectorAll(
+ ".home-page__block--projects, .home-page__block--partners, .home-page__block--ecosystem, .home-page__block--overview, .home-page__cta, .home-page__block--panel, .home-page__block--content"
+ );
+
+ var projectsGrid = page.querySelector(".home-page__block--projects .webapps-featured__grid");
+ var projectsFooter = page.querySelector(".home-page__block--projects .webapps-featured__footer");
+ var projectItems = projectsGrid ? projectsGrid.querySelectorAll(".webapps-featured__item") : [];
+ var projectRevealTargets = [];
+ var ecosystemItems = page.querySelectorAll(".home-page__block--ecosystem .ecosystem-home__item");
+ var ecosystemRevealTargets = [];
+
+ projectItems.forEach(function (item) {
+ var surface = item.querySelector(".webapps-project-card__surface");
+ projectRevealTargets.push({ item: item, observerTarget: surface || item });
+ });
+
+ ecosystemItems.forEach(function (item, index) {
+ var card = item.querySelector(".ecosystem-home__card");
+ item.style.setProperty("--ecosystem-reveal-index", String(index));
+ ecosystemRevealTargets.push({ item: item, observerTarget: card || item });
+ });
+
+ if (projectsFooter) {
+ projectRevealTargets.push({ item: projectsFooter, observerTarget: projectsFooter });
+ }
+
+ var metricsSection = page.querySelector(".home-page__block--metrics");
+
+ if (hero) {
+ hero.querySelectorAll(".hero-home__actions .hero-home__btn").forEach(function (btn, index) {
+ btn.style.setProperty("--hero-reveal-index", String(index));
+ });
+ }
+
+ if (metricsSection) {
+ metricsSection.querySelectorAll(".home-metrics__card").forEach(function (card, index) {
+ card.style.setProperty("--metrics-reveal-index", String(index));
+ });
+ }
+
+ function revealElement(el) {
+ if (!el) return;
+ el.classList.add("is-revealed");
+ }
+
+ function reveal(el) {
+ revealElement(el);
+ if (el.classList.contains("home-page__block--projects")) {
+ revealProjectCardsInView();
+ }
+ if (el.classList.contains("home-page__block--ecosystem")) {
+ revealEcosystemCardsInView();
+ }
+ }
+
+ function isRevealTargetInView(target) {
+ var rect = target.getBoundingClientRect();
+ var viewport = window.innerHeight || document.documentElement.clientHeight;
+ var topInset = viewport * 0.08;
+ var bottomInset = viewport * 0.05;
+
+ return rect.bottom > topInset && rect.top < viewport - bottomInset;
+ }
+
+ function revealProjectCardsInView() {
+ projectRevealTargets.forEach(function (entry) {
+ if (entry.item.classList.contains("is-revealed")) return;
+ if (isRevealTargetInView(entry.observerTarget)) {
+ revealElement(entry.item);
+ }
+ });
+ }
+
+ function revealProjectCards() {
+ projectRevealTargets.forEach(function (entry) {
+ revealElement(entry.item);
+ });
+ }
+
+ function revealEcosystemCardsInView() {
+ ecosystemRevealTargets.forEach(function (entry) {
+ if (entry.item.classList.contains("is-revealed")) return;
+ if (isRevealTargetInView(entry.observerTarget)) {
+ revealElement(entry.item);
+ }
+ });
+ }
+
+ function revealEcosystemCards() {
+ ecosystemRevealTargets.forEach(function (entry) {
+ revealElement(entry.item);
+ });
+ }
+
+ function revealHero() {
+ if (hero) hero.classList.add("is-revealed");
+ }
+
+ function revealMetrics() {
+ if (metricsSection) metricsSection.classList.add("is-revealed");
+ }
+
+ function revealAll() {
+ revealHero();
+ revealMetrics();
+ scrollSections.forEach(reveal);
+ revealProjectCards();
+ revealEcosystemCards();
+ }
+
+ page.classList.add("home-page--motion");
+
+ if (prefersReducedMotion) {
+ revealAll();
+ return;
+ }
+
+ if (hero) {
+ window.setTimeout(function () {
+ revealHero();
+ revealMetrics();
+ }, 80);
+ } else {
+ revealMetrics();
+ }
+
+ if (!("IntersectionObserver" in window)) {
+ scrollSections.forEach(reveal);
+ revealProjectCards();
+ revealEcosystemCards();
+ window.addEventListener("scroll", function () {
+ revealProjectCardsInView();
+ revealEcosystemCardsInView();
+ }, { passive: true });
+ window.addEventListener("resize", function () {
+ revealProjectCardsInView();
+ revealEcosystemCardsInView();
+ }, { passive: true });
+ return;
+ }
+
+ var observer = new IntersectionObserver(
+ function (entries) {
+ entries.forEach(function (entry) {
+ if (entry.isIntersecting) {
+ reveal(entry.target);
+ observer.unobserve(entry.target);
+ }
+ });
+ },
+ { root: null, rootMargin: "0px 0px -7% 0px", threshold: 0.1 }
+ );
+
+ var cardObserver = new IntersectionObserver(
+ function (entries) {
+ entries.forEach(function (entry) {
+ if (!entry.isIntersecting) return;
+
+ var match = projectRevealTargets.find(function (target) {
+ return target.observerTarget === entry.target;
+ });
+
+ if (match) {
+ revealElement(match.item);
+ cardObserver.unobserve(entry.target);
+ return;
+ }
+
+ var ecosystemMatch = ecosystemRevealTargets.find(function (target) {
+ return target.observerTarget === entry.target;
+ });
+
+ if (ecosystemMatch) {
+ revealElement(ecosystemMatch.item);
+ cardObserver.unobserve(entry.target);
+ }
+ });
+ },
+ { root: null, rootMargin: "0px 0px -5% 0px", threshold: 0 }
+ );
+
+ scrollSections.forEach(function (section) {
+ observer.observe(section);
+ });
+
+ projectRevealTargets.forEach(function (entry) {
+ cardObserver.observe(entry.observerTarget);
+ });
+
+ ecosystemRevealTargets.forEach(function (entry) {
+ cardObserver.observe(entry.observerTarget);
+ });
+
+ var scrollTicking = false;
+
+ function onScrollOrResize() {
+ if (scrollTicking) return;
+ scrollTicking = true;
+
+ window.requestAnimationFrame(function () {
+ revealProjectCardsInView();
+ revealEcosystemCardsInView();
+ scrollTicking = false;
+ });
+ }
+
+ window.addEventListener("scroll", onScrollOrResize, { passive: true });
+ window.addEventListener("resize", onScrollOrResize, { passive: true });
+
+ revealProjectCardsInView();
+ revealEcosystemCardsInView();
+ window.setTimeout(function () {
+ revealProjectCardsInView();
+ revealEcosystemCardsInView();
+ }, 120);
+})();
diff --git a/assets/js/navbar-search.js b/assets/js/navbar-search.js
new file mode 100644
index 00000000..c7afabeb
--- /dev/null
+++ b/assets/js/navbar-search.js
@@ -0,0 +1,240 @@
+/**
+ * Navbar site search — magnifying glass opens centered bar under header.
+ */
+(function () {
+ var indexPromise = null;
+
+ function loadIndex(url) {
+ if (!indexPromise) {
+ indexPromise = fetch(url)
+ .then(function (res) {
+ if (!res.ok) throw new Error("Search index not found");
+ return res.json();
+ })
+ .catch(function () {
+ indexPromise = null;
+ return [];
+ });
+ }
+ return indexPromise;
+ }
+
+ function filterPages(pages, query, maxResults) {
+ var q = query.toLowerCase().trim();
+ if (!q) return [];
+
+ var scored = [];
+ pages.forEach(function (page) {
+ var title = (page.title || "").toLowerCase();
+ var section = (page.section || "").toLowerCase();
+ var summary = (page.summary || "").toLowerCase();
+ var score = 0;
+
+ if (title === q) score += 100;
+ else if (title.indexOf(q) === 0) score += 50;
+ else if (title.indexOf(q) !== -1) score += 30;
+
+ if (section.indexOf(q) !== -1) score += 10;
+ if (summary.indexOf(q) !== -1) score += 5;
+
+ if (score > 0) scored.push({ page: page, score: score });
+ });
+
+ scored.sort(function (a, b) {
+ return b.score - a.score;
+ });
+
+ return scored.slice(0, maxResults).map(function (item) {
+ return item.page;
+ });
+ }
+
+ function closeResults(container, input) {
+ container.hidden = true;
+ container.innerHTML = "";
+ input.setAttribute("aria-expanded", "false");
+ }
+
+ function renderResults(container, pages, query) {
+ container.innerHTML = "";
+
+ if (!pages.length) {
+ var empty = document.createElement("p");
+ empty.className = "navbar-search__empty";
+ empty.textContent = 'No results for "' + query + '"';
+ container.appendChild(empty);
+ return;
+ }
+
+ pages.forEach(function (page) {
+ var link = document.createElement("a");
+ link.className = "navbar-search__result";
+ link.href = page.href;
+ link.setAttribute("role", "option");
+
+ var title = document.createElement("span");
+ title.className = "navbar-search__result-title";
+ title.textContent = page.title;
+
+ link.appendChild(title);
+
+ if (page.section) {
+ var meta = document.createElement("span");
+ meta.className = "navbar-search__result-meta";
+ meta.textContent = page.section;
+ link.appendChild(meta);
+ }
+
+ container.appendChild(link);
+ });
+ }
+
+ function updateHeaderHeight() {
+ var header = document.querySelector(".site-header");
+ if (!header) return;
+ document.documentElement.style.setProperty(
+ "--openms-header-height",
+ header.offsetHeight + "px"
+ );
+ }
+
+ function setSearchOpen(open) {
+ document.body.classList.toggle("navbar-search-open", open);
+ if (open) {
+ window.requestAnimationFrame(updateHeaderHeight);
+ }
+ }
+
+ function closePanel(root, toggle, panel, input, results) {
+ root.classList.remove("is-open");
+ toggle.setAttribute("aria-expanded", "false");
+ panel.hidden = true;
+ closeResults(results, input);
+
+ if (!document.querySelector(".navbar-search.is-open")) {
+ setSearchOpen(false);
+ }
+ }
+
+ function closeAllPanels(exceptRoot) {
+ document.querySelectorAll(".navbar-search").forEach(function (root) {
+ if (exceptRoot && root === exceptRoot) return;
+ var toggle = root.querySelector(".navbar-search__toggle");
+ var panel = root.querySelector(".navbar-search__panel");
+ var input = root.querySelector(".navbar-search__input");
+ var results = root.querySelector(".navbar-search__results");
+ if (!toggle || !panel || !input || !results) return;
+ if (root.classList.contains("is-open")) {
+ closePanel(root, toggle, panel, input, results);
+ }
+ });
+ }
+
+ function closeMobileNavMenu() {
+ var nav = document.getElementById("nav");
+ if (!nav || !nav.classList.contains("is-menu-open")) return;
+ var menu = nav.querySelector(".navbar-menu");
+ var burger = nav.querySelector(".navbar-burger");
+ var backdrop = nav.querySelector("[data-navbar-backdrop]");
+ if (menu) menu.classList.remove("is-active");
+ if (burger) {
+ burger.classList.remove("is-active");
+ burger.setAttribute("aria-expanded", "false");
+ }
+ if (backdrop) backdrop.hidden = true;
+ nav.classList.remove("is-menu-open");
+ document.body.classList.remove("navbar-menu-open");
+ }
+
+ function openPanel(root, toggle, panel, input) {
+ closeMobileNavMenu();
+ closeAllPanels(root);
+ setSearchOpen(true);
+ root.classList.add("is-open");
+ toggle.setAttribute("aria-expanded", "true");
+ panel.hidden = false;
+ window.requestAnimationFrame(function () {
+ updateHeaderHeight();
+ input.focus();
+ });
+ }
+
+ function setupSearch(root) {
+ var toggle = root.querySelector(".navbar-search__toggle");
+ var panel = root.querySelector(".navbar-search__panel");
+ var input = root.querySelector(".navbar-search__input");
+ var results = root.querySelector(".navbar-search__results");
+ var closeBtn = root.querySelector(".navbar-search__close");
+ if (!toggle || !panel || !input || !results) return;
+
+ var indexUrl = root.getAttribute("data-search-index");
+ var minChars = parseInt(root.getAttribute("data-min-chars"), 10) || 2;
+ var maxResults = parseInt(root.getAttribute("data-max-results"), 10) || 8;
+ var debounceTimer = null;
+
+ function runSearch() {
+ var query = input.value.trim();
+ if (query.length < minChars) {
+ closeResults(results, input);
+ return;
+ }
+
+ loadIndex(indexUrl).then(function (pages) {
+ if (input.value.trim() !== query) return;
+ var matches = filterPages(pages, query, maxResults);
+ renderResults(results, matches, query);
+ results.hidden = false;
+ input.setAttribute("aria-expanded", "true");
+ });
+ }
+
+ toggle.addEventListener("click", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ if (root.classList.contains("is-open")) {
+ closePanel(root, toggle, panel, input, results);
+ } else {
+ openPanel(root, toggle, panel, input);
+ }
+ });
+
+ if (closeBtn) {
+ closeBtn.addEventListener("click", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ closePanel(root, toggle, panel, input, results);
+ toggle.focus();
+ });
+ }
+
+ input.addEventListener("input", function () {
+ clearTimeout(debounceTimer);
+ debounceTimer = setTimeout(runSearch, 180);
+ });
+
+ input.addEventListener("keydown", function (e) {
+ if (e.key === "Escape") {
+ closePanel(root, toggle, panel, input, results);
+ toggle.focus();
+ }
+ });
+
+ document.addEventListener("click", function (e) {
+ if (!root.classList.contains("is-open")) return;
+ if (root.contains(e.target)) return;
+ if (e.target.closest(".navbar-search__panel")) return;
+ closePanel(root, toggle, panel, input, results);
+ });
+
+ window.addEventListener("resize", function () {
+ if (root.classList.contains("is-open")) {
+ updateHeaderHeight();
+ }
+ });
+ }
+
+ document.addEventListener("DOMContentLoaded", function () {
+ document.querySelectorAll(".navbar-search").forEach(setupSearch);
+ updateHeaderHeight();
+ });
+})();
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
new file mode 100644
index 00000000..f437061e
--- /dev/null
+++ b/assets/js/navbar.js
@@ -0,0 +1,149 @@
+/**
+ * Mobile navbar — burger menu, dropdown toggles, backdrop & close on navigate
+ */
+(function () {
+ var MOBILE_MAX = 1279;
+
+ function isMobileNav() {
+ return window.matchMedia("(max-width: " + MOBILE_MAX + "px)").matches;
+ }
+
+ function closeAllSearch() {
+ document.querySelectorAll(".navbar-search.is-open").forEach(function (root) {
+ var toggle = root.querySelector(".navbar-search__toggle");
+ var panel = root.querySelector(".navbar-search__panel");
+ var input = root.querySelector(".navbar-search__input");
+ var results = root.querySelector(".navbar-search__results");
+ if (!toggle || !panel || !input || !results) return;
+ root.classList.remove("is-open");
+ toggle.setAttribute("aria-expanded", "false");
+ panel.hidden = true;
+ results.hidden = true;
+ results.innerHTML = "";
+ input.setAttribute("aria-expanded", "false");
+ });
+ }
+
+ 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 updateHeaderHeight() {
+ var header = document.querySelector(".site-header");
+ if (!header) return;
+ document.documentElement.style.setProperty(
+ "--openms-header-height",
+ header.offsetHeight + "px"
+ );
+ }
+
+ function setMenuOpen(nav, open) {
+ if (!nav) return;
+
+ var menu = nav.querySelector(".navbar-menu");
+ var burger = nav.querySelector(".navbar-burger");
+ var backdrop = nav.querySelector("[data-navbar-backdrop]");
+
+ if (menu) menu.classList.toggle("is-active", open);
+ if (burger) {
+ burger.classList.toggle("is-active", open);
+ burger.setAttribute("aria-expanded", open ? "true" : "false");
+ }
+ if (backdrop) backdrop.hidden = !open;
+ nav.classList.toggle("is-menu-open", open);
+
+ if (open) {
+ closeAllSearch();
+ document.body.classList.add("navbar-menu-open");
+ window.requestAnimationFrame(updateHeaderHeight);
+ } else {
+ closeDropdowns(nav);
+ document.body.classList.remove("navbar-menu-open");
+ window.requestAnimationFrame(updateHeaderHeight);
+ }
+ }
+
+ function closeMobileMenu(nav) {
+ setMenuOpen(nav, false);
+ }
+
+ function setupNav(nav) {
+ if (!nav) return;
+
+ var menu = nav.querySelector(".navbar-menu");
+ var burger = nav.querySelector(".navbar-burger");
+ var backdrop = nav.querySelector("[data-navbar-backdrop]");
+
+ 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");
+ setMenuOpen(nav, willOpen);
+ });
+ }
+
+ if (backdrop) {
+ backdrop.addEventListener("click", function () {
+ if (!isMobileNav()) return;
+ closeMobileMenu(nav);
+ });
+ }
+
+ 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, .navbar-dropdown a.navbar-item").forEach(function (anchor) {
+ anchor.addEventListener("click", function () {
+ if (!isMobileNav()) return;
+ closeMobileMenu(nav);
+ });
+ });
+ }
+ }
+
+ 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"));
+ }
+ });
+
+ document.addEventListener("keydown", function (e) {
+ if (e.key !== "Escape" || !isMobileNav()) return;
+ var nav = document.getElementById("nav");
+ if (nav && nav.classList.contains("is-menu-open")) {
+ closeMobileMenu(nav);
+ }
+ });
+ });
+})();
diff --git a/assets/js/news-year-filter.js b/assets/js/news-year-filter.js
new file mode 100644
index 00000000..eeed1b2e
--- /dev/null
+++ b/assets/js/news-year-filter.js
@@ -0,0 +1,90 @@
+(function () {
+ "use strict";
+
+ var root = document.querySelector("[data-news-year-filter]");
+ if (!root) return;
+
+ var selectEl = root.querySelector("[data-news-year-select]");
+ var allSections = root.querySelectorAll("[data-news-year]");
+ if (!selectEl || !allSections.length) return;
+
+ var allYears = [];
+ allSections.forEach(function (section) {
+ var year = section.getAttribute("data-news-year");
+ if (year && allYears.indexOf(year) === -1) {
+ allYears.push(year);
+ }
+ });
+ allYears.sort(function (a, b) {
+ return Number(b) - Number(a);
+ });
+
+ function getYearFromUrl() {
+ try {
+ return new URLSearchParams(window.location.search).get("year");
+ } catch (e) {
+ return null;
+ }
+ }
+
+ function setYearInUrl(year) {
+ var url = new URL(window.location.href);
+ if (!year || year === allYears[0]) {
+ url.searchParams.delete("year");
+ } else {
+ url.searchParams.set("year", year);
+ }
+ window.history.replaceState({}, "", url);
+ }
+
+ function applyFilter(year) {
+ allSections.forEach(function (section) {
+ var sectionYear = section.getAttribute("data-news-year") || "";
+ var show = sectionYear === year;
+ section.hidden = !show;
+ section.setAttribute("aria-hidden", show ? "false" : "true");
+ });
+
+ root.setAttribute("data-active-year", year);
+ }
+
+ function selectYear(year) {
+ if (allYears.indexOf(year) === -1) {
+ year = allYears[0];
+ }
+ selectEl.value = year;
+ applyFilter(year);
+ setYearInUrl(year);
+ }
+
+ function initYear() {
+ var fromUrl = getYearFromUrl();
+ if (fromUrl && allYears.indexOf(fromUrl) !== -1) {
+ return fromUrl;
+ }
+ return allYears[0];
+ }
+
+ function buildSelect() {
+ selectEl.innerHTML = "";
+
+ allYears.forEach(function (year) {
+ var opt = document.createElement("option");
+ opt.value = year;
+ opt.textContent = year;
+ selectEl.appendChild(opt);
+ });
+ }
+
+ selectEl.addEventListener("change", function () {
+ selectYear(selectEl.value);
+ });
+
+ buildSelect();
+ selectYear(initYear());
+ root.classList.add("news-year-filter--ready");
+
+ window.addEventListener("popstate", function () {
+ selectYear(initYear());
+ });
+})();
diff --git a/assets/js/publications-year-filter.js b/assets/js/publications-year-filter.js
new file mode 100644
index 00000000..b415a063
--- /dev/null
+++ b/assets/js/publications-year-filter.js
@@ -0,0 +1,126 @@
+(function () {
+ "use strict";
+
+ var root = document.querySelector("[data-publications-year-filter]");
+ if (!root) return;
+
+ var selectEl = root.querySelector("[data-publications-year-select]");
+ var navEl = root.querySelector("[data-publications-year-nav]");
+ var allSections = root.querySelectorAll("[data-publication-year]");
+ if (!selectEl || !allSections.length) return;
+
+ var allYears = [];
+ allSections.forEach(function (section) {
+ var year = section.getAttribute("data-publication-year");
+ if (year && allYears.indexOf(year) === -1) {
+ allYears.push(year);
+ }
+ });
+ allYears.sort(function (a, b) {
+ return Number(b) - Number(a);
+ });
+
+ function getYearFromUrl() {
+ try {
+ return new URLSearchParams(window.location.search).get("year");
+ } catch (e) {
+ return null;
+ }
+ }
+
+ function setYearInUrl(year) {
+ var url = new URL(window.location.href);
+ if (!year || year === allYears[0]) {
+ url.searchParams.delete("year");
+ } else {
+ url.searchParams.set("year", year);
+ }
+ window.history.replaceState({}, "", url);
+ }
+
+ function updateNavActive(year) {
+ if (!navEl) return;
+ navEl.querySelectorAll("[data-year-filter]").forEach(function (btn) {
+ var active = btn.getAttribute("data-year-filter") === year;
+ btn.classList.toggle("is-active", active);
+ btn.setAttribute("aria-pressed", active ? "true" : "false");
+ });
+ }
+
+ function applyFilter(year) {
+ allSections.forEach(function (section) {
+ var sectionYear = section.getAttribute("data-publication-year") || "";
+ var show = sectionYear === year;
+ section.hidden = !show;
+ section.setAttribute("aria-hidden", show ? "false" : "true");
+ });
+
+ root.setAttribute("data-active-year", year);
+ updateNavActive(year);
+ }
+
+ function selectYear(year) {
+ if (allYears.indexOf(year) === -1) {
+ year = allYears[0];
+ }
+ selectEl.value = year;
+ applyFilter(year);
+ setYearInUrl(year);
+ }
+
+ function initYear() {
+ var fromUrl = getYearFromUrl();
+ if (fromUrl && allYears.indexOf(fromUrl) !== -1) {
+ return fromUrl;
+ }
+ return allYears[0];
+ }
+
+ function buildSelect() {
+ selectEl.innerHTML = "";
+
+ allYears.forEach(function (year) {
+ var opt = document.createElement("option");
+ opt.value = year;
+ opt.textContent = year;
+ selectEl.appendChild(opt);
+ });
+ }
+
+ function buildNav() {
+ if (!navEl) return;
+
+ function addButton(value, label) {
+ var btn = document.createElement("button");
+ btn.type = "button";
+ btn.className = "publications-year-nav__btn";
+ btn.setAttribute("data-year-filter", value);
+ btn.setAttribute("aria-pressed", "false");
+ btn.textContent = label;
+ navEl.appendChild(btn);
+ }
+
+ allYears.forEach(function (year) {
+ addButton(year, year);
+ });
+
+ navEl.addEventListener("click", function (event) {
+ var btn = event.target.closest("[data-year-filter]");
+ if (!btn) return;
+ selectYear(btn.getAttribute("data-year-filter"));
+ });
+ }
+
+ selectEl.addEventListener("change", function () {
+ selectYear(selectEl.value);
+ });
+
+ buildSelect();
+ buildNav();
+ selectYear(initYear());
+ root.classList.add("publications-year-filter--ready");
+
+ window.addEventListener("popstate", function () {
+ selectYear(initYear());
+ });
+})();
diff --git a/assets/js/swiper.js b/assets/js/swiper.js
index 0e864bad..4f602883 100644
--- a/assets/js/swiper.js
+++ b/assets/js/swiper.js
@@ -1,83 +1,42 @@
/*
-Configures swipeable cards for features like webapps.
-Requires swiper.bundle.js to be loaded from a CDN first.
-See layouts/_defaults/base_of.html
-*/
-$(document).ready(function(){
- const swiper = new Swiper('.swiper', {
- // Optional parameters
+ * Featured WebApps carousel (Swiper 11).
+ * Requires swiper-bundle.js from CDN (see layouts/_default/baseof.html).
+ */
+document.addEventListener("DOMContentLoaded", function () {
+ var carousel = document.querySelector(".webapps-featured__carousel");
+ if (!carousel || typeof Swiper === "undefined") {
+ return;
+ }
+
+ new Swiper(carousel, {
loop: true,
grabCursor: true,
- spaceBetween: 57,
-
- // If we need pagination
+ spaceBetween: 24,
+ slidesPerView: 1,
pagination: {
- el: '.swiper-pagination',
+ el: carousel.querySelector(".swiper-pagination"),
+ clickable: true,
},
-
- // Navigation arrows
navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
+ nextEl: carousel.querySelector(".swiper-button-next"),
+ prevEl: carousel.querySelector(".swiper-button-prev"),
},
-
breakpoints: {
- 0: {
- slidesPerView: 1,
- },
- 700: {
+ 640: {
slidesPerView: 2,
+ spaceBetween: 20,
},
- 1000: {
+ 1024: {
slidesPerView: 3,
+ spaceBetween: 24,
},
- 1350: {
+ 1280: {
slidesPerView: 4,
- }
- }
+ spaceBetween: 24,
+ },
+ },
+ a11y: {
+ enabled: true,
+ },
});
-
- const swiperSlides = document.querySelectorAll('.swiper-slide');
-
- swiperSlides.forEach(slide => {
- const paragraphs = slide.querySelectorAll('p');
-
- slide.addEventListener('mouseover', () => {
- slide.style.height = '90%';
- });
-
- slide.addEventListener('touchstart', () => {
- slide.style.height = '90%';
- });
-
- slide.addEventListener('transitionend', (event) => {
- if (event.propertyName === 'height' && slide.style.height === '90%') {
- paragraphs.forEach(p => {
- p.style.display = 'block';
- });
- }
- });
-
- slide.addEventListener('mouseleave', () => {
- slide.style.height = '60%';
- paragraphs.forEach(p => {
- p.style.display = 'none';
- });
- });
-
- slide.addEventListener('touchend', () => {
- slide.style.height = '60%';
- paragraphs.forEach(p => {
- p.style.display = 'none';
- });
- });
-
- slide.addEventListener('click', () => {
- const url = slide.getAttribute('data-url');
- if (url) {
- window.location.href = url;
- }
- });
- });
-
-})
\ No newline at end of file
+});
diff --git a/config.yaml b/config.yaml
index c66342e0..eb88ccc2 100644
--- a/config.yaml
+++ b/config.yaml
@@ -15,7 +15,36 @@ markup:
# them to openms.de immediately.
disableLanguages: []
+outputFormats:
+ SearchIndex:
+ mediaType: application/json
+ baseName: search-index
+ isPlainText: true
+ notAlternative: true
+
+outputs:
+ home:
+ - HTML
+ - SearchIndex
+
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,102 +62,603 @@ 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/helsinki_workshop_2026/
+ contributePage:
+ eyebrow: Community
+ subtitle: >-
+ Learn how to get involved with code, documentation, outreach, fundraising,
+ and more — whether you are new to OpenMS or a seasoned contributor.
+ aboutPage:
+ eyebrow: About us
+ subtitle: >-
+ OpenMS Inc. is the corporate entity and fiscal home of the OpenMS project.
+ As a Pennsylvania-based 501(c)(3) public charity, it supports development,
+ governance, and long-term stewardship of the OpenMS ecosystem.
+ governancePage:
+ eyebrow: OpenMS governance
+ subtitle: >-
+ OpenMS combines a nonprofit corporation for legal and financial stewardship
+ with an Executive Committee that leads technical direction and community governance.
+ publicationsPage:
+ eyebrow: Research
+ subtitle: >-
+ A curated bibliography of scientific publications that reference OpenMS software,
+ methods, and workflows. Showing publications from the two most recent years.
+ Use the dropdown to switch between them.
+ contactPage:
+ eyebrow: Contact
+ subtitle: >-
+ Whether you need help with pipelines, integrations, consulting, or joining the
+ community — reach out and we will point you to the right next step.
+ researchPartnershipsPage:
+ eyebrow: Partner with OpenMS
+ subtitle: >-
+ OpenMS grows through long-term collaboration with universities, institutes, and
+ research groups that contribute software, methods, and training as part of their work.
+ sponsorUsPage:
+ eyebrow: Support OpenMS
+ subtitle: >-
+ Sponsorship provides direct funding for software engineering, documentation,
+ community events, and the long-term sustainability of the OpenMS ecosystem.
+ helpPage:
+ eyebrow: Support
+ subtitle: >-
+ Find the right channel for user questions, development issues, documentation,
+ and community discussion — from Stack Overflow to the OpenMS mailing list.
+ applicationsPage:
+ eyebrow: Projects
+ readMoreLabel: Read application
+ catalogTitle: Integrated pipelines & workflows
+ catalogLead: Application guides with setup steps, workflows, and links to run analyses on your data.
+ newsSection:
+ eyebrow: OpenMS
+ title: News
+ subtitle: Announcements, releases, workshops, and community updates from OpenMS.
+ yearFilterLabel: Filter news by year
+ listTitle: All news
+ allYearsLabel: All
+ readMoreLabel: Read article
+ backToNewsLabel: Back to news
+ homeTitle: Latest news
+ homeTitleHighlight: news
+ homeViewAllText: View all
+ homeViewAllUrl: /news/
+ homeLimit: 4
+ homeEmptyMessage: No news articles yet. Check back soon for announcements and updates.
+ # defaultYear: "2026"
+ defaultToLatestYear: false
+ emptyMessage: No news items for the selected year.
+ calendarSection:
+ eyebrow: Community
+ title: Community events
+ titleHighlight: events
+ subtitle: Upcoming OpenMS meetings, workshops, and community outreach worldwide.
+ upcomingTitle: Upcoming events
+ pastTitle: Past events
+ yearFilterLabel: Filter events by year
+ emptyUpcoming: >-
+ No upcoming events scheduled right now. Check back soon or join the
+ community to hear about the next meetup.
+ pastHint: Browse events from previous years.
+ readMoreLabel: View details
+ # Donate page (/donate/) — paste URLs from Zeffy: Donations → My forms → Share
+ donatePage:
+ eyebrow: Support OpenMS
+ subtitle: >-
+ Your gift helps sustain open-source mass spectrometry software,
+ documentation, and community programs.
+ taxNote: >-
+ OpenMS Inc. is a U.S. 501(c)(3) public charity. Donations may be
+ tax-deductible for U.S. donors where permitted by law.
+ # iframe src from Zeffy “Embed your form on your site” (recommended)
+ zeffyEmbedUrl: ""
+ # Full Zeffy form URL if you prefer a button instead of embed
+ zeffyFormUrl: ""
+ openCollectiveUrl: https://opencollective.com/openms
+ showOpenCollective: true
+ sponsorTiers:
+ title: Foundation sponsorship levels
+ intro: >-
+ Foundation sponsorship is how organizations contribute substantially to OpenMS Inc.
+ In return, sponsors receive public acknowledgment on this site and other channels
+ appropriate to their level—similar to tiered programs used by foundations such as
+ the Apache Software Foundation.
+ note: >-
+ Contribution levels are agreed individually. To get started, contact us via the
+ form below. OpenMS Inc. is a U.S. 501(c)(3) public charity; U.S.-based sponsors
+ may be eligible for tax benefits where permitted by law.
+ levels:
+ - id: platinum
+ name: Platinum
+ summary: Premier visibility for organizations making the largest commitments.
+ benefits:
+ - Largest logo on the sponsor page (top section, prominent placement)
+ - Sponsored link to your organization from the OpenMS website
+ - Acknowledgment in OpenMS community news or annual highlights where appropriate
+ - Opportunity to discuss co-branded community initiatives
+ - id: gold
+ name: Gold
+ summary: Strong visibility for major sponsors of OpenMS development.
+ benefits:
+ - Large logo on the sponsor page (upper section)
+ - Sponsored link from the sponsor page
+ - Alphabetical placement among peers at the same level
+ - id: silver
+ name: Silver
+ summary: Visible support for ongoing maintenance and community programs.
+ benefits:
+ - Standard logo on the sponsor page (middle section)
+ - Sponsored link from the sponsor page
+ - Alphabetical placement among peers at the same level
+ - id: bronze
+ name: Bronze
+ summary: Public thanks for organizations supporting the project.
+ benefits:
+ - Text mention and link on the sponsor page (lower section)
+ - Alphabetical placement among peers at the same level
+ universityPartners:
+ - name: University of Tübingen
+ logo: /images/logos/logo-uni-tuebingen.png
+ url: https://kohlbacherlab.org/
+ - name: FU Berlin
+ logo: /images/logos/fu-berlin.png
+ url: http://www.mi.fu-berlin.de/en/inf/groups/abi/index.html
+ - name: ETH Zürich
+ logo: /images/logos/zurich.jpeg
+ url: http://www.imsb.ethz.ch/research/aebersold.html
+ - name: Wellcome Sanger Institute
+ logo: /images/logos/logo-sanger.png
+ url: http://www.sanger.ac.uk/
+ - name: EMBL-EBI
+ logo: /images/logos/emblebi.png
+ url: https://www.ebi.ac.uk/
+ - name: University of Toronto
+ logo: /images/logos/toronto.jpeg
+ url: http://www.moleculargenetics.utoronto.ca/faculty/2017/7/19/hannes-rost
+ - name: DTU Biosustain
+ logo: /images/logos/DTU-logo.png
+ url: https://www.biosustain.dtu.dk/
+ - name: ZIB
+ logo: /images/logos/ziblogo.png
+ url: https://www.zib.de/
+ - name: Immatics
+ logo: /images/logos/immatics.png
+ url: https://immatics.com/
+ - name: FullSeeomics
+ logo: /images/logos/logo-fullseeomics.png
+ url: https://fullseeomics.com/
+ - name: Stockholm University
+ logo: /images/logos/logo-stockholm-university.png
+ url: https://www.su.se/english
+ - name: Compomics Group
+ logo: /images/logos/logo-compomics.png
+ url: https://www.compomics.com/
+ - name: Ghent University
+ logo: /images/logos/logo-vib-ghent.png
+ url: https://vib.be/en#/
+ - name: University of Cambridge
+ logo: /images/logos/logo-university-cambridge.png
+ url: https://www.cam.ac.uk/
+ - name: University of Groningen
+ logo: /images/logos/logo-university-groningen.png
+ url: https://www.rug.nl/?lang=en
navbarlogo:
- image: OpenMS_transparent_blackFont.png
+ image: logos/OpenMS_transparent_blackFont.svg
link: /
+ altText: OpenMS
+ navbarSearch:
+ enabled: true
+ placeholder: Search OpenMS…
+ minChars: 2
+ maxResults: 8
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: "Open Science. "
+ titleHighlight: Clear Results
+ titleAfter: ""
+ description: >-
+ Expert-crafted ecosystem of computational mass spectrometry tools.
+ Run scientifically vetted, cutting edge apps. Build custom tools on top
+ of robust open-source algorithms. Join the OpenMS community.
+ imageAlt: Animated OpenMS logo with pulsing peak diagram
+ buttontext: Get started
buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html
- # Hero image (from static/images/___)
- image: OpenMS_transparent_blackFont.png
+ secondaryButtonText: Explore the library
+ secondaryButtonLink: /openms-lib/
+ microcopy: Ready-to-use-apps · Modular workflows · Built by the community
+
+ homeMetrics:
+ stats:
+ - value: 20
+ suffix: "+"
+ label: Years active
+ description: Over two decades of open-source development for mass spectrometry workflows.
+ - value: 1000
+ suffix: "+"
+ label: Citations
+ description: Peer-reviewed research citing OpenMS tools and algorithms worldwide.
+ - value: 3.5
+ decimals: 1
+ prefix: v
+ label: Latest version
+ description: Continuous releases with new algorithms, formats, and analysis workflows.
+
+ communitySection:
+ eyebrow: Community
+ title: Everyone is welcome
+ titleHighlight: welcome
+ lead: >-
+ OpenMS is built by a diverse group of contributors around the world.
+ Whether you are new to mass spectrometry or a seasoned developer, there
+ is a place for you in our community.
+ welcomeNote: >-
+ We are committed to being open, inclusive, and welcoming — read the
+ [Code of Conduct](/code-of-conduct) for how we work together.
+ image: /images/community/community-tech-bg.svg
+ imageAlt: Abstract mass spectrometry data visualization with spectral peaks and connected analysis workflows
+ ctaText: Get involved
+ ctaUrl: /contribute/
+
+ eventsSection:
+ eyebrow: Events
+ title: Upcoming events
+ titleHighlight: events
+ lead: >-
+ Workshops, developer meetings, and community outreach around the world.
+ calendarText: View all
+ calendarUrl: /calendar/
+ readMoreLabel: View details
+ limit: 4
+ emptyEvents: >-
+ No upcoming events scheduled right now. Browse past events or join the
+ community to hear about the next meetup.
+
+ homePage:
+ pathwaysEyebrow: Get started
+ pathwaysTitle: Choose your entry point
+ pathways:
+ - title: Documentation
+ text: Installation, tutorials, and workflow guides on Read the Docs.
+ url: https://openms.readthedocs.io/en/latest/
+ - title: OpenMS library
+ text: Capabilities for users, developers, and what OpenMS includes.
+ url: /openms-lib/
+ - title: All applications
+ text: Community web apps and tools built on OpenMS.
+ url: /applications/
+
+ homeSponsors:
+ enabled: false
+ label: Supported by
+ description: OpenMS receives direct funding from leading life-science organizations.
+ cta:
+ text: Our sponsors
+ url: /sponsor-us/
+ sponsors:
+ - name: deNBI
+ url: https://www.denbi.de
+ logo: /images/logos/denbi-logo-white.svg
+ alt: deNBI — German Network for Bioinformatics Infrastructure
+ - name: ELIXIR
+ url: https://elixir-europe.org/platforms/data/core-data-resources
+ logo: /images/logos/elixir-logo-white.png
+ alt: ELIXIR Core Data Resource
+ - name: LiBiS
+ url: https://libis.uni-heidelberg.de/
+ logo: /images/logos/libis-logo-white.svg
+ alt: LiBiS — Life Science Informatics
heroGroup:
- - title: "OpenMS allows users to:"
- bgColor: ECF2F9
+ - title: "Three ways to use OpenMS"
+ variant: users
+ eyebrow: Capabilities
+ titleHighlight: "Three ways"
+ subtitle: Run ready-made workflows, build custom pipelines, or script with Python—choose the path that fits your lab.
+ bgColor: C2BABC
heroItems:
- title: Run existing workflows
- subtitle: Run existing workflows for proteomics and metabolomics with OpenMS in KNIME.
+ tag: KNIME
+ subtitle: Use OpenMS workflows for proteomics and metabolomics in KNIME without writing code.
leftAlign: true
image: knime-analytics.png
- buttonText: Get Started
+ buttonText: KNIME guide
buttonLink: "https://openms.readthedocs.io/en/latest/getting-started/knime-get-started.html"
- title: Create your own workflows
- subtitle: Modify and create your own OpenMS workflows in Galaxy, KNIME and Nextflow.
+ tag: Galaxy · KNIME · Nextflow
+ subtitle: Modify and compose OpenMS workflows across Galaxy, KNIME, and Nextflow.
image: knime-edit.png
- buttonText: Get Started
+ buttonText: Workflow guide
buttonLink: "https://openms.readthedocs.io/en/latest/getting-started/workflows.html"
- title: Use OpenMS in Python
- subtitle: Enhance workflows with pyOpenMS scripts or develop novel methods using pyOpenMS
+ tag: pyOpenMS
+ subtitle: Extend pipelines with pyOpenMS scripts or prototype new analysis methods in Python.
leftAlign: true
image: pyopenms-logo.png
imgClass: img-fit
bottomBorderRadius: true
- buttonText: Get Started
+ buttonText: pyOpenMS docs
buttonLink: "https://pyopenms.readthedocs.io/en/latest/"
- - title: "Advanced users / developers can use OpenMS to:"
- bgColor: FFF1E0
+ - title: "Scale OpenMS for advanced work"
+ variant: developers
+ eyebrow: For developers
+ titleHighlight: advanced
+ subtitle: Run large workflows on HPC clusters or extend OpenMS with high-performance C++ tools.
+ bgColor: FFCB4F
heroItems:
- title: Analyze large datasets
- subtitle: Run workflows on very large datasets on powerful compute infrastructure
- leftAlign: true
+ tag: Nextflow
+ subtitle: Run workflows on very large datasets on powerful compute infrastructure.
imgClass: img-fit
image: nf-core-logo.png
- buttonText: Get Started
+ buttonText: Nextflow guide
buttonLink: "https://openms.readthedocs.io/en/latest/getting-started/nextflow-get-started.html"
- title: Create high-performance tools
- subtitle: Develop high-performance tools or algorithms with the C++ OpenMS library
+ tag: C++ / OpenMS
+ subtitle: Develop high-performance tools or algorithms with the C++ OpenMS library.
terminal: true
- buttonText: Get Started
- bottomBorderRadius: true
+ buttonText: C++ tutorial
buttonLink: "https://abibuilder.cs.uni-tuebingen.de/archive/openms/Documentation/nightly/html/OpenMS_tutorial.html"
keyfeatures:
- title: What is OpenMS ?
- subtitle: OpenMS offers an open-source C++ library (+ Python bindings) for LC/MS data management, analysis and visualization. It empowers rapid development of mass spectrometry related software. OpenMS is freely available under the three clause BSD license and runs under Windows, macOS and Linux. The OpenMS members have a strong commitment to creating an open, inclusive, and positive community. Please read the OpenMS Code of Conduct for guidance on how to interact with others in a way that makes the community thrive.
+ eyebrow: What is OpenMS?
+ title: The open-source LC-MS library
+ titleHighlight: open-source
+ description: >-
+ A C++ core with Python bindings for LC/MS data management, analysis,
+ and visualization—built for rapid development of mass spectrometry software.
+ features:
+ - title: Open source
+ tag: BSD licensed
+ text: Core library and tools you can extend, share, and ship under a three-clause BSD license.
+ - title: C++ & Python
+ tag: C++ · Python
+ text: High-performance algorithms with pyOpenMS for scripting and workflows.
+ - title: Cross-platform
+ tag: Windows · macOS · Linux
+ text: Build and run on all major platforms with the same toolchain.
+ - title: TOPP pipeline
+ tag: 200+ tools
+ text: Ready-made command-line utilities for proteomics and metabolomics analysis.
+ note: >-
+ Our community is committed to being open, inclusive, and welcoming.
+ Read the [OpenMS Code of Conduct](/code-of-conduct) for guidance on
+ how we work together.
+
+ openmsLibHighlights:
+ title: What is OpenMS?
+ items:
+ - title: 20+ years of development
+ text: A mature, actively maintained framework trusted by labs worldwide.
+ icon: fas fa-history
+ - title: Open source license
+ text: Freely available under the BSD-3 clause license.
+ icon: fas fa-unlock-alt
+ - title: Active community
+ text: Backed by researchers and developers across academia and industry.
+ icon: fas fa-users
+ - title: Built for scale
+ text: High performance and optimized for large omics datasets.
+ icon: fas fa-bolt
+ note: >-
+ Our community is committed to being open, inclusive, and welcoming.
+ Read the [OpenMS Code of Conduct](/code-of-conduct) for guidance on
+ how we work together.
+
+ openmsLibDevelopers:
+ eyebrow: For Developers
+ title: Contribute
+ lead: Your improvements help researchers worldwide.
+ citeText: Used OpenMS-lib in your work? If so, please cite.
+ citation:
+ badge: Primary cite
+ topic: OpenMS 3
+ title: OpenMS 3 enables reproducible analysis of large-scale mass spectrometry data
+ url: https://www.ncbi.nlm.nih.gov/pubmed/38366242
+ journal: Nature Methods
+ year: "2024"
+ authors: >-
+ Pfeuffer, Julianus; Bielow, Chris; Wein, Samuel; Jeong, Kyowon; Netz,
+ Eugen; Walter, Axel; Alka, Oliver; Nilse, Lars; Colaianni, Pasquale
+ Domenico; McCloskey, Douglas
+ actionText: View on PubMed
+ moreUrl: /citing-openms/
+ moreText: More citations
+ boxes:
+ - title: Report an Issue
+ tag: GitHub
+ icon: fab fa-github
+ text: File bugs, request features, or discuss changes on the OpenMS tracker.
+ url: https://github.com/OpenMS/OpenMS/issues
+ linkText: Open issue tracker
+ - title: Building OpenMS from Source
+ type: build
+ tag: Build
+ text: Platform-specific guides for compiling OpenMS-lib locally.
+ platforms:
+ - name: Windows
+ icon: fab fa-windows
+ url: https://openms.de/documentation/install_win.html
+ - name: Linux
+ icon: fab fa-linux
+ url: https://openms.de/documentation/install_linux.html
+ - name: macOS
+ icon: fab fa-apple
+ url: https://openms.de/documentation/install_mac.html
+ - title: Developer manual
+ tag: Docs
+ icon: fas fa-book
+ text: Architecture, coding standards, and contribution workflows for OpenMS-lib.
+ url: https://openms.readthedocs.io/en/latest/manual/develop.html
+ linkText: Read the manual
+ - title: Add a TOPP tool
+ tag: Extend
+ icon: fas fa-puzzle-piece
+ text: Step-by-step guide for adding a new tool to the TOPP pipeline suite.
+ url: https://openms.readthedocs.io/en/latest/manual/develop/adding-new-tool-to-topp.html
+ linkText: Add a TOPP tool
+ - title: Developer FAQ
+ tag: Help
+ icon: fas fa-question-circle
+ text: Answers to common questions about building, testing, and contributing.
+ url: https://openms.readthedocs.io/en/latest/manual/develop/developer-faq.html
+ linkText: Read the FAQ
+
+ pyopenmsPage:
+ highlights:
+ title: Key features
+ items:
+ - text: Run OpenMS-lib algorithms directly in Python
+ - text: Pandas DataFrame export for common OpenMS-lib datastructures
+ - text: Run in scripts or in Jupyter Notebooks
+ - text: Seamless integration with the scientific Python stack
+ gettingStarted:
+ eyebrow: Getting Started
+ items:
+ - title: Try Online
+ type: online
+ text: Run pyOpenMS in your browser without a local install.
+ links:
+ - name: Binder
+ icon: fas fa-external-link-alt
+ url: https://mybinder.org/v2/gh/OpenMS/pyopenms-docs/master
+ - name: Google Colab
+ icon: fas fa-external-link-alt
+ url: https://colab.research.google.com/github/timosachsenberg/EuBIC2026/blob/master/notebooks/EUBIC_Task0_Prerequisites.ipynb
+ - title: Installation
+ tag: Install
+ url: https://pyopenms.readthedocs.io/en/latest/user_guide/installation.html
+ linkText: Installation
+ - title: Documentation
+ tag: Docs
+ url: https://pyopenms.readthedocs.io/
+ linkText: Documentation
+ - title: API Reference
+ tag: API
+ url: https://pyopenms.readthedocs.io/en/latest/apidocs/index.html
+ linkText: API Reference
+ - title: Developer manual
+ tag: Develop
+ url: https://pyopenms.readthedocs.io/en/latest/community/index.html
+ linkText: Developer manual
+ developers:
+ eyebrow: Developers
+ title: Contribute
+ lead: Any class in OpenMS-lib can be easily wrapped and used with PyOpenMS.
+ citeText: "Used PyOpenMS in your work? If so please cite:"
+ citation:
+ variant: secondary
+ badge: Also cite
+ topic: pyOpenMS
+ title: >-
+ pyOpenMS: a Python-based interface to the OpenMS mass-spectrometry
+ algorithm library
+ url: https://www.ncbi.nlm.nih.gov/pubmed/25410388
+ journal: Proteomics
+ year: "2014"
+ authors: Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars
+ actionText: View on PubMed
+ moreUrl: /citing-openms/
+ moreText: More citations
+ boxes:
+ - title: Report an Issue
+ url: https://github.com/OpenMS/OpenMS/issues
+ linkText: Report an Issue
+ - title: Build From Source
+ url: https://pyopenms.readthedocs.io/en/latest/community/build_from_source.html
+ linkText: Build From Source
+ - title: Wrapping New Classes
+ url: https://pyopenms.readthedocs.io/en/latest/community/wrapping_workflows_new_classes.html
+ linkText: Wrapping New Classes
+
+ webappsSection:
+ eyebrow: Community tools
+ title: Featured Apps
+ titleHighlight: Apps
+ description: >-
+ Apps are scientifically validated end-to-end solutions for common
+ proteomics and metabolomics analysis. Test online, then download and
+ deploy locally.
+ ctaText: View project
+ showAll:
+ text: Show all projects
+ url: /applications
+
+ ecosystemSection:
+ title: Build your own pipelines using our ecosystem
+ titleHighlight: ecosystem
+ items:
+ - name: OpenMS-lib
+ url: /openms-lib/
+ logo: /images/logos/OpenMS_transparent_blackFont.svg
+ accent: openms-lib
+ size: wide
+ description: >-
+ Reusable C++ algorithms and data structures for mass spectrometry
+ software. Ships with The OpenMS Pipeline (TOPP) command line tools
+ for mass spectrometry analysis.
+ - name: pyOpenMS
+ url: /pyopenms/
+ monogram: py
+ accent: pyopenms
+ size: standard
+ description: >-
+ Python bindings to OpenMS-lib. Write custom analysis scripts and
+ integrate OpenMS into Python workflows.
+ - name: OpenMS-Web apps
+ url: /webapps/
+ monogram: Web
+ accent: webapps
+ size: standard
+ description: >-
+ Web interface template for OpenMS pipelines. Deploy custom analysis
+ tools as interactive web apps without frontend development.
+ - name: pyopenms_viz
+ url: /pyopenms-viz/
+ monogram: viz
+ accent: viz
+ size: wide
+ description: >-
+ Visualization library for mass spectrometry data. Create interactive
+ and static plots directly from Python dataframes.
webapps:
- - index: 0
+ - name: FLASH App
url: http://flashapp.webapps.openms.org/
logo: /images/webapp/logo/flashapp.png
- description: FLASHApp allows for interactive analysis and visualization of top-down proteomics data.
- - index: 1
- url: https://abi-services.cs.uni-tuebingen.de/umetaflow/
- logo: /images/webapp/logo/umetaflow.png
- description: This app offers the powerful UmetaFlow pipeline for untargeted metabolomics in an accessible
- - index: 2
+ logoSize: large
+ description: Web-based analysis and visualization of top-down proteomics data.
+ - name: OpenDIAKiosk
url: http://opendia.webapps.openms.org/
logo: /images/webapp/logo/OpenDIAKiosk_logo_portrait.svg
- description: OpenDIA is an interactive web app for Data-Independent Acquisition (DIA) analysis.
- - index: 3
+ logoSize: large
+ description: Interactive DIA proteomics data analysis.
+ - name: umetaflow
+ url: https://abi-services.cs.uni-tuebingen.de/umetaflow/
+ logo: /images/webapp/logo/umetaflow.png
+ logoSize: large
+ description: Web-based access to the UmetaFlow pipeline.
+ - name: OpenDDA
url: http://opendda.webapps.openms.org/
logo: /images/webapp/logo/openDDA.svg
- description: OpenDDA is a browser-based tool to identify and quantify proteins from DDA mass spectrometry data.
- - index: 4
+ logoSize: xlarge
+ description: Web-based workflow for DDA proteomics.
+ - name: naseweis
+ url: https://abi-services.cs.uni-tuebingen.de/naseweis/
+ logo: /images/webapp/logo/naseweis.png
+ description: Web-based access to the nucleic acid search engine (NASE).
+ - name: NuXL
url: https://abi-services.cs.uni-tuebingen.de/nuxl/
logo: /images/webapp/logo/nuxl.png
- description: NuXL is a dedicated software package designed for the analysis of XL-MS (cross-linking mass spectrometry).
- - index: 5
+ logoSize: large
+ description: Web-based analysis pipeline for XL-MS data.
+ - name: MHCquant
url: https://abi-services.cs.uni-tuebingen.de/mhcquant/
logo: /images/webapp/logo/mhcquant.svg
- description: MHCQuant is a web application for analysis of MHC-bound peptides in immunopeptidomics studies.
- - index: 6
- url: https://abi-services.cs.uni-tuebingen.de/toppview-lite/
- logo: /images/webapp/logo/toppview-lite.svg
- description: TOPPView Lite is a web-based viewer for interactive visualization and exploration of mass spectrometry data.
- - index: 7
- logo: /images/webapp/logo/naseweis.png
- url: https://abi-services.cs.uni-tuebingen.de/naseweis/
- description: NASEWEIS is a WebApp for the NucleicAcidSearch Engine. It allows for library searching of Oligonucleotides.
- - index: 8
- url: https://abi-services.cs.uni-tuebingen.de/streamsage/
- logo: /images/webapp/logo/streamsage.png
- description: StreamSage is a web application for performing proteomics database searching in your browser.
+ logoSize: xlarge
+ description: Web-based analysis pipeline for immunopeptidomics.
section5: false
@@ -139,10 +669,24 @@ languages:
sponsorLogo2: /images/logos/elixir-logo-white.png
sponsorLogo3: /images/logos/libis-logo-white.svg
logo:
+ image: OpenMS_transparent_blackFont.png
+ link: /
+ altText: OpenMS
+ tagline: The open-source framework for mass spectrometry.
+ sponsor:
+ text: Sponsor us
+ link: /sponsor-us/
+ donate:
+ text: Donate
+ link: /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
@@ -151,6 +695,8 @@ languages:
link: https://openms.readthedocs.io/en/latest/about/installation.html
- text: Documentation
link: https://openms.readthedocs.io/en/latest/
+ - text: Help
+ link: /help/
- text: Citing OpenMS
link: /citing-openms
column2:
@@ -162,6 +708,8 @@ languages:
link: /code-of-conduct
- text: Contribute
link: /contribute
+ - text: OpenMS Fellowship
+ link: /news/fellowship2024/
- text: Core Developers
link: /core_developers
column3:
@@ -173,13 +721,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 +735,79 @@ 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
+ url: /openms-lib/
+ sublinks:
+ - title: OpenMS-lib
+ url: /openms-lib/
+ - title: pyOpenMS
+ url: /pyopenms/
+ - title: OpenMS Web Apps
+ url: /webapps/
+ - 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
+ url: /calendar/
sublinks:
- - title: Communication
- url: /communication
- - title: Contribute
+ - title: Calendar
+ url: /calendar/
+ - title: News
+ url: /news
+ - title: Getting Involved
url: /contribute
- - title: Awards
- url: /news/fellowship2024
- url: /community
- - title: About Us
+ - title: OpenMS Fellowship
+ url: /news/fellowship2024/
+ - 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: /contact/
+ - title: Partner with OpenMS
+ url: /research-partnerships/
+ is_emphasized: true
+ sublinks:
+ - title: Research Partnerships
+ url: /research-partnerships/
+ - title: Scientific and Technical Support
+ url: /help
+ - title: Sponsor Us
+ url: /sponsor-us/
+ - title: Sponsor us
+ shortTitle: Sponsor
+ url: /sponsor-us/
+ button: true
+ buttonVariant: sponsor
+ - title: Donate
+ url: /donate/
button: true
diff --git a/content/en/about.md b/content/en/about.md
index 14040b8f..a94e2539 100644
--- a/content/en/about.md
+++ b/content/en/about.md
@@ -1,27 +1,68 @@
---
title: OpenMS Inc.
sidebar: false
+hideShortcuts: true
+hidePageTitle: true
---
-OpenMS Inc. is the corporate entity and fiscal home of the OpenMS project. As a Pennsylvania–based nonprofit organization recognized as a 501(c)(3) public charity, OpenMS Inc. supports the continued development, governance, and community stewardship of the OpenMS open-source software ecosystem. Through nonprofit oversight and dedicated fiscal management, we ensure that OpenMS remains freely available, sustainable, and driven by the needs of its scientific community. As a registered 501(c)(3) nonprofit organization. Contributions are tax-deductible to the extent permitted by law. EIN: 93-3818533
+
+
+ Who we are
+ OpenMS Inc.
+
+ Through nonprofit oversight and dedicated fiscal management, OpenMS Inc.
+ helps ensure OpenMS remains freely available, sustainable, and community-driven.
+
+
+ Contributions are tax-deductible to the extent permitted by law. EIN: 93-3818533.
+
+
+
+ Board of directors
+ Leadership
+
+ Dr. Samuel Wein (chief executive officer)
+ Prof. Dr. Oliver Kohlbacher (chief scientific officer)
+ Dr. Timo Sachsenberg (chief technology officer)
+
+
+
-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
+
+ Institutional Partners
+
+ Institutional partners are organizations that support the project by employing people
+ who contribute to OpenMS as part of their work.
+ See the research partnerships page for partner
+ institutions and how to collaborate.
+
+
-OpenMS receives direct funding from the following sources:
-{{< sponsors >}}
+
+ Donate
+
+ If you have found OpenMS useful in your work, research, or company, please consider
+ a donation commensurate with your resources. Any amount helps and is used strictly to
+ support OpenMS open-source software, documentation, and community development.
+
+
+ Give online via our
+ donation page (Zeffy and Open Collective).
+
+
-
-## 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:
-
-{{< partners >}}
-
-
-## Donate
-
-If you have found OpenMS useful in your work, research, or company, please consider a donation to the project commensurate with your resources. Any amount helps! All donations will be used strictly to fund the development of openms’s open source software, documentation, and community.
-
-You can also donate using our [opencollective](https://opencollective.com/openms) account.
+
+ See also
+
+ For user questions, documentation, and community support channels, see the
+ Help page .
+
+
diff --git a/content/en/applications/_index.md b/content/en/applications/_index.md
index 4b1fc38f..2a181c9e 100644
--- a/content/en/applications/_index.md
+++ b/content/en/applications/_index.md
@@ -1,19 +1,22 @@
---
title: OpenMS Applications
-date: 2017-03-23
-publishdate: 2017-03-24
-shortcutDepth: 2
+subtitle: Pipelines and tools integrated into OpenMS releases or available via KNIME and Nextflow.
+hidePageTitle: true
+hideShortcuts: true
---
OpenMS is a flexible codebase that can be tailored to many different applications ranging from the standard label free analysis to top down, metabolomics, crosslinking or DIA.
-OpenMS is used in a variety of applications: popular third-party apps which run OpenMS under the hood include
+
- - QuantMS [https://quantms.org](https://quantms.org)
- - QCCloud2 [https://qcloud2.crg.eu](https://qcloud2.crg.eu)
- - Proteome Discoverer Community Nodes
-
+**Also built on OpenMS**
-Applications which are integrated into OpenMS releases or are available as pipelines (e.g. using KNIME or Nextflow) are listed below. The pages will provide explanations on how OpenMS can be used to solve your problems and link to workflows that allow you to apply the tools to your data.
+- [QuantMS](https://quantms.org)
+- [QCCloud2](https://qcloud2.crg.eu)
+- Proteome Discoverer Community Nodes
-If you cannot find your application in the menu on the left, more OpenMS tools can be found in the [TOPP documentation](https://openms.de/doxygen/nightly/html/TOPP_documentation.html).
\ No newline at end of file
+
+
+Applications which are integrated into OpenMS releases or are available as pipelines (e.g. using KNIME or Nextflow) are listed below. Each page explains how OpenMS can address your workflow and links to ready-to-use pipelines.
+
+If you cannot find your application in the list, more OpenMS tools are in the [TOPP documentation](https://openms.de/doxygen/nightly/html/TOPP_documentation.html).
diff --git a/content/en/calendar.md b/content/en/calendar.md
new file mode 100644
index 00000000..1a0ee7df
--- /dev/null
+++ b/content/en/calendar.md
@@ -0,0 +1,6 @@
+---
+title: Community Events
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
diff --git a/content/en/contact.md b/content/en/contact.md
new file mode 100644
index 00000000..49615428
--- /dev/null
+++ b/content/en/contact.md
@@ -0,0 +1,6 @@
+---
+title: Contact us
+sidebar: false
+hidePageTitle: true
+hideShortcuts: true
+---
diff --git a/content/en/contribute.md b/content/en/contribute.md
index 5244aae2..81c2850d 100644
--- a/content/en/contribute.md
+++ b/content/en/contribute.md
@@ -1,10 +1,10 @@
---
title: Contributing to OpenMS
sidebar: false
+hidePageTitle: true
+hideShortcuts: true
---
-# Contributing to OpenMS
-
Welcome! The OpenMS project welcomes your expertise and enthusiasm. This guide helps you understand how to get involved, whether you're writing code, improving documentation, helping with community outreach, or contributing in other ways.
OpenMS is an open-source project focused on developing software for mass spectrometry data analysis and management. The project brings together researchers, developers, and users from across academia and industry.
@@ -124,7 +124,7 @@ Through community contact we share our work more widely and learn where we're fa
OpenMS was all-volunteer for many years, but as its importance grew it became clear that to ensure stability and growth we'd need financial support. Like all the nonprofit world, we're constantly searching for grants, sponsorships, and other kinds of support. We have a number of ideas and of course we welcome more. Fundraising is a scarce skill here—we'd appreciate your help.
-You can also donate using our [OpenCollective](https://opencollective.com/openms) account.
+You can also donate on our [donation page](/donate/) (Zeffy and [Open Collective](https://opencollective.com/openms)).
---
@@ -160,7 +160,7 @@ The most important repositories in the OpenMS GitHub organization are:
- **[streamlit-template](https://github.com/OpenMS/streamlit-template)** — A template for building lightweight web applications around OpenMS tools
-- **[OpenMS-website](https://github.com/OpenMS/OpenMS-website)** — Source repository for the OpenMS project website
+- **[OpenMS-website](https://github.com/OpenMS/OpenMS-website)** — Source repository for the OpenMS project website. For updating news or homepage text without front-end experience, see the [website maintainer guide](https://github.com/OpenMS/OpenMS-website/blob/main/docs/README.md) in that repository.
There are additional repositories for tutorials, experimental features, and supporting infrastructure.
diff --git a/content/en/donate.md b/content/en/donate.md
new file mode 100644
index 00000000..1f3d6967
--- /dev/null
+++ b/content/en/donate.md
@@ -0,0 +1,6 @@
+---
+title: Donate
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
diff --git a/content/en/governance.md b/content/en/governance.md
index 70ebafa6..d72cffed 100644
--- a/content/en/governance.md
+++ b/content/en/governance.md
@@ -1,70 +1,82 @@
---
title: "Governance"
+hidePageTitle: true
+hideShortcuts: true
---
-# Governance Structure of OpenMS
-
-OpenMS is governed through two complementary structures: a **nonprofit corporation** that provides legal and financial support, and an **Executive Committee** that guides the technical development and community governance of the project.
-
-This page provides an overview of how the project is organized and makes decisions.
-
----
-
-## OpenMS Inc.
-
-[OpenMS Inc.]({{< relref "/about" >}}) is a U.S. nonprofit corporation organized under section 501(c)(3) of the Internal Revenue Code. It provides legal and financial infrastructure to support the development of the OpenMS software project.
-
-The corporation is governed by a **Board of Directors** responsible for fiduciary oversight, legal compliance, and financial management.
-
-For more information about the nonprofit entity, see the [about page]({{< relref "/about" >}}).
-
----
-
-## Executive Committee
-
-The [Executive Committee]({{< relref "/exec_committee" >}}) is the primary governance body of the OpenMS project itself. It is composed of the **core developers** and is led by an elected **Executive Chairperson**.
-
-The Executive Committee is responsible for:
-
-- Defining the mission, direction, and vision of OpenMS
-- Guiding technical development and resource allocation
-- Maintaining project bylaws and governance policies
-- Managing the list of core developers
-- Addressing Code of Conduct issues
-
-The committee meets regularly to coordinate project development and governance. Meeting minutes are made publicly available to ensure transparency.
-
-For detailed information about the committee's responsibilities, meeting procedures, and decision-making processes, see the [Executive Committee page]({{< relref "/exec_committee" >}}).
-
----
-
-## Core Developers
-
-[Core developers]({{< relref "/core_developers" >}}) are trusted maintainers who play a central role in the development and governance of OpenMS. They collectively form the Executive Committee.
-
-Core developers:
-
-- Review and approve contributions to the codebase
-- Help guide the technical direction of the project
-- Support and mentor new contributors
-- Participate in governance decisions
-
-New core developers are added by a majority vote of the Executive Committee. Core developers may step down voluntarily or be removed due to inactivity or Code of Conduct violations by a two-thirds vote of the committee.
-
-For more information about the role and responsibilities of core developers, see the [Core Developers page]({{< relref "/core_developers" >}}).
-
----
-
-## Relationship Between the Corporation and the Project
-
-**Corporate governance** (handled by the Board of Directors) focuses on the legal entity, finances, and nonprofit compliance.
-
-**Project governance** (handled by the Executive Committee) focuses on software development, technical direction, and community management.
-
-This separation allows the project to benefit from the legal and financial stability provided by the nonprofit corporation while maintaining independent technical governance by the community of core developers.
-
----
-
-## See Also
-
-For guidance on getting started as a contributor, see the [Contributing Guide]({{< relref "/contribute" >}}).
+
+
+ Corporate Governance
+ OpenMS Inc.
+
+ OpenMS Inc. is a U.S. nonprofit corporation under 501(c)(3)
+ that provides legal and financial infrastructure for the project.
+
+
+ Board of Directors handles fiduciary and legal oversight
+ Supports fundraising, compliance, and organizational continuity
+
+
+ OpenMS Inc. provides legal, financial, and organizational stewardship for the project.
+
+
+
+ Project Governance
+ Executive Committee
+
+ The Executive Committee is the primary governance body
+ for the software project. It is composed of core developers and led by an elected Executive Chairperson.
+
+
+ Defines project direction and technical priorities
+ Maintains governance policies and core developer membership
+ Handles Code of Conduct escalations and process decisions
+
+
+ See committee details and procedures
+
+
+
+
+
+ How Core Developers Fit In
+
+ Core developers are trusted maintainers who review contributions,
+ mentor contributors, and participate in project governance decisions through the Executive Committee.
+
+
+
Review and approve contributions
+
Guide technical direction
+
Mentor new contributors
+
Participate in governance votes
+
+
+ New core developers are added by majority vote of the Executive Committee.
+ Core developers may step down voluntarily or be removed for inactivity or Code of Conduct violations by a two-thirds vote.
+
+
+
+
+ Separation of Responsibilities
+
+
+
Corporate (Board of Directors)
+
Legal entity, nonprofit compliance, financial stewardship.
+
+
+
Project (Executive Committee)
+
Software roadmap, contributor governance, technical/community decisions.
+
+
+
+ This model gives OpenMS institutional stability while preserving independent technical governance by the active maintainer community.
+
+
+
+
+ See Also
+
+ For guidance on getting started as a contributor, see the
+ Contributing Guide .
+
+
diff --git a/content/en/help.md b/content/en/help.md
index f1f3ebf8..1597fc84 100644
--- a/content/en/help.md
+++ b/content/en/help.md
@@ -1,54 +1,77 @@
---
title: Help
sidebar: false
+hidePageTitle: true
+hideShortcuts: true
---
-**User questions:** The best way to get help is to post your question to a site
-like [StackOverflow](https://stackoverflow.com/search?q=openms), with
-thousands of users available to answer. We wish we could keep an eye on
-these sites, or answer questions directly, but the volume is just a little
-overwhelming!
-
-**Development issues:** For OpenMS development-related matters (e.g. bug reports), please
-see [Community](/community).
-
-### [OpenMS mailing list](https://mail.python.org/mailman/listinfo/openms-discussion)
-
-This list is the main forum for longer-form discussions, like adding new features to openms, making changes to the OpenMS Roadmap, and all kinds of project-wide decision making.
-
-Announcements about openms, such as for releases, developer meetings, sprints or
-conference talks are also made on this list.
-
-On this list please use bottom posting, reply to the list (rather than to
-another sender), and don't reply to digests. A searchable archive of this list
-is available [here](https://lists.sourceforge.net/lists/listinfo/open-ms-general/).
-
-***
-
-### [GitHub issue tracker](https://github.com/openms/openms/issues)
-
-- For bug reports;
-- documentation issues (e.g. "I found this section unclear");
-- and feature requests (e.g. "I would like to have a new interpolation method in `spectrum.sortByPosition()`").
-
-***
-
-### [OpenMS Documentation](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Documentation/release/latest/html/index.html)
-
-Documentation of the newest release including all classes and their functions and building instructions for several operating systems can be found [here](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Documentation/release/latest/html/index.html).
-
-An introduction to the core data structures and algorithms intended for new developers can be found [here](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Documentation/release/latest/html/OpenMS_tutorial.html).
-
-***
-
-### [pyOpenMS Documentation](https://pyopenms.readthedocs.io/en/latest/)
-
-Documentation on how to use OpenMS in python can be found here: [pyOpenMS](https://pyopenms.readthedocs.io/en/latest/)
-
-***
-
-### OpenMS in KNIME
-
-An introductory tutorial for using OpenMS tools in workflows using KNIME can be found in our documentation [OpenMS KNIME User Tutorial](https://openms.readthedocs.io/en/latest/tutorials/knime-user-tutorial.html).
-
-A general quick start guide for KNIME can be found [here](https://tech.knime.org/files/KNIME_quickstart.pdf) and the documentation for the KNIME Analytics Platform [here](https://tech.knime.org/documentation). There is also a separate forum for our community nodes in the KNIME community forums [here](https://tech.knime.org/forum/openms).
\ No newline at end of file
+
+ Where to start
+
+ User questions: The best way to get help is to post your question
+ to a site like
+ Stack Overflow ,
+ with thousands of users available to answer. We wish we could keep an eye on
+ these sites, or answer questions directly, but the volume is just a little
+ overwhelming!
+
+
+ Development issues: For OpenMS development-related matters (e.g.
+ bug reports), please see Community .
+
+
+
+
+ Discussion
+ OpenMS mailing list
+
+ The main forum for longer-form discussions — new features, roadmap changes,
+ and project-wide decisions. Announcements about releases, developer meetings,
+ sprints, and conference talks are also made here.
+
+
+ Join the mailing list
+ ·
+ Search the archive
+
+
+ Please use bottom posting, reply to the list (rather than to another sender),
+ and do not reply to digests.
+
+
+
+ Development
+ GitHub issue tracker
+
+ Use the tracker for bug reports, documentation issues (e.g. unclear sections),
+ and feature requests (e.g. new interpolation methods).
+
+
+ Open issues on GitHub
+
+
+
+ C++ / OpenMS
+ OpenMS documentation
+
+ Documentation for the newest release — all classes, functions, and build
+ instructions for several operating systems. Includes an introduction to core
+ data structures and algorithms for new developers.
+
+
+ Browse the docs
+ ·
+ Developer tutorial
+
+
+
+ Python
+ pyOpenMS documentation
+
+ Documentation on how to use OpenMS in Python.
+
+
+ Read pyOpenMS docs
+
+
+
diff --git a/content/en/news/_index.md b/content/en/news/_index.md
new file mode 100644
index 00000000..1ea2f362
--- /dev/null
+++ b/content/en/news/_index.md
@@ -0,0 +1,6 @@
+---
+title: News
+subtitle: Announcements, releases, workshops, and community updates from OpenMS.
+hidePageTitle: true
+hideShortcuts: true
+---
diff --git a/content/en/news/gsoc2025.md b/content/en/news/gsoc2025.md
index c545adb1..4cef78a8 100644
--- a/content/en/news/gsoc2025.md
+++ b/content/en/news/gsoc2025.md
@@ -3,6 +3,7 @@ title: GSoC 2025 – Two Projects Accepted!
authors: ["Matteo Pilz, Timo Sachsenberg"]
date: 2025-05-20
summary: We're thrilled to announce that two OpenMS projects have been accepted for Google Summer of Code 2025! 🚀
+type: news
---
🎉 OpenMS is part of GSoC 2025 – Two Projects Accepted!
diff --git a/content/en/openms-lib.md b/content/en/openms-lib.md
new file mode 100644
index 00000000..b4792c55
--- /dev/null
+++ b/content/en/openms-lib.md
@@ -0,0 +1,68 @@
+---
+title: OpenMS-lib
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
+
+
+
+
+
+
+
Infrastructure
+
+ The Open Source toolkit for mass spectrometry .
+
+
+ OpenMS-lib is a mature and reliable C++ framework for omics based mass spectrometry data analysis.
+
+
+
+
+
+
+
+
+ {{< openms-lib-highlights >}}
+
+
+ {{< heroitems variant="users" >}}
+
+
+ {{< heroitems variant="developers" >}}
+
+
+
+ {{< openms-lib-developers >}}
+
+
diff --git a/content/en/publications.md b/content/en/publications.md
index 40ae701e..769e034d 100644
--- a/content/en/publications.md
+++ b/content/en/publications.md
@@ -1,237 +1,218 @@
-# List of OpenMS Publications
-
-## 2025
-
-
-- Müller, Tom David; Siraj, Arslan; Walter, Axel; Kim, Jihyung; Wein, Samuel; von Kleist, Johannes; Feroz, Ayesha; Pilz, Matteo; Jeong, Kyowon; Sing, Justin Cyril; *OpenMS WebApps: Building User-Friendly Solutions for MS Analysis*. Journal of Proteome Research. 2025. [Link](https://www.ncbi.nlm.nih.gov/pubmed/39881492)
-
-- Sing, Justin Cyril; Charkow, Joshua; Walter, Axel; Gao, Mingxuan; Muller, Tom David; Bittremieux, Wout; Sachsenberg, Timo; Röst, Hannes Luc; *pyOpenMS-viz: Streamlining Mass Spectrometry Data Visualization with pandas*. Journal of Proteome Research. 2025. [Link](https://www.ncbi.nlm.nih.gov/pubmed/40019346)
-***
-## 2024
-
-
-- Kim, Jihyung; Jeong, Kyowon; Kaulich, Philipp T; Winkels, Konrad; Tholey, Andreas; Kohlbacher, Oliver; *FLASHQuant: a fast algorithm for proteoform quantification in top-down proteomics*. Analytical Chemistry. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/39424290)
-
-- Siraj, Arslan; Bouwmeester, Robbin; Declercq, Arthur; Welp, Luisa; Chernev, Aleksandar; Wulf, Alexander; Urlaub, Henning; Martens, Lennart; Degroeve, Sven; Kohlbacher, Oliver; *Intensity and retention time prediction improves the rescoring of protein‐nucleic acid cross‐links*. Proteomics. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/38629965)
-
-- Pfeuffer, Julianus; Bielow, Chris; Wein, Samuel; Jeong, Kyowon; Netz, Eugen; Walter, Axel; Alka, Oliver; Nilse, Lars; Colaianni, Pasquale Domenico; McCloskey, Douglas; *OpenMS 3 enables reproducible analysis of large-scale mass spectrometry data*. Nature methods. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/38366242)
-
-- Dai, Chengxin; Pfeuffer, Julianus; Wang, Hong; Zheng, Ping; Käll, Lukas; Sachsenberg, Timo; Demichev, Vadim; Bai, Mingze; Kohlbacher, Oliver; Perez-Riverol, Yasset; *quantms: a cloud-based pipeline for quantitative proteomics enables the reanalysis of public proteomics data*. Nature Methods. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/38965444)
-***
-## 2023
-
-
-- Kontou, Eftychia E; Walter, Axel; Alka, Oliver; Pfeuffer, Julianus; Sachsenberg, Timo; Mohite, Omkar S; Nuhamunada, Matin; Kohlbacher, Oliver; Weber, Tilmann; *UmetaFlow: an untargeted metabolomics workflow for high-throughput data processing and analysis*. Journal of Cheminformatics. 2023. [Link](https://www.ncbi.nlm.nih.gov/pubmed/37173725)
-
-- Bittremieux, Wout; Levitsky, Lev; Pilz, Matteo; Sachsenberg, Timo; Huber, Florian; Wang, Mingxun; Dorrestein, Pieter C; *Unified and standardized mass spectrometry data processing in Python using spectrum_utils*. Journal of proteome research. 2023. [Link](https://www.ncbi.nlm.nih.gov/pubmed/36688502)
-***
-## 2022
-
-
-- Luo, Xiyang; Bittremieux, Wout; Griss, Johannes; Deutsch, Eric W; Sachsenberg, Timo; Levitsky, Lev I; Ivanov, Mark V; Bubis, Julia A; Gabriels, Ralf; Webel, Henry; *A comprehensive evaluation of consensus spectrum generation methods in proteomics*. Journal of proteome research. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/35549218)
-
-- Jeong, Kyowon; Babović, Maša; Gorshkov, Vladimir; Kim, Jihyung; Jensen, Ole N; Kohlbacher, Oliver; *FLASHIda enables intelligent data acquisition for top–down proteomics to boost proteoform identification counts*. Nature communications. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/35906205)
-
-- Umer, Husen M; Audain, Enrique; Zhu, Yafeng; Pfeuffer, Julianus; Sachsenberg, Timo; Lehtiö, Janne; Branca, Rui M; Perez-Riverol, Yasset; *Generation of ENSEMBL-based proteogenomics databases boosts the identification of non-canonical peptides*. Bioinformatics. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/34904638)
-
-- Jeong, Kyowon; Kim, Jihyung; Kohlbacher, Oliver; *Mass Deconvolution of Top-Down Mass Spectrometry Datasets by FLASHDeconv*. Proteoform Identification: Methods and Protocols. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/35657592)
-***
-## 2021
-
-
-- Dai, Chengxin; Füllgrabe, Anja; Pfeuffer, Julianus; Solovyeva, Elizaveta M; Deng, Jingwen; Moreno, Pablo; Kamatchinathan, Selvakumar; Kundu, Deepti Jaiswal; George, Nancy; Fexova, Silvie; *A proteomics sample metadata representation for multiomics integration and big data analysis*. Nature Communications. 2021. [Link](https://www.ncbi.nlm.nih.gov/pubmed/34615866)
-
-- Bichmann, Leon; Gupta, Shubham; Rosenberger, George; Kuchenbecker, Leon; Sachsenberg, Timo; Ewels, Phil; Alka, Oliver; Pfeuffer, Julianus; Kohlbacher, Oliver; Rost, Hannes; *DIAproteomics: A multifunctional data analysis pipeline for data-independent acquisition proteomics and peptidomics*. Journal of proteome research. 2021
-
-- Marcu, Ana; Bichmann, Leon; Kuchenbecker, Leon; Kowalewski, Daniel Johannes; Freudenmann, Lena Katharina; Backert, Linus; Mühlenbruch, Lena; Szolek, András; Lübke, Maren; Wagner, Philipp; *HLA Ligand Atlas: a benign reference of HLA-presented peptides to improve T-cell-based cancer immunotherapy*. Journal for immunotherapy of cancer. 2021
-***
-## 2020
-
-
-- Wein, Samuel; Andrews, Byron; Sachsenberg, Timo; Santos-Rosa, Helena; Kohlbacher, Oliver; Kouzarides, Tony; Garcia, Benjamin A; Weisser, Hendrik; *A computational platform for high-throughput analysis of RNA sequences and modifications by mass spectrometry*. Nature communications. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/32066737)
-
-- Stützer, Alexandra; Welp, Luisa M; Raabe, Monika; Sachsenberg, Timo; Kappert, Christin; Wulf, Alexander; Lau, Andy M; David, Stefan-Sebastian; Chernev, Aleksandar; Kramer, Katharina; *Analysis of protein-DNA interactions in chromatin by UV induced cross-linking and mass spectrometry*. Nature communications. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/33067435)
-
-- Jeong, Kyowon; Kim, Jihyung; Gaikwad, Manasi; Hidayah, Siti Nurul; Heikaus, Laura; Schlüter, Hartmut; Kohlbacher, Oliver; *FLASHDeconv: ultrafast, high-quality feature deconvolution for top-down proteomics*. Cell Systems. 2020
-
-- Nothias, Louis-Félix; Petras, Daniel; Schmid, Robin; Dührkop, Kai; Rainer, Johannes; Sarvepalli, Abinesh; Protsyuk, Ivan; Ernst, Madeleine; Tsugawa, Hiroshi; Fleischauer, Markus; *Feature-based molecular networking in the GNPS analysis environment*. Nature methods. 2020
-
-- Rurik, Marc; Alka, Oliver; Aicheler, Fabian; Kohlbacher, Oliver; *Metabolomics data processing using OpenMS*. Computational Methods and Data Analysis for Metabolomics. 2020
-
-- Netz, Eugen; Dijkstra, Tjeerd MH; Sachsenberg, Timo; Zimmermann, Lukas; Walzer, Mathias; Monecke, Thomas; Ficner, Ralf; Dybkov, Olexandr; Urlaub, Henning; Kohlbacher, Oliver; *OpenPepXL: an open-source tool for sensitive identification of cross-linked peptides in XL-MS*. Molecular & Cellular Proteomics. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/33067342)
-
-- Scheidt, Tamara; Alka, Oliver; Gonczarowska-Jorge, Humberto; Gruber, Wolfgang; Rathje, Florian; Dell’Aica, Margherita; Rurik, Marc; Kohlbacher, Oliver; Zahedi, René P; Aberger, Fritz; *Phosphoproteomics of short-term hedgehog signaling in human medulloblastoma cells*. Cell Communication and Signaling. 2020
-
-- Kutuzova, Svetlana; Colaianni, Pasquale; Rost, Hannes; Sachsenberg, Timo; Alka, Oliver; Kohlbacher, Oliver; Burla, Bo; Torta, Federico; Schrubbers, Lars; Kristensen, Mette; *SmartPeak automates targeted and quantitative metabolomics data processing*. Analytical Chemistry. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/33269929)
-
-- Starke, Robert; Oliphant, Kaitlyn; Jehmlich, Nico; Schäpe, Stephanie Serena; Sachsenberg, Timo; Kohlbacher, Oliver; Allen-Vercoe, Emma; von Bergen, Martin; *Tracing incorporation of heavy water into proteins for species-specific metabolic activity in complex communities*. Journal of Proteomics. 2020
-***
-## 2019
-
-
-- Pfeuffer, Julianus; Sachsenberg, Timo; Dijkstra, Tjeerd MH; Serang, Oliver; Reinert, Knut; Kohlbacher, Oliver; *EPIFANY-A method for efficient high-confidence protein inference*. Journal of proteome research. 2019
-
-- Cain, Nicolas; Alka, Oliver; Segelke, Torben; von Wuthenau, Kristian; Kohlbacher, Oliver; Fischer, Markus; *Food fingerprinting: Mass spectrometric determination of the cocoa shell content (Theobroma cacao L.) in cocoa products by HPLC-QTOF-MS*. Food chemistry. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31260999)
-
-- Bichmann, Leon; Nelde, Annika; Ghosh, Michael; Heumos, Lukas; Mohr, Christopher; Peltzer, Alexander; Kuchenbecker, Leon; Sachsenberg, Timo; Walz, Juliane S; Stevanovic, Stefan; *MHCquant: automated and reproducible data analysis for immunopeptidomics*. Journal of proteome research. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31589052)
-
-- Löffler, Markus W; Mohr, Christopher; Bichmann, Leon; Freudenmann, Lena Katharina; Walzer, Mathias; Schroeder, Christopher M; Trautwein, Nico; Hilke, Franz J; Zinser, Raphael S; Mühlenbruch, Lena; *Multi-omics discovery of exome-derived neoantigens in hepatocellular carcinoma*. Genome medicine. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31039795)
-
-- Gruening, Bjorn; Sallou, Olivier; Moreno, Pablo; da Veiga Leprevost, Felipe; Ménager, Hervé; Søndergaard, Dan; Röst, Hannes; Sachsenberg, Timo; O'connor, Brian; Madeira, Fábio; *Recommendations for the packaging and containerizing of bioinformatics software*. F1000Research. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31543945)
-
-- Hulstaert, Niels; Shofstahl, Jim; Sachsenberg, Timo; Walzer, Mathias; Barsnes, Harald; Martens, Lennart; Perez-Riverol, Yasset; *ThermoRawFileParser: modular, scalable, and cross-platform RAW file conversion*. Journal of proteome research. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31755270)
-
-- Licha, David; Vidali, Silvia; Aminzadeh-Gohari, Sepideh; Alka, Oliver; Breitkreuz, Leander; Kohlbacher, Oliver; Reischl, Roland J; Feichtinger, René G; Kofler, Barbara; Huber, Christian G; *Untargeted metabolomics reveals molecular effects of ketogenic diet on healthy and tumor xenograft mouse models*. International journal of molecular sciences. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31398922)
-***
-## 2018
-
-
-- Kahles, André; Lehmann, Kjong-Van; Toussaint, Nora C; Hüser, Matthias; Stark, Stefan G; Sachsenberg, Timo; Stegle, Oliver; Kohlbacher, Oliver; Sander, Chris; Caesar-Johnson, Samantha J; *Comprehensive analysis of alternative splicing across tumors from 8,705 patients*. Cancer cell. 2018. [Link](https://www.ncbi.nlm.nih.gov/pubmed/30078747)
-***
-## 2017
-
-
-- Röst, Hannes L; Aebersold, Ruedi; Schubert, Olga T; *Automated SWATH data analysis using targeted extraction of ion chromatograms*. Proteomics: Methods and Protocols. 2017. [Link](https://www.ncbi.nlm.nih.gov/pubmed/28188537)
-
-- da Veiga Leprevost, Felipe; Grüning, Björn A; Alves Aflitos, Saulo; Röst, Hannes L; Uszkoreit, Julian; Barsnes, Harald; Vaudel, Marc; Moreno, Pablo; Gatto, Laurent; Weber, Jonas; *BioContainers: an open-source and community-driven framework for software standardization*. Bioinformatics. 2017. [Link](https://www.ncbi.nlm.nih.gov/pubmed/28379341)
-
-- Audain, Enrique; Uszkoreit, Julian; Sachsenberg, Timo; Pfeuffer, Julianus; Liang, Xiao; Hermjakob, Henning; Sanchez, Aniel; Eisenacher, Martin; Reinert, Knut; Tabb, David L; *In-depth analysis of protein inference algorithms using multiple search engines and well-defined metrics*. Journal of proteomics. 2017. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27498275)
-
-- Pfeuffer, Julianus; Sachsenberg, Timo; Alka, Oliver; Walzer, Mathias; Fillbrunn, Alexander; Nilse, Lars; Schilling, Oliver; Reinert, Knut; Kohlbacher, Oliver; *OpenMS–a platform for reproducible analysis of mass spectrometry data*. Journal of biotechnology. 2017
-
-- Weisser, Hendrik; Choudhary, Jyoti S; *Targeted feature detection for data-dependent shotgun proteomics*. Journal of proteome research. 2017
-
-- Vizcaíno, Juan Antonio; Mayer, Gerhard; Perkins, Simon R; Barsnes, Harald; Vaudel, Marc; Perez-Riverol, Yasset; Ternent, Tobias; Uszkoreit, Julian; Eisenacher, Martin; Fischer, Lutz; *The mzIdentML data standard version 1.2, supporting advances in proteome informatics*. Molecular & Cellular Proteomics. 2017
-***
-## 2016
-
-
-- Navarro, Pedro; Kuharev, Jörg; Gillet, Ludovic C; Bernhardt, Oliver M; MacLean, Brendan; Röst, Hannes L; Tate, Stephen A; Tsou, Chih-Chiang; Reiter, Lukas; Distler, Ute; *A multicenter study benchmarks software tools for label-free proteome quantification*. Nature biotechnology. 2016. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27701404)
-
-- Weisser, Hendrik; Wright, James C; Mudge, Jonathan M; Gutenbrunner, Petra; Choudhary, Jyoti S; *Flexible data analysis pipeline for high-confidence proteogenomics*. Journal of Proteome Research. 2016. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27786492)
-
-- Veit, Johannes; Sachsenberg, Timo; Chernev, Aleksandar; Aicheler, Fabian; Urlaub, Henning; Kohlbacher, Oliver; *LFQProfiler and RNPxl: open-source tools for label-free quantification and protein–RNA cross-linking integrated into proteome discoverer*. Journal of proteome research. 2016. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27476824)
-
-- Röst, Hannes L; Sachsenberg, Timo; Aiche, Stephan; Bielow, Chris; Weisser, Hendrik; Aicheler, Fabian; Andreotti, Sandro; Ehrlich, Hans-Christian; Gutenbrunner, Petra; Kenar, Erhan; *OpenMS: a flexible open-source software platform for mass spectrometry data analysis*. Nature methods. 2016
-
-- Perez-Riverol, Yasset; Gatto, Laurent; Wang, Rui; Sachsenberg, Timo; Uszkoreit, Julian; da Veiga Leprevost, Felipe; Fufezan, Christian; Ternent, Tobias; Eglen, Stephen J; Katz, Daniel S; *Ten simple rules for taking advantage of Git and GitHub*. PLoS computational biology. 2016
-***
-## 2015
-
-
-- Röst, Hannes L; Rosenberger, George; Aebersold, Ruedi; Malmström, Lars; *Efficient visualization of high-throughput targeted proteomics experiments: TAPIR*. Bioinformatics. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25788625)
-
-- Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars; *Fast and efficient XML data access for next-generation mass spectrometry*. PloS one. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25927999)
-
-- Sachsenberg, Timo; Herbst, Florian-Alexander; Taubert, Martin; Kermer, Rene; Jehmlich, Nico; Von Bergen, Martin; Seifert, Jana; Kohlbacher, Oliver; *MetaProSIP: automated inference of stable isotope incorporation rates in proteins for functional metaproteomics*. Journal of proteome research. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25412983)
-
-- Ranninger, Christina; Rurik, Marc; Limonciel, Alice; Ruzek, Silke; Reischl, Roland; Wilmes, Anja; Jennings, Paul; Hewitt, Philip; Dekant, Wolfgang; Kohlbacher, Oliver; *Nephron toxicity profiling via untargeted metabolome analysis employing a high performance liquid chromatography-mass spectrometry-based experimental and computational pipeline*. Journal of Biological Chemistry. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/26055719)
-
-- Aicheler, Fabian; Li, Jia; Hoene, Miriam; Lehmann, Rainer; Xu, Guowang; Kohlbacher, Oliver; *Retention time prediction improves identification in nontargeted lipidomics approaches*. Analytical chemistry. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/26145158)
-
-- Nilse, Lars; Sigloch, Florian Christoph; Biniossek, Martin L; Schilling, Oliver; *Toward improved peptide feature detection in quantitative proteomics using stable isotope labeling*. PROTEOMICS–Clinical Applications. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25931027)
-
-- Aiche, Stephan; Sachsenberg, Timo; Kenar, Erhan; Walzer, Mathias; Wiswedel, Bernd; Kristl, Theresa; Boyles, Matthew; Duschl, Albert; Huber, Christian G; Berthold, Michael R; *Workflows for automated downstream data analysis and visualization in large‐scale computational mass spectrometry*. Proteomics. 2015
-***
-## 2014
-
-
-- Kenar, Erhan; Franken, Holger; Forcisi, Sara; Wörmann, Kilian; Häring, Hans-Ulrich; Lehmann, Rainer; Schmitt-Kopplin, Philippe; Zell, Andreas; Kohlbacher, Oliver; *Automated label-free quantification of metabolites from liquid chromatography–mass spectrometry data*. Molecular & Cellular Proteomics. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/24176773)
-
-- Röst, Hannes L; Rosenberger, George; Navarro, Pedro; Gillet, Ludovic; Miladinović, Saša M; Schubert, Olga T; Wolski, Witold; Collins, Ben C; Malmström, Johan; Malmström, Lars; *OpenSWATH enables automated, targeted analysis of data-independent acquisition MS data*. Nature biotechnology. 2014
-
-- Kramer, Katharina; Sachsenberg, Timo; Beckmann, Benedikt M; Qamar, Saadia; Boon, Kum-Loong; Hentze, Matthias W; Kohlbacher, Oliver; Urlaub, Henning; *Photo-cross-linking and high-resolution mass spectrometry for assignment of RNA-binding sites in RNA-binding proteins*. Nature methods. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25173706)
-
-- Griss, Johannes; Jones, Andrew R; Sachsenberg, Timo; Walzer, Mathias; Gatto, Laurent; Hartler, Jürgen; Thallinger, Gerhard G; Salek, Reza M; Steinbeck, Christoph; Neuhauser, Nadin; *The mzTab data exchange format: communicating mass-spectrometry-based proteomics and metabolomics experimental results to a wider audience*. Molecular & Cellular Proteomics. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/24980485)
-
-- Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars; *pyOpenMS: a Python‐based interface to the OpenMS mass‐spectrometry algorithm library*. Proteomics. 2014
-
-- Walzer, Mathias; Pernas, Lucia Espona; Nasso, Sara; Bittremieux, Wout; Nahnsen, Sven; Kelchtermans, Pieter; Pichler, Peter; van den Toorn, Henk WP; Staes, An; Vandenbussche, Jonathan; *qcML: an exchange format for quality control metrics from mass spectrometry experiments*. Molecular & Cellular Proteomics. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/24760958)
-***
-## 2013
-
-
-- Weisser, Hendrik; Nahnsen, Sven; Grossmann, Jonas; Nilse, Lars; Quandt, Andreas; Brauer, Hendrik; Sturm, Marc; Kenar, Erhan; Kohlbacher, Oliver; Aebersold, Ruedi; *An automated pipeline for high-throughput label-free quantitative proteomics*. Journal of proteome research. 2013
-
-- Walzer, Mathias; Qi, Da; Mayer, Gerhard; Uszkoreit, Julian; Eisenacher, Martin; Sachsenberg, Timo; Gonzalez-Galarza, Faviel F; Fan, Jun; Bessant, Conrad; Deutsch, Eric W; *The mzQuantML data standard for mass spectrometry-based quantitative studies in proteomics*. Molecular & Cellular Proteomics. 2013
-
-- Nahnsen, Sven; Bielow, Chris; Reinert, Knut; Kohlbacher, Oliver; *Tools for label-free peptide quantification*. Molecular & Cellular Proteomics. 2013
-***
-## 2012
-
-
-- Nahnsen, Sven; Kohlbacher, Oliver; *In silico design of targeted SRM-based experiments*. BMC bioinformatics. 2012. [Link](https://www.ncbi.nlm.nih.gov/pubmed/23176520)
-
-- Junker, Johannes; Bielow, Chris; Bertsch, Andreas; Sturm, Marc; Reinert, Knut; Kohlbacher, Oliver; *TOPPAS: a graphical workflow editor for the analysis of high-throughput proteomics data*. Journal of proteome research. 2012. [Link](https://www.ncbi.nlm.nih.gov/pubmed/22583024)
-
-- Jones, Andrew R; Eisenacher, Martin; Mayer, Gerhard; Kohlbacher, Oliver; Siepen, Jennifer; Hubbard, Simon J; Selley, Julian N; Searle, Brian C; Shofstahl, James; Seymour, Sean L; *The mzIdentML data standard for mass spectrometry-based proteomics results*. Molecular & cellular proteomics. 2012
-***
-## 2011
-
-
-- Bielow, Chris; Aiche, Stephan; Andreotti, Sandro; Reinert, Knut; *MSSimulator: Simulation of mass spectrometry data*. Journal of proteome research. 2011. [Link](https://www.ncbi.nlm.nih.gov/pubmed/21526843)
-
-- Bertsch, Andreas; Gröpl, Clemens; Reinert, Knut; Kohlbacher, Oliver; *OpenMS and TOPP: open source software for LC-MS data analysis*. Data Mining in Proteomics: From Standards to Applications. 2011
-
-- Nahnsen, Sven; Bertsch, Andreas; Rahnenführer, Jörg; Nordheim, Alfred; Kohlbacher, Oliver; *Probabilistic consensus scoring improves tandem mass spectrometry peptide identification*. Journal of proteome research. 2011. [Link](https://www.ncbi.nlm.nih.gov/pubmed/21644507)
-***
-## 2010
-
-
-- Bertsch, Andreas; Jung, Stephan; Zerck, Alexandra; Pfeifer, Nico; Nahnsen, Sven; Henneges, Carsten; Nordheim, Alfred; Kohlbacher, Oliver; *Optimal de novo design of MRM experiments for rapid assay development in targeted proteomics*. Journal of proteome research. 2010. [Link](https://www.ncbi.nlm.nih.gov/pubmed/20201589)
-
-- Gesing, Sandra; van Hemert, Jano; Koetsier, Jos; Bertsch, Andreas; Kohlbacher, Oliver; *TOPP goes Rapid The OpenMS Proteomics Pipeline in a Grid-Enabled Web Portal*. Proceedings of the 2010 10th IEEE/ACM International Conference on Cluster, Cloud and Grid Computing. 2010
-***
-## 2009
-
-
-- Bertsch, Andreas; Leinenbach, Andreas; Pervukhin, Anton; Lubeck, Markus; Hartmer, Ralf; Baessmann, Carsten; Elnakady, Yasser Abbas; Müller, Rolf; Böcker, Sebastian; Huber, Christian G; *De novo peptide sequencing by tandem MS using complementary CID and electron transfer dissociation*. Electrophoresis. 2009
-
-- Pfeifer, Nico; Leinenbach, Andreas; Huber, Christian G; Kohlbacher, Oliver; *Improving peptide identification in proteome analysis by a two-dimensional retention time filtering approach*. Journal of proteome research. 2009. [Link](https://www.ncbi.nlm.nih.gov/pubmed/19492844)
-
-- Reinert, Knut; Kohlbacher, Oliver; *OpenMS and TOPP: open source software for LC-MS data analysis*. Proteome Bioinformatics. 2009
-
-- Nilse, Lars; Sturm, Marc; Trudgian, David; Salek, Mogjiborahman; Sims, Paul FG; Carroll, Kathleen M; Hubbard, Simon J; *SILACAnalyzer-a tool for differential quantitation of stable isotope derived data*. International Meeting on Computational Intelligence Methods for Bioinformatics and Biostatistics. 2009
-
-- Sturm, Marc; Kohlbacher, Oliver; *TOPPView: an open-source viewer for mass spectrometry data*. Journal of proteome research. 2009. [Link](https://www.ncbi.nlm.nih.gov/pubmed/19425593)
-***
-## 2008
-
-
-- Lange, Eva; *Analysis of mass spectrometric data: peak picking and map alignment*. Freie Universtaet Berlin. 2008
-
-- Schulz-Trieglaff, Ole; Hussong, Rene; Gröpl, Clemens; Leinenbach, Andreas; Hildebrandt, Andreas; Huber, Christian; Reinert, Knut; *Computational quantification of peptides from LC-MS data*. Journal of Computational Biology. 2008
-
-- Lange, Eva; Tautenhahn, Ralf; Neumann, Steffen; Gröpl, Clemens; *Critical assessment of alignment procedures for LC-MS proteomics and metabolomics measurements*. BMC bioinformatics. 2008. [Link](https://www.ncbi.nlm.nih.gov/pubmed/18793413)
-
-- Schulz-Trieglaff, Ole; Pfeifer, Nico; Gröpl, Clemens; Kohlbacher, Oliver; Reinert, Knut; *LC-MSsim–a simulation software for liquid chromatography mass spectrometry data*. BMC bioinformatics. 2008. [Link](https://www.ncbi.nlm.nih.gov/pubmed/18842122)
-
-- Sturm, Marc; Bertsch, Andreas; Gröpl, Clemens; Hildebrandt, Andreas; Hussong, Rene; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Zerck, Alexandra; Reinert, Knut; *OpenMS–an open-source software framework for mass spectrometry*. BMC bioinformatics. 2008
-***
-## 2007
-
-
-- Schulz-Trieglaff, Ole; Hussong, Rene; Gröpl, Clemens; Hildebrandt, Andreas; Reinert, Knut; *A fast and accurate algorithm for the quantification of peptides from mass spectrometry data*. Research in Computational Molecular Biology: 11th Annual International Conference, RECOMB 2007, Oakland, CA, USA, April 21-25, 2007. Proceedings 11. 2007
-
-- Lange, Eva; Gröpl, Clemens; Schulz-Trieglaff, Ole; Leinenbach, Andreas; Huber, Christian; Reinert, Knut; *A geometric approach for the alignment of liquid chromatography—mass spectrometry data*. Bioinformatics. 2007
-
-- Sturm, Marc; *TOPP The OpenMS Proteomics Pipeline*. Proceedings of the 5th European. 2007
-
-- Kohlbacher, Oliver; Reinert, Knut; Gröpl, Clemens; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Sturm, Marc; *TOPP—the OpenMS proteomics pipeline*. Bioinformatics. 2007. [Link](https://www.ncbi.nlm.nih.gov/pubmed/17237091)
-***
-## 2006
-
-
-- Lange, Eva; Gröpl, Clemens; Reinert, Knut; Kohlbacher, Oliver; Hildebrandt, Andreas; *High-accuracy peak picking of proteomics data using wavelet techniques*. Biocomputing 2006. 2006. [Link](https://www.ncbi.nlm.nih.gov/pubmed/17094243)
-***
-## 2005
-
-
-- Groepl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L; *Absolute quantification of myoglobin content in blood serum using HPLC/MS through automatic bioinformatics analysis*. MOLECULAR & CELLULAR PROTEOMICS. 2005
-
-- Gröpl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L; *Algorithms for the automated absolute quantification of diagnostic markers in complex proteomics samples*. Computational Life Sciences: First International Symposium, CompLife 2005, Konstanz, Germany, September 25-27, 2005. Proceedings 1. 2005
-
-- Lange, E; Reinert, K; Groepl, C; Kohlbacher, O; Sturm, M; Hildebrandt, A; *OPENMS; a generic open source framework for chromatography/MS-based proteomics*. Molecular & Cellular Proteomics. 2005
-
-- Gröpl, C; Hildebrandt, A; Kohlbacher, O; Lange, E; Lövenich, S; Sturm, M; *OpenMS-Software for Mass Spectrometry*. Poster presented at the MBI Workshop on Computational Proteomics and Mass Spectrometry. 2005
-***
+---
+title: Publications
+sidebar: false
+hideShortcuts: true
+hidePageTitle: true
+---
+
+
+ Key publications
+
+
+
+ Primary cite
+ OpenMS software
+
+
+
+ Nature Methods
+ 2024
+
+ Pfeuffer, Julianus; Bielow, Chris; Wein, Samuel; Jeong, Kyowon; Netz, Eugen; Walter, Axel; Alka, Oliver; Nilse, Lars; Colaianni, Pasquale Domenico; McCloskey, Douglas
+ View on PubMed
+
+
+
+ Also cite
+ pyOpenMS
+
+
+
+ Proteomics
+ 2014
+
+ Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars
+ View on PubMed
+
+
+
+
+
+{{< publications-year-select >}}
+
+
+
+
+ OpenMS WebApps: Building User-Friendly Solutions for MS Analysis
Journal of Proteome Research · 2025
Müller, Tom David; Siraj, Arslan; Walter, Axel; Kim, Jihyung; Wein, Samuel; von Kleist, Johannes; Feroz, Ayesha; Pilz, Matteo; Jeong, Kyowon; Sing, Justin Cyril
+ pyOpenMS-viz: Streamlining Mass Spectrometry Data Visualization with pandas
Journal of Proteome Research · 2025
Sing, Justin Cyril; Charkow, Joshua; Walter, Axel; Gao, Mingxuan; Muller, Tom David; Bittremieux, Wout; Sachsenberg, Timo; Röst, Hannes Luc
+
+
+
+
+ FLASHQuant: a fast algorithm for proteoform quantification in top-down proteomics
Analytical Chemistry · 2024
Kim, Jihyung; Jeong, Kyowon; Kaulich, Philipp T; Winkels, Konrad; Tholey, Andreas; Kohlbacher, Oliver
+ Intensity and retention time prediction improves the rescoring of protein‐nucleic acid cross‐links
Proteomics · 2024
Siraj, Arslan; Bouwmeester, Robbin; Declercq, Arthur; Welp, Luisa; Chernev, Aleksandar; Wulf, Alexander; Urlaub, Henning; Martens, Lennart; Degroeve, Sven; Kohlbacher, Oliver
+ quantms: a cloud-based pipeline for quantitative proteomics enables the reanalysis of public proteomics data
Nature Methods · 2024
Dai, Chengxin; Pfeuffer, Julianus; Wang, Hong; Zheng, Ping; Käll, Lukas; Sachsenberg, Timo; Demichev, Vadim; Bai, Mingze; Kohlbacher, Oliver; Perez-Riverol, Yasset
+
+
+
+
+ UmetaFlow: an untargeted metabolomics workflow for high-throughput data processing and analysis
Journal of Cheminformatics · 2023
Kontou, Eftychia E; Walter, Axel; Alka, Oliver; Pfeuffer, Julianus; Sachsenberg, Timo; Mohite, Omkar S; Nuhamunada, Matin; Kohlbacher, Oliver; Weber, Tilmann
+ Unified and standardized mass spectrometry data processing in Python using spectrum_utils
Journal of proteome research · 2023
Bittremieux, Wout; Levitsky, Lev; Pilz, Matteo; Sachsenberg, Timo; Huber, Florian; Wang, Mingxun; Dorrestein, Pieter C
+
+
+
+
+ A comprehensive evaluation of consensus spectrum generation methods in proteomics
Journal of proteome research · 2022
Luo, Xiyang; Bittremieux, Wout; Griss, Johannes; Deutsch, Eric W; Sachsenberg, Timo; Levitsky, Lev I; Ivanov, Mark V; Bubis, Julia A; Gabriels, Ralf; Webel, Henry
+ FLASHIda enables intelligent data acquisition for top–down proteomics to boost proteoform identification counts
Nature communications · 2022
Jeong, Kyowon; Babović, Maša; Gorshkov, Vladimir; Kim, Jihyung; Jensen, Ole N; Kohlbacher, Oliver
+ Generation of ENSEMBL-based proteogenomics databases boosts the identification of non-canonical peptides
Bioinformatics · 2022
Umer, Husen M; Audain, Enrique; Zhu, Yafeng; Pfeuffer, Julianus; Sachsenberg, Timo; Lehtiö, Janne; Branca, Rui M; Perez-Riverol, Yasset
+ Mass Deconvolution of Top-Down Mass Spectrometry Datasets by FLASHDeconv
Proteoform Identification: Methods and Protocols · 2022
Jeong, Kyowon; Kim, Jihyung; Kohlbacher, Oliver
+
+
+
+
+ A proteomics sample metadata representation for multiomics integration and big data analysis
Nature Communications · 2021
Dai, Chengxin; Füllgrabe, Anja; Pfeuffer, Julianus; Solovyeva, Elizaveta M; Deng, Jingwen; Moreno, Pablo; Kamatchinathan, Selvakumar; Kundu, Deepti Jaiswal; George, Nancy; Fexova, Silvie
+ DIAproteomics: A multifunctional data analysis pipeline for data-independent acquisition proteomics and peptidomics
Journal of proteome research · 2021
Bichmann, Leon; Gupta, Shubham; Rosenberger, George; Kuchenbecker, Leon; Sachsenberg, Timo; Ewels, Phil; Alka, Oliver; Pfeuffer, Julianus; Kohlbacher, Oliver; Rost, Hannes
+ HLA Ligand Atlas: a benign reference of HLA-presented peptides to improve T-cell-based cancer immunotherapy
Journal for immunotherapy of cancer · 2021
Marcu, Ana; Bichmann, Leon; Kuchenbecker, Leon; Kowalewski, Daniel Johannes; Freudenmann, Lena Katharina; Backert, Linus; Mühlenbruch, Lena; Szolek, András; Lübke, Maren; Wagner, Philipp
+
+
+
+
+ A computational platform for high-throughput analysis of RNA sequences and modifications by mass spectrometry
Nature communications · 2020
Wein, Samuel; Andrews, Byron; Sachsenberg, Timo; Santos-Rosa, Helena; Kohlbacher, Oliver; Kouzarides, Tony; Garcia, Benjamin A; Weisser, Hendrik
+ Analysis of protein-DNA interactions in chromatin by UV induced cross-linking and mass spectrometry
Nature communications · 2020
Stützer, Alexandra; Welp, Luisa M; Raabe, Monika; Sachsenberg, Timo; Kappert, Christin; Wulf, Alexander; Lau, Andy M; David, Stefan-Sebastian; Chernev, Aleksandar; Kramer, Katharina
+ FLASHDeconv: ultrafast, high-quality feature deconvolution for top-down proteomics
Cell Systems · 2020
Jeong, Kyowon; Kim, Jihyung; Gaikwad, Manasi; Hidayah, Siti Nurul; Heikaus, Laura; Schlüter, Hartmut; Kohlbacher, Oliver
+ Feature-based molecular networking in the GNPS analysis environment
Nature methods · 2020
Nothias, Louis-Félix; Petras, Daniel; Schmid, Robin; Dührkop, Kai; Rainer, Johannes; Sarvepalli, Abinesh; Protsyuk, Ivan; Ernst, Madeleine; Tsugawa, Hiroshi; Fleischauer, Markus
+ Metabolomics data processing using OpenMS
Computational Methods and Data Analysis for Metabolomics · 2020
Rurik, Marc; Alka, Oliver; Aicheler, Fabian; Kohlbacher, Oliver
+ OpenPepXL: an open-source tool for sensitive identification of cross-linked peptides in XL-MS
Molecular & Cellular Proteomics · 2020
Netz, Eugen; Dijkstra, Tjeerd MH; Sachsenberg, Timo; Zimmermann, Lukas; Walzer, Mathias; Monecke, Thomas; Ficner, Ralf; Dybkov, Olexandr; Urlaub, Henning; Kohlbacher, Oliver
+ Phosphoproteomics of short-term hedgehog signaling in human medulloblastoma cells
Cell Communication and Signaling · 2020
Scheidt, Tamara; Alka, Oliver; Gonczarowska-Jorge, Humberto; Gruber, Wolfgang; Rathje, Florian; Dell’Aica, Margherita; Rurik, Marc; Kohlbacher, Oliver; Zahedi, René P; Aberger, Fritz
+ SmartPeak automates targeted and quantitative metabolomics data processing
Analytical Chemistry · 2020
Kutuzova, Svetlana; Colaianni, Pasquale; Rost, Hannes; Sachsenberg, Timo; Alka, Oliver; Kohlbacher, Oliver; Burla, Bo; Torta, Federico; Schrubbers, Lars; Kristensen, Mette
+ Tracing incorporation of heavy water into proteins for species-specific metabolic activity in complex communities
Journal of Proteomics · 2020
Starke, Robert; Oliphant, Kaitlyn; Jehmlich, Nico; Schäpe, Stephanie Serena; Sachsenberg, Timo; Kohlbacher, Oliver; Allen-Vercoe, Emma; von Bergen, Martin
+
+
+
+
+ EPIFANY-A method for efficient high-confidence protein inference
Journal of proteome research · 2019
Pfeuffer, Julianus; Sachsenberg, Timo; Dijkstra, Tjeerd MH; Serang, Oliver; Reinert, Knut; Kohlbacher, Oliver
+ Food fingerprinting: Mass spectrometric determination of the cocoa shell content (Theobroma cacao L.) in cocoa products by HPLC-QTOF-MS
Food chemistry · 2019
Cain, Nicolas; Alka, Oliver; Segelke, Torben; von Wuthenau, Kristian; Kohlbacher, Oliver; Fischer, Markus
+ MHCquant: automated and reproducible data analysis for immunopeptidomics
Journal of proteome research · 2019
Bichmann, Leon; Nelde, Annika; Ghosh, Michael; Heumos, Lukas; Mohr, Christopher; Peltzer, Alexander; Kuchenbecker, Leon; Sachsenberg, Timo; Walz, Juliane S; Stevanovic, Stefan
+ Multi-omics discovery of exome-derived neoantigens in hepatocellular carcinoma
Genome medicine · 2019
Löffler, Markus W; Mohr, Christopher; Bichmann, Leon; Freudenmann, Lena Katharina; Walzer, Mathias; Schroeder, Christopher M; Trautwein, Nico; Hilke, Franz J; Zinser, Raphael S; Mühlenbruch, Lena
+ Recommendations for the packaging and containerizing of bioinformatics software
F1000Research · 2019
Gruening, Bjorn; Sallou, Olivier; Moreno, Pablo; da Veiga Leprevost, Felipe; Ménager, Hervé; Søndergaard, Dan; Röst, Hannes; Sachsenberg, Timo; O'connor, Brian; Madeira, Fábio
+ ThermoRawFileParser: modular, scalable, and cross-platform RAW file conversion
Journal of proteome research · 2019
Hulstaert, Niels; Shofstahl, Jim; Sachsenberg, Timo; Walzer, Mathias; Barsnes, Harald; Martens, Lennart; Perez-Riverol, Yasset
+ Untargeted metabolomics reveals molecular effects of ketogenic diet on healthy and tumor xenograft mouse models
International journal of molecular sciences · 2019
Licha, David; Vidali, Silvia; Aminzadeh-Gohari, Sepideh; Alka, Oliver; Breitkreuz, Leander; Kohlbacher, Oliver; Reischl, Roland J; Feichtinger, René G; Kofler, Barbara; Huber, Christian G
+
+
+
+
+ Comprehensive analysis of alternative splicing across tumors from 8,705 patients
Cancer cell · 2018
Kahles, André; Lehmann, Kjong-Van; Toussaint, Nora C; Hüser, Matthias; Stark, Stefan G; Sachsenberg, Timo; Stegle, Oliver; Kohlbacher, Oliver; Sander, Chris; Caesar-Johnson, Samantha J
+
+
+
+
+ Automated SWATH data analysis using targeted extraction of ion chromatograms
Proteomics: Methods and Protocols · 2017
Röst, Hannes L; Aebersold, Ruedi; Schubert, Olga T
+ BioContainers: an open-source and community-driven framework for software standardization
Bioinformatics · 2017
da Veiga Leprevost, Felipe; Grüning, Björn A; Alves Aflitos, Saulo; Röst, Hannes L; Uszkoreit, Julian; Barsnes, Harald; Vaudel, Marc; Moreno, Pablo; Gatto, Laurent; Weber, Jonas
+ In-depth analysis of protein inference algorithms using multiple search engines and well-defined metrics
Journal of proteomics · 2017
Audain, Enrique; Uszkoreit, Julian; Sachsenberg, Timo; Pfeuffer, Julianus; Liang, Xiao; Hermjakob, Henning; Sanchez, Aniel; Eisenacher, Martin; Reinert, Knut; Tabb, David L
+ OpenMS–a platform for reproducible analysis of mass spectrometry data
Journal of biotechnology · 2017
Pfeuffer, Julianus; Sachsenberg, Timo; Alka, Oliver; Walzer, Mathias; Fillbrunn, Alexander; Nilse, Lars; Schilling, Oliver; Reinert, Knut; Kohlbacher, Oliver
+ Targeted feature detection for data-dependent shotgun proteomics
Journal of proteome research · 2017
Weisser, Hendrik; Choudhary, Jyoti S
+ The mzIdentML data standard version 1.2, supporting advances in proteome informatics
Molecular & Cellular Proteomics · 2017
Vizcaíno, Juan Antonio; Mayer, Gerhard; Perkins, Simon R; Barsnes, Harald; Vaudel, Marc; Perez-Riverol, Yasset; Ternent, Tobias; Uszkoreit, Julian; Eisenacher, Martin; Fischer, Lutz
+
+
+
+
+ A multicenter study benchmarks software tools for label-free proteome quantification
Nature biotechnology · 2016
Navarro, Pedro; Kuharev, Jörg; Gillet, Ludovic C; Bernhardt, Oliver M; MacLean, Brendan; Röst, Hannes L; Tate, Stephen A; Tsou, Chih-Chiang; Reiter, Lukas; Distler, Ute
+ Flexible data analysis pipeline for high-confidence proteogenomics
Journal of Proteome Research · 2016
Weisser, Hendrik; Wright, James C; Mudge, Jonathan M; Gutenbrunner, Petra; Choudhary, Jyoti S
+ LFQProfiler and RNPxl: open-source tools for label-free quantification and protein–RNA cross-linking integrated into proteome discoverer
Journal of proteome research · 2016
Veit, Johannes; Sachsenberg, Timo; Chernev, Aleksandar; Aicheler, Fabian; Urlaub, Henning; Kohlbacher, Oliver
+ OpenMS: a flexible open-source software platform for mass spectrometry data analysis
Nature methods · 2016
Röst, Hannes L; Sachsenberg, Timo; Aiche, Stephan; Bielow, Chris; Weisser, Hendrik; Aicheler, Fabian; Andreotti, Sandro; Ehrlich, Hans-Christian; Gutenbrunner, Petra; Kenar, Erhan
+ Ten simple rules for taking advantage of Git and GitHub
PLoS computational biology · 2016
Perez-Riverol, Yasset; Gatto, Laurent; Wang, Rui; Sachsenberg, Timo; Uszkoreit, Julian; da Veiga Leprevost, Felipe; Fufezan, Christian; Ternent, Tobias; Eglen, Stephen J; Katz, Daniel S
+
+
+
+
+ Efficient visualization of high-throughput targeted proteomics experiments: TAPIR
Bioinformatics · 2015
Röst, Hannes L; Rosenberger, George; Aebersold, Ruedi; Malmström, Lars
+ Fast and efficient XML data access for next-generation mass spectrometry
PloS one · 2015
Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars
+ MetaProSIP: automated inference of stable isotope incorporation rates in proteins for functional metaproteomics
Journal of proteome research · 2015
Sachsenberg, Timo; Herbst, Florian-Alexander; Taubert, Martin; Kermer, Rene; Jehmlich, Nico; Von Bergen, Martin; Seifert, Jana; Kohlbacher, Oliver
+ Nephron toxicity profiling via untargeted metabolome analysis employing a high performance liquid chromatography-mass spectrometry-based experimental and computational pipeline
Journal of Biological Chemistry · 2015
Ranninger, Christina; Rurik, Marc; Limonciel, Alice; Ruzek, Silke; Reischl, Roland; Wilmes, Anja; Jennings, Paul; Hewitt, Philip; Dekant, Wolfgang; Kohlbacher, Oliver
+ Retention time prediction improves identification in nontargeted lipidomics approaches
Analytical chemistry · 2015
Aicheler, Fabian; Li, Jia; Hoene, Miriam; Lehmann, Rainer; Xu, Guowang; Kohlbacher, Oliver
+ Toward improved peptide feature detection in quantitative proteomics using stable isotope labeling
PROTEOMICS–Clinical Applications · 2015
Nilse, Lars; Sigloch, Florian Christoph; Biniossek, Martin L; Schilling, Oliver
+ Workflows for automated downstream data analysis and visualization in large‐scale computational mass spectrometry
Proteomics · 2015
Aiche, Stephan; Sachsenberg, Timo; Kenar, Erhan; Walzer, Mathias; Wiswedel, Bernd; Kristl, Theresa; Boyles, Matthew; Duschl, Albert; Huber, Christian G; Berthold, Michael R
+
+
+
+
+ Automated label-free quantification of metabolites from liquid chromatography–mass spectrometry data
Molecular & Cellular Proteomics · 2014
Kenar, Erhan; Franken, Holger; Forcisi, Sara; Wörmann, Kilian; Häring, Hans-Ulrich; Lehmann, Rainer; Schmitt-Kopplin, Philippe; Zell, Andreas; Kohlbacher, Oliver
+ OpenSWATH enables automated, targeted analysis of data-independent acquisition MS data
Nature biotechnology · 2014
Röst, Hannes L; Rosenberger, George; Navarro, Pedro; Gillet, Ludovic; Miladinović, Saša M; Schubert, Olga T; Wolski, Witold; Collins, Ben C; Malmström, Johan; Malmström, Lars
+ Photo-cross-linking and high-resolution mass spectrometry for assignment of RNA-binding sites in RNA-binding proteins
Nature methods · 2014
Kramer, Katharina; Sachsenberg, Timo; Beckmann, Benedikt M; Qamar, Saadia; Boon, Kum-Loong; Hentze, Matthias W; Kohlbacher, Oliver; Urlaub, Henning
+ The mzTab data exchange format: communicating mass-spectrometry-based proteomics and metabolomics experimental results to a wider audience
Molecular & Cellular Proteomics · 2014
Griss, Johannes; Jones, Andrew R; Sachsenberg, Timo; Walzer, Mathias; Gatto, Laurent; Hartler, Jürgen; Thallinger, Gerhard G; Salek, Reza M; Steinbeck, Christoph; Neuhauser, Nadin
+ qcML: an exchange format for quality control metrics from mass spectrometry experiments
Molecular & Cellular Proteomics · 2014
Walzer, Mathias; Pernas, Lucia Espona; Nasso, Sara; Bittremieux, Wout; Nahnsen, Sven; Kelchtermans, Pieter; Pichler, Peter; van den Toorn, Henk WP; Staes, An; Vandenbussche, Jonathan
+
+
+
+
+ An automated pipeline for high-throughput label-free quantitative proteomics
Journal of proteome research · 2013
Weisser, Hendrik; Nahnsen, Sven; Grossmann, Jonas; Nilse, Lars; Quandt, Andreas; Brauer, Hendrik; Sturm, Marc; Kenar, Erhan; Kohlbacher, Oliver; Aebersold, Ruedi
+ The mzQuantML data standard for mass spectrometry-based quantitative studies in proteomics
Molecular & Cellular Proteomics · 2013
Walzer, Mathias; Qi, Da; Mayer, Gerhard; Uszkoreit, Julian; Eisenacher, Martin; Sachsenberg, Timo; Gonzalez-Galarza, Faviel F; Fan, Jun; Bessant, Conrad; Deutsch, Eric W
+ Tools for label-free peptide quantification
Molecular & Cellular Proteomics · 2013
Nahnsen, Sven; Bielow, Chris; Reinert, Knut; Kohlbacher, Oliver
+
+
+
+
+ In silico design of targeted SRM-based experiments
BMC bioinformatics · 2012
Nahnsen, Sven; Kohlbacher, Oliver
+ TOPPAS: a graphical workflow editor for the analysis of high-throughput proteomics data
Journal of proteome research · 2012
Junker, Johannes; Bielow, Chris; Bertsch, Andreas; Sturm, Marc; Reinert, Knut; Kohlbacher, Oliver
+ The mzIdentML data standard for mass spectrometry-based proteomics results
Molecular & cellular proteomics · 2012
Jones, Andrew R; Eisenacher, Martin; Mayer, Gerhard; Kohlbacher, Oliver; Siepen, Jennifer; Hubbard, Simon J; Selley, Julian N; Searle, Brian C; Shofstahl, James; Seymour, Sean L
+
+
+
+
+ MSSimulator: Simulation of mass spectrometry data
Journal of proteome research · 2011
Bielow, Chris; Aiche, Stephan; Andreotti, Sandro; Reinert, Knut
+ OpenMS and TOPP: open source software for LC-MS data analysis
Data Mining in Proteomics: From Standards to Applications · 2011
Bertsch, Andreas; Gröpl, Clemens; Reinert, Knut; Kohlbacher, Oliver
+ Probabilistic consensus scoring improves tandem mass spectrometry peptide identification
Journal of proteome research · 2011
Nahnsen, Sven; Bertsch, Andreas; Rahnenführer, Jörg; Nordheim, Alfred; Kohlbacher, Oliver
+
+
+
+
+ Optimal de novo design of MRM experiments for rapid assay development in targeted proteomics
Journal of proteome research · 2010
Bertsch, Andreas; Jung, Stephan; Zerck, Alexandra; Pfeifer, Nico; Nahnsen, Sven; Henneges, Carsten; Nordheim, Alfred; Kohlbacher, Oliver
+ TOPP goes Rapid The OpenMS Proteomics Pipeline in a Grid-Enabled Web Portal
Proceedings of the 2010 10th IEEE/ACM International Conference on Cluster, Cloud and Grid Computing · 2010
Gesing, Sandra; van Hemert, Jano; Koetsier, Jos; Bertsch, Andreas; Kohlbacher, Oliver
+
+
+
+
+ De novo peptide sequencing by tandem MS using complementary CID and electron transfer dissociation
Electrophoresis · 2009
Bertsch, Andreas; Leinenbach, Andreas; Pervukhin, Anton; Lubeck, Markus; Hartmer, Ralf; Baessmann, Carsten; Elnakady, Yasser Abbas; Müller, Rolf; Böcker, Sebastian; Huber, Christian G
+ Improving peptide identification in proteome analysis by a two-dimensional retention time filtering approach
Journal of proteome research · 2009
Pfeifer, Nico; Leinenbach, Andreas; Huber, Christian G; Kohlbacher, Oliver
+ OpenMS and TOPP: open source software for LC-MS data analysis
Proteome Bioinformatics · 2009
Reinert, Knut; Kohlbacher, Oliver
+ SILACAnalyzer-a tool for differential quantitation of stable isotope derived data
International Meeting on Computational Intelligence Methods for Bioinformatics and Biostatistics · 2009
Nilse, Lars; Sturm, Marc; Trudgian, David; Salek, Mogjiborahman; Sims, Paul FG; Carroll, Kathleen M; Hubbard, Simon J
+ TOPPView: an open-source viewer for mass spectrometry data
Journal of proteome research · 2009
Sturm, Marc; Kohlbacher, Oliver
+
+
+
+
+ Analysis of mass spectrometric data: peak picking and map alignment
Freie Universtaet Berlin · 2008
Lange, Eva
+ Computational quantification of peptides from LC-MS data
Journal of Computational Biology · 2008
Schulz-Trieglaff, Ole; Hussong, Rene; Gröpl, Clemens; Leinenbach, Andreas; Hildebrandt, Andreas; Huber, Christian; Reinert, Knut
+ Critical assessment of alignment procedures for LC-MS proteomics and metabolomics measurements
BMC bioinformatics · 2008
Lange, Eva; Tautenhahn, Ralf; Neumann, Steffen; Gröpl, Clemens
+ LC-MSsim–a simulation software for liquid chromatography mass spectrometry data
BMC bioinformatics · 2008
Schulz-Trieglaff, Ole; Pfeifer, Nico; Gröpl, Clemens; Kohlbacher, Oliver; Reinert, Knut
+ OpenMS–an open-source software framework for mass spectrometry
BMC bioinformatics · 2008
Sturm, Marc; Bertsch, Andreas; Gröpl, Clemens; Hildebrandt, Andreas; Hussong, Rene; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Zerck, Alexandra; Reinert, Knut
+
+
+
+
+ A fast and accurate algorithm for the quantification of peptides from mass spectrometry data
Research in Computational Molecular Biology: 11th Annual International Conference, RECOMB 2007, Oakland, CA, USA, April 21-25, 2007. Proceedings 11 · 2007
Schulz-Trieglaff, Ole; Hussong, Rene; Gröpl, Clemens; Hildebrandt, Andreas; Reinert, Knut
+ A geometric approach for the alignment of liquid chromatography—mass spectrometry data
Bioinformatics · 2007
Lange, Eva; Gröpl, Clemens; Schulz-Trieglaff, Ole; Leinenbach, Andreas; Huber, Christian; Reinert, Knut
+ TOPP The OpenMS Proteomics Pipeline
Proceedings of the 5th European · 2007
Sturm, Marc
+ TOPP—the OpenMS proteomics pipeline
Bioinformatics · 2007
Kohlbacher, Oliver; Reinert, Knut; Gröpl, Clemens; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Sturm, Marc
+
+
+
+
+
+ Absolute quantification of myoglobin content in blood serum using HPLC/MS through automatic bioinformatics analysis
MOLECULAR & CELLULAR PROTEOMICS · 2005
Groepl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L
+ Algorithms for the automated absolute quantification of diagnostic markers in complex proteomics samples
Computational Life Sciences: First International Symposium, CompLife 2005, Konstanz, Germany, September 25-27, 2005. Proceedings 1 · 2005
Gröpl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L
+ OPENMS; a generic open source framework for chromatography/MS-based proteomics
Molecular & Cellular Proteomics · 2005
Lange, E; Reinert, K; Groepl, C; Kohlbacher, O; Sturm, M; Hildebrandt, A
+ OpenMS-Software for Mass Spectrometry
Poster presented at the MBI Workshop on Computational Proteomics and Mass Spectrometry · 2005
Gröpl, C; Hildebrandt, A; Kohlbacher, O; Lange, E; Lövenich, S; Sturm, M
+
+
+
+
+
diff --git a/content/en/pyopenms-viz.md b/content/en/pyopenms-viz.md
new file mode 100644
index 00000000..6350df5d
--- /dev/null
+++ b/content/en/pyopenms-viz.md
@@ -0,0 +1,101 @@
+---
+title: pyopenms_viz
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
+
+
+
+
+
+
+
Visualization
+
+ Plot MS data with pyopenms_viz .
+
+
+ Visualization library for mass spectrometry data. Create interactive and static plots
+ directly from Python dataframes—with matplotlib, Bokeh, and Plotly backends.
+
+
+
+
+
+
+
+
+
+ Overview
+ Pandas-native mass spectrometry plots
+
+ pyopenms_viz extends pandas DataFrames with plot types for spectra, chromatograms,
+ peak maps, and mobilograms—so you can explore results without building charts from scratch.
+
+
+
+
+
+
diff --git a/content/en/pyopenms.md b/content/en/pyopenms.md
new file mode 100644
index 00000000..1ab5b7d5
--- /dev/null
+++ b/content/en/pyopenms.md
@@ -0,0 +1,47 @@
+---
+title: pyOpenMS
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
+
+
+
+
+
+
+
Python
+
+ pyOpenMS
+
+
+ Python bindings to OpenMS-lib. Write custom analysis scripts and integrate OpenMS
+ into Python workflows.
+
+
+
+
+
+
+
+
+ {{< pyopenms-highlights >}}
+
+
+ {{< pyopenms-getting-started >}}
+
+
+
+ {{< pyopenms-developers >}}
+
+
diff --git a/content/en/research-partnerships.md b/content/en/research-partnerships.md
new file mode 100644
index 00000000..e37832b2
--- /dev/null
+++ b/content/en/research-partnerships.md
@@ -0,0 +1,69 @@
+---
+title: Research Partnerships
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
+
+
+
+ Institutional partners
+ Who we partner with
+
+ Institutional partners are organizations that support OpenMS by employing people
+ who develop, maintain, and apply the software as part of their research missions.
+
+
+ University and institute research groups
+ Core facilities and national infrastructure projects
+ Consortia building shared mass spectrometry tooling
+
+
+
+ Collaboration
+ What partnerships can include
+
+ Partnerships take many forms—from funded software engineering to joint methods
+ papers and training for your lab or facility.
+
+
+ Co-development of algorithms, workflows, and web applications
+ Integration with lab pipelines, KNIME, and cloud platforms
+ Workshops, user meetings, and contributor onboarding
+
+
+ Ways to contribute →
+
+
+
+
+
+ Partner institutions
+
+ The groups below employ contributors who advance OpenMS as part of their research.
+ Logos link to partner home pages where available.
+
+ {{< partners >}}
+
+
+
+ Start a conversation
+
+ Tell us about your group, infrastructure needs, or ideas for joint development.
+ We can help you find the right channel—partnership discussion, sponsorship, or
+ technical support.
+
+
+
+
+
diff --git a/content/en/sponsor-us.md b/content/en/sponsor-us.md
new file mode 100644
index 00000000..6747f72d
--- /dev/null
+++ b/content/en/sponsor-us.md
@@ -0,0 +1,72 @@
+---
+title: Sponsor us
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
+
+
+
+ Impact
+ Why sponsor
+
+ OpenMS powers proteomics and metabolomics workflows worldwide. Sponsorship helps
+ the project maintain core libraries, web applications, and training resources
+ that researchers rely on every day.
+
+
+ Funded development and maintenance of OpenMS-lib and pyOpenMS
+ Documentation, tutorials, and community support
+ Developer meetings, workshops, and outreach
+
+
+
+ OpenMS Inc.
+ How sponsorship works
+
+ OpenMS Inc. is a U.S. 501(c)(3) public charity that stewards project finances
+ and accepts sponsorships aligned with our nonprofit mission.
+
+
+ Organizational sponsorships and grants
+ In-kind support for infrastructure or services
+ Co-branded community initiatives where appropriate
+
+
+ About OpenMS Inc. →
+
+
+
+
+{{< sponsor-tiers >}}
+
+
+
+
+
+
diff --git a/content/en/webapps.md b/content/en/webapps.md
new file mode 100644
index 00000000..90ebac06
--- /dev/null
+++ b/content/en/webapps.md
@@ -0,0 +1,103 @@
+---
+title: OpenMS-Web apps
+hidePageTitle: true
+hideShortcuts: true
+sidebar: false
+---
+
+
+
+
+
+
+
Framework
+
+ Deploy OpenMS as web apps .
+
+
+ Web interface template for OpenMS pipelines. Deploy custom analysis tools as interactive
+ web apps without frontend development—built on Streamlit with workspace management,
+ parameter widgets, and parallel TOPP execution.
+
+
+
+
+
+
+
+
diff --git a/data/community_events.yaml b/data/community_events.yaml
new file mode 100644
index 00000000..de4ab2fb
--- /dev/null
+++ b/data/community_events.yaml
@@ -0,0 +1,69 @@
+# Community calendar — edit this file to add or update events (see docs/common-tasks/update-community-calendar.md)
+events:
+ - title: OpenMS Developer Meeting 2026
+ start: 2026-03-23
+ end: 2026-03-27
+ location: Piotrowice Nyskie Palace, Otmuchów, Poland
+ category: developer-meeting
+ summary: Annual developer meeting with talks, tutorials, and code sprints.
+ url: https://docs.google.com/forms/d/1tyg3uMQoidQ45C7lUqic9GF-AqDCs5cBdIyOzfrl_uA/edit
+ news_url: /news/devmeeting2026/
+
+ - title: OpenMS/CIBI workshops — South Africa
+ start: 2026-02-09
+ end: 2026-02-20
+ location: South Africa
+ category: workshop
+ summary: Four two-day workshops on metabolomics and proteomics for plant biotechnology.
+ news_url: /news/south_africa_roadshow_2026/
+
+ - title: Workshop at University of Helsinki
+ start: 2026-04-30
+ location: University of Helsinki, Finland
+ category: workshop
+ summary: One-day workshop on MS analysis with OpenMS and OpenDIAKiosk.
+ news_url: /news/helsinki_workshop_2026/
+
+ - title: Google Summer of Code 2026
+ start: 2026-06-01
+ end: 2026-08-31
+ location: Remote
+ category: outreach
+ summary: Students collaborate with mentors on OpenMS features, documentation, and tool integrations.
+ news_url: /news/GSoC2026/
+
+ - title: OpenMS Community Code Clinic
+ start: 2026-07-15
+ location: Online
+ category: outreach
+ summary: Drop-in session for workflow questions, troubleshooting, and getting started as a contributor.
+ news_url: /news/cibi_codeclinic/
+
+ - title: OpenMS Autumn Workshop
+ start: 2026-10-14
+ end: 2026-10-16
+ location: Tübingen, Germany
+ category: workshop
+ summary: Hands-on training on proteomics and metabolomics workflows with OpenMS and TOPP tools.
+
+ - title: OpenMS Developer Meeting 2027
+ start: 2027-03-15
+ end: 2027-03-19
+ location: To be announced
+ category: developer-meeting
+ summary: Annual developer meeting with tutorials, talks, and code sprints.
+
+ - title: OpenMS Open House 2025
+ start: 2025-11-09
+ location: University of Toronto, Canada
+ category: outreach
+ summary: Drop-in session on computational mass spectrometry and open-source development.
+ news_url: /news/openhouse2025/
+
+ - title: OpenMS Developer Meeting 2025
+ start: 2025-03-17
+ end: 2025-03-21
+ location: Xewkija, Gozo, Malta
+ category: developer-meeting
+ summary: Developer meeting with tutorials and code sprints.
+ news_url: /news/devmeeting2025/
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 00000000..bb848b08
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,84 @@
+# OpenMS website — maintainer documentation
+
+This guide is for **non–front-end contributors** who update [openms.de](https://openms.de) content: news, text pages, homepage copy, and configuration. You do not need to know React, Vue, or JavaScript for most tasks.
+
+## How the site works (30 seconds)
+
+- The site is built with **[Hugo](https://gohugo.io/)** — a static site generator.
+- **Pages** live as Markdown files under `content/en/`.
+- **Homepage sections** (hero, banner, webapps list, footer links, etc.) live mainly in **`config.yaml`** under `params`.
+- **Layout and styling** live in `layouts/` and `assets/css/` — only change these if you are doing design or structure work (ask the web team first).
+- Changes are merged on GitHub; **Netlify** builds and deploys the live site.
+
+## I want to…
+
+| Task | Guide |
+|------|--------|
+| Add or edit a news article | [Add a news post](common-tasks/add-news-post.md) |
+| Add or update community calendar events | [Update the community calendar](common-tasks/update-community-calendar.md) |
+| Change the yellow announcement bar on the homepage | [Update the news banner](common-tasks/update-news-banner.md) |
+| Change homepage headline, stats, or “What is OpenMS?” | [Edit the homepage hero & key features](common-tasks/edit-homepage-hero.md) |
+| Add or reorder a project on the homepage carousel | [Add a webapp to the homepage](common-tasks/add-webapp-to-homepage.md) |
+| Change footer links, navbar, or social links | [Edit footer or navbar](common-tasks/edit-footer-or-navbar.md) |
+| Set up Zeffy on the donate page | [Configure the donate page (Zeffy)](common-tasks/configure-donate-zeffy.md) |
+| Edit About, Contribute, Governance, etc. | [Edit a page](common-tasks/edit-a-page.md) |
+| Add or replace an image | [Add images](common-tasks/add-images.md) |
+| Preview the site on my computer | [Preview locally](getting-started/preview-locally.md) |
+| Edit without installing anything | [Edit via GitHub](getting-started/edit-via-github.md) |
+| Open a pull request | [Pull requests](workflow/pull-requests.md) |
+| Understand what happens when we merge | [Deployment](workflow/deployment.md) |
+| Find who can approve or help | [Who to ask](workflow/who-to-ask.md) |
+
+## What you can change safely
+
+| Level | Folders / files | Typical edits |
+|-------|-----------------|---------------|
+| **Safe** | `content/en/**/*.md` | News, about text, application guides |
+| **Config** | `config.yaml` (`languages.en.params`) | Hero, banner, webapps, footer, trusted-by list |
+| **Ask first** | `layouts/`, `assets/css/`, `static/js/` | Layout, colors, partner marquee HTML |
+| **Do not edit** | `themes/scientific-python-hugo-theme/` | Upstream theme (use overrides in `layouts/` instead) |
+
+## Documentation map
+
+```
+docs/
+├── README.md ← you are here
+├── getting-started/
+│ ├── preview-locally.md
+│ └── edit-via-github.md
+├── common-tasks/
+│ ├── add-news-post.md
+│ ├── update-news-banner.md
+│ ├── edit-homepage-hero.md
+│ ├── add-webapp-to-homepage.md
+│ ├── edit-footer-or-navbar.md
+│ ├── edit-a-page.md
+│ └── add-images.md
+├── reference/
+│ ├── content-front-matter.md
+│ ├── config-yaml-guide.md
+│ ├── shortcodes.md
+│ └── file-locations.md
+├── workflow/
+│ ├── pull-requests.md
+│ ├── deployment.md
+│ └── who-to-ask.md
+└── troubleshooting/
+ └── common-errors.md
+```
+
+## Quick start (no local install)
+
+1. Open the file you need on GitHub (e.g. `content/en/news/my-post.md` or `config.yaml`).
+2. Click **Edit** (pencil) or create a new file on a branch.
+3. Save and open a **pull request**.
+4. Wait for the **Netlify deploy preview** on the PR (see [Pull requests](workflow/pull-requests.md)).
+5. Ask a web-team reviewer to merge.
+
+For local preview, see [Preview locally](getting-started/preview-locally.md).
+
+## Related links
+
+- Developer setup (short): [README.md](../README.md) in the repo root
+- OpenMS software docs: [openms.readthedocs.io](https://openms.readthedocs.io/)
+- Hugo docs (advanced): [gohugo.io/documentation](https://gohugo.io/documentation/)
diff --git a/docs/common-tasks/add-images.md b/docs/common-tasks/add-images.md
new file mode 100644
index 00000000..e8b10e59
--- /dev/null
+++ b/docs/common-tasks/add-images.md
@@ -0,0 +1,59 @@
+# Add images
+
+Static files are served from the **`static/`** folder. A file at `static/images/foo.png` is available on the site as **`/images/foo.png`**.
+
+## Where to put images
+
+| Use case | Suggested path |
+|----------|----------------|
+| Logos, general | `static/images/logos/` |
+| Webapp / project logos | `static/images/webapp/logo/` |
+| Application guide screenshots | `static/images/content_images/applications/` |
+| Homepage / hero (referenced by filename in config) | Often `static/images/` or theme assets — match existing entries in `config.yaml` |
+| Favicon | `static/images/favicon.png` |
+
+## Reference in Markdown (content pages)
+
+Use the theme **figure** shortcode:
+
+```markdown
+{{< figure src="/images/content_images/applications/NuXL.png" >}}
+```
+
+Path always starts with `/images/...` (not `static/`).
+
+## Reference in config.yaml
+
+```yaml
+logo: /images/webapp/logo/nuxl.png
+```
+
+```yaml
+navbarlogo:
+ image: OpenMS_transparent_blackFont.png
+```
+
+Some hero images use **filename only** (e.g. `knime-analytics.png`) — copy the pattern from neighboring entries in the same config block.
+
+## Reference in HTML partials (web team)
+
+```html
+
+```
+
+## Tips
+
+- Prefer **PNG** or **SVG** for logos; **JPEG** for photos.
+- Keep file sizes reasonable (compress large screenshots).
+- Use descriptive **alt text** in Markdown/HTML for accessibility.
+- Use lowercase filenames to avoid case-sensitivity issues on Linux (production builds).
+
+## Adding via GitHub
+
+1. In your branch, go to the target folder under `static/images/`.
+2. **Add file** → upload image.
+3. Reference `/images/...` in the same PR.
+
+## Preview
+
+Open the image URL directly: `http://localhost:1313/images/webapp/logo/my-tool.png`
diff --git a/docs/common-tasks/add-news-post.md b/docs/common-tasks/add-news-post.md
new file mode 100644
index 00000000..df9badfb
--- /dev/null
+++ b/docs/common-tasks/add-news-post.md
@@ -0,0 +1,108 @@
+# Add a news post
+
+News articles appear on **https://openms.de/news/** and in the news listing. Each post is one Markdown file.
+
+## Files to edit
+
+| Action | Location |
+|--------|----------|
+| New post | `content/en/news/.md` |
+| Listing page title (optional) | `content/en/news/_index.md` |
+| Section labels (filter, “Read more”, etc.) | `config.yaml` → `newsSection` |
+| Homepage announcement bar (optional) | `config.yaml` → `newsBanner` |
+
+## Step-by-step
+
+### 1. Create the file
+
+Filename rules:
+
+- Lowercase letters, numbers, hyphens only: `helsinki-workshop-2026.md`
+- The URL will be `/news/helsinki-workshop-2026/` (from the filename without `.md`)
+
+You can copy an existing post, e.g. `content/en/news/gsoc2025.md`.
+
+### 2. Add front matter
+
+At the top of the file, between `---` lines:
+
+```yaml
+---
+title: GSoC 2025 – Two Projects Accepted!
+authors: ["Matteo Pilz", "Timo Sachsenberg"]
+date: 2025-05-20
+summary: We're thrilled to announce that two OpenMS projects have been accepted for Google Summer of Code 2025!
+type: news
+---
+```
+
+| Field | Required | Notes |
+|-------|----------|--------|
+| `title` | Yes | Headline on the news page and article |
+| `date` | Yes | `YYYY-MM-DD` — used for sorting and year filter |
+| `summary` | Yes | Short text on the news index card |
+| `authors` | Recommended | List of names in quotes |
+| `type` | Yes | Use `news` for news posts |
+| `draft` | Optional | `draft: true` hides the post until you remove it or publish with drafts enabled locally |
+
+### 3. Write the body
+
+Below the closing `---`, use normal **Markdown**:
+
+```markdown
+We're thrilled to announce...
+
+More info: [GSoC program page](https://summerofcode.withgoogle.com/...)
+```
+
+- Headings: `## Section title`
+- Line breaks in HTML: ` ` (some older posts use this)
+- Links: `[text](https://...)`
+
+### 4. Preview
+
+- **Local**: `make serve` → open http://localhost:1313/news/your-slug/
+- **GitHub PR**: use the Netlify deploy preview
+
+### 5. Open a pull request
+
+See [Pull requests](../workflow/pull-requests.md).
+
+Checklist:
+
+- [ ] `date` and `summary` are set
+- [ ] `type: news` is present
+- [ ] Article looks correct on `/news` and on the article page
+- [ ] Optional: update `newsBanner` in `config.yaml` to promote the post on the homepage
+
+## Optional: promote on the homepage banner
+
+Edit `config.yaml`:
+
+```yaml
+newsBanner:
+ enabled: true
+ label: News
+ text: Workshop at University of Helsinki on April 30th 2026.
+```
+
+See [Update the news banner](update-news-banner.md).
+
+## Optional: use the news archetype (local Hugo)
+
+If you have Hugo installed locally:
+
+```bash
+hugo new news/my-slug.md
+```
+
+This uses `archetypes/news.md` in the repo for default front matter.
+
+## What not to change
+
+- `layouts/news/` — layout for news pages; ask web team for structural changes
+- Do not add two files with the same slug (case may differ on macOS vs Linux — use lowercase consistently)
+
+## Duplicate filenames on case-insensitive systems
+
+Avoid pairs like `GSoC2025.md` and `gsoc2025.md` — they can conflict on some systems. Prefer one lowercase slug.
diff --git a/docs/common-tasks/add-webapp-to-homepage.md b/docs/common-tasks/add-webapp-to-homepage.md
new file mode 100644
index 00000000..35f695c0
--- /dev/null
+++ b/docs/common-tasks/add-webapp-to-homepage.md
@@ -0,0 +1,73 @@
+# Add a webapp to the homepage
+
+The homepage **“Our Open Source Projects”** carousel is driven by the `webapps` list in `config.yaml`. Full application documentation pages live separately under `content/en/applications/`.
+
+## Files
+
+| Purpose | Location |
+|---------|----------|
+| Homepage carousel entry | `config.yaml` → `params.webapps` |
+| Section headings | `config.yaml` → `params.webappsSection` |
+| Dedicated app page (optional) | `content/en/applications/.md` |
+| Project logo | `static/images/webapp/logo/` or `static/images/` |
+
+## Add an entry to the carousel
+
+In `config.yaml`, under `webapps`, add a list item:
+
+```yaml
+webapps:
+ - name: My New Tool
+ url: https://example.com/my-tool/
+ logo: /images/webapp/logo/my-tool.png
+ description: Short one-line description for the card.
+```
+
+| Field | Required | Notes |
+|-------|----------|--------|
+| `name` | Yes | Title on the card |
+| `url` | Yes | Link when user clicks “View project” |
+| `logo` | Yes | Path starting with `/images/...` (file must exist under `static/`) |
+| `description` | Yes | Shown on the card |
+
+**Order:** List order = display order in the carousel.
+
+## Section title and “Show all” link
+
+```yaml
+webappsSection:
+ eyebrow: Community tools
+ title: Our Open Source Projects
+ titleHighlight: Open Source
+ description: >-
+ Featured projects actively maintained...
+ ctaText: View project
+ showAll:
+ text: Show all projects
+ url: /applications
+```
+
+## Add a full applications page (optional)
+
+1. Copy an existing file, e.g. `content/en/applications/nuxl.md`.
+2. Update front matter and body.
+3. The page URL will be `/applications//`.
+
+See [Edit a page](edit-a-page.md) and [Shortcodes](../reference/shortcodes.md) for figures and notices.
+
+## Add a logo image
+
+1. Place file in `static/images/webapp/logo/my-tool.png`.
+2. Reference as `logo: /images/webapp/logo/my-tool.png` in `config.yaml`.
+
+See [Add images](add-images.md).
+
+## Preview
+
+Homepage carousel: http://localhost:1313/ (or Netlify preview).
+
+Applications index: http://localhost:1313/applications/
+
+## What not to change
+
+- `layouts/partials/webapps.html` and `webapps-project-card.html` unless changing card layout (web team).
diff --git a/docs/common-tasks/configure-donate-zeffy.md b/docs/common-tasks/configure-donate-zeffy.md
new file mode 100644
index 00000000..4445b676
--- /dev/null
+++ b/docs/common-tasks/configure-donate-zeffy.md
@@ -0,0 +1,47 @@
+# Configure the donate page (Zeffy)
+
+The **Donate** button and footer link go to **`/donate/`**. Donations are collected through [Zeffy](https://www.zeffy.com/) (embedded on the page when configured), with Open Collective as an optional alternative.
+
+## 1. Create or open your Zeffy form
+
+In the [Zeffy dashboard](https://www.zeffy.com/), go to **Donations → My forms** and use the form for OpenMS Inc.
+
+## 2. Get the embed URL (recommended)
+
+1. Click **Share** next to your donation form.
+2. Open **Embed your form on your site** and choose your language.
+3. Copy the **iframe** link (URL only, or the full `