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/.nav-check.html b/.nav-check.html new file mode 100644 index 00000000..7e8c998a --- /dev/null +++ b/.nav-check.html @@ -0,0 +1,2598 @@ + + + + + + + + + + + + + OpenMS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
+
+
+
+

+ Open Science. Clear Results for Mass Spectrometry +

+

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.

+
+
+ + + +
+
+ + +
+
+
+ + OpenMS +
+
+
+ +
+
    +
  • Ready-to-use-apps
  • +
  • Modular workflows
  • +
  • Built by the community
  • +
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+

Years active

+

0+

+

Over two decades of open-source development for mass spectrometry workflows.

+
+ +
+

Citations

+

0+

+

Peer-reviewed research citing OpenMS tools and algorithms worldwide.

+
+ +
+

Latest version

+

v0

+

Continuous releases with new algorithms, formats, and analysis workflows.

+
+ +
+
+
+ + +
+ + +
+ +
+
+
+
+
+

+ Trusted and used by scientists worldwide. +

+
+
+ +
+ University of Tübingen + FU Berlin + ETH Zürich + Wellcome Sanger Institute + EMBL-EBI + University of Toronto + DTU Biosustain + ZIB + Immatics + FullSeeomics + Stockholm University + Compomics Group + Ghent University + University of Cambridge + University of Groningen +
+
+
+ +
+
+ +
+
+
+
+
+

+
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+

+ + Community +

+

+ Everyone is welcome +

+

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.

+
We are committed to being open, inclusive, and welcoming — read the Code of Conduct for how we work together.
+ +
+
+
+ +
+ +
+
+
+
+ + + +
+
+

+ Upcoming events +

+ + View all + + +
+
    +
  • +
    + +
    +
  • + +
  • +
    + +
    +
  • + +
  • +
    + +
    +
  • + +
  • +
    + +
    +
  • + +
+
+
+
+
+ +
+ +
+ +
+
+
+
+

+ + Contact +

+

+ Take control of your mass spec workflows today +

+

+ Tell us about your pipeline, integrations, or tooling goals — we will point you to the fastest next step. +

+
+ + + +

Usually replies within 1–2 business days.

+
+
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..4d037708 --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,1132 @@ +.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; +} + +@media (min-width: 1100px) { + .sponsor-tiers__grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +.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__contribution { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy); +} + +.sponsor-tier__motto { + margin: 0; + font-size: var(--openms-text-min); + font-style: italic; + color: var(--olib-text-muted, rgba(var(--openms-navy-rgb), 0.68)); +} + +.sponsor-tier__impact { + margin: 0.35rem 0 0; + font-size: var(--openms-text-min); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.78); +} + +/* Sponsor tiers — clickable card that reveals the benefits breakdown */ +.sponsor-tier__toggle { + display: flex; + flex-direction: column; + gap: 0.65rem; + width: 100%; + margin: 0; + padding: 0; + border: 0; + background: none; + font: inherit; + color: inherit; + text-align: left; + cursor: pointer; +} + +.sponsor-tier__cue { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: 0.35rem; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-blue); +} + +.sponsor-tier__cue::after { + content: "↓"; + transition: transform 0.2s ease; +} + +.sponsor-tier__toggle:hover .sponsor-tier__cue { + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.sponsor-tier__toggle:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 3px; + border-radius: 0.4rem; +} + +.sponsor-tier--active { + border-color: rgba(var(--openms-blue-rgb), 0.5); + box-shadow: 0 0 0 2px rgba(var(--openms-blue-rgb), 0.22), + 0 0.25rem 0.85rem rgba(var(--openms-navy-rgb), 0.08); +} + +.sponsor-tier--active .sponsor-tier__toggle[aria-expanded="true"] .sponsor-tier__cue::after { + transform: rotate(180deg); +} + +/* Sponsorship Benefits breakdown */ +.sponsor-benefits { + margin-top: clamp(1.25rem, 3vw, 1.75rem); +} + +.sponsor-benefits__title { + margin: 0 0 0.85rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.2rem, 2.4vw, 1.5rem); + font-weight: 800; + letter-spacing: -0.01em; + color: var(--openms-navy); +} + +.sponsor-benefits__panel { + padding: clamp(1.1rem, 2.4vw, 1.5rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + border-radius: 0.85rem; + background: var(--openms-white); + box-shadow: 0 0.25rem 0.85rem rgba(var(--openms-navy-rgb), 0.05); +} + +.sponsor-benefits__panel[hidden] { + display: none; +} + +.sponsor-benefits__lead { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.5rem 0.85rem; + margin: 0 0 0.85rem; + padding-bottom: 0.85rem; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.sponsor-benefits__tier-name { + font-family: var(--openms-font-heading); + font-size: clamp(1.1rem, 2vw, 1.3rem); + font-weight: 800; + color: var(--openms-navy); +} + +.sponsor-benefits__tier-amount { + font-size: var(--openms-body-size); + font-weight: 700; + color: rgba(var(--openms-navy-rgb), 0.7); +} + +.sponsor-benefits__list { + display: grid; + gap: 0; + margin: 0; +} + +.sponsor-benefits__row { + display: grid; + grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); + gap: 0.35rem 1.25rem; + padding: 0.75rem 0; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08); +} + +.sponsor-benefits__row:last-child { + border-bottom: 0; +} + +.sponsor-benefits__category { + margin: 0; + font-weight: 700; + color: var(--openms-navy); +} + +.sponsor-benefits__value { + margin: 0; + color: rgba(var(--openms-dark-rgb), 0.85); +} + +.sponsor-benefits__lines { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 0.35rem; +} + +.sponsor-benefits__line { + line-height: 1.5; +} + +.sponsor-benefits__line--check { + display: inline-flex; + align-items: center; + gap: 0.4rem; +} + +.sponsor-benefits__check { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + border-radius: 999px; + background: rgba(34, 139, 87, 0.14); + color: #1f7a4d; + font-weight: 700; + font-size: 0.8rem; +} + +.sponsor-benefits__none { + color: rgba(var(--openms-navy-rgb), 0.4); +} + +.sponsor-benefits__footnote { + margin: 0.85rem 0 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.62); +} + +/* Sponsor FAQ */ +.sponsor-faq__list { + display: grid; + gap: 0.65rem; + margin-top: 1rem; +} + +.sponsor-faq__item { + margin: 0; + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + border-radius: 0.75rem; + background: var(--openms-white); + overflow: hidden; +} + +.sponsor-faq__question { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.95rem 1.1rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-body-size-lg); + font-weight: 700; + color: var(--openms-navy); + cursor: pointer; + list-style: none; +} + +.sponsor-faq__question::-webkit-details-marker { + display: none; +} + +.sponsor-faq__question::after { + content: "+"; + flex-shrink: 0; + font-size: 1.25rem; + font-weight: 600; + line-height: 1; + color: var(--openms-blue); +} + +.sponsor-faq__item[open] .sponsor-faq__question::after { + content: "−"; +} + +.sponsor-faq__question:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: -2px; +} + +.sponsor-faq__answer { + padding: 0 1.1rem 1rem; +} + +.sponsor-faq__answer p { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.88); +} + +.sponsor-faq__answer a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.15em; +} + +@media (max-width: 640px) { + .sponsor-benefits__row { + grid-template-columns: 1fr; + gap: 0.2rem; + } +} + +/* About page — sponsor logo wall */ +.about-sponsors-section__intro { + max-width: 65ch; +} + +.about-sponsors-logos { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); + gap: clamp(0.75rem, 2vw, 1.1rem); + margin-top: 1rem; +} + +.about-sponsors-logos__item { + min-height: 8.5rem; + padding: 1.1rem 1.2rem; + border-radius: 0.75rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + background: var(--openms-white); + box-shadow: 0 0.25rem 0.85rem rgba(var(--openms-navy-rgb), 0.05); + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +.about-sponsors-logos__item:hover, +.about-sponsors-logos__item:focus-visible { + transform: translateY(-2px); + border-color: rgba(var(--openms-blue-rgb), 0.35); + box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.1); + outline: none; +} + +.about-sponsors-logos__item--dark { + background: var(--openms-navy); + border-color: rgba(var(--openms-white-rgb), 0.12); +} + +.about-sponsors-logos__logo { + width: 100%; + max-width: 12.5rem; + max-height: 4rem; + height: auto; + object-fit: contain; + display: block; +} + +.about-sponsors-logos__name { + font-family: var(--openms-font-heading); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--openms-navy); + text-align: center; +} + +.about-sponsors-section__cta, +.about-sponsorship-program__cta { + margin: 1.25rem 0 0; + max-width: 65ch; +} + +.about-sponsors-section__cta a { + font-weight: 600; +} + +.about-sponsors-tier { + margin-top: 1.25rem; +} + +.about-sponsors-tier__title { + margin: 0 0 0.65rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 700; + color: var(--openms-navy); +} + +/* About page — sponsorship program */ +.about-sponsorship-program__headline { + margin: 0.35rem 0 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 3.2vw, 1.75rem); + font-weight: 800; + line-height: 1.2; + letter-spacing: -0.02em; + color: var(--openms-navy); + max-width: 42rem; +} + +.about-sponsorship-program__blurb { + margin: 0.65rem 0 0; + max-width: 65ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.88); +} + +.about-sponsorship-program__enables { + margin-top: 1.25rem; + padding: 1rem 1.1rem; + border-radius: 0.75rem; + background: var(--olib-bg-soft, #f4f6f9); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.about-sponsorship-program__enables-title { + margin: 0 0 0.5rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 700; + color: var(--openms-navy); +} + +.about-sponsorship-program__enables ul { + margin: 0; + padding-left: 1.2rem; + display: grid; + gap: 0.35rem; +} + +.about-sponsorship-program__tax { + margin: 1rem 0 0; + max-width: 65ch; + font-size: var(--openms-body-size); + color: var(--olib-text-muted, rgba(var(--openms-navy-rgb), 0.68)); +} + +.about-sponsorship-program__tiers { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(1rem, 2vw, 1.25rem); + margin-top: 1.5rem; +} + +.about-sponsorship-tier { + display: grid; + gap: 0.65rem; + align-content: start; + padding: clamp(1rem, 2vw, 1.25rem); + 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); +} + +.about-sponsorship-tier--platinum { border-top: 4px solid #b8b8c8; } +.about-sponsorship-tier--gold { border-top: 4px solid #d4a017; } +.about-sponsorship-tier--silver { border-top: 4px solid #9aa5b1; } +.about-sponsorship-tier--bronze { border-top: 4px solid #b87333; } + +.about-sponsorship-tier__head { + display: grid; + gap: 0.25rem; +} + +.about-sponsorship-tier__badge { + margin: 0; + align-self: flex-start; + padding: 0.2rem 0.6rem; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + border-radius: 999px; + line-height: 1.2; + background: rgba(var(--openms-navy-rgb), 0.08); + color: var(--openms-navy); +} + +.about-sponsorship-tier__contribution { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy); +} + +.about-sponsorship-tier__motto { + margin: 0; + font-size: var(--openms-text-min); + font-style: italic; + color: var(--olib-text-muted, rgba(var(--openms-navy-rgb), 0.68)); +} + +.about-sponsorship-tier__summary { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; +} + +.about-sponsorship-tier__label { + margin: 0 0 0.35rem; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.about-sponsorship-tier__benefits { + margin: 0; + padding-left: 1.1rem; + font-size: var(--openms-text-min); + line-height: 1.55; +} + +.about-sponsorship-tier__benefits li + li { + margin-top: 0.3rem; +} + +.about-sponsorship-tier__impact { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.82); +} + +.about-page-layout .about-sponsorship-program__cta .openms-lib-btn--primary { + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +@media (max-width: 900px) { + .about-sponsorship-program__tiers { + grid-template-columns: 1fr; + } +} + +.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/brand-palette.css b/assets/css/brand-palette.css new file mode 100644 index 00000000..ec026d6b --- /dev/null +++ b/assets/css/brand-palette.css @@ -0,0 +1,150 @@ +/* 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.2rem, 0.65vw, 0.55rem); + --openms-navbar-desktop-pad-x: clamp(0.25rem, 0.55vw, 0.5rem); + --openms-navbar-desktop-font-size: clamp(0.8125rem, 0.95vw, 15px); + --openms-navbar-actions-gap: clamp(0.5rem, 1vw, 0.85rem); + /* Nav breakpoints: burger ≤1023px; horizontal bar from 1024px unless search overlaps links (JS) */ + --openms-nav-mobile-max: 1023px; + --openms-nav-desktop-min: 1024px; + --openms-nav-md-min: 768px; + --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); + --openms-content-soft: #f4f6f9; + --openms-news-banner-height: 0px; + --openms-mobile-menu-width: 80%; + --openms-mobile-menu-max-width: 28rem; + --openms-mobile-menu-radius: 0; + --openms-mobile-menu-shadow: -0.35rem 0 1.5rem rgba(var(--openms-navy-rgb), 0.14); + --openms-mobile-menu-bg: var(--openms-white); + --openms-mobile-menu-header-bg: var(--openms-navy); + --openms-mobile-nav-item-size: 1rem; + --openms-mobile-nav-item-pad-y: 0.3rem; + --openms-mobile-nav-item-pad-x: 0.9rem; + --openms-mobile-nav-links-pad-top: 0; + --openms-mobile-nav-subitem-size: 0.9375rem; + --openms-mobile-nav-divider: rgba(var(--openms-navy-rgb), 0.1); + --openms-mobile-menu-footer-pad: 1rem; + --openms-mobile-menu-footer-gap: 1.15rem; + --openms-mobile-menu-footer-lift: 1.75rem; + --openms-mobile-menu-footer-glow-pad: var(--openms-btn-glow-size, 6px); + --openms-mobile-cta-min-height: 2.45rem; + --openms-mobile-cta-font-size: 0.875rem; + --openms-mobile-cta-pad-y: 0.55rem; + --openms-mobile-cta-pad-x: 0.75rem; + + --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/code-of-conduct-page.css b/assets/css/code-of-conduct-page.css new file mode 100644 index 00000000..09c6e371 --- /dev/null +++ b/assets/css/code-of-conduct-page.css @@ -0,0 +1,208 @@ +.code-of-conduct-page-layout { + --coc-max: 48rem; + --coc-pad-x: clamp(1.25rem, 4vw, 2rem); + --coc-soft: #f4f6f9; + --coc-muted: rgba(var(--openms-navy-rgb), 0.68); + --coc-border: rgba(var(--openms-navy-rgb), 0.1); + --coc-radius: 1rem; + + display: block; + width: 100%; + padding: clamp(2rem, 5vh, 3rem) 0 clamp(3rem, 6vh, 4rem); +} + +.code-of-conduct-page-layout__content { + width: min(100%, var(--coc-max)); + max-width: var(--coc-max); + margin-inline: auto; + padding-inline: var(--coc-pad-x); +} + +.code-of-conduct-page__head { + display: grid; + gap: 1rem; + margin-bottom: clamp(1.5rem, 3vw, 2rem); +} + +.code-of-conduct-page__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.75rem, 4vw, 2.25rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--openms-navy); +} + +.code-of-conduct-page__jumps { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 0.65rem; +} + +.code-of-conduct-page__jump { + display: inline-flex; + align-items: center; + min-height: 2.25rem; + padding: 0.35rem 0.9rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.22); + border-radius: 999px; + background: var(--openms-white); + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--openms-blue); + text-decoration: none; + transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; +} + +.code-of-conduct-page__jump:hover, +.code-of-conduct-page__jump:focus-visible { + border-color: var(--openms-blue); + color: var(--openms-navy); + background: rgba(var(--openms-blue-rgb), 0.05); + text-decoration: none; +} + +.code-of-conduct-page__content { + display: grid; + gap: clamp(2rem, 4vw, 2.75rem); +} + +.code-of-conduct-page__content h2 { + margin: 0 0 0.75rem; + 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; +} + +.code-of-conduct-page__content h3, +.code-of-conduct-page__content h4 { + margin: 1.25rem 0 0.5rem; + font-family: var(--openms-font-heading); + color: var(--openms-navy); +} + +.code-of-conduct-page__content p, +.code-of-conduct-page__content li { + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.88); +} + +.code-of-conduct-page__content a { + color: var(--openms-blue); + font-weight: 500; + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.code-of-conduct-page__content a:hover { + color: var(--openms-navy); +} + +.coc-section { + scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem); +} + +.coc-section--summary { + display: grid; + gap: 1.1rem; + padding: clamp(1.1rem, 2.5vw, 1.45rem); + border: 1px solid var(--coc-border); + border-radius: var(--coc-radius); + background: linear-gradient( + 160deg, + rgba(var(--openms-blue-rgb), 0.06) 0%, + var(--openms-white) 55% + ); + box-shadow: 0 4px 20px rgba(var(--openms-navy-rgb), 0.05); +} + +.coc-section--summary > p { + margin: 0; +} + +.coc-behaviors { + display: grid; + gap: 0.65rem; + padding: 0.85rem 1rem; + border-radius: 0.75rem; + background: var(--coc-soft); + border: 1px solid var(--coc-border); +} + +.coc-behaviors__title { + margin: 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); +} + +.coc-behaviors ul { + margin: 0; + padding-left: 1.2rem; + display: grid; + gap: 0.4rem; +} + +.coc-behaviors li { + margin: 0; +} + +.coc-report { + display: grid; + gap: 0.5rem; + margin: 0; + padding: 0.9rem 1rem; + border-left: 4px solid var(--openms-blue); + border-radius: 0 0.65rem 0.65rem 0; + background: rgba(var(--openms-blue-rgb), 0.06); +} + +.coc-report p { + margin: 0; +} + +.coc-report__links { + display: flex; + flex-wrap: wrap; + gap: 0.65rem 1rem; + margin-top: 0.15rem; +} + +.coc-report__link { + display: inline-flex; + align-items: center; + font-weight: 600; + text-decoration: none; +} + +.coc-report__link:hover, +.coc-report__link:focus-visible { + text-decoration: underline; +} + +.coc-section--detailed { + display: grid; + gap: 0.35rem; +} + +.coc-section--detailed > h2 { + margin-bottom: 0.35rem; +} + +.coc-enforcement { + padding: clamp(1rem, 2.5vw, 1.25rem); + border: 1px solid var(--coc-border); + border-radius: var(--coc-radius); + background: var(--coc-soft); +} + +.coc-enforcement > h2 { + margin-top: 0; +} diff --git a/assets/css/community-calendar.css b/assets/css/community-calendar.css new file mode 100644 index 00000000..35ae8ebc --- /dev/null +++ b/assets/css/community-calendar.css @@ -0,0 +1,640 @@ +/* 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-calendar-layout .openms-lib-hero.calendar-page-hero .openms-lib-hero__lead { + margin-top: 0.4rem; +} + +.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; + border-bottom: none; +} + +.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; + box-sizing: border-box; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; +} + +/* Upcoming events — split card layout (homepage + calendar); match past card sizing */ +.community-events-upcoming-layout { + --events-grid-gap: clamp(0.75rem, 1.5vw, 1rem); + --events-accent: var(--openms-navy); + --events-accent-soft: rgba(var(--openms-navy-rgb), 0.06); + --events-date-bg: var(--openms-navy); + --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-navy); + --events-accent-soft: rgba(var(--openms-navy-rgb), 0.06); +} + +.community-events-upcoming-layout .community-events-home__card-link, +.community-events-upcoming-layout .community-events-home__card-link--static { + 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; + box-shadow: 0 0.15rem 0.65rem rgba(var(--openms-navy-rgb), 0.04); +} + +.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.65rem, 1.5vw, 0.85rem); +} + +.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: 0.35rem; + min-width: 0; +} + +.community-events-upcoming-layout .community-events-home__card-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 0.65rem; +} + +.community-events-upcoming-layout .community-events-home__card-header .community-events-home__card-title { + flex: 1 1 auto; + min-width: 0; + font-size: clamp(1rem, 1.6vw, 1.1rem); + line-height: 1.3; +} + +.community-events-upcoming-layout .community-events-home__card-header .community-events-home__category { + flex: 0 0 auto; + max-width: min(100%, 9rem); + padding: 0.24rem 0.58rem; + font-size: 0.625rem; +} + +.community-events-upcoming-layout .community-events-home__card-summary { + line-height: 1.45; + display: block; + overflow: visible; + -webkit-line-clamp: unset; +} + +.community-events-upcoming-layout .community-events-home__card-footer { + gap: 0.65rem 0.85rem; + margin-top: 0; + padding-top: 0; + border-top: none; +} + +.community-events-upcoming-layout .community-events-home__card-location { + font-size: var(--openms-text-min); + line-height: 1.45; +} + +.community-events-upcoming-layout .community-events-home__date { + background: var(--openms-navy); + border: 1px solid rgba(var(--openms-white-rgb), 0.2); + box-shadow: 0 0.15rem 0.45rem rgba(var(--openms-navy-rgb), 0.2); +} + +.community-events-upcoming-layout .community-events-home__date-day { + color: var(--openms-white); +} + +.community-events-upcoming-layout .community-events-home__date-month { + color: rgba(var(--openms-white-rgb), 0.9); +} + +.community-events-upcoming-layout .community-events-home__date-year { + 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-navy); + 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__footer { + margin-top: clamp(2.25rem, 4.5vh, 3rem); +} + +/* Upcoming cards: flat border (no accent top stripe) */ +.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, +.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-width: 1px; +} + +.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.45rem 1.25rem rgba(var(--openms-navy-rgb), 0.07); + transform: none; + border-color: color-mix(in srgb, var(--events-accent) 28%, rgba(var(--openms-navy-rgb), 0.1)); +} + +.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); +} + +@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; +} + +/* Hero actions — match homepage Get started button layout */ +.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions { + display: flex; + flex-wrap: wrap; + gap: clamp(0.65rem, 1.2vw, 0.85rem); + align-items: center; + justify-content: flex-start; + width: 100%; + max-width: none; + margin: 1.5rem 0 0; +} + +.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .openms-btn-primary, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .about-cta-btn--donate { + flex: 0 0 auto; + width: auto; + min-width: 0; + max-width: 100%; +} + +.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .openms-btn-primary { + min-width: clamp(8.5rem, 18vw, 10.5rem); +} + +.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .community-calendar-hero__btn--news { + min-width: clamp(8.5rem, 18vw, 10.5rem); +} + +@media (max-width: 720px) { + .community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .openms-btn-primary, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .about-cta-btn--donate { + width: 100%; + justify-content: center; + } +} diff --git a/assets/css/community-events-home.css b/assets/css/community-events-home.css new file mode 100644 index 00000000..0576bcbf --- /dev/null +++ b/assets/css/community-events-home.css @@ -0,0 +1,516 @@ +/* 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); +} + +/* Homepage — upcoming events: navy-first accents, blue on interaction only */ +.home-page .community-events-home { + --events-date-bg: rgba(var(--openms-navy-rgb), 0.05); + --events-date-border: rgba(var(--openms-navy-rgb), 0.1); + --events-accent: rgba(var(--openms-navy-rgb), 0.72); + --events-accent-soft: rgba(var(--openms-navy-rgb), 0.05); + background: var(--openms-white); +} + +.home-page .community-events-home__card--developer-meeting, +.home-page .community-events-home__card--workshop { + --events-accent: rgba(var(--openms-navy-rgb), 0.72); + --events-accent-soft: rgba(var(--openms-navy-rgb), 0.05); +} + +.home-page .community-events-home__card--developer-meeting .community-events-home__date, +.home-page .community-events-upcoming-layout .community-events-home__date, +.home-page .community-events-upcoming-layout .community-events-home__card--developer-meeting .community-events-home__date, +.home-page .community-events-upcoming-layout .community-events-home__card--workshop .community-events-home__date, +.home-page .community-events-upcoming-layout .community-events-home__card--outreach .community-events-home__date { + background: var(--openms-navy); + border-color: rgba(var(--openms-white-rgb), 0.2); +} + +.home-page .community-events-upcoming-layout .community-events-home__date-day, +.home-page .community-events-upcoming-layout .community-events-home__date-month, +.home-page .community-events-upcoming-layout .community-events-home__date-year { + color: var(--openms-white); +} + +.home-page .community-events-upcoming-layout .community-events-home__date-month { + color: rgba(var(--openms-white-rgb), 0.9); +} + +.home-page .community-events-upcoming-layout .community-events-home__date-year { + color: rgba(var(--openms-white-rgb), 0.72); +} + +.home-page .community-events-home__card-link { + border-top-color: rgba(var(--openms-navy-rgb), 0.14); +} + +.home-page .community-events-home__card-link:hover, +.home-page .community-events-home__card-link:focus-visible { + border-top-color: rgba(var(--openms-navy-rgb), 0.32); +} + +.home-page .community-events-home__card-link:hover .community-events-home__card-title, +.home-page .community-events-home__card-link:focus-visible .community-events-home__card-title { + color: var(--openms-navy); +} + +.home-page .community-events-home__card-cta, +.home-page .community-events-home__card-location-icon { + color: rgba(var(--openms-navy-rgb), 0.62); +} + +.home-page .community-events-home__card-link:hover .community-events-home__card-cta, +.home-page .community-events-home__card-link:focus-visible .community-events-home__card-cta { + color: var(--openms-blue); +} + +@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..37c238a2 --- /dev/null +++ b/assets/css/community-events-news-home.css @@ -0,0 +1,211 @@ +/* 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: center; + 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); +} + +/* Homepage — events column: less blue, more navy */ +.home-page .community-news-events__column--events .community-news-events__column-title-accent { + color: var(--openms-navy); +} + +/* Homepage — events column: view-all uses standard outline CTA */ +.home-page .community-news-events__column--events .community-news-events__view-all { + color: var(--openms-blue) !important; +} + +.community-news-events__view-all { + display: inline-flex; + align-items: center; + gap: 0.35rem; + flex-shrink: 0; +} + +.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; +} + +@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-events-home__view-all--inline, + .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:focus-visible, + .community-events-home__view-all--inline:hover, + .community-events-home__view-all--inline:focus-visible { + transform: 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..9720bc4c --- /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-navy-rgb), 0.22); + box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.1); + transform: translateY(-2px); + outline: none; +} + +.contact-home__card--primary { + border-color: rgba(var(--openms-navy-rgb), 0.1); + background: var(--openms-white); +} + +.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-navy); + background: rgba(var(--openms-navy-rgb), 0.06); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.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-navy); +} + +.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-navy); +} + +.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..15ec8310 --- /dev/null +++ b/assets/css/contact-page.css @@ -0,0 +1,409 @@ +.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: 48rem; + height: auto; + border: 0; + overflow: hidden; + 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/developer-retreat-page.css b/assets/css/developer-retreat-page.css new file mode 100644 index 00000000..ade2b3e3 --- /dev/null +++ b/assets/css/developer-retreat-page.css @@ -0,0 +1,498 @@ +.developer-retreat-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)); + --dev-retreat-max: 64rem; + --dev-retreat-card-radius: 1rem; + --dev-retreat-card-border: rgba(var(--openms-navy-rgb), 0.1); + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.developer-retreat-page-layout__content { + width: min(100%, var(--dev-retreat-max)); + max-width: var(--dev-retreat-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); + display: grid; + gap: clamp(2.75rem, 6vw, 4rem); +} + +.developer-retreat-page-hero { + margin-bottom: var(--olib-section-y); +} + +.developer-retreat-page-hero__content { + max-width: 44rem; +} + +.developer-retreat-page-hero__kicker { + margin: 0 0 0.35rem; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 2.4vw, 1.15rem); + font-weight: 700; + line-height: 1.2; + color: var(--openms-blue); + letter-spacing: 0.01em; +} + +/* Sizing comes from the shared page-hero title scale (styles_override.css) */ +.developer-retreat-page-hero__headline { + margin: 0; + font-family: var(--openms-font-heading); + color: var(--openms-navy); +} + +.developer-retreat-page-hero__about { + margin: 1rem 0 0; + font-family: var(--openms-font-body); + font-size: clamp(0.95rem, 2.2vw, var(--openms-body-size-lg)); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.86); +} + +/* Section eyebrow pill — matches the hub-page section labels */ +.developer-retreat-eyebrow { + display: inline-flex; + align-items: center; + width: fit-content; + margin: 0; + padding: clamp(0.28rem, 1.2vw, 0.35rem) clamp(0.62rem, 2.5vw, 0.75rem); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.1); + font-size: clamp(0.68rem, 0.52rem + 0.65vw, 0.78rem); + font-weight: 600; + letter-spacing: 0.04em; + color: var(--openms-blue); +} + +/* About-the-retreat highlight cards */ +.developer-retreat-highlights { + display: grid; + gap: clamp(1.25rem, 3vw, 1.75rem); +} + +.developer-retreat-highlights__head { + display: grid; + justify-items: center; + gap: 0.6rem; + text-align: center; +} + +.developer-retreat-highlights__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); + font-weight: 800; + line-height: 1.15; + color: var(--openms-navy); + letter-spacing: -0.02em; +} + +.developer-retreat-highlights__grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); + gap: clamp(0.85rem, 2vw, 1.1rem); +} + +.developer-retreat-highlights__card { + position: relative; + display: grid; + gap: 0.55rem; + align-content: start; + padding: clamp(1.15rem, 2.8vw, 1.5rem); + border: 1px solid var(--dev-retreat-card-border); + border-radius: var(--dev-retreat-card-radius); + background: var(--openms-white); + box-shadow: 0 2px 12px rgba(var(--openms-navy-rgb), 0.04); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.developer-retreat-highlights__card::before { + content: ""; + width: 2.5rem; + height: 3px; + border-radius: 999px; + background: linear-gradient(90deg, var(--openms-blue), var(--openms-purple, var(--openms-blue))); +} + +.developer-retreat-highlights__card:hover { + transform: translateY(-3px); + box-shadow: 0 10px 26px rgba(var(--openms-navy-rgb), 0.1); +} + +.developer-retreat-highlights__card-title { + margin: 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); +} + +.developer-retreat-highlights__card-text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.86); +} + +/* Past retreat photo */ +.developer-retreat-photo { + margin: 0; + display: grid; + gap: 0.65rem; +} + +.developer-retreat-photo__image { + display: block; + width: 100%; + height: auto; + border-radius: 1.25rem; + border: 1px solid var(--dev-retreat-card-border); + box-shadow: 0 12px 36px rgba(var(--openms-navy-rgb), 0.12); +} + +.developer-retreat-photo { + position: relative; + width: min(100%, 56rem); + margin-inline: auto; +} + +.developer-retreat-photo__caption { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 2.5rem clamp(1rem, 3vw, 1.5rem) 1rem; + border-radius: 0 0 1.25rem 1.25rem; + background: linear-gradient( + 180deg, + rgba(var(--openms-navy-rgb), 0) 0%, + rgba(var(--openms-navy-rgb), 0.68) 100% + ); + font-size: var(--openms-body-size); + font-weight: 500; + line-height: 1.5; + color: var(--openms-white); + text-align: left; +} + +/* Upcoming retreat */ +/* Dark event card — matches the navy of the retreat poster */ +.developer-retreat-upcoming { + display: grid; + grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); + gap: clamp(1.75rem, 4.5vw, 3.25rem); + align-items: center; + padding: clamp(1.35rem, 3.5vw, 2.5rem); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 1.5rem; + background: + radial-gradient( + 120% 140% at 100% 0%, + rgba(var(--openms-blue-rgb), 0.28) 0%, + rgba(var(--openms-blue-rgb), 0) 58% + ), + var(--openms-navy); + box-shadow: 0 18px 44px rgba(var(--openms-navy-rgb), 0.25); +} + +.developer-retreat-upcoming .developer-retreat-eyebrow { + border-color: rgba(255, 255, 255, 0.22); + background: rgba(255, 255, 255, 0.12); + color: var(--openms-white); +} + +/* Poster on the left, details on the right */ +.developer-retreat-poster { + order: -1; +} + +.developer-retreat-upcoming__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); + font-weight: 800; + line-height: 1.15; + color: var(--openms-white); + letter-spacing: -0.02em; +} + +.developer-retreat-upcoming__info { + display: grid; + gap: 1rem; + align-content: start; +} + +.developer-retreat-upcoming__facts { + margin: 0; + padding: 0; + list-style: none; + display: grid; + gap: 0.75rem; +} + +.developer-retreat-upcoming__facts li { + display: flex; + align-items: center; + gap: 0.7rem; + font-size: var(--openms-body-size-lg); + font-weight: 500; + line-height: 1.45; + color: rgba(255, 255, 255, 0.92); +} + +.developer-retreat-upcoming__facts i { + display: grid; + place-items: center; + flex-shrink: 0; + width: 2.15rem; + height: 2.15rem; + border-radius: 0.7rem; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.16); + color: var(--openms-white); + font-size: 0.95rem; +} + +.developer-retreat-upcoming__list { + margin: 0; + padding: 0; + list-style: none; + display: grid; + gap: 0.6rem; +} + +.developer-retreat-upcoming__list li { + position: relative; + padding-left: 1.35rem; + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.88); +} + +.developer-retreat-upcoming__list li::before { + content: ""; + position: absolute; + left: 0; + top: 0.55em; + width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + background: var(--openms-blue); +} + +.developer-retreat-upcoming__register { + margin-top: 0.25rem; +} + +.developer-retreat-register { + width: fit-content; + min-height: 2.75rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); +} + +.developer-retreat-upcoming__sponsor { + margin: 0.75rem 0 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(255, 255, 255, 0.72); +} + +.developer-retreat-upcoming__sponsor a { + color: var(--openms-white); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.15em; + transition: color 0.2s ease; +} + +.developer-retreat-upcoming__sponsor a:hover { + color: rgba(255, 255, 255, 0.82); +} + +.developer-retreat-poster { + margin: 0; +} + +.developer-retreat-poster__image { + display: block; + width: 100%; + height: auto; + border-radius: 1rem; + border: 1px solid var(--dev-retreat-card-border); + box-shadow: 0 16px 44px rgba(var(--openms-navy-rgb), 0.16); + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +.developer-retreat-poster__image:hover { + transform: scale(1.015); + box-shadow: 0 20px 52px rgba(var(--openms-navy-rgb), 0.2); +} + +/* Standard page hero buttons (matches community calendar / governance pages) */ +.developer-retreat-page-layout .openms-lib-hero .openms-lib-hero__actions { + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: 0.75rem; + width: 100%; + max-width: 36rem; + margin-top: 1.5rem; +} + +.developer-retreat-page-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%; +} + +.developer-retreat-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); +} + +.developer-retreat-page-layout .openms-lib-btn--primary { + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.developer-retreat-page-layout .openms-lib-btn--ghost { + border: 2px solid var(--openms-blue); + background: transparent; + color: var(--openms-blue) !important; +} + +.developer-retreat-page-layout .openms-lib-btn--primary:hover, +.developer-retreat-page-layout .openms-lib-btn--primary:focus-visible, +.developer-retreat-page-layout .openms-lib-btn--ghost:hover, +.developer-retreat-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; +} + +.developer-retreat-page-layout .openms-lib-btn--primary:hover, +.developer-retreat-page-layout .openms-lib-btn--primary:focus-visible { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.developer-retreat-page-layout .openms-lib-btn--ghost:hover, +.developer-retreat-page-layout .openms-lib-btn--ghost:focus-visible { + background: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; +} + +.developer-retreat-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); +} + +.developer-retreat-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); +} + +.developer-retreat-page-layout .openms-lib-btn--primary.developer-retreat-register--closed { + position: relative; + border-color: rgba(255, 255, 255, 0.32); + background: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.88) !important; + cursor: not-allowed; + pointer-events: auto; +} + +.developer-retreat-page-layout .openms-lib-btn--primary.developer-retreat-register--closed:hover, +.developer-retreat-page-layout .openms-lib-btn--primary.developer-retreat-register--closed:focus-visible { + transform: none !important; + box-shadow: none !important; + border-color: rgba(255, 255, 255, 0.32); + background: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.88) !important; +} + +.developer-retreat-register--closed::after { + content: attr(data-tooltip); + position: absolute; + left: 50%; + bottom: calc(100% + 0.55rem); + z-index: 2; + width: max-content; + max-width: min(18rem, 80vw); + padding: 0.45rem 0.7rem; + border-radius: 0.5rem; + background: var(--openms-navy); + color: var(--openms-white); + font-size: 0.82rem; + font-weight: 500; + line-height: 1.35; + text-align: center; + white-space: normal; + opacity: 0; + visibility: hidden; + transform: translateX(-50%) translateY(4px); + transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; + pointer-events: none; +} + +.developer-retreat-register--closed:hover::after, +.developer-retreat-register--closed:focus-visible::after { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(0); +} + +@media (max-width: 768px) { + .developer-retreat-upcoming { + grid-template-columns: 1fr; + } + + .developer-retreat-poster { + order: -1; + } + + .developer-retreat-page-layout .openms-lib-hero .openms-lib-hero__actions .openms-lib-btn { + width: 100%; + flex: 1 1 auto; + min-width: 0; + justify-content: center; + } +} + +@media (prefers-reduced-motion: reduce) { + .developer-retreat-page-layout .openms-lib-btn:hover, + .developer-retreat-page-layout .openms-lib-btn:focus-visible { + transform: none; + } + + .developer-retreat-register--closed::after { + transition: none; + } +} diff --git a/assets/css/donate-page.css b/assets/css/donate-page.css new file mode 100644 index 00000000..88a0279a --- /dev/null +++ b/assets/css/donate-page.css @@ -0,0 +1,17 @@ +/* Donate page styles live in z-openms-lib-pro.css + under .openms-lib-page--donate. Fallback embed sizing kept here. */ + +.donate-page__zeffy-iframe { + display: block; + width: 100%; + min-height: 42rem; + border: 0; + overflow: hidden; + background: transparent; +} + +@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..0c08d902 --- /dev/null +++ b/assets/css/ecosystem-home.css @@ -0,0 +1,345 @@ +/* Homepage — ecosystem tool cards (bento layout) */ + +.ecosystem-home { + --ecosystem-max: min(100%, 96rem); + --ecosystem-card-radius: 1.05rem; + --ecosystem-ease: cubic-bezier(0.22, 1, 0.36, 1); + 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.95rem, 1.6vw, 1.25rem); + 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 { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + min-height: 100%; + gap: clamp(0.85rem, 1.8vw, 1.15rem); + padding: clamp(1.15rem, 2.2vw, 1.55rem); + overflow: hidden; + border: 1px solid rgba(var(--openms-white-rgb), 0.1); + border-radius: var(--ecosystem-card-radius); + background: + linear-gradient( + 160deg, + color-mix(in srgb, var(--openms-blue) 16%, var(--openms-navy)) 0%, + var(--openms-navy) 48% + ); + color: var(--openms-white); + text-decoration: none; + box-shadow: 0 0.35rem 1.15rem rgba(var(--openms-navy-rgb), 0.28); + transition: + transform 0.22s var(--ecosystem-ease), + border-color 0.22s ease, + box-shadow 0.22s ease, + background 0.22s ease; + -webkit-tap-highlight-color: transparent; +} + +.ecosystem-home__card--wide { + padding: clamp(1.3rem, 2.4vw, 1.75rem); +} + +.ecosystem-home__card-accent { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--openms-blue); + opacity: 0.7; + transition: opacity 0.2s ease, height 0.2s ease; +} + +.ecosystem-home__card--openms-lib .ecosystem-home__card-accent { + background: color-mix(in srgb, var(--openms-blue) 55%, var(--openms-white)); +} + +.ecosystem-home__card--pyopenms .ecosystem-home__card-accent { + background: var(--openms-blue); +} + +.ecosystem-home__card--webapps .ecosystem-home__card-accent { + background: color-mix(in srgb, var(--openms-blue) 72%, var(--openms-white)); +} + +.ecosystem-home__card--viz .ecosystem-home__card-accent { + background: color-mix(in srgb, var(--openms-blue) 55%, #1aa0b8); +} + +.ecosystem-home__card:hover, +.ecosystem-home__card:focus-visible { + transform: translateY(-3px); + border-color: rgba(var(--openms-white-rgb), 0.22); + background: + linear-gradient( + 160deg, + color-mix(in srgb, var(--openms-blue) 28%, var(--openms-navy)) 0%, + color-mix(in srgb, var(--openms-blue) 12%, var(--openms-navy)) 52% + ); + box-shadow: 0 0.75rem 1.9rem rgba(var(--openms-navy-rgb), 0.4); + outline: none; + color: var(--openms-white) !important; +} + +.ecosystem-home__card:hover .ecosystem-home__card-accent, +.ecosystem-home__card:focus-visible .ecosystem-home__card-accent { + opacity: 1; + height: 4px; +} + +.ecosystem-home__card:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-blue), + 0 0 0 5px rgba(var(--openms-blue-rgb), 0.22), + 0 0.75rem 1.9rem rgba(var(--openms-navy-rgb), 0.4); +} + +.ecosystem-home__card:hover .ecosystem-home__card-tag, +.ecosystem-home__card:focus-visible .ecosystem-home__card-tag, +.ecosystem-home__card:hover .ecosystem-home__card-title, +.ecosystem-home__card:focus-visible .ecosystem-home__card-title, +.ecosystem-home__card:hover .ecosystem-home__card-text, +.ecosystem-home__card:focus-visible .ecosystem-home__card-text, +.ecosystem-home__card:hover .ecosystem-home__card-link, +.ecosystem-home__card:focus-visible .ecosystem-home__card-link { + color: var(--openms-white) !important; +} + +.ecosystem-home__card:hover .ecosystem-home__card-text, +.ecosystem-home__card:focus-visible .ecosystem-home__card-text { + color: rgba(var(--openms-white-rgb), 0.86) !important; +} + +.ecosystem-home__card:hover .ecosystem-home__card-link, +.ecosystem-home__card:focus-visible .ecosystem-home__card-link { + gap: 0.5rem; +} + +.ecosystem-home__card-top { + display: flex; + align-items: center; + min-width: 0; +} + +.ecosystem-home__card-tag { + display: inline-flex; + align-items: center; + padding: 0.28rem 0.65rem; + border-radius: 999px; + border: 1px solid rgba(var(--openms-white-rgb), 0.22); + background: transparent; + font-family: var(--openms-font-body); + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.02em; + line-height: 1.2; + color: rgba(var(--openms-white-rgb), 0.82); + white-space: nowrap; + transition: color 0.18s ease, border-color 0.18s ease; +} + +.ecosystem-home__card:hover .ecosystem-home__card-tag, +.ecosystem-home__card:focus-visible .ecosystem-home__card-tag { + border-color: rgba(var(--openms-white-rgb), 0.4); +} + +.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; + max-width: 44rem; +} + +.ecosystem-home__card-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.08rem, 1.7vw, 1.28rem); + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.025em; + color: var(--openms-white); + transition: color 0.18s ease; +} + +.ecosystem-home__card--wide .ecosystem-home__card-title { + font-size: clamp(1.18rem, 2vw, 1.42rem); +} + +.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.76); + 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: 52ch; +} + +.ecosystem-home__card-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 0.35rem; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-white); + transition: gap 0.18s ease, color 0.18s ease; +} + +.ecosystem-home__card-link-icon { + font-size: 0.95rem; + line-height: 1; + transition: transform 0.18s ease; +} + +.ecosystem-home__card:hover .ecosystem-home__card-link-icon, +.ecosystem-home__card:focus-visible .ecosystem-home__card-link-icon { + transform: translateX(0.12rem); +} + +.home-page__block--ecosystem { + background: var(--home-bg-base, #fff); + 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; + } + + .ecosystem-home__card--wide .ecosystem-home__card-body { + max-width: none; + } +} + +@media (prefers-reduced-motion: reduce) { + .ecosystem-home__card:hover, + .ecosystem-home__card:focus-visible { + transform: none; + } + + .ecosystem-home__card:hover .ecosystem-home__card-link-icon, + .ecosystem-home__card:focus-visible .ecosystem-home__card-link-icon { + transform: none; + } +} diff --git a/assets/css/fellowship-page.css b/assets/css/fellowship-page.css new file mode 100644 index 00000000..336603d4 --- /dev/null +++ b/assets/css/fellowship-page.css @@ -0,0 +1,283 @@ +.fellowship-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)); + --fellowship-max: 64rem; + --fellowship-card-radius: 1rem; + --fellowship-card-border: rgba(var(--openms-navy-rgb), 0.1); + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.fellowship-page-layout__content { + width: min(100%, var(--fellowship-max)); + max-width: var(--fellowship-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); + display: grid; + gap: clamp(2.5rem, 5vw, 3.5rem); +} + +.fellowship-page-hero { + margin-bottom: var(--olib-section-y); +} + +/* Single-column hero with the "at a glance" chips side by side under the lead */ +.fellowship-page-layout .openms-lib-hero.fellowship-page-hero .openms-lib-hero__content { + grid-template-columns: minmax(0, 1fr); + max-width: 46rem; +} + +.fellowship-page-layout .openms-lib-hero.fellowship-page-hero .openms-lib-hero__chips { + grid-column: 1; + grid-row: auto; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 0.5rem; + width: 100%; + max-width: none; + margin: 1rem 0 0; +} + + +/* Sizing comes from the shared page-hero title scale (styles_override.css) */ +.fellowship-page-hero__headline { + margin: 0; + font-family: var(--openms-font-heading); + color: var(--openms-navy); +} + +.fellowship-page-hero__blurb { + margin: 1rem 0 0; + font-family: var(--openms-font-body); + font-size: clamp(0.95rem, 2.2vw, var(--openms-body-size-lg)); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.86); +} + +.fellowship-page__section { + scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem); +} + +.fellowship-page__section-head { + display: grid; + gap: 0.5rem; + margin-bottom: clamp(1rem, 2.5vw, 1.35rem); +} + +.fellowship-page__section-head h2 { + margin: 0; + 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; +} + +.fellowship-page__section-lead { + margin: 0; + max-width: 42rem; + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: var(--olib-text-muted); +} + +/* Application form */ +.fellowship-page__form-card { + display: grid; + grid-template-rows: auto 1fr; + gap: 0; + overflow: visible; + border: 1px solid var(--fellowship-card-border); + border-radius: var(--fellowship-card-radius); + background: var(--openms-white); + box-shadow: 0 4px 24px rgba(var(--openms-navy-rgb), 0.06); +} + +.fellowship-page__form-head { + display: grid; + gap: 0.45rem; + padding: clamp(1.1rem, 2.5vw, 1.45rem); + padding-bottom: 0.65rem; + background: linear-gradient( + 180deg, + rgba(var(--openms-blue-rgb), 0.05) 0%, + var(--openms-white) 100% + ); +} + +.fellowship-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); +} + +.fellowship-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); +} + +.fellowship-page__form-body { + --fellowship-form-height: max(100svh, 56rem); + min-height: var(--fellowship-form-height); + padding: 0 clamp(1rem, 2.5vw, 1.45rem) clamp(1rem, 2.5vw, 1.45rem); +} + +.fellowship-page__tally-iframe { + display: block; + width: 100%; + min-height: var(--fellowship-form-height); + height: auto; + border: 0; + overflow: hidden; +} + +/* Projects grid */ +.fellowship-projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); + gap: clamp(0.85rem, 2vw, 1.1rem); +} + +.fellowship-project-card { + display: grid; + gap: 0.65rem; + align-content: start; + padding: clamp(1rem, 2.5vw, 1.35rem); + border: 1px solid var(--fellowship-card-border); + border-radius: var(--fellowship-card-radius); + background: var(--olib-bg-soft); +} + +.fellowship-project-card__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 700; + line-height: 1.25; +} + +.fellowship-project-card__title a { + color: var(--openms-navy); + text-decoration: none; +} + +.fellowship-project-card__title a:hover, +.fellowship-project-card__title a:focus-visible { + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.fellowship-project-card__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.86); +} + +.fellowship-project-card__actions { + display: flex; + flex-wrap: wrap; + gap: 0.65rem 1rem; + margin-top: 0.15rem; +} + +.fellowship-project-card__link { + display: inline-flex; + align-items: center; + gap: 0.2rem; + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--openms-blue); + text-decoration: none; +} + +.fellowship-project-card__link:hover, +.fellowship-project-card__link:focus-visible { + color: var(--openms-navy); + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.fellowship-project-card__link--contribute { + color: var(--openms-navy); +} + +/* Hero buttons (reuse contribute-page motion) */ +.fellowship-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); +} + +.fellowship-page-layout .openms-lib-btn--primary { + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.fellowship-page-layout .openms-lib-btn--ghost { + border: 2px solid var(--openms-blue); + background: transparent; + color: var(--openms-blue) !important; +} + +.fellowship-page-layout .openms-lib-btn--primary:hover, +.fellowship-page-layout .openms-lib-btn--primary:focus-visible, +.fellowship-page-layout .openms-lib-btn--ghost:hover, +.fellowship-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; +} + +.fellowship-page-layout .openms-lib-btn--primary:hover, +.fellowship-page-layout .openms-lib-btn--primary:focus-visible { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.fellowship-page-layout .openms-lib-btn--ghost:hover, +.fellowship-page-layout .openms-lib-btn--ghost:focus-visible { + background: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; +} + +@media (prefers-reduced-motion: reduce) { + .fellowship-page-layout .openms-lib-btn:hover, + .fellowship-page-layout .openms-lib-btn: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..83a5e02e --- /dev/null +++ b/assets/css/hero-saas.css @@ -0,0 +1,895 @@ +/* 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: center; + align-self: center; + width: min(100%, clamp(20rem, 44vw, 40rem)); + margin-right: 0; + 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: block; + width: 100%; + padding-top: clamp(0.85rem, 2vh, 1.5rem); +} + +.hero-logo-diagram__wordmark { + position: absolute; + right: clamp(0.35rem, 2%, 0.85rem); + bottom: clamp(0.2rem, 0.6vh, 0.45rem); + z-index: 5; + display: block; + width: clamp(3.75rem, 10vw, 5.5rem); + height: auto; + margin: 0; + padding: 0; + object-fit: contain; + object-position: right bottom; + filter: drop-shadow(0 1px 2px rgba(var(--openms-dark-rgb), 0.3)); + pointer-events: none; +} + +@media (max-width: 900px) { + .hero-logo-diagram__wordmark { + width: clamp(3.25rem, 18vw, 4.5rem); + right: clamp(0.25rem, 1.5%, 0.65rem); + bottom: clamp(0.15rem, 0.5vh, 0.35rem); + } +} + +.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 / 260; + overflow: visible; + border-radius: 0; + box-shadow: none; + transform: none; +} + +@media (max-width: 900px) { + .hero-home__visual { + width: 100%; + max-width: min(100%, 28rem); + margin-inline: auto; + } + + .hero-home__highlight { + white-space: normal; + } +} + +.hero-logo-diagram__stage { + transform-origin: center; + opacity: 1; +} + +.hero-logo-diagram__panel { + fill: rgba(var(--openms-white-rgb), 0.04); + stroke: rgba(var(--openms-white-rgb), 0.12); + stroke-width: 1; + animation: hero-diagram-panel-glow 5s ease-in-out infinite; +} + +.hero-logo-diagram__grid line { + stroke: rgba(var(--openms-white-rgb), 0.1); + stroke-width: 1; + stroke-dasharray: 3 7; +} + +.hero-logo-diagram__grid line:first-child { + stroke: rgba(var(--openms-white-rgb), 0.24); + stroke-dasharray: none; + stroke-width: 1.25; +} + +.hero-logo-diagram__fill { + transform-box: fill-box; + transform-origin: center bottom; + animation: hero-diagram-fill-breathe 4.5s ease-in-out infinite; +} + +.hero-logo-diagram__line { + stroke-dasharray: 900; + stroke-dashoffset: 900; + animation: hero-diagram-line-draw 6s ease-in-out infinite; +} + +.hero-logo-diagram__needles { + opacity: 1; +} + +.hero-logo-diagram__needle { + stroke: url(#hero-ms-spectrum-gradient); + stroke-width: 2; + stroke-linecap: round; + transform-box: fill-box; + transform-origin: center bottom; + animation: hero-diagram-needle-pulse 3.4s cubic-bezier(0.37, 0, 0.63, 1) infinite; + animation-delay: calc(var(--peak-i, 0) * 0.08s); +} + +.hero-logo-diagram__markers { + opacity: 1; +} + +.hero-logo-diagram__marker { + fill: #ffffff; + filter: drop-shadow(0 0 6px rgba(var(--openms-blue-rgb), 0.85)); + animation: hero-diagram-marker-pulse 3.4s ease-in-out infinite; + animation-delay: calc(var(--peak-i, 0) * 0.12s); +} + +.hero-logo-diagram__cursor { + pointer-events: none; + animation: hero-diagram-cursor-sweep 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; +} + +@keyframes hero-diagram-panel-glow { + 0%, + 100% { + stroke: rgba(var(--openms-white-rgb), 0.1); + fill: rgba(var(--openms-white-rgb), 0.035); + } + + 50% { + stroke: rgba(var(--openms-white-rgb), 0.18); + fill: rgba(var(--openms-white-rgb), 0.055); + } +} + +@keyframes hero-diagram-fill-breathe { + 0%, + 100% { + opacity: 0.55; + } + + 50% { + opacity: 0.92; + } +} + +@keyframes hero-diagram-line-draw { + 0%, + 12% { + stroke-dashoffset: 900; + opacity: 0.35; + } + + 42%, + 58% { + stroke-dashoffset: 0; + opacity: 1; + } + + 88%, + 100% { + stroke-dashoffset: -120; + opacity: 0.4; + } +} + +@keyframes hero-diagram-needle-pulse { + 0%, + 100% { + transform: scaleY(0.35); + opacity: 0.35; + } + + 32% { + transform: scaleY(0.82); + opacity: 0.78; + } + + 50% { + transform: scaleY(1); + opacity: 1; + } + + 68% { + transform: scaleY(0.65); + opacity: 0.6; + } +} + +@keyframes hero-diagram-marker-pulse { + 0%, + 100% { + transform: scale(0.7); + opacity: 0.45; + } + + 50% { + transform: scale(1.15); + opacity: 1; + } +} + +@keyframes hero-diagram-cursor-sweep { + 0% { + transform: translateX(0); + opacity: 0; + } + + 6% { + opacity: 0.9; + } + + 94% { + opacity: 0.9; + } + + 100% { + transform: translateX(624px); + opacity: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-logo-diagram__panel, + .hero-logo-diagram__fill, + .hero-logo-diagram__line, + .hero-logo-diagram__needle, + .hero-logo-diagram__marker, + .hero-logo-diagram__cursor { + animation: none; + } + + .hero-logo-diagram__stage { + opacity: 1; + } + + .hero-logo-diagram__wordmark { + opacity: 1; + } + + .hero-logo-diagram__line { + stroke-dashoffset: 0; + opacity: 0.85; + } + + .hero-logo-diagram__needle { + transform: scaleY(0.92); + opacity: 0.9; + } + + .hero-logo-diagram__marker { + transform: scale(1); + opacity: 0.75; + } + + .hero-logo-diagram__cursor { + opacity: 0; + } + + .hero-logo-diagram__fill { + opacity: 0.75; + } +} + +.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; + } +} + +/* Previous OpenMS bar-spectrum hero diagram */ +.hero-logo-diagram__svg { + aspect-ratio: 680 / 220; + transform: none; +} + +.hero-logo-diagram__wordmark { + position: static; + display: block; + width: auto; + height: auto; + 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); + filter: none; + pointer-events: none; +} + +.hero-logo-diagram__stage { + transform-origin: center; + transform-box: fill-box; + animation: none; + opacity: 1; +} + +.hero-logo-diagram__meta { + font-family: var(--openms-font-body); + font-size: 10px; + font-weight: 600; + letter-spacing: 0.16em; + fill: rgba(var(--openms-white-rgb), 0.58); +} + +.hero-logo-diagram__meta-mark { + font-family: var(--openms-font-heading); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.18em; + fill: rgba(var(--openms-white-rgb), 0.78); +} + +.hero-logo-diagram__guides { + stroke: rgba(var(--openms-white-rgb), 0.09); + stroke-width: 1; + stroke-dasharray: 3 9; +} + +.hero-logo-diagram__baseline { + stroke: url("#hero-openms-logo-gradient"); + stroke-width: 1.5; + opacity: 0.42; +} + +.hero-logo-diagram__signal { + fill: none; + stroke: url("#hero-openms-signal-gradient"); + stroke-width: 2; + stroke-linecap: round; + stroke-dasharray: 720; + animation: hero-logo-signal-draw 5.2s ease-in-out infinite; +} + +.hero-logo-diagram__peaks { + opacity: 1; + transform-origin: 50% 100%; + transform: none; +} + +.hero-logo-diagram__bar { + transform-box: fill-box; + transform-origin: center bottom; + animation: hero-logo-bar-pulse 2.8s cubic-bezier(0.37, 0, 0.63, 1) infinite; + animation-delay: calc(var(--bar-i, 0) * 0.11s); +} + +.hero-logo-diagram__logo-bars { + transform-box: fill-box; + transform-origin: 50% 100%; + animation: hero-logo-spectrum-pulse 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; +} + +@keyframes hero-logo-float { + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-6px); + } +} + +@keyframes hero-logo-spectrum-pulse { + 0%, + 100% { + transform: scaleY(0.9); + opacity: 0.78; + filter: drop-shadow(0 0 2px rgba(var(--openms-purple-rgb), 0.12)); + } + + 50% { + transform: scaleY(1); + opacity: 1; + filter: drop-shadow(0 0 8px rgba(var(--openms-purple-rgb), 0.38)); + } +} + +@keyframes hero-logo-bar-pulse { + 0%, + 100% { + transform: scaleY(0.72); + opacity: 0.68; + } + + 50% { + transform: scaleY(1); + opacity: 1; + } +} + +@keyframes hero-logo-signal-draw { + 0% { + stroke-dashoffset: 720; + opacity: 0; + } + + 28%, + 72% { + stroke-dashoffset: 0; + opacity: 0.8; + } + + 100% { + stroke-dashoffset: -720; + opacity: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-logo-diagram__stage, + .hero-logo-diagram__signal, + .hero-logo-diagram__bar, + .hero-logo-diagram__logo-bars { + animation: none; + } + + .hero-logo-diagram__stage { + opacity: 1; + transform: none; + } + + .hero-logo-diagram__peaks { + opacity: 1; + transform: none; + } + + .hero-logo-diagram__signal { + stroke-dashoffset: 0; + opacity: 0.8; + } + + .hero-logo-diagram__bar { + transform: scaleY(1); + opacity: 1; + } + + .hero-logo-diagram__logo-bars { + transform: none; + opacity: 1; + filter: 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..da02ae5b --- /dev/null +++ b/assets/css/home-metrics.css @@ -0,0 +1,107 @@ +/* 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__value--text { + font-size: clamp(1.5rem, 2.6vw, 2rem); + font-variant-numeric: normal; + line-height: 1.15; + letter-spacing: -0.02em; + text-wrap: balance; +} + +.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..4dda9a8b --- /dev/null +++ b/assets/css/home-section-head.css @@ -0,0 +1,129 @@ +/* Homepage — section heads match OpenMS-lib title style */ + +.home-page { + --home-section-head-max: min(100%, 46rem); + --home-section-head-gap: clamp(2rem, 4vh, 2.75rem); + --home-section-head-title-size: calc(var(--openms-heading-lg-size) * 1.15); + --home-section-head-eyebrow-gap: 0.5rem; + --home-section-head-lead-gap: 0.75rem; +} + +.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--ecosystem .ecosystem-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 var(--home-section-head-eyebrow-gap); + padding: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); + background: transparent; + border: none; + border-radius: 0; + box-shadow: none; +} + +.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: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + color: var(--openms-navy); + text-align: left; + text-transform: uppercase; + 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: var(--home-section-head-lead-gap) 0 0; + max-width: 42ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + text-align: left; + text-wrap: pretty; + 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: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + color: var(--openms-white); + text-align: left; + text-transform: uppercase; + 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: var(--home-section-head-lead-gap) 0 0; + max-width: 42ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + 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..f2c0015d --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,2383 @@ +/* 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-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: center; + overflow: visible; + padding: clamp(3rem, 6vh, 4.75rem) clamp(1.25rem, 4vw, 2.5rem); +} + +.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, 1fr) minmax(0, 1fr); + grid-template-rows: auto; + align-items: center; + column-gap: var(--hero-col-gap); + } + + .home-page__hero .hero-home__copy { + grid-column: 1; + grid-row: 1; + align-self: center; + padding-top: 0; + } + + .home-page__hero .hero-home__footer { + position: relative; + z-index: 6; + padding-top: 0; + } + + .home-page__hero .hero-home__visual { + grid-column: 2; + grid-row: 1; + justify-self: center; + align-self: center; + width: min(100%, var(--hero-diagram-max)); + max-width: var(--hero-diagram-max); + margin-right: 0; + 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); + } +} + +@media (min-width: 1200px) { + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); + } + + .home-page__hero { + --hero-diagram-max: clamp(26rem, 46vw, 46rem); + } + +} + +.home-page__hero .hero-home__content { + gap: clamp(1.25rem, 2.4vh, 1.85rem); + max-width: min(100%, 34rem); +} + +.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; + aspect-ratio: 720 / 260; + overflow: visible; + transform: none; +} + +.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: absolute; + right: clamp(0.35rem, 2%, 0.85rem); + bottom: clamp(0.2rem, 0.6vh, 0.45rem); + z-index: 5; + opacity: 1; + margin: 0; + padding: 0; +} + +.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; +} + +@media (min-width: 1200px) { + .home-page__hero .hero-home__content { + max-width: min(100%, 36rem); + } + + .home-page__hero .hero-home__description { + max-width: 52ch; + } +} + +@media (min-width: 1440px) { + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + } + + .home-page__hero .hero-home__content { + max-width: min(100%, 48rem); + } + + .home-page__hero .hero-home__description { + max-width: 68ch; + } +} + +.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 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: clamp(1.75rem, 3.5vh, 2.5rem); + 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); + } + + .home-page__hero .hero-home { + min-height: clamp(30rem, 76vh, 40rem); + } + + .home-page__hero .hero-home__hero-grid { + gap: clamp(0.75rem, 1.8vh, 1.15rem); + } + + .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(1.5rem, 3.5vh, 2.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: 0; + } + + .home-page__hero .hero-home__image, + .home-page__hero .hero-logo-diagram { + max-width: 100%; + width: 100%; + } + + .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(7rem, 18vh, 10rem) clamp(1.25rem, 4vw, 2rem) + 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; + margin-inline: auto; + } + + .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; + margin-inline: auto; + } + + .home-page__hero .hero-home__copy { + display: flex; + flex-direction: column; + align-items: 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 { + right: clamp(0.25rem, 1.5%, 0.65rem); + bottom: clamp(0.15rem, 0.5vh, 0.35rem); + margin: 0; + padding-right: 0; + } + + .home-page__hero .hero-home__visual-shell::before { + inset: 0 -8% 8%; + } +} + +@media (max-width: 640px) { + .home-page__hero .hero-home__main { + padding-left: clamp(0.75rem, 3vw, 1.1rem); + padding-right: clamp(0.75rem, 3vw, 1.1rem); + } + + .home-page__hero .hero-home__visual-shell { + padding: clamp(0.7rem, 2.4vw, 1rem) clamp(0.55rem, 2vw, 0.85rem) clamp(0.6rem, 2vw, 0.85rem); + } +} + +@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: row; + flex-wrap: wrap; + justify-content: center; + gap: 0.6rem; + width: 100%; + } + + .home-page__hero .hero-home__actions .hero-home__btn { + width: auto; + max-width: 100%; + } +} + +@media (min-width: 481px) and (max-width: 900px) { + .home-page__hero .hero-home__content { + width: min(100%, 46rem); + max-width: 100%; + } + + .home-page__hero .hero-home__title { + width: min(100%, 22ch); + max-width: 100%; + font-size: clamp(2.15rem, 1.55rem + 3vw, 3rem); + text-wrap: balance; + } + + .home-page__hero .hero-home__description { + width: min(100%, 68ch); + max-width: 100%; + font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.05rem); + text-wrap: pretty; + } +} + +.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: var(--home-bg-base); +} + +/* ── 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: 0; + padding-top: clamp(1.25rem, 2.5vh, 1.75rem); + padding-bottom: var(--home-section-space-y); +} + +.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: clamp(1.5rem, 3vh, 2.25rem); +} + +.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; +} + +/* Eyebrow / title / lead type: home-section-head.css */ + +.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__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--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; + } +} + +/* Keep the restored bar-spectrum diagram fluid within the homepage hero. */ +.home-page__hero .hero-logo-diagram__svg { + aspect-ratio: 680 / 245; +} + +.home-page__hero .hero-logo-diagram__wordmark { + position: static; + right: auto; + bottom: auto; + width: auto; + height: auto; + margin: clamp(0.15rem, 0.4vh, 0.35rem) 0 0; + padding: 0; + text-align: center; +} + +/* Homepage hero — professional visual polish */ +.home-page__hero .hero-home { + min-height: clamp(34rem, 76svh, 44rem); + background: + radial-gradient( + ellipse 62% 72% at 78% 44%, + rgba(var(--openms-purple-rgb), 0.2) 0%, + rgba(var(--openms-blue-rgb), 0.08) 42%, + transparent 72% + ), + radial-gradient( + ellipse 48% 55% at 12% 4%, + rgba(var(--openms-blue-rgb), 0.16) 0%, + transparent 68% + ), + linear-gradient(135deg, #071d5c 0%, #0a2676 52%, #07194f 100%); +} + +.home-page__hero .hero-home__title { + color: #f8fbff; + text-shadow: 0 0.15rem 1.25rem rgba(0, 10, 48, 0.16); +} + +.home-page__hero .hero-home__title-accent { + position: relative; + display: inline-block; + color: #f8fbff; + background: none; + -webkit-text-fill-color: currentColor; +} + +.home-page__hero .hero-home__description { + color: rgba(var(--openms-white-rgb), 0.84); +} + +.home-page__hero .hero-home__visual-shell { + isolation: isolate; + padding: clamp(0.25rem, 0.8vw, 0.6rem) 0 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + backdrop-filter: none; +} + +.home-page__hero .hero-home__visual-shell::before { + inset: 8% 2% 22%; + background: radial-gradient( + ellipse at 50% 44%, + rgba(var(--openms-purple-rgb), 0.16) 0%, + rgba(var(--openms-blue-rgb), 0.07) 46%, + transparent 74% + ); + filter: blur(12px); +} + +.home-page__hero .hero-home__visual-caption { + border-top: 0; +} + +.home-page__hero .hero-home__highlight { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.42rem 0.7rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.11); + border-radius: 999px; + color: rgba(var(--openms-white-rgb), 0.78); + background: rgba(var(--openms-white-rgb), 0.045); + font-weight: 600; + letter-spacing: 0.015em; +} + +.home-page__hero .hero-home__highlight::before, +.home-page__hero .hero-home__highlight + .hero-home__highlight::before { + content: ""; + width: 0.32rem; + height: 0.32rem; + margin: 0; + border-radius: 50%; + background: linear-gradient(135deg, #ffb401, #ff03cb); + box-shadow: 0 0 0.5rem rgba(var(--openms-pink-rgb), 0.35); +} + +.home-page__hero .hero-home__highlights { + gap: clamp(0.4rem, 0.8vw, 0.6rem); +} + +.home-page__hero .hero-home__btn { + min-height: 3rem; + padding: 0.78rem 1.45rem; + font-size: clamp(0.86rem, 0.8rem + 0.2vw, 0.95rem); +} + +.home-page__hero .hero-home__btn--primary { + border-color: var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white); + box-shadow: + 0 0.65rem 1.5rem rgba(var(--openms-blue-rgb), 0.24), + inset 0 1px 0 rgba(var(--openms-white-rgb), 0.16); +} + +.home-page__hero .hero-home__btn--secondary { + border-color: rgba(var(--openms-white-rgb), 0.24); + background: rgba(var(--openms-white-rgb), 0.055); + color: rgba(var(--openms-white-rgb), 0.94); + box-shadow: inset 0 1px 0 rgba(var(--openms-white-rgb), 0.07); + backdrop-filter: blur(10px); +} + +.home-page__hero .hero-home__btn--secondary:hover, +.home-page__hero .hero-home__btn--secondary:focus-visible { + border-color: rgba(var(--openms-white-rgb), 0.42); + background: rgba(var(--openms-white-rgb), 0.11); + color: var(--openms-white); +} + +@media (max-width: 900px) { + .home-page__hero .hero-home { + min-height: auto; + background: + radial-gradient( + ellipse 90% 45% at 50% 76%, + rgba(var(--openms-purple-rgb), 0.17) 0%, + transparent 72% + ), + linear-gradient(160deg, #071d5c 0%, #0a2676 52%, #07194f 100%); + } + + .home-page__hero .hero-home__visual-shell { + box-shadow: none; + } + + .home-page__hero .hero-home__copy { + gap: clamp(1.35rem, 3vh, 1.75rem); + } + + .home-page__hero .hero-home__visual { + margin-top: clamp(0.35rem, 1vh, 0.75rem); + } +} 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..fff9cf72 100644 --- a/assets/css/members.css +++ b/assets/css/members.css @@ -1,17 +1,107 @@ +/* ── Leadership (board of directors) cards on /contributors/ ── */ +/* Pro-page overrides live in z-openms-lib-pro.css. + Keep lightweight fallbacks here for non-pro contexts. */ + +.leadership h2, +.leadership-exec h2, +.leadership-members h2 { + margin-bottom: 1rem; +} + +.contributors-page .team > .name.title { + display: none; +} + +.contributors-page .team { + padding-bottom: 0; +} + +.leadership-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(1rem, 2.5vw, 1.75rem); + margin-top: 1.25rem; +} + +.leadership-card { + display: flex; + align-items: flex-start; + gap: 1.15rem; + padding: clamp(1.1rem, 2.5vw, 1.5rem); + background: var(--openms-white); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 1rem; + box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.05); +} + +.leadership-card__photo { + flex: 0 0 auto; + width: 6.5rem; + height: 6.5rem; + border-radius: 50%; + object-fit: cover; + object-position: center top; + border: 3px solid rgba(var(--openms-blue-rgb), 0.18); +} + +.leadership-card__body { + min-width: 0; +} + +.leadership-card__name { + margin: 0 0 0.15rem; + font-size: 1.1rem; + line-height: 1.3; + color: var(--openms-navy); +} + +.leadership-card__role { + margin: 0 0 0.55rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.leadership-card__bio { + margin: 0; + font-size: 0.95rem; + line-height: 1.6; +} + +.leadership-exec { + margin: 0 0 1.5rem; +} + +@media (max-width: 860px) { + .leadership-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .leadership-card { + flex-direction: column; + align-items: center; + text-align: center; + } +} + .member { - margin-bottom: 1rem; + margin-bottom: 1rem; } .roles { - margin-top: 0.5rem; + margin-top: 0.5rem; } .role { - display: inline-block; - background-color: #eee; - color: #333; - padding: 0.2rem 0.5rem; - border-radius: 0.5rem; - font-size: 0.85em; - margin-right: 0.3rem; + display: inline-block; + background-color: var(--openms-grey); + color: var(--openms-dark); + padding: 0.2rem 0.5rem; + border-radius: 0.5rem; + font-size: 0.85em; + margin-right: 0.3rem; } diff --git a/assets/css/navbar-collision-layout.css b/assets/css/navbar-collision-layout.css new file mode 100644 index 00000000..91122699 --- /dev/null +++ b/assets/css/navbar-collision-layout.css @@ -0,0 +1,1390 @@ +/* Auto-generated collision layout */ + +/* from assets/css/navbar-responsive.css */ +/* block 1 */ + + html[data-navbar-layout="mobile"] .site-header { + overflow-x: clip; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh { + min-height: auto; + overflow: visible; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh.is-menu-open .navbar-backdrop, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh.is-menu-open .navbar-backdrop { + display: block; + top: var(--openms-menu-offset, var(--openms-news-banner-height, 0px)); + z-index: 265; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .container, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .navbar-desktop-cta { + display: none !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-brand-link { + flex: 1 1 auto; + min-width: 0; + max-width: 100%; + height: 100%; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-logo-text, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-logo-text { + display: none; + } + + html[data-navbar-layout="mobile"] .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 */ + html[data-navbar-layout="mobile"] .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%; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-ctas-end .navbar-search--mobile { + order: 1; + } + + html[data-navbar-layout="mobile"] .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; + border-radius: 0.65rem; + background: rgba(var(--openms-white-rgb), 0.1); + transition: background-color 0.2s ease; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-ctas-end .navbar-burger.is-active { + background: rgba(var(--openms-white-rgb), 0.16); + } + + html[data-navbar-layout="mobile"] .navbar-mobile-ctas-end .navbar-search__toggle { + border-radius: 0.65rem; + background: rgba(var(--openms-white-rgb), 0.1); + transition: background-color 0.2s ease; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-ctas-end .navbar-search__toggle:hover, +html[data-navbar-layout="mobile"] .navbar-mobile-ctas-end .navbar-search__toggle:focus-visible, +html[data-navbar-layout="mobile"] .navbar-mobile-ctas-end .navbar-search.is-open .navbar-search__toggle { + background: rgba(var(--openms-white-rgb), 0.16); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-burger, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-burger span, +html[data-navbar-layout="mobile"] #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; + } + + /* 80% width mobile drawer — slides in right to left, below news banner */ + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + display: flex !important; + flex-direction: column; + flex: none; + width: var(--openms-mobile-menu-width, 80%); + max-width: var(--openms-mobile-menu-max-width, 28rem); + position: fixed; + left: auto !important; + right: 0 !important; + top: var(--openms-menu-offset, var(--openms-news-banner-height, 0px)); + bottom: 0; + height: auto !important; + min-height: calc(100dvh - var(--openms-menu-offset, var(--openms-news-banner-height, 0px))); + z-index: 270; + margin: 0; + padding: 0; + background: var(--openms-mobile-menu-bg, var(--openms-white)); + color: var(--openms-navy); + font-family: var(--openms-font-body); + --openms-navbar-link-color: var(--openms-chrome-nav-text); + --openms-navbar-link-hover-color: var(--openms-chrome-nav-text); + --openms-navbar-link-hover-bg: rgba(var(--openms-navy-rgb), 0.04); + border: none; + border-left: 1px solid var(--openms-mobile-nav-divider, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--openms-mobile-menu-radius, 0); + box-shadow: var(--openms-mobile-menu-shadow, -0.35rem 0 1.5rem rgba(var(--openms-navy-rgb), 0.14)); + max-height: none; + overflow: hidden; + pointer-events: none; + opacity: 1; + transform: translate3d(100%, 0, 0); + transition: + transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), + visibility 0s linear 0.32s; + visibility: hidden; + will-change: transform; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active { + transform: translate3d(0, 0, 0); + visibility: visible; + pointer-events: auto; + transition: + transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), + visibility 0s; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__panel, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__panel { + display: flex; + flex: 1 1 auto; + flex-direction: column; + justify-content: flex-start; + width: 100%; + min-height: 0; + height: 100%; + gap: 0; + padding-top: 0; + box-sizing: border-box; + } + + /* Close row mirrors the navbar bar so the X lands exactly where the burger is */ + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__header, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__header { + display: flex; + flex: 0 0 auto; + align-items: center; + justify-content: flex-end; + flex-shrink: 0; + margin: 0; + padding: 0 var(--openms-navbar-container-pad-inline-mobile, 1.15rem) 0 1rem; + min-height: calc( + var(--openms-header-height, 5.5rem) - var(--openms-news-banner-height, 0px) + ); + box-sizing: border-box; + background: var(--openms-mobile-menu-bg, var(--openms-white)); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__close, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__close { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 3.25rem; + height: 3.25rem; + margin: 0; + padding: 0; + border: none; + border-radius: 0.65rem; + background: transparent; + color: var(--openms-chrome-nav-text); + cursor: pointer; + transition: color 0.2s ease; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__close svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__close svg { + width: 1.375rem; + height: 1.375rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__close:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__close:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__close:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__close:focus-visible { + background: transparent; + color: var(--openms-navy); + outline: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__panel::before, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__panel::before { + display: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__nav, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__nav { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + overflow: hidden; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__nav > .navbar-end, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__nav > .navbar-end { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + align-content: flex-start; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + overscroll-behavior: contain; + scroll-padding-bottom: 0.75rem; + padding-bottom: 0; + scrollbar-width: none; + -ms-overflow-style: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__nav > .navbar-end::-webkit-scrollbar, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__nav > .navbar-end::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__nav > .navbar-mobile-ctas--menu, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__nav > .navbar-mobile-ctas--menu, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__panel > .navbar-mobile-ctas--menu, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__panel > .navbar-mobile-ctas--menu { + display: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__footer, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__footer { + display: flex !important; + flex-direction: column; + flex-shrink: 0; + margin-top: auto; + margin-bottom: 0; + gap: 0; + border-top: none; + background: var(--openms-white); + padding: 0 0 calc( + var(--openms-mobile-menu-footer-pad, 1rem) + + var(--openms-mobile-menu-footer-glow-pad, var(--openms-btn-glow-size, 6px)) + + env(safe-area-inset-bottom, 0px) + ); + overflow: visible; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-end > .navbar-mobile-social, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-end > .navbar-mobile-social { + flex: 0 0 auto; + order: 1; + margin-top: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-end > .navbar-links, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-end > .navbar-links { + order: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu__footer > .navbar-mobile-ctas--menu, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu__footer > .navbar-mobile-ctas--menu { + flex: 0 0 auto; + position: relative; + z-index: 2; + margin-bottom: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active .navbar-end, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active .navbar-end { + display: flex; + flex: 1 1 auto; + width: 100%; + min-height: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-end, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-end { + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + width: 100%; + flex-wrap: nowrap; + gap: 0; + padding: 0; + min-height: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active .navbar-links, +html[data-navbar-layout="mobile"] #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; + align-self: flex-start; + width: 100%; + overflow: visible; + gap: 0; + margin-top: 0; + padding: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu, +html[data-navbar-layout="mobile"] #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.5rem; + width: 100%; + flex-shrink: 0; + margin: 0; + padding: 0.2rem 1rem calc(0.35rem + var(--openms-mobile-menu-footer-glow-pad, var(--openms-btn-glow-size, 6px))); + border-bottom: none; + background: transparent; + overflow: visible; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--full, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--full { + display: inline; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--short, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--short { + display: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item, +html[data-navbar-layout="mobile"] #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; + min-width: 0; + max-width: none; + min-height: var(--openms-mobile-cta-min-height, 2.45rem); + padding: var(--openms-mobile-cta-pad-y, 0.55rem) var(--openms-mobile-cta-pad-x, 0.75rem) !important; + border-radius: var(--openms-btn-pill-radius, 999px); + overflow: visible; + box-sizing: border-box; + font-size: var(--openms-mobile-cta-font-size, 0.875rem); + font-weight: 600; + 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 */ + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:active, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:active, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:active, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate { + border: 2px solid var(--openms-blue) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate .navbar-cta-label, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate .navbar-cta-label { + color: inherit !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-links, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-links { + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + width: 100%; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-actions, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-actions { + display: none !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + width: 100%; + justify-content: flex-start; + text-align: left; + min-height: 0; + padding: var(--openms-mobile-nav-item-pad-y, 0.65rem) var(--openms-mobile-nav-item-pad-x, 1.15rem); + font-weight: 600; + font-size: var(--openms-mobile-nav-item-size, 1.0625rem); + color: var(--openms-chrome-nav-text) !important; + border: none; + border-radius: 0; + background: transparent; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary { + display: flex; + align-items: center; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + font-size: var(--openms-mobile-nav-item-size, 1.25rem); + font-weight: 600; + transition: background-color 0.2s ease; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown { + display: flex; + flex-direction: column; + align-items: stretch; + flex-wrap: nowrap; + gap: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + overflow: hidden; + transition: background-color 0.2s ease; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active { + box-shadow: none; + background: rgba(var(--openms-navy-rgb), 0.02); + } + + html[data-navbar-layout="mobile"] .navbar.is-fresh .navbar-item.has-dropdown .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { + width: 100%; + justify-content: flex-start; + align-items: center; + text-align: left; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + display: flex; + justify-content: space-between; + gap: 0.5rem; + padding: var(--openms-mobile-nav-item-pad-y, 0.65rem) var(--openms-mobile-nav-item-pad-x, 1.15rem); + min-height: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link { + color: var(--openms-chrome-nav-text) !important; + font-weight: 600; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link__label, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link__label { + flex: 1 1 auto; + min-width: 0; + } + + html[data-navbar-layout="mobile"] .navbar-dropdown-chevron { + display: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + margin-left: auto; + color: rgba(var(--openms-navy-rgb), 0.55); + border-radius: 0; + background: transparent; + transition: transform 0.22s ease, color 0.22s ease; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron { + background: transparent; + color: var(--openms-blue); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before { + content: ""; + width: 0.45rem; + height: 0.45rem; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; + transform: rotate(45deg) translateY(-1px); + transition: transform 0.22s ease; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron::before, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron::before { + transform: rotate(-135deg) translateY(1px); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .navbar.is-fresh .navbar-item.has-dropdown .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { + gap: 0.35rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + order: 1; + flex: 0 0 auto; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, +html[data-navbar-layout="mobile"] #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: block !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; + flex: 0 0 auto; + align-self: stretch; + max-height: 0; + overflow: hidden; + opacity: 0; + visibility: hidden; + pointer-events: none; + border-top: 1px solid transparent; + transition: + max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), + opacity 0.22s ease, + padding 0.32s cubic-bezier(0.22, 1, 0.36, 1), + border-color 0.22s ease, + visibility 0s linear 0.32s; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown { + max-height: 50rem; + opacity: 1; + visibility: visible; + pointer-events: auto; + overflow: visible; + -webkit-overflow-scrolling: touch; + background: var(--openms-white) !important; + border-top-color: transparent; + padding: 0.05rem 0 0.35rem; + transition: + max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), + opacity 0.22s ease, + padding 0.32s cubic-bezier(0.22, 1, 0.36, 1), + border-color 0.22s ease, + visibility 0s linear 0s; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:not(.is-active):hover .navbar-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:not(.is-active):hover .navbar-dropdown { + max-height: 0; + opacity: 0; + visibility: hidden; + pointer-events: none; + padding: 0; + border-top-color: transparent; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown { + max-height: 50rem; + opacity: 1; + visibility: visible; + pointer-events: auto; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + cursor: pointer; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-heading { + width: 100%; + text-align: left; + padding: 0.55rem 1.25rem 0.2rem 2.5rem; + border-top: none; + color: var(--openms-chrome-nav-text-muted) !important; + font-family: var(--openms-font-heading, inherit); + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.35rem; + text-align: left; + white-space: normal; + min-height: 0; + padding: 0.5rem var(--openms-mobile-nav-item-pad-x, 0.9rem) 0.5rem 2.5rem; + font-weight: 500; + font-size: var(--openms-mobile-nav-subitem-size, 1.125rem); + color: var(--openms-chrome-nav-text) !important; + border: none; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.06); + border-radius: 0; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + position: relative; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item .navbar-item__label, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item .navbar-item__label { + flex: 1 1 auto; + min-width: 0; + line-height: 1.35; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon { + justify-content: flex-start; + gap: 0.2rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label { + flex: 0 1 auto; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.launch-icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.external-link-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.launch-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.external-link-icon { + display: inline-flex !important; + visibility: visible !important; + opacity: 1 !important; + flex: 0 0 auto; + width: 0.875rem; + height: 0.875rem; + min-width: 0.875rem; + margin-left: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item::before, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item::before { + display: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:last-child, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:last-child { + border-bottom: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested { + font-size: var(--openms-mobile-nav-subitem-size, 1.125rem); + padding-left: 3rem; + padding-right: 1.25rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible { + background: rgba(var(--openms-navy-rgb), 0.04) !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:focus-visible { + color: var(--openms-blue) !important; + background: rgba(var(--openms-blue-rgb), 0.08) !important; + border-radius: 0.35rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social { + display: flex !important; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 0.9rem; + width: 100%; + margin: 0; + padding: 0.35rem var(--openms-mobile-nav-item-pad-x, 1.15rem) 0.65rem + calc(var(--openms-mobile-nav-item-pad-x, 0.9rem) + 0.85rem); + border: none; + border-radius: 0; + background: transparent !important; + box-shadow: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a { + display: inline-flex; + align-items: center; + justify-content: center; + width: auto; + color: var(--openms-chrome-nav-text); + border: none; + border-radius: 0; + min-width: 0; + min-height: 0; + padding: 0.25rem 0; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + transition: color 0.2s ease, opacity 0.2s ease; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon { + width: 1.35rem; + height: 1.35rem; + color: inherit; + fill: currentColor; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg * { + fill: currentColor !important; + stroke: currentColor !important; + color: inherit !important; + } + + +/* block 2 */ + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand-actions, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .container, +html[data-navbar-layout="mobile"] #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); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand, +html[data-navbar-layout="mobile"] #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%; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-brand-link { + grid-column: 1; + max-width: 100%; + min-width: 0; + height: 100%; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand-actions, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-brand-actions { + grid-column: 2; + flex: none; + margin-left: 0; + min-width: 0; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar.navbar-mobile-ctas-end { + gap: 0.5rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle, +html[data-navbar-layout="mobile"] .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; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile.is-open .navbar-search__toggle, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:hover, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:focus-visible, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger.is-active, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger:hover, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger:focus-visible { + background: transparent; + box-shadow: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-end, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-end { + padding-bottom: 0; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu { + padding: 0.2rem 1rem calc(0.35rem + var(--openms-mobile-menu-footer-glow-pad, var(--openms-btn-glow-size, 6px))); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu .navbar-cta-item { + min-height: var(--openms-mobile-cta-min-height, 2.45rem); + padding: var(--openms-mobile-cta-pad-y, 0.55rem) var(--openms-mobile-cta-pad-x, 0.75rem) !important; + font-size: var(--openms-mobile-cta-font-size, 0.875rem); + border-radius: var(--openms-btn-pill-radius, 999px); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links { + align-items: stretch; + justify-content: flex-start; + align-self: flex-start; + width: 100%; + margin-top: 0; + padding: 0; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar.navbar-mobile-ctas-end { + gap: 0.5rem; + } + + /* Mobile drawer — light gray hover on the link row only (text color unchanged) */ + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:focus-visible, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:focus-visible { + background: rgba(var(--openms-navy-rgb), 0.06) !important; + background-color: rgba(var(--openms-navy-rgb), 0.06) !important; + color: var(--openms-chrome-nav-text) !important; + box-shadow: none !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:focus-visible { + color: var(--openms-chrome-nav-text) !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active { + background: var(--openms-mobile-nav-card-bg, var(--openms-white)) !important; + background-color: var(--openms-mobile-nav-card-bg, var(--openms-white)) !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !important; + box-shadow: none !important; + opacity: 0.9; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + display: inline-flex; + align-items: center; + gap: 0.35rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item svg.icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg.icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.icon { + display: inline-flex; + align-items: center; + align-self: center; + flex-shrink: 0; + color: inherit; + fill: currentColor; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item svg, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item svg *, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg *, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg * { + fill: currentColor !important; + stroke: currentColor !important; + color: inherit !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"], +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"] { + fill: none !important; + } + + /* SM–MD header chrome icons */ + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle { + color: var(--openms-navbar-link-color); + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile.is-open .navbar-search__toggle, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:hover, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle:focus-visible { + color: var(--openms-navbar-link-color); + background: transparent; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger { + color: var(--openms-navbar-link-color); + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger span { + background-color: var(--openms-navbar-link-color); + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger.is-active span, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger:hover span, +html[data-navbar-layout="mobile"] .navbar-mobile-toolbar .navbar-burger:focus-visible span { + background-color: var(--openms-navbar-link-color); + } + + /* Tablet / md — 80% drawer, roomier top bar */ + @media (min-width: 768px) and (max-width: 1023px) { + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .container, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .container { + padding-left: 1rem; + padding-right: 1rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-brand { + column-gap: 0.85rem; + } + + html[data-navbar-layout="mobile"] .navbar-mobile-toolbar.navbar-mobile-ctas-end { + gap: 0.5rem; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + left: auto; + right: 0; + width: var(--openms-mobile-menu-width, 80%); + max-width: var(--openms-mobile-menu-max-width, 28rem); + border-left: 1px solid var(--openms-mobile-nav-divider, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--openms-mobile-menu-radius, 0); + box-shadow: var(--openms-mobile-menu-shadow, -0.35rem 0 1.5rem rgba(var(--openms-navy-rgb), 0.14)); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + padding-left: var(--openms-mobile-nav-item-pad-x, 1.15rem); + padding-right: var(--openms-mobile-nav-item-pad-x, 1.15rem); + } + } + + @media (max-width: 767px) { + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + left: auto; + right: 0; + width: var(--openms-mobile-menu-width, 80%); + max-width: var(--openms-mobile-menu-max-width, 28rem); + border-left: 1px solid var(--openms-mobile-nav-divider, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--openms-mobile-menu-radius, 0); + box-shadow: var(--openms-mobile-menu-shadow, -0.35rem 0 1.5rem rgba(var(--openms-navy-rgb), 0.14)); + } + } + + +/* block 3 */ + +@media (prefers-reduced-motion: reduce) { + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + transition: none; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before { + transition: none; + } + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):hover, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):focus-visible, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):hover, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):focus-visible { + transform: none; + } +} + +/* from assets/css/navbar-search.css */ +/* block 1 */ + + html[data-navbar-layout="mobile"] .navbar-search--desktop { + display: none !important; + } + + html[data-navbar-layout="mobile"] .navbar-search--mobile { + display: flex !important; + } + + html[data-navbar-layout="mobile"] .navbar-search--mobile .navbar-search__toggle { + width: 2.5rem; + height: 2.5rem; + } + + html[data-navbar-layout="mobile"] .navbar-search__panel { + padding-block: 0.65rem 0.75rem; + } + +/* from assets/css/site-header.css */ +/* block 1 */ + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + background: var(--openms-mobile-menu-bg, var(--openms-content-soft, #f4f6f9)); + border-top: none; + font-family: var(--openms-font-body); + /* 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-chrome-nav-text); + } + + html[data-navbar-layout="mobile"] .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); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested { + color: var(--openms-chrome-nav-text) !important; + } + +/* from assets/css/styles_override.css */ +/* block 1 */ + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static, +html[data-navbar-layout="mobile"] #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-chrome-nav-text); + --openms-navbar-link-hover-bg: rgba(var(--openms-navy-rgb), 0.06); + } + + html[data-navbar-layout="mobile"] .navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown { + flex-direction: column; + align-items: stretch; + } + + html[data-navbar-layout="mobile"] .navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, +html[data-navbar-layout="mobile"] #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%; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link { + color: var(--openms-chrome-nav-text) !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link, +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown { + border: none !important; + box-shadow: none !important; + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + } + +/* block 2 */ + + html[data-navbar-layout="mobile"] .navbar.is-fresh .navbar-burger, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-burger { + margin-right: 0; + } + +/* block 3 */ + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item:not(.navbar-cta-item), +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-item:not(.navbar-cta-item):not(.has-dropdown), +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item:not(.navbar-cta-item), +html[data-navbar-layout="mobile"] #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; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-item.has-dropdown.is-emphasized > .navbar-link, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-item.has-dropdown.is-emphasized > .navbar-link { + color: var(--openms-chrome-nav-text) !important; + font-weight: 600; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg.icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg.icon { + display: inline-flex; + align-items: center; + align-self: center; + color: inherit; + fill: currentColor; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg *, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg *, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg * { + fill: currentColor !important; + stroke: currentColor !important; + color: inherit !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.launch-icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.external-link-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.launch-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.external-link-icon { + display: inline-flex !important; + visibility: visible !important; + flex: 0 0 auto; + width: 1rem; + height: 1rem; + min-width: 1rem; + color: inherit; + fill: currentColor; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"], +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"] { + fill: none !important; + } + +/* from assets/css/navbar-surface.css */ +/* block 1 */ + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .container, +html[data-navbar-layout="mobile"] #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); + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-brand, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-brand { + min-height: calc(var(--openms-navbar-logo-height, 52px) + 0.55rem); + } + + +/* from assets/css/openms-buttons.css */ +/* block 1 */ + + html[data-navbar-layout="mobile"] .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate, +html[data-navbar-layout="mobile"] .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:visited { + border: 2px solid var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-blue) !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; + } + + html[data-navbar-layout="mobile"] .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, +html[data-navbar-layout="mobile"] .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, +html[data-navbar-layout="mobile"] .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:active { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-blue) !important; + 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) !important; + outline: none; + } + + html[data-navbar-layout="mobile"] .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.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) !important; + } diff --git a/assets/css/navbar-responsive.css b/assets/css/navbar-responsive.css new file mode 100644 index 00000000..37bed6de --- /dev/null +++ b/assets/css/navbar-responsive.css @@ -0,0 +1,1604 @@ +/* Navbar — burger menu on sm/md (≤1023px) or when search overlaps links (see navbar-collision-layout.css) */ + +.site-header { + max-width: 100%; +} + +.site-header #nav.navbar.is-fresh { + max-width: 100%; +} + +.navbar-backdrop { + display: none; + position: fixed; + inset: 0; + z-index: 240; + margin: 0; + padding: 0; + border: none; + background: var(--openms-chrome-nav-backdrop, rgba(var(--openms-navy-rgb), 0.52)); + cursor: pointer; +} + +.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 LG+ — horizontal bar (1024px+) */ +@media (min-width: 1024px) { + .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: auto 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: auto 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: start; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + gap: var(--openms-navbar-desktop-gap); + min-width: 0; + max-width: min(100%, calc(100vw - 20rem)); + overflow: visible; + pointer-events: auto; + position: relative; + z-index: 1; + } + + .site-header #nav.navbar.is-fresh .navbar-links:has(> .navbar-item.has-dropdown:hover), + .site-header #nav.navbar.is-fresh .navbar-links:has(> .navbar-item.has-dropdown:focus-within), + #navbar-clone.navbar.is-fresh .navbar-links:has(> .navbar-item.has-dropdown:hover), + #navbar-clone.navbar.is-fresh .navbar-links:has(> .navbar-item.has-dropdown:focus-within) { + z-index: 600; + } + + .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; + z-index: 1; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:hover, + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:focus-within, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:hover, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:focus-within { + z-index: 601; + } + + /* 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.75rem; + 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: 0; + right: auto; + margin-top: 0.35rem; + transform: none; + z-index: 602; + overflow: visible; + display: none; + box-sizing: border-box; + width: max-content; + min-width: 0; + } + + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown:nth-last-child(-n+3) .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown:nth-last-child(-n+3) .navbar-dropdown { + left: auto; + right: 0; + } + + .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: flex !important; + flex-direction: column; + align-items: stretch; + } + + .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.12rem; + max-width: none; + overflow: visible; + text-overflow: clip; + padding-left: var(--openms-navbar-desktop-pad-x); + padding-right: var(--openms-navbar-desktop-pad-x); + min-height: 2.25rem; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + } + + .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); + } +} + +/* Touch / coarse pointer on desktop — tap to expand dropdowns (accordion) */ +@media (min-width: 1024px) and (hover: none), (min-width: 1024px) and (pointer: coarse) { + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown { + display: none !important; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-active .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-active .navbar-dropdown { + display: flex !important; + flex-direction: column; + align-items: stretch; + } + + .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:hover .navbar-dropdown { + display: none !important; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown { + display: flex !important; + flex-direction: column; + align-items: stretch; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link { + cursor: pointer; + } +} + +/* Compact desktop — scale logo so left-aligned links keep room */ +@media (min-width: 1024px) 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: 1023px) { + .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; + top: var(--openms-menu-offset, var(--openms-news-banner-height, 0px)); + z-index: 265; + } + + .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; + border-radius: 0.65rem; + background: rgba(var(--openms-white-rgb), 0.1); + transition: background-color 0.2s ease; + } + + .navbar-mobile-ctas-end .navbar-burger.is-active { + background: rgba(var(--openms-white-rgb), 0.16); + } + + .navbar-mobile-ctas-end .navbar-search__toggle { + border-radius: 0.65rem; + background: rgba(var(--openms-white-rgb), 0.1); + transition: background-color 0.2s ease; + } + + .navbar-mobile-ctas-end .navbar-search__toggle:hover, + .navbar-mobile-ctas-end .navbar-search__toggle:focus-visible, + .navbar-mobile-ctas-end .navbar-search.is-open .navbar-search__toggle { + background: rgba(var(--openms-white-rgb), 0.16); + } + + .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; + } + + /* 80% width mobile drawer — slides in right to left, below news banner */ + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + display: flex !important; + flex-direction: column; + flex: none; + width: var(--openms-mobile-menu-width, 80%); + max-width: var(--openms-mobile-menu-max-width, 28rem); + position: fixed; + left: auto !important; + right: 0 !important; + top: var(--openms-menu-offset, var(--openms-news-banner-height, 0px)); + bottom: 0; + height: auto !important; + min-height: calc(100dvh - var(--openms-menu-offset, var(--openms-news-banner-height, 0px))); + z-index: 270; + margin: 0; + padding: 0; + background: var(--openms-mobile-menu-bg, var(--openms-white)); + color: var(--openms-navy); + font-family: var(--openms-font-body); + --openms-navbar-link-color: var(--openms-chrome-nav-text); + --openms-navbar-link-hover-color: var(--openms-chrome-nav-text); + --openms-navbar-link-hover-bg: rgba(var(--openms-navy-rgb), 0.04); + border: none; + border-left: 1px solid var(--openms-mobile-nav-divider, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--openms-mobile-menu-radius, 0); + box-shadow: var(--openms-mobile-menu-shadow, -0.35rem 0 1.5rem rgba(var(--openms-navy-rgb), 0.14)); + max-height: none; + overflow: hidden; + pointer-events: none; + opacity: 1; + transform: translate3d(100%, 0, 0); + transition: + transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), + visibility 0s linear 0.32s; + visibility: hidden; + will-change: transform; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active { + transform: translate3d(0, 0, 0); + visibility: visible; + pointer-events: auto; + transition: + transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), + visibility 0s; + } + + .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; + justify-content: flex-start; + width: 100%; + min-height: 0; + height: 100%; + gap: 0; + padding-top: 0; + box-sizing: border-box; + } + + /* Close row mirrors the navbar bar so the X lands exactly where the burger is */ + .site-header #nav.navbar.is-fresh .navbar-menu__header, + #navbar-clone.navbar.is-fresh .navbar-menu__header { + display: flex; + flex: 0 0 auto; + align-items: center; + justify-content: flex-end; + flex-shrink: 0; + margin: 0; + padding: 0 var(--openms-navbar-container-pad-inline-mobile, 1.15rem) 0 1rem; + min-height: calc( + var(--openms-header-height, 5.5rem) - var(--openms-news-banner-height, 0px) + ); + box-sizing: border-box; + background: var(--openms-mobile-menu-bg, var(--openms-white)); + } + + .site-header #nav.navbar.is-fresh .navbar-menu__close, + #navbar-clone.navbar.is-fresh .navbar-menu__close { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 3.25rem; + height: 3.25rem; + margin: 0; + padding: 0; + border: none; + border-radius: 0.65rem; + background: transparent; + color: var(--openms-chrome-nav-text); + cursor: pointer; + transition: color 0.2s ease; + } + + .site-header #nav.navbar.is-fresh .navbar-menu__close svg, + #navbar-clone.navbar.is-fresh .navbar-menu__close svg { + width: 1.375rem; + height: 1.375rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu__close:hover, + .site-header #nav.navbar.is-fresh .navbar-menu__close:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu__close:hover, + #navbar-clone.navbar.is-fresh .navbar-menu__close:focus-visible { + background: transparent; + color: var(--openms-navy); + outline: none; + } + + .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; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + overflow: hidden; + } + + .site-header #nav.navbar.is-fresh .navbar-menu__nav > .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-menu__nav > .navbar-end { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + align-content: flex-start; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + overscroll-behavior: contain; + scroll-padding-bottom: 0.75rem; + padding-bottom: 0; + scrollbar-width: none; + -ms-overflow-style: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu__nav > .navbar-end::-webkit-scrollbar, + #navbar-clone.navbar.is-fresh .navbar-menu__nav > .navbar-end::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-menu__nav > .navbar-mobile-ctas--menu, + #navbar-clone.navbar.is-fresh .navbar-menu__nav > .navbar-mobile-ctas--menu, + .site-header #nav.navbar.is-fresh .navbar-menu__panel > .navbar-mobile-ctas--menu, + #navbar-clone.navbar.is-fresh .navbar-menu__panel > .navbar-mobile-ctas--menu { + display: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu__footer, + #navbar-clone.navbar.is-fresh .navbar-menu__footer { + display: flex; + flex-direction: column; + flex-shrink: 0; + margin-top: auto; + margin-bottom: 0; + gap: 0; + border-top: none; + background: var(--openms-white); + padding: 0 0 calc( + var(--openms-mobile-menu-footer-pad, 1rem) + + var(--openms-mobile-menu-footer-glow-pad, var(--openms-btn-glow-size, 6px)) + + env(safe-area-inset-bottom, 0px) + ); + overflow: visible; + } + + .site-header #nav.navbar.is-fresh .navbar-end > .navbar-mobile-social, + #navbar-clone.navbar.is-fresh .navbar-end > .navbar-mobile-social { + flex: 0 0 auto; + order: 1; + margin-top: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-end > .navbar-links, + #navbar-clone.navbar.is-fresh .navbar-end > .navbar-links { + order: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-menu__footer > .navbar-mobile-ctas--menu, + #navbar-clone.navbar.is-fresh .navbar-menu__footer > .navbar-mobile-ctas--menu { + flex: 0 0 auto; + position: relative; + z-index: 2; + margin-bottom: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active .navbar-end { + display: flex; + flex: 1 1 auto; + width: 100%; + min-height: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-end { + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + 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; + align-self: flex-start; + width: 100%; + overflow: visible; + gap: 0; + margin-top: 0; + padding: 0; + } + + .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.5rem; + width: 100%; + flex-shrink: 0; + margin: 0; + padding: 0.2rem 1rem calc(0.35rem + var(--openms-mobile-menu-footer-glow-pad, var(--openms-btn-glow-size, 6px))); + border-bottom: none; + background: transparent; + overflow: visible; + } + + .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; + min-width: 0; + max-width: none; + min-height: var(--openms-mobile-cta-min-height, 2.45rem); + padding: var(--openms-mobile-cta-pad-y, 0.55rem) var(--openms-mobile-cta-pad-x, 0.75rem) !important; + border-radius: var(--openms-btn-pill-radius, 999px); + overflow: visible; + box-sizing: border-box; + font-size: var(--openms-mobile-cta-font-size, 0.875rem); + font-weight: 600; + 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.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, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate { + border: 2px solid var(--openms-blue) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !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; + justify-content: flex-start; + 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: 0; + padding: var(--openms-mobile-nav-item-pad-y, 0.65rem) var(--openms-mobile-nav-item-pad-x, 1.15rem); + font-weight: 600; + font-size: var(--openms-mobile-nav-item-size, 1.0625rem); + color: var(--openms-chrome-nav-text) !important; + border: none; + border-radius: 0; + background: transparent; + } + + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary { + display: flex; + align-items: center; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + font-size: var(--openms-mobile-nav-item-size, 1.25rem); + font-weight: 600; + transition: background-color 0.2s ease; + } + + .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; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + overflow: hidden; + transition: background-color 0.2s ease; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active { + box-shadow: none; + background: rgba(var(--openms-navy-rgb), 0.02); + } + + .navbar.is-fresh .navbar-item.has-dropdown .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { + width: 100%; + justify-content: flex-start; + align-items: center; + text-align: left; + } + + .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 { + display: flex; + justify-content: space-between; + gap: 0.5rem; + padding: var(--openms-mobile-nav-item-pad-y, 0.65rem) var(--openms-mobile-nav-item-pad-x, 1.15rem); + min-height: 0; + } + + .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; + font-weight: 600; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link__label, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link__label { + flex: 1 1 auto; + min-width: 0; + } + + .navbar-dropdown-chevron { + display: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + margin-left: auto; + color: rgba(var(--openms-navy-rgb), 0.55); + border-radius: 0; + background: transparent; + transition: transform 0.22s ease, color 0.22s ease; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron { + background: transparent; + color: var(--openms-blue); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before { + content: ""; + width: 0.45rem; + height: 0.45rem; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; + transform: rotate(45deg) translateY(-1px); + transition: transform 0.22s ease; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron::before, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown-chevron::before { + transform: rotate(-135deg) translateY(1px); + } + + .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; + } + + .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-link, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + order: 1; + flex: 0 0 auto; + } + + .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: block !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; + flex: 0 0 auto; + align-self: stretch; + max-height: 0; + overflow: hidden; + opacity: 0; + visibility: hidden; + pointer-events: none; + border-top: 1px solid transparent; + transition: + max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), + opacity 0.22s ease, + padding 0.32s cubic-bezier(0.22, 1, 0.36, 1), + border-color 0.22s ease, + visibility 0s linear 0.32s; + } + + .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 { + max-height: 50rem; + opacity: 1; + visibility: visible; + pointer-events: auto; + overflow: visible; + -webkit-overflow-scrolling: touch; + background: var(--openms-white) !important; + border-top-color: transparent; + padding: 0.05rem 0 0.35rem; + transition: + max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), + opacity 0.22s ease, + padding 0.32s cubic-bezier(0.22, 1, 0.36, 1), + border-color 0.22s ease, + visibility 0s linear 0s; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:not(.is-active):hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:not(.is-active):hover .navbar-dropdown { + max-height: 0; + opacity: 0; + visibility: hidden; + pointer-events: none; + padding: 0; + border-top-color: transparent; + } + + .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 { + max-height: 50rem; + opacity: 1; + visibility: visible; + pointer-events: auto; + } + + .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; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + } + + .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 1.25rem 0.2rem 2.5rem; + border-top: none; + color: var(--openms-chrome-nav-text-muted) !important; + font-family: var(--openms-font-heading, inherit); + font-size: 0.75rem; + 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 { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.35rem; + text-align: left; + white-space: normal; + min-height: 0; + padding: 0.5rem var(--openms-mobile-nav-item-pad-x, 0.9rem) 0.5rem 2.5rem; + font-weight: 500; + font-size: var(--openms-mobile-nav-subitem-size, 1.125rem); + color: var(--openms-chrome-nav-text) !important; + border: none; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.06); + border-radius: 0; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + position: relative; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item .navbar-item__label, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item .navbar-item__label { + flex: 1 1 auto; + min-width: 0; + line-height: 1.35; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon { + justify-content: flex-start; + gap: 0.2rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label { + flex: 0 1 auto; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.launch-icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.external-link-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.launch-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.has-external-icon svg.external-link-icon { + display: inline-flex !important; + visibility: visible !important; + opacity: 1 !important; + flex: 0 0 auto; + width: 0.875rem; + height: 0.875rem; + min-width: 0.875rem; + margin-left: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item::before, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item::before { + display: none; + } + + .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: var(--openms-mobile-nav-subitem-size, 1.125rem); + padding-left: 3rem; + padding-right: 1.25rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, + .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 > .navbar-link:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, + #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 > .navbar-link:focus-visible { + background: rgba(var(--openms-navy-rgb), 0.04) !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item:focus-visible { + color: var(--openms-blue) !important; + background: rgba(var(--openms-blue-rgb), 0.08) !important; + border-radius: 0.35rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 0.9rem; + width: 100%; + margin: 0; + padding: 0.35rem var(--openms-mobile-nav-item-pad-x, 1.15rem) 0.65rem + calc(var(--openms-mobile-nav-item-pad-x, 0.9rem) + 0.85rem); + border: none; + border-radius: 0; + background: transparent !important; + box-shadow: 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; + color: var(--openms-chrome-nav-text); + border: none; + border-radius: 0; + min-width: 0; + min-height: 0; + padding: 0.25rem 0; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + transition: color 0.2s ease, opacity 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.35rem; + height: 1.35rem; + color: inherit; + fill: currentColor; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg * { + fill: currentColor !important; + stroke: currentColor !important; + color: inherit !important; + } + +} + +/* Mobile + MD (≤1023px) — refinements */ +@media (max-width: 1023px) { + .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.5rem; + 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: 0.2rem 1rem calc(0.35rem + var(--openms-mobile-menu-footer-glow-pad, var(--openms-btn-glow-size, 6px))); + } + + .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: var(--openms-mobile-cta-min-height, 2.45rem); + padding: var(--openms-mobile-cta-pad-y, 0.55rem) var(--openms-mobile-cta-pad-x, 0.75rem) !important; + font-size: var(--openms-mobile-cta-font-size, 0.875rem); + 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; + align-self: flex-start; + width: 100%; + margin-top: 0; + padding: 0; + } + + .navbar-mobile-toolbar.navbar-mobile-ctas-end { + gap: 0.5rem; + } + + /* Mobile drawer — light gray hover on the link row only (text color unchanged) */ + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, + .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 > .navbar-link:focus-visible, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:focus-visible, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, + #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 > .navbar-link:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item.is-nested:focus-visible { + background: rgba(var(--openms-navy-rgb), 0.06) !important; + background-color: rgba(var(--openms-navy-rgb), 0.06) !important; + color: var(--openms-chrome-nav-text) !important; + box-shadow: none !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-emphasized > .navbar-link:focus-visible { + color: var(--openms-chrome-nav-text) !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active { + background: var(--openms-mobile-nav-card-bg, var(--openms-white)) !important; + background-color: var(--openms-mobile-nav-card-bg, var(--openms-white)) !important; + } + + .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 { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !important; + box-shadow: none !important; + opacity: 0.9; + } + + .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 a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + display: inline-flex; + align-items: center; + gap: 0.35rem; + } + + .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, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item 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, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.icon { + display: inline-flex; + align-items: center; + align-self: center; + flex-shrink: 0; + color: inherit; + fill: currentColor; + } + + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item svg, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item svg *, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg *, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg *, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg * { + fill: currentColor !important; + stroke: currentColor !important; + color: inherit !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"], + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"] { + fill: none !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 — 80% drawer, roomier top bar */ + @media (min-width: 768px) and (max-width: 1023px) { + .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; + } + + .navbar-mobile-toolbar.navbar-mobile-ctas-end { + gap: 0.5rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + left: auto; + right: 0; + width: var(--openms-mobile-menu-width, 80%); + max-width: var(--openms-mobile-menu-max-width, 28rem); + border-left: 1px solid var(--openms-mobile-nav-divider, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--openms-mobile-menu-radius, 0); + box-shadow: var(--openms-mobile-menu-shadow, -0.35rem 0 1.5rem rgba(var(--openms-navy-rgb), 0.14)); + } + + .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: var(--openms-mobile-nav-item-pad-x, 1.15rem); + padding-right: var(--openms-mobile-nav-item-pad-x, 1.15rem); + } + } + + @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: var(--openms-mobile-menu-width, 80%); + max-width: var(--openms-mobile-menu-max-width, 28rem); + border-left: 1px solid var(--openms-mobile-nav-divider, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--openms-mobile-menu-radius, 0); + box-shadow: var(--openms-mobile-menu-shadow, -0.35rem 0 1.5rem rgba(var(--openms-navy-rgb), 0.14)); + } + } + +} + +/* Desktop — keep drawer chrome out of the horizontal bar unless collision mobile is active */ +@media (min-width: 1024px) { + html:not([data-navbar-layout="mobile"]) .site-header #nav.navbar.is-fresh .navbar-menu__header, + html:not([data-navbar-layout="mobile"]) .site-header #nav.navbar.is-fresh .navbar-menu__footer, + html:not([data-navbar-layout="mobile"]) #navbar-clone.navbar.is-fresh .navbar-menu__header, + html:not([data-navbar-layout="mobile"]) #navbar-clone.navbar.is-fresh .navbar-menu__footer { + display: none !important; + } +} + +/* Collision mobile at desktop widths — drawer stays off-screen until the burger opens it */ +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static:not(.is-active), +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed:not(.is-active) { + transform: translate3d(100%, 0, 0) !important; + visibility: hidden !important; + pointer-events: none !important; +} + +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active { + transform: translate3d(0, 0, 0) !important; + visibility: visible !important; + pointer-events: auto !important; +} + +/* Mobile drawer — no hover/focus dropdowns when the panel is closed */ +@media (max-width: 1023px) { + .site-header #nav.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, + .site-header #nav.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown { + display: none !important; + max-height: 0 !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; + } +} + +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu:not(.is-active) .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown { + display: none !important; + max-height: 0 !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; +} + +/* Breakpoint / collision layout changes — skip drawer slide so resize does not open the menu */ +html.navbar-layout-settling .site-header #nav.navbar.is-fresh .navbar-menu.is-static, +html.navbar-layout-settling #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + transition: none !important; +} + +@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: 1023px) { + .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-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-chevron::before { + transition: none; + } + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:not(.about-cta-btn--donate):focus-visible { + transform: none; + } + } +} + diff --git a/assets/css/navbar-search.css b/assets/css/navbar-search.css new file mode 100644 index 00000000..ad3d2aa2 --- /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: 1024px) { + .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: 1023px) { + .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..9e35fb97 --- /dev/null +++ b/assets/css/navbar-surface.css @@ -0,0 +1,125 @@ +/* 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: 1024px) { + .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: visible; + } + + .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: 1023px) { + .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); + } + +} + +@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..4939bb94 --- /dev/null +++ b/assets/css/news-section.css @@ -0,0 +1,636 @@ +/* News — listing & single articles */ + +.news-page-layout, +.openms-lib-page--news { + --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); +} + +.news-page-layout { + 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: flex-end; + gap: 0.75rem 1.25rem; +} + +.news-toolbar__filter { + display: flex; + flex-direction: column; + gap: 0.35rem; + min-width: min(100%, 9rem); +} + +.news-toolbar__filter-label { + 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.6); +} + +.news-toolbar__select { + min-height: 2.5rem; + min-width: 8rem; + padding: 0.4rem 2rem 0.4rem 0.85rem; + 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 rgba(var(--openms-navy-rgb), 0.18); + border-radius: 0.55rem; + 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.75rem center; + box-shadow: none; + transition: border-color 0.2s ease; +} + +.news-toolbar__select:hover { + border-color: rgba(var(--openms-navy-rgb), 0.35); +} + +.news-toolbar__select:focus { + outline: none; +} + +.news-toolbar__select:focus-visible { + border-color: rgba(var(--openms-navy-rgb), 0.45); + box-shadow: 0 0 0 3px rgba(var(--openms-navy-rgb), 0.1); +} + +/* --- Pagination --- */ + +.news-pager { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem 1.25rem; + padding-top: 0.5rem; +} + +.news-pager[hidden] { + display: none; +} + +.news-pager__btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + min-height: 2.5rem; + padding: 0.4rem 1.1rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 600; + color: var(--openms-navy); + background: var(--openms-white); + border: 1px solid var(--news-card-border); + border-radius: 999px; + cursor: pointer; + transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; +} + +.news-pager__btn:hover:not(:disabled) { + border-color: rgba(var(--openms-blue-rgb), 0.35); + color: var(--openms-blue); +} + +.news-pager__btn:focus-visible { + outline: none; + border-color: var(--openms-blue); + box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.18); +} + +.news-pager__btn:disabled { + opacity: 0.45; + cursor: default; +} + +.news-pager__status { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.6); +} + +.news-bibliography__entries { + display: grid; + gap: 1.5rem; + border: none; + border-radius: 0; + background: transparent; + overflow: visible; +} + +.news-year { + margin: 0; + padding: 0; +} + +.news-page:not(.news-year-filter--ready) [data-news-list] > .news-entry:nth-child(n + 6) { + display: none; +} + +.news-year[hidden], +.news-entry[hidden] { + display: none; +} + +.news-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 1.5rem; +} + +.news-list .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-list .news-entry:hover { + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); +} + +.news-list .news-entry[hidden] { + display: none; +} + +.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__content h2, +.news-article__content h3, +.news-article__content h4 { + scroll-margin-top: 6rem; +} + +/* --- "On this page" table of contents --- */ + +.news-article__toc { + padding: 1rem 1.25rem; + border: 1px solid var(--news-card-border); + border-radius: var(--news-card-radius); + background: rgba(var(--openms-navy-rgb), 0.03); +} + +.news-article__toc-title { + margin: 0 0 0.5rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-body-size); + font-weight: 800; + letter-spacing: -0.01em; + color: var(--openms-navy); +} + +.news-article__toc ul { + margin: 0; + padding: 0; + list-style: none; +} + +.news-article__toc ul ul { + margin-top: 0.3rem; + padding-left: 0.9rem; +} + +.news-article__toc li { + margin: 0 0 0.3rem; +} + +.news-article__toc a { + display: inline-block; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 500; + line-height: 1.4; + color: rgba(var(--openms-navy-rgb), 0.75); + text-decoration: none; + transition: color 0.2s ease; +} + +.news-article__toc a:hover { + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.news-article__toc a:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 2px; + border-radius: 0.125rem; +} + +.news-article__toc--inline { + margin-bottom: 1.75rem; +} + +.news-page__aside { + display: none; +} + +@media (min-width: 1024px) { + .news-page--has-toc { + display: grid; + grid-template-columns: minmax(0, 1fr) 15rem; + gap: clamp(1.5rem, 3vw, 2.5rem); + align-items: start; + } + + .news-page--has-toc .news-article__toc--inline { + display: none; + } + + .news-page__aside { + display: block; + position: sticky; + top: 6rem; + } +} + +.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..9a2091e5 --- /dev/null +++ b/assets/css/openms-buttons.css @@ -0,0 +1,384 @@ +/* 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, +.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 — same white outline as navbar Donate */ +#footer.footer-redesign .footer-donate-btn.signup-button.secondary-btn, +#footer.footer-redesign .footer-donate-btn.signup-button.secondary-btn:visited, +#footer.footer-redesign a.footer-donate-btn.button.signup-button.secondary-btn, +#footer.footer-redesign a.footer-donate-btn.button.signup-button.secondary-btn:visited { + display: inline-flex !important; + align-items: center; + justify-content: center; + min-height: 2.75rem; + height: auto !important; + padding: var(--openms-btn-padding) !important; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min) !important; + font-weight: 600; + line-height: 1.3 !important; + border-radius: var(--openms-btn-pill-radius) !important; + 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; + text-decoration: none; + text-shadow: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transition: var(--openms-btn-motion) !important; +} + +#footer.footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, +#footer.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible, +#footer.footer-redesign .footer-donate-btn.signup-button.secondary-btn:active, +#footer.footer-redesign a.footer-donate-btn.button.signup-button.secondary-btn:hover, +#footer.footer-redesign a.footer-donate-btn.button.signup-button.secondary-btn:focus-visible, +#footer.footer-redesign a.footer-donate-btn.button.signup-button.secondary-btn:active { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !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.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible, +#footer.footer-redesign a.footer-donate-btn.button.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; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; +} + +.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: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !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; +} + +@media (max-width: 1023px) { + .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate, + .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:visited { + border: 2px solid var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-blue) !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; + } + + .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, + .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, + .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.about-cta-btn--donate:active { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-blue) !important; + 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) !important; + outline: none; + } + + .navbar-menu .navbar-mobile-ctas a.navbar-item.navbar-cta-item.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) !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.footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, + #footer.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..5c7f5169 --- /dev/null +++ b/assets/css/openms-lib.css @@ -0,0 +1,4226 @@ +/* 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__nav-link.is-active { + color: var(--openms-navy); + background: rgba(var(--openms-blue-rgb), 0.14); + border-color: rgba(var(--openms-blue-rgb), 0.28); +} + +.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 { + display: block; + content: ""; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: var(--openms-blue); + flex-shrink: 0; +} + +.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-blue); +} + +.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; +} + +/* Hero buttons — one color scheme on every page (matches /openms-lib/): + filled primary in brand blue, ghost stays blue outline */ +.openms-lib-hero__actions .openms-lib-btn--primary { + gap: 0.35rem; + border-color: var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-hero__actions .openms-lib-btn--primary:hover, +.openms-lib-hero__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-hero__actions .openms-lib-btn--primary:active { + background: var(--openms-blue); + border-color: var(--openms-blue); + 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-flex; + align-items: center; + gap: 0.45rem; + margin: 0 0 0.85rem; + padding: 0; + font-family: var(--openms-font-body); + font-size: clamp(0.72rem, 2.2vw, var(--openms-text-min)); + font-weight: 600; + letter-spacing: 0.02em; + text-transform: none; + color: var(--olib-text-muted); + background: transparent; + border: none; + border-radius: 0; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow::before, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow::before { + display: block; + content: ""; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: var(--openms-blue); + flex-shrink: 0; +} + +.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-blue); + -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; +} + +/* What is OpenMS? — simple checklist (no tiles) */ +.openms-lib-block--highlights-checklist .openms-lib-highlights__head { + max-width: 46rem; +} + +.openms-lib-highlights__list--checklist { + grid-template-columns: 1fr; + gap: 0.75rem; + max-width: 46rem; + margin-inline: auto; +} + +.openms-lib-highlights__list--checklist .openms-lib-highlights__item { + flex-direction: row; + align-items: flex-start; + gap: 0.85rem; + min-height: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-highlights__list--checklist .openms-lib-highlights__check { + margin-top: 0.2rem; +} + +.openms-lib-highlights__list--checklist .openms-lib-highlights__text--solo { + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.84); +} + +/* What is OpenMS? — 2×2 fact cards */ +.openms-lib-block--highlights-facts .openms-lib-highlights__head { + max-width: 46rem; +} + +.openms-lib-highlights__list--facts { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--olib-card-gap); + width: 100%; + max-width: var(--olib-max); + margin-inline: auto; +} + +.openms-lib-highlights__fact { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 0.9rem; + min-height: 100%; + padding: clamp(1.35rem, 2.5vw, 1.85rem) clamp(1.1rem, 2vw, 1.4rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--olib-radius); + background: linear-gradient( + 180deg, + var(--openms-white) 0%, + color-mix(in srgb, var(--openms-blue) 4%, var(--openms-white)) 100% + ); + box-shadow: var(--olib-shadow); + text-align: center; + transition: + border-color 0.2s var(--olib-ease), + box-shadow 0.2s var(--olib-ease), + transform 0.2s var(--olib-ease); +} + +.openms-lib-highlights__fact:hover { + border-color: rgba(var(--openms-blue-rgb), 0.22); + box-shadow: var(--olib-shadow-hover); + transform: translateY(-2px); +} + +.openms-lib-highlights__fact-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.65rem; + height: 2.65rem; + border-radius: 0.85rem; + background: rgba(var(--openms-blue-rgb), 0.12); + color: var(--openms-blue); + font-size: 1.05rem; + line-height: 1; +} + +.openms-lib-highlights__fact-check { + width: 1.65rem; + height: 1.65rem; +} + +.openms-lib-highlights__fact-text { + margin: 0; + max-width: 22ch; + font-family: var(--openms-font-heading); + font-size: clamp(0.95rem, 1.55vw, 1.08rem); + font-weight: 700; + line-height: 1.4; + color: var(--openms-navy); + text-wrap: balance; +} + +@media (max-width: 540px) { + .openms-lib-highlights__list--facts { + grid-template-columns: 1fr; + } + + .openms-lib-highlights__fact-text { + max-width: none; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-highlights__fact { + transition: border-color 0.2s var(--olib-ease), box-shadow 0.2s var(--olib-ease); + } + + .openms-lib-highlights__fact:hover { + transform: none; + } +} + +/* TOPP tools section */ +.openms-lib-block--topp { + margin: 0; + padding: var(--olib-section-y) 0; + color: var(--openms-navy); + background: transparent; +} + +.openms-lib-topp__inner { + width: 100%; + max-width: var(--olib-max); + margin-inline: auto; + display: grid; + gap: clamp(1.25rem, 2.5vw, 1.75rem); +} + +.openms-lib-topp__head { + max-width: 46rem; + margin-inline: auto; + text-align: center; +} + +.openms-lib-topp__head .openms-lib-block__title, +.openms-lib-topp__head .openms-lib-block__lead { + text-align: center; +} + +.openms-lib-topp__head .openms-lib-block__lead { + max-width: 42ch; + margin-inline: auto; +} + +.openms-lib-topp__layout { + display: grid; + grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.85fr); + gap: clamp(1.25rem, 2.5vw, 1.75rem); + align-items: stretch; +} + +.openms-lib-topp__cta-card { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.85rem; + min-height: 100%; + padding: clamp(1.35rem, 2.5vw, 1.85rem); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: var(--olib-radius); + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.1) 0%, + var(--openms-white) 58% + ); + box-shadow: var(--olib-shadow); +} + +.openms-lib-topp__cta-kicker { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-topp__cta-blurb { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.8); + text-wrap: pretty; +} + +.openms-lib-topp__cta-btn { + align-self: flex-start; + min-height: 2.75rem; + padding: 0.7rem 1.35rem; + border-radius: var(--openms-btn-pill-radius, 999px); + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; + font-weight: 600; + text-decoration: none; + transition: background-color 0.2s ease, border-color 0.2s ease; +} + +.openms-lib-topp__cta-btn:hover, +.openms-lib-topp__cta-btn: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)); + outline: none; +} + +.openms-lib-topp__features { + list-style: none; + margin: 0; + padding: clamp(1.25rem, 2.2vw, 1.65rem); + display: grid; + gap: 0.75rem; + border: 1px solid var(--olib-line); + border-radius: var(--olib-radius); + background: var(--openms-white); + box-shadow: var(--olib-shadow); +} + +.openms-lib-topp__feature { + display: flex; + align-items: flex-start; + gap: 0.85rem; +} + +.openms-lib-topp__feature-text { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.84); +} + +.openms-lib-topp__feature-link { + margin-left: 0.35rem; + font-weight: 600; + color: var(--openms-blue); + text-decoration: none; +} + +.openms-lib-topp__feature-link:hover, +.openms-lib-topp__feature-link:focus-visible { + color: var(--openms-blue-secondary); + text-decoration: underline; + text-underline-offset: 0.14em; + outline: none; +} + +@media (max-width: 900px) { + .openms-lib-topp__layout { + grid-template-columns: 1fr; + } +} + +/* 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-developers__layout { + display: block; +} + +.openms-lib-developers__route-mark, +.openms-lib-developers__route-arrow, +.openms-lib-developers__route-index, +.openms-lib-developers__route-check { + display: none; +} + +.openms-lib-developers__route-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.55rem; + width: 100%; + margin-bottom: 0.15rem; +} + +.openms-lib-developers__route-icon { + display: grid; + place-items: center; + width: 2.25rem; + height: 2.25rem; + border-radius: 0.7rem; + font-size: 0.95rem; + color: var(--openms-white); + background: linear-gradient( + 135deg, + var(--openms-blue) 0%, + color-mix(in srgb, var(--openms-blue) 55%, var(--openms-navy)) 100% + ); + box-shadow: 0 8px 16px -8px rgba(var(--openms-blue-rgb), 0.55); +} + +.openms-lib-developers__review { + margin-top: clamp(1.75rem, 3.5vw, 2.5rem); +} + +.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(1.85rem, 1rem + 3vw, 2.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.openms-lib-developers__lead { + margin: 0.85rem 0 0; + max-width: 38ch; + margin-inline: auto; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + 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__grid--count-6, +.openms-lib-developers__grid--count-7 { + 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__route-top .openms-lib-developers__card-tag { + align-self: center; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + letter-spacing: 0.1em; + color: rgba(var(--openms-navy-rgb), 0.48); +} + +.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-page--hub .openms-lib-developers__card--build .openms-lib-developers__card-title { + font-size: clamp(1.5rem, 3.2vw, 2rem); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.02em; +} + +.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-promo, +.openms-lib-developers__cite-details { + min-width: 0; +} + +.openms-lib-developers__cite-kicker { + display: none; + margin: 0; +} + +.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; +} + +.openms-lib-developers__cite--separate { + position: static; + width: min(100%, 42rem); + margin-top: clamp(2rem, 4vw, 3rem); + padding-top: clamp(2rem, 4vw, 3rem); + border-top: 1px solid var(--olib-line); +} + +.openms-lib-block--developers .openms-lib-developers__cite--separate .openms-lib-developers__cite-intro { + text-align: center; +} + +/* ── 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; + justify-items: center; + text-align: center; + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__panel, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__panel { + text-align: center; + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow { + justify-self: center; + margin-inline: auto; + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__title, + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__lead { + text-align: center; + margin-inline: auto; + } + + .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; + width: 100%; + margin-inline: auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + 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; + justify-content: center; + } +} + +@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: 0 1 auto; + width: auto; + } +} + +@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: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.55rem; + width: 100%; + max-width: none; + margin-inline: auto; + } + + [class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn, + .community-calendar-layout .openms-lib-hero__actions .openms-lib-btn { + width: auto; + flex: 0 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: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.55rem; + max-width: none; + margin-inline: auto; + } + + .openms-lib-hero__actions .openms-lib-btn { + width: auto; + justify-content: center; + } + + .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: auto; + 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: transparent; + border: none; + padding: 0; + border-radius: 0; + letter-spacing: 0.1em; +} + +.openms-lib-page--product .openms-lib-developers__card-icon, +.openms-lib-page--product .openms-lib-developers__route-icon { + color: var(--openms-white); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--openms-pink) 75%, var(--openms-navy)) 0%, + color-mix(in srgb, var(--openms-pink) 45%, var(--openms-navy)) 100% + ); + box-shadow: 0 8px 16px -8px rgba(var(--openms-pink-rgb), 0.45); +} + +.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); +} + +/* pyopenms_viz — hero REPL */ +.openms-lib-hero--viz .openms-lib-hero__content { + max-width: 46rem; +} + +.pyopenms-viz-hero__repl { + margin: clamp(1.5rem, 3.5vw, 2.35rem) auto 0; + width: min(100%, 22rem); + text-align: left; +} + +.pyopenms-viz-hero__repl-window { + border-radius: 10px; + overflow: hidden; + box-shadow: 0 0.75rem 2rem rgba(var(--openms-navy-rgb), 0.12); +} + +.pyopenms-viz-hero__repl-header { + display: flex; + align-items: center; + gap: 0.4rem; + height: 1.85rem; + padding-inline: 0.65rem; + background: var(--openms-grey); +} + +.pyopenms-viz-hero__repl-dot { + width: 0.62rem; + height: 0.62rem; + border-radius: 50%; +} + +.pyopenms-viz-hero__repl-dot--red { + background: var(--openms-pink); +} + +.pyopenms-viz-hero__repl-dot--yellow { + background: var(--openms-orange); +} + +.pyopenms-viz-hero__repl-dot--green { + background: var(--openms-yellow); +} + +.pyopenms-viz-hero__repl-body { + background: var(--openms-dark); + color: #ececec; + font-family: "JetBrains Mono", Menlo, Monaco, Consolas, "Courier New", monospace; + font-size: clamp(0.78rem, 1.55vw, 0.92rem); + line-height: 1.55; + padding: 0.8rem 0.95rem; + max-height: 3.4rem; + overflow: hidden; + animation: pyopenms-viz-repl-scroll 0.55s ease-out 2.1s forwards; +} + +.pyopenms-viz-hero__repl-scroll { + display: grid; + gap: 0.2rem; +} + +.pyopenms-viz-hero__repl-line { + margin: 0; + display: flex; + flex-wrap: nowrap; + align-items: baseline; +} + +.pyopenms-viz-hero__repl-prompt { + color: color-mix(in srgb, var(--openms-purple) 88%, white); + flex-shrink: 0; +} + +.pyopenms-viz-hero__repl-code { + display: inline-block; + overflow: hidden; + white-space: nowrap; + width: 0; + animation: pyopenms-viz-type 1s steps(9, end) 0.55s forwards; +} + +.pyopenms-viz-hero__repl-cursor { + opacity: 0; + animation: + pyopenms-viz-cursor-show 0s linear 1.55s forwards, + pyopenms-viz-blink 0.75s step-end infinite 1.55s; +} + +.pyopenms-viz-hero__repl-output { + margin: 0; + opacity: 0; + animation: pyopenms-viz-fade-in 0.35s ease-out 1.75s forwards; +} + +.pyopenms-viz-hero__repl-muted { + color: rgba(255, 255, 255, 0.45); +} + +@keyframes pyopenms-viz-type { + to { + width: 9ch; + } +} + +@keyframes pyopenms-viz-cursor-show { + to { + opacity: 1; + } +} + +@keyframes pyopenms-viz-blink { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } +} + +@keyframes pyopenms-viz-fade-in { + to { + opacity: 1; + } +} + +@keyframes pyopenms-viz-repl-scroll { + to { + max-height: 5.25rem; + } +} + +.openms-lib-list--resource-grid--getting-started:has(.openms-lib-resource-card:nth-child(3):last-child) { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +/* OpenMS WebApps product page */ +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__accent--warm { + color: var(--openms-blue); +} + +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__anchor--reserved { + padding: 0; + margin: 0; + height: 0; + overflow: hidden; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured--page::before, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured--page::after { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-modern-wrap--page { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; + padding-block: 0; +} + +.openms-lib-page--hub.openms-lib-page--webapps #featured-webapps { + background: + radial-gradient(circle at 18% 12%, rgba(var(--openms-yellow-rgb), 0.1), transparent 42%), + radial-gradient(circle at 88% 18%, rgba(var(--openms-blue-rgb), 0.08), transparent 40%), + var(--openms-white); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates { + padding-block: 0; + background: transparent; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived { + padding-block: 0; + background: transparent; +} + +.openms-lib-btn--github { + gap: 0.45rem; +} + +.openms-lib-btn--github .fab { + font-size: 1.05em; +} + +.openms-lib-list--resource-grid--template .openms-lib-resource-card--featured-apps { + grid-column: 1 / -1; +} + +.openms-lib-resource-card--featured-apps { + background: linear-gradient( + 135deg, + rgba(var(--openms-blue-rgb), 0.05) 0%, + var(--openms-white) 58% + ); + border-color: rgba(var(--openms-blue-rgb), 0.16); +} + +.openms-lib-resource-card__app-links { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1rem; + margin: 0.85rem 0 0; + padding: 0; + list-style: none; +} + +.openms-lib-resource-card__app-links a { + font-size: 0.92rem; + font-weight: 600; + color: color-mix(in srgb, var(--openms-blue) 82%, var(--openms-navy)); + text-decoration: none; +} + +.openms-lib-resource-card__app-links a:hover, +.openms-lib-resource-card__app-links a:focus-visible { + color: var(--openms-navy); + text-decoration: underline; +} + +@media (max-width: 992px) { + .openms-lib-list--resource-grid--getting-started:has(.openms-lib-resource-card:nth-child(3):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@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; + } + + .pyopenms-viz-hero__repl-code, + .pyopenms-viz-hero__repl-cursor, + .pyopenms-viz-hero__repl-output, + .pyopenms-viz-hero__repl-body { + animation: none; + } + + .pyopenms-viz-hero__repl-code { + width: 9ch; + } + + .pyopenms-viz-hero__repl-cursor, + .pyopenms-viz-hero__repl-output { + opacity: 1; + } + + .pyopenms-viz-hero__repl-body { + max-height: 5.25rem; + } +} diff --git a/assets/css/publications.css b/assets/css/publications.css new file mode 100644 index 00000000..4d6dca97 --- /dev/null +++ b/assets/css/publications.css @@ -0,0 +1,349 @@ +/* Publications page — unified layout and bibliography UX */ + +.publications-page { + --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); +} + +.publications-body { + display: grid; + gap: var(--pub-gap); +} + +/* —— 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__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); +} + +@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%; + } +} \ No newline at end of file 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..597eb908 --- /dev/null +++ b/assets/css/research-partnerships-page.css @@ -0,0 +1,2 @@ +/* Research partnerships page styles live in z-openms-lib-pro.css + under .openms-lib-page--research-partnerships. */ diff --git a/assets/css/services-page.css b/assets/css/services-page.css new file mode 100644 index 00000000..81ed566e --- /dev/null +++ b/assets/css/services-page.css @@ -0,0 +1,58 @@ +.services-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)); + --services-max: 48rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.services-page-layout__content { + width: min(100%, var(--services-max)); + max-width: var(--services-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.services-page-hero { + margin-bottom: var(--olib-section-y); +} + +.services-page__form { + padding: clamp(1.5rem, 3.5vw, 2.25rem); + background: var(--openms-white); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 1.25rem; + box-shadow: 0 0.35rem 1.25rem rgba(var(--openms-navy-rgb), 0.05); +} + +.services-page__form-head { + margin-bottom: 1.25rem; +} + +.services-page__form-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 3vw, 1.75rem); + font-weight: 800; + line-height: 1.2; + color: var(--openms-navy); + text-wrap: balance; +} + +.services-page__form-body { + width: 100%; +} + +.services-page__tally-iframe { + display: block; + width: 100%; + min-height: 379px; + border: 0; +} 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..44ef95d9 100644 --- a/assets/css/shortcuts_override.css +++ b/assets/css/shortcuts_override.css @@ -1,3 +1,100 @@ -.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, +.content-padding:has(.openms-lib-page--news) .shortcuts-container, +.news-page-layout .shortcuts-container, +.openms-lib-page--news .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(.openms-lib-page--contribute) .shortcuts-container, +.openms-lib-page--contribute .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..3b6c1662 --- /dev/null +++ b/assets/css/site-header.css @@ -0,0 +1,110 @@ +/* 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; +} + +body.navbar-menu-open .site-header .news-banner { + z-index: 275; +} + +.site-header #nav.navbar.is-fresh { + position: relative; + z-index: 2; + width: 100%; +} + +body.navbar-menu-open { + overflow: hidden; + width: 100%; +} + +body.navbar-menu-open .site-header { + z-index: 260; +} + +#navbar-clone.navbar.is-fresh { + display: none !important; +} + +@media (min-width: 1024px) { + .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: 1023px) { + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + background: var(--openms-mobile-menu-bg, var(--openms-content-soft, #f4f6f9)); + border-top: none; + font-family: var(--openms-font-body); + /* 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-chrome-nav-text); + } + + .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; + } +} + +.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: 1024px) { + .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: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + } +} diff --git a/assets/css/sponsor-us-page.css b/assets/css/sponsor-us-page.css new file mode 100644 index 00000000..731a5f05 --- /dev/null +++ b/assets/css/sponsor-us-page.css @@ -0,0 +1,487 @@ +.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: 80rem; + + 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); +} + +.sponsor-us-page.governance-page { + gap: clamp(2.75rem, 6vw, 4rem); +} + +.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-blue); + background: var(--openms-blue); + 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-blue); + border-color: var(--openms-blue); + 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); +} + +/* ── Centered section heads (same pattern as contribute / retreat) ── */ +.sponsor-section__head { + display: grid; + justify-items: center; + gap: 0.6rem; + text-align: center; + margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); +} + +.sponsor-section__head h2 { + margin: 0; + padding: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); + font-weight: 800; + line-height: 1.15; + color: var(--openms-navy); + letter-spacing: -0.02em; +} + +.sponsor-eyebrow, +.sponsor-section-eyebrow { + display: inline-flex; + align-items: center; + width: fit-content; + margin: 0; + padding: clamp(0.28rem, 1.2vw, 0.35rem) clamp(0.62rem, 2.5vw, 0.75rem); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.1); + font-size: clamp(0.68rem, 0.52rem + 0.65vw, 0.78rem); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); +} + +.sponsor-section__lead { + margin: 0; + max-width: 52ch; + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: var(--olib-text-muted); +} + +/* ── Why sponsor cards ── */ +.sponsor-why { + display: grid; + gap: clamp(1.25rem, 2.5vw, 1.75rem); +} + +.sponsor-why__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(0.85rem, 2vw, 1.1rem); +} + +.sponsor-why__card { + display: grid; + gap: 0.65rem; + align-content: start; + padding: clamp(1.15rem, 2.8vw, 1.5rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: 1.25rem; + background: var(--openms-white); + box-shadow: 0 2px 12px rgba(var(--openms-navy-rgb), 0.04); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.sponsor-why__card::before { + content: ""; + width: 2.5rem; + height: 3px; + border-radius: 999px; + background: linear-gradient(90deg, var(--openms-blue), var(--openms-purple, var(--openms-blue))); +} + +.sponsor-why__card:hover { + transform: translateY(-3px); + box-shadow: 0 10px 26px rgba(var(--openms-navy-rgb), 0.1); +} + +.sponsor-why__card h3 { + margin: 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); +} + +.sponsor-why__card p, +.sponsor-why__card li { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.86); +} + +.sponsor-why__card ul { + margin: 0; + padding-left: 1.2rem; +} + +.sponsor-why__card li + li { + margin-top: 0.35rem; +} + +.sponsor-why__link { + display: inline-flex; + align-items: center; + gap: 0.25rem; + margin-top: 0.25rem; + font-weight: 600; + color: var(--openms-blue); + text-decoration: none; +} + +.sponsor-why__link:hover, +.sponsor-why__link:focus-visible { + color: var(--openms-navy); + text-decoration: underline; + text-underline-offset: 0.14em; +} + +/* ── Sponsorship tiers ── */ +.sponsor-us-page .sponsor-tiers__grid { + margin-top: 0; +} + +.sponsor-us-page .sponsor-tier { + border-radius: 1.25rem; + border-color: rgba(var(--openms-navy-rgb), 0.08); + box-shadow: 0 2px 12px rgba(var(--openms-navy-rgb), 0.04); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.sponsor-us-page .sponsor-tier:hover { + transform: translateY(-3px); + box-shadow: 0 10px 26px rgba(var(--openms-navy-rgb), 0.1); +} + +.sponsor-us-page .sponsor-tiers__intro { + display: none; /* replaced by sponsor-section__lead */ +} + +/* ── Current sponsors panel ── */ +.sponsor-us-page .governance-section--contrast { + margin-top: 0; + padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3.5vw, 2.5rem); + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--openms-blue) 8%, var(--openms-white)) 0%, + color-mix(in srgb, var(--openms-blue) 3%, var(--openms-white)) 55%, + var(--openms-white) 100% + ); + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: 1.5rem; + box-shadow: 0 2px 12px rgba(var(--openms-navy-rgb), 0.04); +} + +.sponsor-us-page .governance-section--contrast .sponsor-section__head { + margin-bottom: clamp(1.5rem, 3vw, 2rem); +} + +/* ── Become a sponsor: navy CTA band ── */ +.sponsor-us-page .sponsor-cta { + display: grid; + justify-items: center; + gap: clamp(1.25rem, 3vw, 1.75rem); + padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem); + text-align: center; + color: var(--openms-chrome-text, rgba(var(--openms-white-rgb), 0.92)); + background: + radial-gradient( + 120% 140% at 100% 0%, + rgba(var(--openms-blue-rgb), 0.28) 0%, + rgba(var(--openms-blue-rgb), 0) 58% + ), + var(--openms-navy); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 1.5rem; + box-shadow: 0 18px 44px rgba(var(--openms-navy-rgb), 0.22); + overflow: hidden; +} + +.sponsor-us-page .sponsor-cta .sponsor-section__head { + margin-bottom: 0; +} + +.sponsor-us-page .sponsor-cta .sponsor-section__head h2 { + color: var(--openms-white); +} + +.sponsor-us-page .sponsor-cta .sponsor-section__lead { + color: rgba(255, 255, 255, 0.82); +} + +.sponsor-eyebrow--inverse, +.sponsor-section-eyebrow--inverse { + color: var(--openms-white); + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.22); +} + +.sponsor-us-page .sponsor-cta .about-donate-actions.sponsor-us-page__actions { + margin-inline: auto; + justify-content: center; +} + +.sponsor-us-page-layout .sponsor-cta .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary { + border-color: rgba(255, 255, 255, 0.35); + background: rgba(255, 255, 255, 0.1); + color: var(--openms-white) !important; +} + +.sponsor-us-page-layout .sponsor-cta .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:hover, +.sponsor-us-page-layout .sponsor-cta .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:focus-visible, +.sponsor-us-page-layout .sponsor-cta .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:active { + border-color: var(--openms-white); + background: rgba(255, 255, 255, 0.18); + color: var(--openms-white) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-white-rgb), 0.16); +} + +/* ── Donations: navy banner matching Code of Conduct on contribute ── */ +.sponsor-us-page .sponsor-donations { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: clamp(1.25rem, 3vw, 2.5rem); + padding: clamp(1.5rem, 3.5vw, 2.25rem); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 1.5rem; + background: + radial-gradient( + 120% 140% at 100% 0%, + rgba(var(--openms-blue-rgb), 0.28) 0%, + rgba(var(--openms-blue-rgb), 0) 58% + ), + var(--openms-navy); + box-shadow: 0 18px 44px rgba(var(--openms-navy-rgb), 0.22); +} + +.sponsor-donations__body { + display: grid; + gap: 0.5rem; +} + +.sponsor-us-page .sponsor-donations h2 { + margin: 0; + padding: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem); + font-weight: 800; + line-height: 1.2; + color: var(--openms-white); + letter-spacing: -0.01em; +} + +.sponsor-us-page .sponsor-donations p { + margin: 0; + max-width: 52ch; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(255, 255, 255, 0.85); +} + +.sponsor-us-page-layout .sponsor-donations__btn { + border: 2px solid rgba(255, 255, 255, 0.35); + background: rgba(255, 255, 255, 0.1); + color: var(--openms-white) !important; +} + +.sponsor-us-page-layout .sponsor-donations__btn:hover, +.sponsor-us-page-layout .sponsor-donations__btn:focus-visible { + border-color: var(--openms-white); + background: rgba(255, 255, 255, 0.18); + 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; +} + +/* ── FAQ ── */ +.sponsor-us-page .sponsor-faq__list { + margin-top: 0; +} + +.sponsor-us-page .sponsor-faq__item { + border-radius: 1rem; + border-color: rgba(var(--openms-navy-rgb), 0.08); + box-shadow: 0 2px 12px rgba(var(--openms-navy-rgb), 0.04); +} + +@media (max-width: 720px) { + .sponsor-why__grid { + grid-template-columns: 1fr; + } + + .sponsor-us-page .sponsor-donations { + grid-template-columns: minmax(0, 1fr); + justify-items: start; + } + + .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, + .sponsor-why__card:hover, + .sponsor-us-page .sponsor-tier:hover { + transform: none; + } +} diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index ef8a8b82..c118e365 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -1,52 +1,671 @@ -/* 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: 1024px) { + .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; +} + +.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link::after, +.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { + display: none !important; + content: none !important; + border: 0 !important; + margin: 0 !important; + transform: none !important; +} + +.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); + 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: 1023px) { + .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-chrome-nav-text); + --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-item.has-dropdown.is-active .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown { + border: none !important; + box-shadow: none !important; + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + } +} + +@media (min-width: 1024px) { + .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { + width: max-content; + min-width: 0; + max-width: min(92vw, max-content); + box-sizing: border-box; + margin-top: 0; + padding: 0.35rem; + overflow: visible; + display: none; + flex-direction: column; + align-items: stretch; + } + + .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: flex; + } + + .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: none; + box-sizing: border-box; + } + + .navbar.is-fresh .navbar-dropdown .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item { + padding: 0.5rem 0.75rem; + font-weight: 500; + font-synthesis: none; + min-height: 2.125rem; + display: flex; + align-items: center; + justify-content: flex-start; + border: none; + border-radius: 0.5rem; + margin: 0; + width: 100%; + transition: + color 0.2s ease, + background-color 0.2s ease; + } + + .navbar.is-fresh .navbar-dropdown-heading, + #navbar-clone.navbar.is-fresh .navbar-dropdown-heading { + padding: 0.45rem 0.75rem 0.3rem; + margin-top: 0.15rem; + } + + .navbar.is-fresh .navbar-dropdown-heading:first-child, + #navbar-clone.navbar.is-fresh .navbar-dropdown-heading:first-child { + 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.25rem; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link .navbar-dropdown-chevron, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link .navbar-dropdown-chevron { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 0.85rem; + height: 0.85rem; + margin-left: 0.04rem; + color: inherit; + opacity: 0.72; + transition: opacity 0.2s ease; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link .navbar-dropdown-chevron::before, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link .navbar-dropdown-chevron::before { + content: ""; + width: 0.4rem; + height: 0.4rem; + border-right: 1.5px solid currentColor; + border-bottom: 1.5px solid currentColor; + transform: rotate(45deg) translateY(-1px); + transition: transform 0.2s ease; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown:hover > .navbar-link .navbar-dropdown-chevron, + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown:focus-within > .navbar-link .navbar-dropdown-chevron, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown:hover > .navbar-link .navbar-dropdown-chevron, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown:focus-within > .navbar-link .navbar-dropdown-chevron { + opacity: 1; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown:hover > .navbar-link .navbar-dropdown-chevron::before, + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown:focus-within > .navbar-link .navbar-dropdown-chevron::before, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown:hover > .navbar-link .navbar-dropdown-chevron::before, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown:focus-within > .navbar-link .navbar-dropdown-chevron::before { + transform: rotate(-135deg) translateY(1px); + } +} + +.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 { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.4rem; + color: var(--openms-navbar-dropdown-text) !important; + font-weight: 500; + font-synthesis: none; + box-sizing: border-box; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item .navbar-item__label, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item .navbar-item__label { + flex: 1 1 auto; + min-width: 0; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon, +.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested.has-external-icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested.has-external-icon { + justify-content: flex-start; + gap: 0.2rem; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label { + flex: 0 1 auto; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item svg.icon, +.navbar.is-fresh .navbar-dropdown a.navbar-item svg.launch-icon, +.navbar.is-fresh .navbar-dropdown a.navbar-item svg.external-link-icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item svg.icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item svg.launch-icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item svg.external-link-icon { + display: inline-flex; + align-items: center; + align-self: center; + flex: 0 0 auto; + width: 0.875rem; + height: 0.875rem; + min-width: 0.875rem; + color: inherit; + fill: currentColor; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item svg, +.navbar.is-fresh .navbar-dropdown a.navbar-item svg *, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item svg, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item svg * { + fill: currentColor !important; + stroke: currentColor !important; + color: inherit !important; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item svg [fill="none"], +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item svg [fill="none"] { + fill: none !important; +} + +.navbar.is-fresh .navbar-dropdown-heading, +#navbar-clone.navbar.is-fresh .navbar-dropdown-heading { + color: var(--openms-navbar-dropdown-heading) !important; +} + +@media (min-width: 1024px) { + .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-shadow: inset 0 0 0 1px transparent; + box-sizing: border-box; + font-synthesis: none; + font-weight: 500; + transition: + color 0.2s ease, + background-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-links > .navbar-item.has-dropdown:hover > .navbar-link, + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:hover, + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown:focus-within > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-links > a.navbar-item.is-secondary:hover, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown:hover > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:hover, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown:focus-within > .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: transparent; + box-shadow: inset 0 0 0 1px rgba(var(--openms-white-rgb), 0.14); + font-weight: 500; + } + + .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: transparent; + box-shadow: inset 0 0 0 1px 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: transparent; + box-shadow: inset 0 0 0 1px rgba(var(--openms-white-rgb), 0.14); + } +} + +.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; + border: none; + margin: 0; + box-sizing: border-box; +} + +@media (min-width: 1024px) { + .navbar.is-fresh .navbar-dropdown a.navbar-item, + .navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested, + #navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item, + #navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested { + width: 100%; + } + + .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 { + padding: 0.5rem 0.75rem; + border-radius: 0.5rem; + width: 100%; + } +} + +@media (max-width: 1023px) { + .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 { + width: 100%; + } +} + +.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; + border: none; + margin: 0; + box-sizing: border-box; +} + +@media (min-width: 1024px) { + .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 { + padding: 0.5rem 0.75rem; + border-radius: 0.5rem; width: 100%; } } -@media only screen and (max-width: 600px) { - .hero-logo { - max-height: 150px; +@media (max-width: 1023px) { + .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 { + width: 100%; + } +} + +.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: 1023px) { + .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: 1024px) { + .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); } } -@media only screen and (max-width: 400px) { - .hero-logo { - max-height: 120px; +/* Top-level dropdown labels — match other navbar links */ +@media (min-width: 1024px) { + .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: 500; + color: var(--openms-navbar-link-color) !important; } } -@media only screen and (max-width: 320px) { - .hero-logo { - max-height: 100px; +.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 +673,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: 85rem; 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; } -.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: -1.35rem 0 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 — match navbar Donate (white text + translucent white border) */ +#footer.footer-redesign .footer-donate-btn.button, +#footer.footer-redesign .footer-donate-btn.button:visited, +#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: rgba(var(--openms-white-rgb), 0.34) !important; + color: var(--openms-white) !important; } -/* ---- Link columns grid ---- */ -.footer-links { - flex: 1; +.footer-title { + color: var(--openms-white); + margin: 0; +} + +.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 +819,302 @@ } .footer-link-group ul li a { - color: #c8d4e8; - text-decoration: none; - font-size: 0.9rem; - display: flex; + display: inline-flex; align-items: center; - min-height: 44px; + min-height: 2.25rem; + padding: 0.2rem 0.4rem; + margin: 0 -0.4rem; + border-radius: 0.375rem; + white-space: nowrap; + color: rgba(var(--openms-white-rgb), 0.72); + font-size: var(--openms-body-size); + text-decoration: none; transition: color 0.2s ease; } -.footer-link-group ul li a:hover { - color: #ffffff; - text-decoration: underline; +.footer-link-group ul li a.footer-link-contact-us { + font-size: var(--openms-text-min); } -/* ---- Bottom bar ---- */ -.footer-bottom { - max-width: 1200px; - margin: 0 auto; - padding: 1.25rem 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: 1rem; +.footer-link-group ul li a:hover, +.footer-link-group ul li a:focus-visible { + color: var(--openms-white); + background: transparent; + text-decoration: none; } -/* ---- Social icons ---- */ -.footer-socials { +.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; - gap: 0.75rem; + flex-wrap: wrap; align-items: center; + gap: 0.5rem 1.25rem; } -.footer-socials a { +.footer-sponsors__logos 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; + padding: 0.35rem 0.5rem; + border-radius: 0.5rem; + transition: background 0.2s ease; } -.footer-socials a:hover { - color: #ffffff; +.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-socials svg.icon { - width: 1.4rem; - height: 1.4rem; - fill: currentColor; +.footer-sponsors__logo-link--elixir { + min-width: 4rem; + padding-inline: 0.6rem; } -/* ---- Copyright ---- */ -.footer-copyright { - color: rgba(255, 255, 255, 0.45); - font-size: 0.85rem; +.footer-sponsors__logo-link--elixir img { + max-height: 3.35rem; + max-width: min(100%, 10rem); } -/* ============================================= - FOOTER — MOBILE (max-width: 768px) - ============================================= */ -@media (max-width: 768px) { - .footer-inner { - flex-direction: column; - gap: 2rem; - padding: 0 1.25rem 2rem; - } +.footer-sponsors__logos a:hover, +.footer-sponsors__logos a:focus-visible { + background: transparent; +} - .footer-brand { - flex: unset; - width: 100%; - } +.footer-sponsors__logos a:hover img, +.footer-sponsors__logos a:focus-visible img { + opacity: 1; +} - .footer-partners { - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; +/* ---- 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: 75rem; + margin: 0 auto; + padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + 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; +} + +.footer-socials { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem; +} + +.footer-socials a { + display: inline-flex; + align-items: center; + justify-content: center; + 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, +.footer-socials a:focus-visible { + color: var(--openms-white); + background: transparent; +} + +.footer-socials svg.icon { + width: 1.5rem; + height: 1.5rem; + fill: currentColor; +} + +.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 { + 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 — RESPONSIVE + ============================================= */ +@media (max-width: 1024px) { + .footer-top { + grid-template-columns: 1fr; + gap: 2rem; } - .footer-links { - width: 100%; - grid-template-columns: repeat(2, 1fr); - gap: 1.25rem 1rem; + .footer-nav { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1.5rem 2rem; + padding-top: clamp(1rem, 2vw, 1.5rem); + } + + .footer-links-area { + gap: 1.25rem; + padding-top: 0; } +} +@media (max-width: 768px) { .footer-link-group ul li a { - text-align: left; + white-space: normal; + } + + .footer-redesign { + padding-top: 2.5rem; + } + + .footer-inner { + padding-inline: 1.25rem; + } + + .footer-logo img { + max-height: 96px; + max-width: min(85vw, 280px); + } + + .footer-tagline { + margin-top: -1.1rem; + } + + .footer-nav { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1.25rem 1rem; + } + + .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 +1123,695 @@ ============================================= */ .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; +} + +/* Contribute matches /openms-lib/ hero width, with tighter text stack */ +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__content { + display: flex; + flex-direction: column; + align-items: center; + max-width: min(100%, 62rem); + min-height: 0; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__eyebrow { + margin: 0 auto 0.4rem; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title { + max-width: 26ch; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__lead { + margin: 0.55rem auto 0; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__actions { + max-width: none; + margin-top: 1rem; +} + +.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-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.02em; + text-transform: none; + color: var(--olib-text-muted, rgba(var(--openms-navy-rgb), 0.68)); + background: transparent; + border: none; + border-radius: 0; + box-shadow: none; +} + +[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); + flex-shrink: 0; +} + +[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-blue); + -webkit-text-fill-color: var(--openms-blue); +} + +[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: 0 1 auto; + width: auto; + min-width: 0; + 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) { + /* Content-width buttons, all on one row (wrap only if they don't fit) */ + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__actions { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + gap: 0.6rem; + } + + [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: auto; + max-width: 100%; + flex: 0 1 auto; + min-width: 0; + justify-content: center; + font-size: clamp(0.86rem, 0.8rem + 0.2vw, 0.95rem); + } +} + +/* Mobile drawer — ensure nav text is never white-on-white */ +@media (max-width: 1023px) { + .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-chrome-nav-text) !important; + font-weight: 600; + } + + .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 { + display: inline-flex; + align-items: center; + align-self: center; + color: inherit; + fill: currentColor; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg *, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg *, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav a.navbar-item svg *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-menu__nav .navbar-link svg *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg * { + fill: currentColor !important; + stroke: currentColor !important; + color: inherit !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.launch-icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.external-link-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.launch-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg.external-link-icon { + display: inline-flex !important; + visibility: visible !important; + flex: 0 0 auto; + width: 1rem; + height: 1rem; + min-width: 1rem; + color: inherit; + fill: currentColor; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"], + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item svg [fill="none"] { + fill: none !important; + } +} + +/* Standard page heroes — match the OpenMS-lib title scale */ +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__title { + width: min(100%, 26ch); + max-width: 100%; + font-size: clamp(2.35rem, 1.35rem + 4vw, 4.25rem); + font-weight: 800; + line-height: 0.98; + letter-spacing: -0.04em; + text-wrap: balance; + overflow-wrap: anywhere; +} + +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__lead { + width: min(100%, 58ch); + max-width: 100%; + font-size: clamp(0.95rem, 0.86rem + 0.35vw, 1.125rem); + text-wrap: pretty; +} + +@media (max-width: 900px) { + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__title { + width: min(100%, 26ch); + max-width: 100%; + font-size: clamp(2rem, 1.45rem + 3vw, 3rem); + } + + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__lead { + width: min(100%, 52ch); + max-width: 100%; + } +} + +@media (max-width: 480px) { + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__title { + font-size: clamp(1.75rem, 8vw, 2.25rem); + line-height: 1.05; + letter-spacing: -0.03em; + } + + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__lead { + width: min(100%, 40ch); + font-size: clamp(0.9rem, 3.8vw, 1rem); + line-height: 1.5; + } +} + +@media (min-width: 481px) and (max-width: 900px) { + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__content, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__content { + max-width: min(100%, 56rem); + } + + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__title { + width: min(100%, 30ch); + } + + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__lead { + width: min(100%, 64ch); + } +} + +/* Mobile drawer: plain top-level links (no dropdown) align with dropdown + labels, which get pad-x on both the container and the inner link */ +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary { + padding-left: calc(var(--openms-mobile-nav-item-pad-x, 1.15rem) * 2); + padding-right: calc(var(--openms-mobile-nav-item-pad-x, 1.15rem) * 2); +} + +@media (max-width: 1023px) { + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary { + padding-left: calc(var(--openms-mobile-nav-item-pad-x, 1.15rem) * 2); + padding-right: calc(var(--openms-mobile-nav-item-pad-x, 1.15rem) * 2); + } +} + 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..e0391659 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -1,144 +1,1457 @@ -.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%; } -.swiper { - position: relative; - padding: 0 50px 0 50px; - box-sizing: border-box; - width: 1350px; - height: 420px; - overflow: hidden; +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-wrapper { - box-sizing: border-box; +section.webapps-featured::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: var(--openms-blue); + pointer-events: none; } -.swiper-slide { - box-sizing: border-box; - cursor: pointer; +section.webapps-featured::after { + content: none; } +.webapps-featured__inner { + position: relative; + z-index: 1; + max-width: 90rem; + margin: 0 auto; +} -.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 { + display: grid; + grid-template-columns: 1fr; + gap: clamp(0.8rem, 2vw, 1.15rem); + margin-bottom: clamp(2rem, 4vh, 2.75rem); + text-align: center; +} + +.webapps-featured__header-main { + min-width: 0; + max-width: 42rem; + margin-inline: auto; +} + +.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; +} + +.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; +} + +.webapps-featured__title-accent { + display: inline; + color: var(--openms-blue); +} + +.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; +} + +.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%; +} + +/* Project cards — app-tile layout (logo frame + visible copy) */ +.webapps-project-card { + display: flex; + width: 100%; + max-width: 100%; + margin: 0; + height: 100%; +} + +.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; +} + +.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; +} + +.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); +} + +.webapps-project-card__surface:hover .webapps-project-card__accent, +.webapps-project-card__surface:focus-visible .webapps-project-card__accent { + opacity: 1; + height: 4px; +} + +.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); +} + +.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; +} + +.webapps-project-card__logo { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; + transition: transform 0.25s ease; +} + +.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); +} + +.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; +} + +.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; } -.swiper-slide img { - width: 95%; +.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; } -.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__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); } -/* slide-0: FLASHApp */ -.swiper-slide.slide-0 img { - height: 230px; - margin-top: 10px; +.webapps-featured__extra-link:hover, +.webapps-featured__extra-link:focus-visible { + color: var(--openms-navy); + outline: none; } -.swiper-slide.slide-0 p { - margin-top: 20px; + +.webapps-featured__extra-link:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 3px; + border-radius: 0.125rem; +} + +.webapps-featured__show-all { + min-width: min(100%, 13rem); } -/* slide-1: umetaflow */ -.swiper-slide.slide-1 img { +.webapps-featured__show-all:focus { + outline: none; +} + +@media (hover: none) { + .webapps-project-card__surface { + transform: none; + } +} + +@media (max-width: 991px) { + .webapps-featured .webapps-featured__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@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%; - height: 250px; + 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; + } +} + +/* ── Webapps page: detailed project catalog ── */ + +.webapps-featured--page { + padding-block: 0; + border-block: none; + background: transparent; +} + +.webapps-featured--page::before { + display: none; +} + +.webapps-featured__grid--detail { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(1rem, 2vw, 1.25rem); +} + +.webapps-featured__grid--detail .webapps-project-detail-card { + height: 100%; +} + +.webapps-featured__grid--detail .webapps-project-detail-card__main { + grid-template-columns: 1fr; + justify-items: stretch; + gap: clamp(0.85rem, 2vw, 1.1rem); +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo-wrap { + width: 100%; + height: auto; + min-height: clamp(5.5rem, 11vw, 7.5rem); + padding: clamp(0.9rem, 2.2vw, 1.25rem) clamp(0.75rem, 2vw, 1rem); + margin-inline: 0; + border: none; + border-radius: calc(var(--webapps-card-radius) - 0.2rem); + background: rgba(var(--openms-navy-rgb), 0.025); +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo { + width: 100%; + height: auto; + max-height: clamp(4.75rem, 10vw, 6.5rem); + object-fit: contain; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo--large { + max-height: clamp(5.25rem, 11.5vw, 7.25rem); +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo--xlarge { + max-height: clamp(5.75rem, 13vw, 8rem); +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__body { + gap: 0.65rem; +} + +@media (max-width: 991px) { + .webapps-featured__grid--detail { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .webapps-featured__grid--detail { + grid-template-columns: 1fr; + } +} + +.webapps-project-detail-card { + width: 100%; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--webapps-card-radius); + background: var(--openms-white); + box-shadow: 0 0.2rem 0.85rem rgba(var(--openms-navy-rgb), 0.06); +} + +.webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: clamp(1rem, 2.5vw, 1.5rem); + padding: clamp(1.1rem, 2.2vw, 1.45rem); + align-items: start; +} + +.webapps-project-detail-card__logo-wrap { + display: flex; + align-items: center; + justify-content: center; + width: clamp(4.25rem, 9vw, 5.25rem); + height: clamp(4.25rem, 9vw, 5.25rem); + padding: 0.55rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + border-radius: 0.85rem; + background: var(--openms-white); +} + +.webapps-project-detail-card__logo { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.webapps-project-detail-card__body { + display: grid; + gap: 0.55rem; + min-width: 0; +} + +.webapps-project-detail-card__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 2vw, 1.2rem); + font-weight: 700; + line-height: 1.25; + color: var(--openms-navy); +} + +.webapps-project-detail-card__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.76); +} + +.webapps-project-detail-card__maintainers { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.webapps-project-detail-card__maintainers-label { + display: block; + margin-bottom: 0.15rem; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.webapps-project-links { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 0.35rem 0 0; + padding: 0; + list-style: none; +} + +.webapps-project-links__btn { + display: inline-flex; + align-items: center; + gap: 0.4rem; + min-height: 2.15rem; + padding: 0.4rem 0.8rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.2); + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.06); + font-size: 0.82rem; + font-weight: 600; + color: color-mix(in srgb, var(--openms-blue) 85%, var(--openms-navy)); + text-decoration: none; + transition: + border-color 0.18s ease, + background 0.18s ease, + color 0.18s ease; +} + +.webapps-project-links__btn:hover, +.webapps-project-links__btn:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.38); + background: rgba(var(--openms-blue-rgb), 0.12); + color: var(--openms-navy); + outline: none; +} + +.webapps-project-links__btn .fab, +.webapps-project-links__btn .fas { + font-size: 0.95em; + line-height: 1; +} + +.webapps-catalog__contact { + margin: clamp(1.5rem, 3vw, 2rem) 0 0; + text-align: center; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.webapps-catalog__contact a { + font-weight: 600; + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.webapps-catalog__contact a:hover, +.webapps-catalog__contact a:focus-visible { + color: var(--openms-navy); +} + +/* Affiliate projects */ + +.webapps-affiliates { + width: 100%; + padding-block: clamp(2.5rem, 5vw, 3.5rem); +} + +.webapps-affiliates__inner { + width: min(100%, var(--olib-max, 90rem)); + max-width: var(--olib-max, 90rem); + margin-inline: auto; + padding-inline: var(--olib-pad-x, clamp(1.25rem, 4vw, 2.5rem)); +} + +.webapps-affiliates__header { + display: grid; + gap: 0.75rem; + justify-items: center; + max-width: 44rem; + margin: 0 auto clamp(1.5rem, 3vw, 2rem); + text-align: center; +} + +.webapps-affiliates__eyebrow { + display: inline-flex; + align-items: center; + margin: 0; + padding: 0.35rem 0.75rem; + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.04em; + 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; +} + +.webapps-affiliates__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); +} + +.webapps-affiliates__lead { + margin: 0 auto; + max-width: 44rem; + font-size: clamp(0.95rem, 1.25vw, 1.08rem); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.78); +} + +.webapps-affiliates__grid { + display: grid; + grid-template-columns: 1fr; + gap: clamp(1rem, 2vw, 1.25rem); + margin: 0; + padding: 0; + list-style: none; +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + grid-template-columns: auto minmax(0, 1fr); + align-items: start; + gap: clamp(1rem, 2.5vw, 1.35rem); +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + width: clamp(5.5rem, 11vw, 7rem); + height: clamp(5.5rem, 11vw, 7rem); + min-height: auto; + padding: clamp(0.55rem, 1.2vw, 0.75rem); + margin-inline: 0; + flex-shrink: 0; +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo { + width: 100%; + height: 100%; + max-height: none; +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide { + width: clamp(7.5rem, 14vw, 9.5rem); + height: clamp(4.5rem, 8vw, 5.5rem); + min-height: auto; +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide .webapps-project-detail-card__logo { + width: 100%; + height: 100%; + max-width: none; + max-height: none; +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--large { + width: clamp(6rem, 12vw, 7.5rem); + height: clamp(6rem, 12vw, 7.5rem); + min-height: auto; +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--large .webapps-project-detail-card__logo { + max-height: none; +} + +.webapps-affiliates__item { + display: flex; + min-width: 0; +} + +.webapps-affiliates__item .webapps-project-detail-card { + height: 100%; +} + +@media (max-width: 640px) { + .webapps-project-detail-card__main { + grid-template-columns: 1fr; + } + + .webapps-project-detail-card__logo-wrap { + width: 4rem; + height: 4rem; + } + + .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + grid-template-columns: auto minmax(0, 1fr); + } + + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + width: clamp(4.5rem, 18vw, 5.75rem); + height: clamp(4.5rem, 18vw, 5.75rem); + } + + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide { + width: clamp(6rem, 24vw, 7.5rem); + height: clamp(3.75rem, 14vw, 4.75rem); + } + + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--large { + width: clamp(5rem, 20vw, 6.25rem); + height: clamp(5rem, 20vw, 6.25rem); + } +} + +@media (min-width: 900px) { + .webapps-affiliates__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +/* Archived apps — guide layout */ + +.webapps-archived { + width: 100%; + padding-block: clamp(2.5rem, 5vw, 3.5rem); +} + +.webapps-archived__inner { + width: min(100%, var(--olib-max, 90rem)); + max-width: var(--olib-max, 90rem); + margin-inline: auto; + padding-inline: var(--olib-pad-x, clamp(1.25rem, 4vw, 2.5rem)); +} + +.webapps-archived--guide .webapps-archived__intro { + display: grid; + gap: 0.75rem; + justify-items: center; + max-width: min(100%, 40rem); + margin: 0 auto clamp(1.75rem, 4vh, 2.5rem); + text-align: center; +} + +.webapps-archived__eyebrow { + display: inline-flex; + align-items: center; + width: fit-content; + margin: 0; + padding: 0.35rem 0.75rem; + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.04em; + color: rgba(var(--openms-navy-rgb), 0.62); + background: rgba(var(--openms-navy-rgb), 0.05); + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + border-radius: 999px; +} + +.webapps-archived__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.12; + letter-spacing: -0.02em; + color: var(--openms-navy); + text-wrap: balance; +} + +.webapps-archived__lead { + margin: 0; + max-width: 38rem; + font-size: clamp(1rem, 1.35vw, 1.125rem); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.webapps-archived__stack { + display: grid; + gap: clamp(1.35rem, 3vw, 2rem); + max-width: min(100%, 44rem); + margin-inline: auto; +} + +.webapps-archived__notice { + padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.45rem); + border: 1px solid rgba(var(--openms-blue-rgb), 0.16); + border-left: 0.28rem solid var(--openms-blue); + border-radius: calc(var(--webapps-card-radius) - 0.05rem); + background: rgba(var(--openms-blue-rgb), 0.05); +} + +.webapps-archived__notice-title { + margin: 0 0 0.65rem; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.8vw, 1.08rem); + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy); +} + +.webapps-archived__notice-list { + display: grid; + gap: 0.55rem; + margin: 0; + padding: 0; + list-style: none; +} + +.webapps-archived__notice-item { + position: relative; + margin: 0; + padding-left: 1.15rem; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-navy-rgb), 0.74); +} + +.webapps-archived__notice-item::before { + content: ""; + position: absolute; + left: 0; + top: 0.62em; + width: 0.38rem; + height: 0.38rem; + border-radius: 50%; + background: var(--openms-blue); +} + +.webapps-archived__projects-title { + margin: 0 0 0.85rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 2vw, 1.2rem); + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy); +} + +.webapps-archived__grid { + display: grid; + gap: 0.85rem; + margin: 0; + padding: 0; + list-style: none; +} + +.webapps-archived__item { + display: flex; + min-width: 0; +} + +.webapps-archived-entry { + display: grid; + gap: 0.85rem; + width: 100%; + padding: clamp(1.15rem, 2.4vw, 1.5rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--webapps-card-radius); + background: var(--openms-white); + box-shadow: 0 0.2rem 0.85rem rgba(var(--openms-navy-rgb), 0.05); +} + +.webapps-archived-entry__header { + display: flex; + align-items: center; + gap: clamp(0.85rem, 2vw, 1.15rem); +} + +.webapps-archived-entry__logo { + display: block; + flex: 0 0 auto; + width: auto; + max-width: clamp(7rem, 24vw, 9.5rem); + height: auto; + max-height: clamp(2.75rem, 7vw, 3.5rem); + object-fit: contain; + object-position: left center; +} + +.webapps-archived-entry__heading { + display: grid; + gap: 0.2rem; + min-width: 0; +} + +.webapps-archived-entry__title-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.45rem 0.65rem; +} + +.webapps-archived-entry__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.1rem, 2.1vw, 1.28rem); + font-weight: 700; + line-height: 1.2; + color: var(--openms-navy); +} + +.webapps-archived-entry__badge { + display: inline-flex; + align-items: center; + padding: 0.22rem 0.6rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: none; + color: rgba(var(--openms-navy-rgb), 0.62); + background: rgba(var(--openms-navy-rgb), 0.06); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 999px; +} + +.webapps-archived-entry__type { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.52); } -.swiper-slide.slide-1 p { - margin-top: 10px; + +.webapps-archived-entry__text { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.webapps-archived-entry__maintainers { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.66); } -/* slide-2: NuXL */ -.swiper-slide.slide-2 img { - height: 150px; - margin-top: 60px; +.webapps-archived-entry__maintainers-label { + display: block; + margin-bottom: 0.15rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--openms-blue); } -.swiper-slide.slide-2 p { - margin-top: 50px; + +.webapps-archived-entry .webapps-project-links { + margin: 0.15rem 0 0; } -/* slide-3: MHCQuant */ -.swiper-slide.slide-3 img { - height: 180px; - margin-top: 40px; +.webapps-archived-entry--nfcore { + --nfcore-green: #24b064; + --nfcore-green-rgb: 36 176 100; } -.swiper-slide.slide-3 p { - margin-top: 40px; + +.webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore { + border-color: rgba(var(--nfcore-green-rgb), 0.34); + background: rgba(var(--nfcore-green-rgb), 0.12); + color: color-mix(in srgb, var(--nfcore-green) 72%, var(--openms-navy)); } -/* slide-4: TOPPView-lite */ -.swiper-slide.slide-4 img { - height: 180px; - margin-top: 40px; +.webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore:hover, +.webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore:focus-visible { + border-color: rgba(var(--nfcore-green-rgb), 0.52); + background: rgba(var(--nfcore-green-rgb), 0.2); + color: var(--openms-navy); } -.swiper-slide.slide-4 p { - margin-top: 40px; + +.webapps-archived__revival { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem 1.25rem; + padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.45rem); + border: 1px dashed rgba(var(--openms-navy-rgb), 0.16); + border-radius: var(--webapps-card-radius); + background: rgba(var(--openms-navy-rgb), 0.02); } -/* slide-5: NASEWEIS */ -.swiper-slide.slide-5 img { - height: 100px; - margin-top: 80px; +.webapps-archived__revival-copy { + flex: 1 1 16rem; + min-width: 0; } -.swiper-slide.slide-5 p { - margin-top: 80px; + +.webapps-archived__revival-kicker { + margin: 0 0 0.35rem; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.5); +} + +.webapps-archived__revival-text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.webapps-archived__revival-text strong { + display: block; + margin-bottom: 0.2rem; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.8vw, 1.08rem); + font-weight: 700; + line-height: 1.35; + color: var(--openms-navy); } -/* slide-6: StreamSage */ -.swiper-slide.slide-6 img { +.webapps-archived__revival-note { + display: block; +} + +.webapps-archived__revival-actions { + display: flex; + flex-wrap: wrap; + gap: 0.55rem; + flex: 0 0 auto; +} + +.webapps-archived__revival-actions .openms-lib-btn { + min-height: 2.45rem; + padding: 0.5rem 1rem; + font-size: 0.88rem; +} + +@media (max-width: 640px) { + .webapps-archived-entry__header { + flex-direction: column; + align-items: flex-start; + } + + .webapps-archived__revival { + flex-direction: column; + align-items: stretch; + } + + .webapps-archived__revival-actions { + flex-direction: column; + } + + .webapps-archived__revival-actions .openms-lib-btn { width: 100%; - height: 250px; + justify-content: center; + } +} + +/* Archived apps — editorial split */ +.webapps-archived--editorial .webapps-archived__layout { + display: grid; + grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.22fr); + gap: clamp(2.5rem, 6vw, 5rem); + align-items: start; + max-width: min(100%, 72rem); + margin-inline: auto; +} + +.webapps-archived--editorial .webapps-archived__context { + display: grid; + gap: clamp(1.25rem, 3vw, 1.75rem); + position: sticky; + top: calc(var(--openms-header-height, 4.25rem) + 1.5rem); +} + +.webapps-archived--editorial .webapps-archived__intro { + justify-items: start; + max-width: none; + margin: 0; + text-align: left; +} + +.webapps-archived--editorial .webapps-archived__lead { + max-width: 34ch; + text-align: left; +} + +.webapps-archived--editorial .webapps-archived__notice { + padding: 1rem 0 0; + border: none; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: 0; + background: transparent; +} + +.webapps-archived--editorial .webapps-archived__notice-title { + margin-bottom: 0.7rem; + font-size: 0.78rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.56); +} + +.webapps-archived--editorial .webapps-archived__notice-item { + padding-left: 1.35rem; +} + +.webapps-archived--editorial .webapps-archived__notice-item::before { + top: 0.36em; + width: 0.9rem; + height: 0.9rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.26); + background: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' stroke='%231e4f8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") + center / 0.58rem no-repeat; +} + +.webapps-archived--editorial .webapps-archived__content { + display: grid; + gap: clamp(1.25rem, 3vw, 1.75rem); + min-width: 0; +} + +.webapps-archived--editorial .webapps-archived__projects { + padding: clamp(1.2rem, 3vw, 1.65rem); + border-radius: var(--webapps-card-radius); + background: rgba(var(--openms-white-rgb), 0.9); + box-shadow: 0 0.3rem 1.2rem rgba(var(--openms-navy-rgb), 0.07); +} + +.webapps-archived__projects-kicker { + margin: 0 0 0.3rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.09em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.webapps-archived--editorial .webapps-archived__projects-title { + margin-bottom: 1rem; + font-size: clamp(1.25rem, 2.5vw, 1.55rem); +} + +.webapps-archived--editorial .webapps-archived-entry { + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.webapps-archived--editorial .webapps-archived-entry__header { + padding-bottom: 0.9rem; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.09); +} + +.webapps-archived--editorial .webapps-archived-entry__logo { + max-width: clamp(8rem, 24vw, 10.5rem); + max-height: 4rem; +} + +.webapps-archived--editorial .webapps-archived-entry__name { + font-size: clamp(1.2rem, 2.5vw, 1.45rem); +} + +.webapps-archived--editorial .webapps-archived-entry__text { + max-width: 48ch; +} + +.webapps-archived--editorial .webapps-archived__revival { + align-items: flex-start; + padding: clamp(1.1rem, 2.5vw, 1.4rem); + border: none; + border-radius: var(--webapps-card-radius); + background: var(--openms-navy); +} + +.webapps-archived--editorial .webapps-archived__revival-kicker, +.webapps-archived--editorial .webapps-archived__revival-text, +.webapps-archived--editorial .webapps-archived__revival-text strong { + color: var(--openms-white); +} + +.webapps-archived--editorial .webapps-archived__revival-kicker, +.webapps-archived--editorial .webapps-archived__revival-note { + opacity: 0.72; } -.swiper-slide.slide-6 p { - margin-top: 10px; + +.webapps-archived--editorial .webapps-archived__revival-actions .openms-lib-btn--ghost { + border-color: rgba(var(--openms-white-rgb), 0.5); + color: var(--openms-white); +} + +@media (max-width: 900px) { + .webapps-archived--editorial .webapps-archived__layout { + grid-template-columns: 1fr; + gap: clamp(1.75rem, 5vw, 2.5rem); + max-width: min(100%, 44rem); + } + + .webapps-archived--editorial .webapps-archived__context { + position: static; + } + + .webapps-archived--editorial .webapps-archived__lead { + max-width: 44ch; + } +} + +/* Contribute — split action list + citation panel */ + +.webapps-contribute { + width: 100%; + padding-block: clamp(2.5rem, 5vw, 3.5rem); +} + +.webapps-contribute__inner { + width: min(100%, var(--olib-max, 90rem)); + max-width: var(--olib-max, 90rem); + margin-inline: auto; + padding-inline: var(--olib-pad-x, clamp(1.25rem, 4vw, 2.5rem)); +} + +.webapps-contribute__header { + display: grid; + gap: 0.75rem; + max-width: 52rem; + margin-bottom: clamp(1.75rem, 4vh, 2.5rem); +} + +.webapps-contribute__eyebrow { + display: inline-flex; + align-items: center; + width: fit-content; + margin: 0; + padding: 0.35rem 0.75rem; + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.04em; + 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; +} + +.webapps-contribute__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; +} + +.webapps-contribute__lead { + margin: 0; + max-width: 52ch; + font-size: clamp(0.95rem, 1.25vw, 1.08rem); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.webapps-contribute__layout { + display: block; +} + +.webapps-contribute__col-label { + margin: 0 0 0.85rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.5); +} + +.webapps-contribute__action-list { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(0.75rem, 2vw, 1rem); + margin: 0; + padding: 0; + list-style: none; } -.swiper-button-prev, -.swiper-button-next { - color: #000080; - position: absolute; - top: 40%; +.webapps-contribute__action-item { + display: flex; + min-width: 0; } -@media (max-width: 1349px) { - .swiper { - width: 1000px; - } +.webapps-contribute__action { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + height: 100%; + gap: 0.55rem; + padding: clamp(1rem, 2.2vw, 1.25rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--webapps-card-radius); + background: var(--openms-white); + box-shadow: 0 0.2rem 0.85rem rgba(var(--openms-navy-rgb), 0.05); + color: inherit; + text-decoration: none; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; } -@media (max-width: 999px) { - .swiper { - width: 700px; - } +.webapps-contribute__action:hover, +.webapps-contribute__action:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 0.35rem 1.25rem rgba(var(--openms-navy-rgb), 0.09); + transform: translateY(-1px); + outline: none; } -@media (max-width: 699px) { - .swiper { - width: 350px; - } - - .swiper-slide p { - font-size: 15px; - } +.webapps-contribute__action-icon { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 2.65rem; + height: 2.65rem; + border-radius: 0.75rem; + font-size: 1.1rem; + line-height: 1; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + box-shadow: inset 0 0 0 1px rgba(var(--openms-blue-rgb), 0.14); +} + +.webapps-contribute__action-body { + display: grid; + gap: 0.25rem; + flex: 1 1 auto; + min-width: 0; +} -} \ No newline at end of file +.webapps-contribute__action-tag { + font-size: 0.67rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.5); +} + +.webapps-contribute__action-title { + font-family: var(--openms-font-heading); + font-size: clamp(0.98rem, 1.8vw, 1.1rem); + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy); +} + +.webapps-contribute__action-text { + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.66); +} + +.webapps-contribute__action-cta { + margin-top: auto; + padding-top: 0.35rem; + font-size: clamp(0.78rem, 2vw, 0.88rem); + font-weight: 600; + color: var(--openms-blue); + transition: color 0.2s ease; +} + +.webapps-contribute__action:hover .webapps-contribute__action-cta, +.webapps-contribute__action:focus-visible .webapps-contribute__action-cta { + color: color-mix(in srgb, var(--openms-blue) 82%, var(--openms-navy)); +} + +.webapps-contribute__research-impact { + margin-top: clamp(2.5rem, 5vw, 3.5rem); +} + +@media (max-width: 991px) { + .webapps-contribute__action-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .webapps-contribute__action-list { + grid-template-columns: 1fr; + } +} diff --git a/assets/css/z-contribute-page.css b/assets/css/z-contribute-page.css new file mode 100644 index 00000000..d22061f8 --- /dev/null +++ b/assets/css/z-contribute-page.css @@ -0,0 +1,866 @@ +/* Contribute — layout aligned with /openms-lib/ (section rhythm, toolkit, resource cards) */ + +.contribute-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --contribute-max: 72rem; + --contribute-pad: clamp(1.25rem, 4vw, 2.5rem); + --contribute-section-y: clamp(3rem, 7vw, 5rem); + --contribute-card-radius: 1rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0; + background: var(--openms-white); + color: var(--openms-navy); +} + +.contribute-page-layout__body { + display: block; +} + +/* ── Hero (match /openms-lib/ pro hero) ── */ +.contribute-page-layout .openms-lib-hero.contribute-page-hero { + margin: 0; + padding: + clamp(2.5rem, 5vw, 3.5rem) + max(var(--olib-pad-x), calc((100% - var(--contribute-max)) / 2 + var(--olib-pad-x))) + clamp(2.25rem, 4.5vw, 3.25rem); + background: var(--openms-white); + overflow: visible; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero::before, +.contribute-page-layout .openms-lib-hero.contribute-page-hero::after, +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__panel::after { + display: none; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__panel, +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__content { + text-align: center; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__content { + display: flex; + flex-direction: column; + align-items: center; + gap: 0; + width: 100%; + max-width: min(100%, 62rem); + min-height: 0; + margin-inline: auto; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__eyebrow { + margin: 0 auto 0.4rem; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title { + max-width: 26ch; + width: min(100%, 26ch); + margin: 0 auto; + font-family: var(--openms-font-heading); + font-size: clamp(2.35rem, 1.35rem + 4vw, 4.25rem); + font-weight: 800; + line-height: 0.98; + letter-spacing: -0.04em; + text-align: center; + text-transform: none; + color: var(--openms-navy); + text-wrap: balance; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__accent, +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__accent--warm { + color: var(--openms-blue); + -webkit-text-fill-color: var(--openms-blue); + background: none; +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__lead { + max-width: 58ch; + width: min(100%, 58ch); + margin: 0.55rem auto 0; + font-size: clamp(1.02rem, 0.9rem + 0.45vw, 1.2rem); + line-height: 1.55; + text-align: center; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 0.75rem; + margin-top: 1rem; + max-width: none; + width: 100%; +} + +.contribute-page-layout .openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + flex: 0 1 auto; + width: auto; + min-width: 0; + min-height: 2.75rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + 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 !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.contribute-page-layout .openms-lib-btn--primary { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.contribute-page-layout .openms-lib-btn--primary::after { + display: none; +} + +.contribute-page-layout .openms-lib-btn--ghost { + border: 2px solid var(--openms-blue); + background: 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-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 !important; +} + +.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; + 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 !important; +} + +.contribute-page-layout .openms-lib-btn .fab, +.contribute-page-layout .openms-lib-btn .fas { + font-size: 1.05em; +} + +/* ── Shared section eyebrow ── */ +.contribute-page-layout .contribute-eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 0.75rem; + padding: 0.35rem 0.75rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.1); + font-size: clamp(0.68rem, 0.52rem + 0.65vw, 0.78rem); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + box-shadow: none; +} + +.contribute-page-layout .contribute-eyebrow--inverse { + border-color: rgba(255, 255, 255, 0.22); + background: rgba(255, 255, 255, 0.1); + color: rgba(var(--openms-white-rgb), 0.92); +} + +/* ── Channels (soft band, like openms-lib about) ── */ +.contribute-channels { + padding: + var(--contribute-section-y) + max(var(--olib-pad-x), calc((100% - var(--contribute-max)) / 2 + var(--olib-pad-x))); + background: color-mix(in srgb, var(--olib-bg-soft) 45%, var(--openms-white)); +} + +.contribute-channels__inner { + max-width: var(--contribute-max); + margin-inline: auto; +} + +.contribute-channels__head, +.contribute-ways__head { + max-width: 40rem; + margin: 0 auto clamp(2rem, 4vw, 3rem); + text-align: center; +} + +.contribute-channels__title, +.contribute-ways__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.85rem, 1rem + 3vw, 2.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.contribute-channels__lead, +.contribute-ways__lead { + margin: 0.75rem auto 0; + max-width: 46ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.7); +} + +.contribute-channels__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.85rem; +} + +.contribute-channel { + display: flex; + flex-direction: column; + gap: 0.55rem; + min-height: 100%; + padding: clamp(1.25rem, 2.5vw, 1.65rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: 1.15rem; + background: var(--openms-white); + box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.03); +} + +.contribute-channel__top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.55rem; + margin-bottom: 0.15rem; +} + +.contribute-channel__icon { + display: grid; + place-items: center; + width: 2.25rem; + height: 2.25rem; + border-radius: 0.7rem; + font-size: 0.95rem; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); + box-shadow: inset 0 0 0 1px rgba(var(--openms-navy-rgb), 0.1); +} + +.contribute-channel__icon--discord { + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + box-shadow: inset 0 0 0 1px rgba(var(--openms-blue-rgb), 0.16); +} + +.contribute-channel__tag { + font-size: 0.66rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.48); +} + +.contribute-channel__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); + font-weight: 700; + line-height: 1.25; + letter-spacing: -0.02em; + color: var(--openms-navy); +} + +.contribute-channel__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.64); +} + +.contribute-channel__list { + margin: 0.15rem 0 0; + padding: 0; + list-style: none; + display: grid; + gap: 0.4rem; + flex: 1 1 auto; +} + +.contribute-channel__list li { + position: relative; + margin: 0; + padding-left: 1.1rem; + font-size: var(--openms-body-size); + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.contribute-channel__list li::before { + content: ""; + position: absolute; + left: 0; + top: 0.55em; + width: 0.35rem; + height: 0.35rem; + border-radius: 50%; + background: var(--openms-blue); +} + +.contribute-channel__link, +.contribute-way__link { + display: inline-flex; + align-items: center; + align-self: flex-start; + gap: 0.3rem; + margin-top: auto; + padding-top: 0.55rem; + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.4; + text-decoration: none !important; + transition: gap 0.2s ease, color 0.2s ease; +} + +.contribute-channel__link { + color: var(--openms-navy) !important; +} + +.contribute-channel:hover .contribute-channel__link, +.contribute-channel:focus-within .contribute-channel__link, +.contribute-channel__link:hover, +.contribute-channel__link:focus-visible { + gap: 0.5rem; + color: rgba(var(--openms-navy-rgb), 0.78) !important; + outline: none; +} + +/* ── Ways (toolkit + polished contribution cards) ── */ +.contribute-ways { + padding: + var(--contribute-section-y) + max(var(--olib-pad-x), calc((100% - var(--contribute-max)) / 2 + var(--olib-pad-x))); + background: color-mix(in srgb, var(--olib-bg-soft) 55%, var(--openms-white)); +} + +.contribute-ways__inner { + max-width: var(--contribute-max); + margin-inline: auto; +} + +.contribute-ways__toolkit { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); + gap: 1rem; + align-items: stretch; +} + +.contribute-ways__feature { + position: relative; + display: flex; + flex-direction: column; + gap: 0.85rem; + min-height: 100%; + overflow: hidden; + padding: clamp(1.5rem, 3vw, 2.1rem); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 1.35rem; + background: + radial-gradient( + 120% 90% at 100% 0%, + rgba(var(--openms-blue-rgb), 0.14) 0%, + rgba(var(--openms-blue-rgb), 0) 55% + ), + linear-gradient( + 165deg, + var(--openms-white) 0%, + color-mix(in srgb, var(--openms-blue) 5%, var(--openms-white)) 100% + ); + color: var(--openms-navy); + box-shadow: + 0 1px 2px rgba(var(--openms-navy-rgb), 0.04), + 0 14px 32px -18px rgba(var(--openms-navy-rgb), 0.22); +} + +.contribute-ways__feature-kicker { + display: inline-flex; + align-items: center; + gap: 0.55rem; + margin: 0; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.58); +} + +.contribute-ways__feature-icon { + display: grid; + place-items: center; + width: 2.35rem; + height: 2.35rem; + border-radius: 0.8rem; + font-size: 1rem; + color: var(--openms-white); + background: linear-gradient( + 135deg, + var(--openms-blue) 0%, + color-mix(in srgb, var(--openms-blue) 55%, var(--openms-navy)) 100% + ); + box-shadow: 0 8px 16px -8px rgba(var(--openms-blue-rgb), 0.55); +} + +.contribute-ways__feature-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2rem); + font-weight: 800; + line-height: 1.12; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.contribute-ways__feature-text { + margin: 0; + max-width: 36ch; + font-size: var(--openms-body-size); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.66); +} + +.contribute-project-links { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.55rem; + margin: auto 0 0; + padding: 0.5rem 0 0; + list-style: none; +} + +.contribute-project-links li { + margin: 0; +} + +.contribute-project-links a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 2.55rem; + padding: 0.45rem 0.85rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.22); + border-radius: 0.85rem; + background: var(--openms-white); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy) !important; + text-decoration: none !important; + transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; +} + +.contribute-project-links a:hover, +.contribute-project-links a:focus-visible { + border-color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.06); + color: var(--openms-blue) !important; + transform: translateY(-1px); + outline: none; + text-decoration: none !important; +} + +.contribute-ways__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; +} + +.contribute-ways__more { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1rem; + margin-top: 1rem; +} + +.contribute-way { + position: relative; + display: flex; + flex-direction: column; + gap: 0.55rem; + min-height: 100%; + padding: clamp(1.2rem, 2.4vw, 1.5rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: 1.25rem; + background: linear-gradient( + 180deg, + var(--openms-white) 0%, + color-mix(in srgb, var(--openms-blue) 4%, var(--openms-white)) 100% + ); + box-shadow: + 0 1px 2px rgba(var(--openms-navy-rgb), 0.04), + 0 10px 24px -14px rgba(var(--openms-navy-rgb), 0.18); + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; +} + +.contribute-way:hover, +.contribute-way:focus-within { + transform: translateY(-3px); + border-color: rgba(var(--openms-blue-rgb), 0.22); + box-shadow: + 0 1px 2px rgba(var(--openms-navy-rgb), 0.04), + 0 18px 36px -16px rgba(var(--openms-navy-rgb), 0.28); +} + +.contribute-way__top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.55rem; + margin-bottom: 0.1rem; +} + +.contribute-way__icon { + display: grid; + place-items: center; + width: 2.6rem; + height: 2.6rem; + border-radius: 0.85rem; + font-size: 1.05rem; + color: var(--openms-white); + background: linear-gradient( + 135deg, + var(--openms-blue) 0%, + color-mix(in srgb, var(--openms-blue) 55%, var(--openms-navy)) 100% + ); + box-shadow: 0 8px 16px -8px rgba(var(--openms-blue-rgb), 0.55); + transition: transform 0.25s ease; +} + +.contribute-way:hover .contribute-way__icon, +.contribute-way:focus-within .contribute-way__icon { + transform: scale(1.05); +} + +.contribute-way__tag { + font-size: 0.66rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.48); +} + +.contribute-way__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 0.92rem + 0.45vw, 1.18rem); + font-weight: 700; + line-height: 1.28; + letter-spacing: -0.02em; + color: var(--openms-navy); +} + +.contribute-way__text { + margin: 0; + flex: 1 1 auto; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.64); +} + +.contribute-way__text a { + color: var(--openms-blue); + font-weight: 500; + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.contribute-way__text a:hover { + color: var(--openms-navy); +} + +.contribute-way__meta { + display: flex; + align-items: center; + min-height: 1.4rem; + margin: 0; +} + +.contribute-way__meta img { + display: block; + height: 1.25rem; + width: auto; +} + +.contribute-way__badge { + display: inline-flex; + align-self: flex-start; + margin: 0.1rem 0 0; + line-height: 0; + text-decoration: none; +} + +.contribute-way__badge img { + display: block; + height: 1.35rem; + width: auto; +} + +.contribute-way__badge:hover, +.contribute-way__badge:focus-visible { + opacity: 0.88; + outline: none; +} + +.contribute-way__actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; + margin-top: auto; + padding-top: 0.55rem; +} + +.contribute-way__actions .openms-lib-btn { + flex: 1 1 auto; + min-width: 0; + min-height: 2.4rem; + padding: 0.45rem 0.85rem; + font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.82rem); +} + +.contribute-way__actions .openms-lib-btn--ghost { + border: 2px solid rgba(var(--openms-navy-rgb), 0.22); + background: transparent; + color: var(--openms-navy) !important; +} + +.contribute-way__actions .openms-lib-btn--ghost:hover, +.contribute-way__actions .openms-lib-btn--ghost:focus-visible, +.contribute-way__actions .openms-lib-btn--ghost:active { + border-color: var(--openms-navy); + background: transparent; + color: var(--openms-navy) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb), 0.12); + outline: none; +} + +.contribute-os-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: 0.1rem; +} + +.contribute-os-btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + min-height: 2rem; + padding: 0.28rem 0.7rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.2); + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.05); + font-size: 0.78rem; + font-weight: 700; + color: var(--openms-blue) !important; + text-decoration: none !important; + transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; +} + +.contribute-os-btn:hover, +.contribute-os-btn:focus-visible { + border-color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + color: var(--openms-blue) !important; + text-decoration: none !important; + outline: none; +} + +.contribute-way__link { + display: inline-flex; + align-items: center; + align-self: flex-start; + gap: 0.3rem; + margin-top: auto; + padding-top: 0.55rem; + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.4; + color: var(--openms-blue) !important; + text-decoration: none !important; + transition: gap 0.2s ease, color 0.2s ease; +} + +.contribute-way:hover .contribute-way__link, +.contribute-way:focus-within .contribute-way__link, +.contribute-way__link:hover, +.contribute-way__link:focus-visible { + gap: 0.5rem; + color: var(--openms-navy) !important; + outline: none; +} + +/* ── Code of Conduct (full-bleed CTA band like openms-lib) ── */ +.contribute-conduct { + padding: + clamp(2.5rem, 5vw, 3.5rem) + max(var(--olib-pad-x), calc((100% - var(--contribute-max)) / 2 + var(--olib-pad-x))); + background: var(--openms-navy); +} + +.contribute-conduct__inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 0; + max-width: var(--contribute-max); + margin-inline: auto; + text-align: center; +} + +.contribute-conduct__copy { + max-width: 40rem; + margin: 0 auto; +} + +.contribute-conduct__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.85rem, 1rem + 3vw, 2.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + color: var(--openms-white); +} + +.contribute-conduct__lead { + margin: 0.75rem auto 0; + max-width: 46ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(255, 255, 255, 0.72); +} + +.contribute-conduct__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; + margin-top: 1.75rem; +} + +.contribute-page-layout .contribute-conduct__btn { + border: 2px solid rgba(255, 255, 255, 0.45) !important; + background: transparent !important; + color: var(--openms-white) !important; +} + +.contribute-page-layout .contribute-conduct__btn:hover, +.contribute-page-layout .contribute-conduct__btn:focus-visible, +.contribute-page-layout .contribute-conduct__btn:active { + border-color: var(--openms-white) !important; + background: rgba(255, 255, 255, 0.1) !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.16); + outline: none; +} + +/* ── Responsive ── */ +@media (max-width: 960px) { + .contribute-ways__toolkit { + grid-template-columns: 1fr; + } + + .contribute-ways__more { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 900px) { + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title { + font-size: clamp(2rem, 1.45rem + 3vw, 3rem); + } +} + +@media (max-width: 720px) { + .contribute-channels__grid, + .contribute-ways__grid, + .contribute-ways__more, + .contribute-project-links { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__actions { + flex-direction: row; + flex-wrap: nowrap; + gap: clamp(0.55rem, 2.4vw, 0.85rem); + } + + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__actions .openms-lib-btn { + flex: 0 1 auto; + min-width: 0; + white-space: nowrap; + font-size: clamp(0.62rem, 2.6vw, 0.82rem); + min-height: 2.2rem; + padding: 0.42rem clamp(0.5rem, 2.2vw, 0.85rem); + } +} + +@media (max-width: 480px) { + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title { + font-size: clamp(1.75rem, 8vw, 2.25rem); + line-height: 1.05; + letter-spacing: -0.03em; + } + + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__lead { + font-size: clamp(0.9rem, 3.8vw, 1rem); + line-height: 1.5; + } +} + +@media (prefers-reduced-motion: reduce) { + .contribute-page-layout .openms-lib-btn:hover, + .contribute-page-layout .openms-lib-btn:focus-visible, + .contribute-project-links a:hover, + .contribute-project-links a:focus-visible, + .contribute-way:hover, + .contribute-way:focus-within, + .contribute-way__actions .openms-lib-btn:hover, + .contribute-way__actions .openms-lib-btn:focus-visible { + transform: none; + } + + .contribute-way:hover .contribute-way__icon, + .contribute-way:focus-within .contribute-way__icon { + transform: none; + } +} diff --git a/assets/css/z-openms-lib-hub.css b/assets/css/z-openms-lib-hub.css new file mode 100644 index 00000000..2c3cc3ff --- /dev/null +++ b/assets/css/z-openms-lib-hub.css @@ -0,0 +1,2512 @@ +/* OpenMS-lib hub — dynamic section layouts, brand colors & fonts only */ + +.openms-lib-page--hub .openms-lib-page__nav { + display: none !important; +} + +.openms-lib-page--hub { + --hub-radius: 1.35rem; + --hub-radius-sm: 0.9rem; + --hub-pad: clamp(2.25rem, 5vw, 3.75rem); + --hub-wide-max: 92rem; + --hub-reveal-distance: 1.5rem; + --hub-reveal-duration: 0.62s; + --hub-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); + --hub-shadow-sm: 0 0.4rem 1.35rem rgba(var(--openms-navy-rgb), 0.06); + --hub-shadow-md: 0 0.9rem 2.5rem rgba(var(--openms-navy-rgb), 0.09); + --hub-shadow-lg: 0 1.35rem 3.25rem rgba(var(--openms-navy-rgb), 0.12); + --hub-glass: color-mix(in srgb, var(--openms-white) 76%, transparent); + --hub-label: rgba(var(--openms-navy-rgb), 0.52); + --hub-link: rgba(var(--openms-navy-rgb), 0.82); + --hub-link-hover: var(--openms-blue); + --hub-icon-bg: rgba(var(--openms-blue-rgb), 0.1); + --hub-icon-color: var(--openms-navy); + --hub-brand-gradient: linear-gradient( + 120deg, + var(--openms-blue) 0%, + var(--openms-purple) 48%, + var(--openms-pink) 100% + ); +} + +/* ── Ambient motion ── */ +@keyframes hub-float { + 0%, + 100% { + transform: translate3d(0, 0, 0) scale(1); + } + 50% { + transform: translate3d(0, -0.65rem, 0) scale(1.03); + } +} + +@keyframes hub-shimmer { + 0% { + background-position: 200% center; + } + 100% { + background-position: -200% center; + } +} + +@keyframes hub-pulse-ring { + 0%, + 100% { + opacity: 0.35; + transform: scale(1); + } + 50% { + opacity: 0.65; + transform: scale(1.08); + } +} + +@keyframes hub-line-flow { + 0% { + background-position: 0 0; + } + 100% { + background-position: 0 200%; + } +} + +@keyframes hub-fact-float { + 0%, + 100% { + transform: translate3d(0, var(--hub-fact-offset-y, 0), 0); + } + 50% { + transform: translate3d(0, calc(var(--hub-fact-offset-y, 0) - 0.35rem), 0); + } +} + +/* ── Hero: editorial left rail + floating orbs ── */ +.openms-lib-page--hub .openms-lib-hero { + position: relative; + margin-bottom: 0; + padding: clamp(2.5rem, 5vw, 3.5rem) max(var(--olib-pad-x), calc((100% - var(--olib-max)) / 2 + var(--olib-pad-x))) + clamp(3rem, 6vw, 4.25rem); + overflow: hidden; + background: + radial-gradient(ellipse 55% 45% at 8% 18%, rgba(var(--openms-yellow-rgb), 0.14), transparent 62%), + radial-gradient(ellipse 50% 55% at 92% 8%, rgba(var(--openms-blue-rgb), 0.14), transparent 58%), + radial-gradient(ellipse 40% 35% at 78% 88%, rgba(var(--openms-pink-rgb), 0.1), transparent 65%), + linear-gradient( + 165deg, + var(--olib-hero-bg-top) 0%, + color-mix(in srgb, var(--openms-blue) 4%, var(--openms-white)) 55%, + var(--openms-white) 100% + ); +} + +.openms-lib-page--hub .openms-lib-hero::before { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + opacity: 0.22; + background-image: + linear-gradient(rgba(var(--openms-navy-rgb), 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(var(--openms-navy-rgb), 0.035) 1px, transparent 1px); + background-size: 2.5rem 2.5rem; + mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, black, transparent 78%); +} + +.openms-lib-page--hub .openms-lib-hero::after { + content: ""; + position: absolute; + z-index: 0; + left: 0; + right: 0; + bottom: -1px; + width: auto; + height: clamp(2rem, 4vw, 3rem); + border-radius: 0; + background: linear-gradient(180deg, transparent 0%, var(--openms-white) 100%); + opacity: 1; + filter: none; + animation: none; + pointer-events: none; +} + +.openms-lib-page--hub .openms-lib-hero__panel { + position: relative; + text-align: center; +} + +.openms-lib-page--hub .openms-lib-hero__panel::after { + content: ""; + position: absolute; + top: -2rem; + right: -1rem; + z-index: 0; + width: clamp(9rem, 18vw, 14rem); + height: clamp(9rem, 18vw, 14rem); + border-radius: 42% 58% 63% 37% / 38% 42% 58% 62%; + background: var(--hub-brand-gradient); + opacity: 0.14; + filter: blur(0.5px); + animation: hub-float 9s var(--hub-reveal-ease) infinite; + pointer-events: none; +} + +.openms-lib-page--hub .openms-lib-hero__panel, +.openms-lib-page--hub .openms-lib-hero__content { + position: relative; + z-index: 1; +} + +.openms-lib-page--hub .openms-lib-hero__content { + width: 100%; + max-width: 46rem; + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--hub .openms-lib-hero__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.45rem; + margin: 0 auto 0.85rem; + padding: 0; + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.02em; + text-transform: none; + color: var(--olib-text-muted, rgba(var(--openms-navy-rgb), 0.68)); + background: transparent; + border: none; + border-radius: 0; +} + +.openms-lib-page--hub .openms-lib-hero__eyebrow::before { + display: block; + content: ""; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: var(--openms-blue); + flex-shrink: 0; +} + +.openms-lib-page--hub .openms-lib-hero__title { + margin: 0 auto; + max-width: min(22ch, 92vw); + font-size: clamp(1.75rem, 0.65rem + 4.8vw, 3rem); + font-weight: var(--openms-heading-xl-weight); + line-height: 1.06; + letter-spacing: -0.035em; + color: var(--openms-navy); + text-align: center; + text-wrap: balance; +} + +.openms-lib-page--hub .openms-lib-hero__title::after { + display: none; +} + +.openms-lib-page--hub .openms-lib-hero__accent { + color: inherit; +} + +.openms-lib-page--hub .openms-lib-hero__accent--warm { + color: var(--openms-blue); +} + +.openms-lib-page--hub .openms-lib-hero__lead { + margin: clamp(0.65rem, 2.5vw, 0.85rem) auto 0; + max-width: min(42ch, 92vw); + font-size: clamp(0.92rem, 0.78rem + 0.55vw, 1.125rem); + font-weight: var(--openms-body-weight); + line-height: 1.6; + color: rgba(var(--openms-navy-rgb), 0.68); + text-align: center; +} + +/* pyOpenMS hub — roomier hero copy */ +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__content { + max-width: min(58rem, 94vw); +} + +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__title { + max-width: min(34ch, 94vw); +} + +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__lead { + max-width: min(58ch, 94vw); +} + +/* pyopenms_viz hub — match pyOpenMS / OpenMS-lib hero rhythm */ +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__content { + max-width: min(58rem, 94vw); +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__title { + max-width: min(34ch, 94vw); +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__lead { + max-width: min(58ch, 94vw); +} + +/* Match the /openms-lib/ hero button height */ +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__actions .openms-lib-btn { + min-height: 2.75rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-size: var(--openms-text-min); + line-height: 1.3; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__actions .openms-lib-btn--install { + gap: 0.35rem; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__actions .openms-lib-btn__platforms { + padding-left: 0.45rem; + margin-left: 0; + font-size: 0.88rem; +} + +/* WebApps hub — wider hero lead for longer intro copy */ +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__content { + max-width: min(58rem, 94vw); +} + +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__lead { + max-width: min(68ch, 94vw); +} + +.openms-lib-page--hub .openms-lib-hero__actions { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: clamp(0.55rem, 2vw, 0.75rem); + margin-top: clamp(1rem, 3.5vw, 1.35rem); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + backdrop-filter: none; + -webkit-backdrop-filter: none; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn--ghost { + background: transparent; + background-color: transparent; +} + +.openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn { + font-size: clamp(0.8rem, 0.72rem + 0.35vw, 0.92rem); + min-height: clamp(2.45rem, 8.5vw, 2.75rem); + padding: clamp(0.58rem, 2vw, 0.7rem) clamp(0.95rem, 3.2vw, 1.25rem); + transition: + transform 0.22s var(--hub-reveal-ease), + box-shadow 0.22s ease, + background-color 0.22s ease; +} + +.openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn:hover, +.openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn:focus-visible { + transform: translateY(-2px) scale(1.02); +} + +/* ── Page shell ── */ +.openms-lib-page--hub .openms-lib-page__body { + margin-top: 0; + padding: 0; + gap: 0; +} + +.openms-lib-page--hub .openms-lib-page__body > .openms-lib-page__anchor { + position: relative; + padding: 0; + background: transparent !important; + scroll-margin-top: var(--openms-header-height, 4.25rem); + overflow: hidden; +} + +.openms-lib-page--hub .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block { + position: relative; + z-index: 1; + width: 100%; + max-width: none; + margin-inline: 0; + padding: var(--hub-pad) max(var(--olib-pad-x), calc((100% - var(--olib-max)) / 2 + var(--olib-pad-x))); + border: none; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-block__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: clamp(0.28rem, 1.2vw, 0.35rem) clamp(0.62rem, 2.5vw, 0.75rem); + font-size: clamp(0.68rem, 0.52rem + 0.65vw, 0.78rem); + 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; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-block__eyebrow::before { + display: none; +} + +.openms-lib-page--hub .openms-lib-page__body .openms-lib-block--highlights, +.openms-lib-page--hub .openms-lib-page__body .openms-lib-block--topp, +.openms-lib-page--hub .openms-lib-page__body .openms-lib-block--resources { + padding-block: var(--hub-pad); +} + +/* ── Section 1: What is OpenMS — split editorial + staggered stat deck ── */ +.openms-lib-page--hub #what-is-openms { + position: relative; + overflow: hidden; + background: + radial-gradient(ellipse 60% 50% at 100% 0%, rgba(var(--openms-purple-rgb), 0.09), transparent 58%), + radial-gradient(ellipse 45% 40% at 0% 100%, rgba(var(--openms-yellow-rgb), 0.1), transparent 55%), + var(--openms-white); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__inner { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); + gap: clamp(1.5rem, 3vw, 2.75rem); + align-items: start; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__head .openms-lib-block__eyebrow, +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__head .openms-lib-block__title { + width: fit-content; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-block__title, +.openms-lib-page--hub #what-is-openms .openms-lib-block__lead { + color: var(--openms-navy); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-block__lead { + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__head { + position: sticky; + top: calc(var(--openms-header-height, 4.25rem) + 1.25rem); + max-width: none; + margin-bottom: 0; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__list--facts { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(0.85rem, 1.6vw, 1.1rem); + max-width: none; + counter-reset: hub-fact; + transform-origin: center right; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__list--facts.openms-lib-hub__reveal { + transition-delay: calc(var(--hub-reveal-index, 0) * 90ms); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact { + --hub-fact-offset-y: 0; + --hub-fact-float-delay: 0s; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 0; + min-height: clamp(6.5rem, 12vw, 7.75rem); + padding: clamp(1.15rem, 2vw, 1.45rem); + padding-top: clamp(3.25rem, 5vw, 4rem); + border: none; + background: var(--openms-navy); + backdrop-filter: none; + -webkit-backdrop-filter: none; + box-shadow: var(--hub-shadow-sm); + text-align: left; + transition: + box-shadow 0.32s var(--hub-reveal-ease), + transform 0.32s var(--hub-reveal-ease); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:nth-child(1) { + --hub-fact-offset-y: 0; + --hub-fact-float-delay: 0s; + border-radius: 1.35rem 1.35rem 0.55rem 1.35rem; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:nth-child(2) { + --hub-fact-offset-y: 0.85rem; + --hub-fact-float-delay: 0.45s; + border-radius: 0.55rem 1.35rem 1.35rem 1.35rem; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:nth-child(3) { + --hub-fact-offset-y: -0.35rem; + --hub-fact-float-delay: 0.9s; + border-radius: 1.35rem 0.55rem 1.35rem 1.35rem; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:nth-child(4) { + --hub-fact-offset-y: 0.55rem; + --hub-fact-float-delay: 1.35s; + border-radius: 1.35rem 1.35rem 1.35rem 0.55rem; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.openms-lib-hub__reveal--left { + transform: translate3d(calc(var(--hub-reveal-distance) * -1.1), var(--hub-fact-offset-y), 0); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.openms-lib-hub__reveal--right { + transform: translate3d(var(--hub-reveal-distance), var(--hub-fact-offset-y), 0); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.openms-lib-hub__reveal { + transition-delay: calc(var(--hub-reveal-index, 0) * 90ms); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.openms-lib-hub__reveal.is-revealed { + transform: translate3d(0, var(--hub-fact-offset-y), 0); + animation: hub-fact-float 5.5s var(--hub-reveal-ease) var(--hub-fact-float-delay) infinite; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact::before { + content: counter(hub-fact, decimal-leading-zero); + counter-increment: hub-fact; + position: absolute; + top: 0.65rem; + right: 0.85rem; + z-index: 2; + font-family: var(--openms-font-heading); + font-size: clamp(2.5rem, 5vw, 3.25rem); + font-weight: 800; + line-height: 1; + letter-spacing: -0.05em; + color: rgba(255, 255, 255, 0.16); + transform: scale(0.88); + transform-origin: top right; + transition: + color 0.35s var(--hub-reveal-ease), + transform 0.45s var(--hub-reveal-ease); + pointer-events: none; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.is-revealed::before, +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:hover::before, +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:focus-within::before { + color: rgba(255, 255, 255, 0.38); + transform: scale(1); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact::after { + display: none; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:hover, +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:focus-within { + animation-play-state: paused; + transform: translate3d(0, calc(var(--hub-fact-offset-y) - 0.45rem), 0); + box-shadow: var(--hub-shadow-lg); +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact-icon, +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact-check { + display: none; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact-text { + position: relative; + z-index: 1; + width: 100%; + max-width: none; + margin: 0; + padding-right: clamp(2.5rem, 4vw, 3.5rem); + font-size: clamp(0.95rem, 1.45vw, 1.05rem); + text-align: left; + color: rgba(255, 255, 255, 0.72); + transform: translate3d(0, 0.4rem, 0); + transition: + transform 0.45s var(--hub-reveal-ease), + color 0.3s ease; +} + +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.is-revealed .openms-lib-highlights__fact-text, +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:hover .openms-lib-highlights__fact-text, +.openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:focus-within .openms-lib-highlights__fact-text { + transform: translate3d(0, 0, 0); + color: rgba(255, 255, 255, 0.88); +} + +/* ── Section 2: TOPP — editorial intro + feature rail ── */ +.openms-lib-page--hub #topp-tools { + background: + radial-gradient(ellipse 70% 60% at 0% 50%, rgba(var(--openms-blue-rgb), 0.11), transparent 62%), + linear-gradient(180deg, color-mix(in srgb, var(--olib-bg-soft) 65%, var(--openms-white)) 0%, var(--openms-white) 100%); +} + +.openms-lib-page--hub .openms-lib-topp__deck { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr); + gap: clamp(2rem, 4vw, 3.5rem); + align-items: start; +} + +.openms-lib-page--hub .openms-lib-topp__intro { + display: grid; + gap: 0.75rem; + max-width: min(100%, 38rem); +} + +.openms-lib-page--hub .openms-lib-topp__eyebrow { + margin: 0; + width: fit-content; +} + +.openms-lib-page--hub .openms-lib-topp__kicker { + margin: 0; + font-size: 0.67rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--hub-label); +} + +.openms-lib-page--hub .openms-lib-topp__title { + margin: 0; + max-width: 16ch; + font-size: clamp(2rem, 4.5vw, 3rem); + line-height: 1.06; + letter-spacing: -0.04em; +} + +.openms-lib-page--hub .openms-lib-topp__lead { + margin: 0; + max-width: 44ch; + font-size: var(--openms-body-size-lg); + line-height: 1.58; + color: rgba(var(--openms-navy-rgb), 0.66); +} + +.openms-lib-page--hub.openms-lib-page--pyopenms #topp-tools .openms-lib-topp__intro { + justify-items: start; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms #topp-tools .openms-lib-topp__title, +.openms-lib-page--hub.openms-lib-page--pyopenms #topp-tools .openms-lib-topp__lead { + margin-inline: 0; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz #topp-tools .openms-lib-topp__intro { + justify-items: start; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz #topp-tools .openms-lib-topp__title, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz #topp-tools .openms-lib-topp__lead { + margin-inline: 0; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--webapps #topp-tools .openms-lib-topp__intro { + justify-items: start; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--webapps #topp-tools .openms-lib-topp__title, +.openms-lib-page--hub.openms-lib-page--webapps #topp-tools .openms-lib-topp__lead, +.openms-lib-page--hub.openms-lib-page--webapps #topp-tools .openms-lib-block__title, +.openms-lib-page--hub.openms-lib-page--webapps #topp-tools .openms-lib-block__lead { + margin-inline: 0; + text-align: left; +} + +.openms-lib-page--hub .openms-lib-topp__cta { + display: inline-flex; + align-items: center; + gap: 0.35rem; + width: fit-content; + margin-top: 0.35rem; + padding: 0; + border: none; + border-radius: 0; + font-size: var(--openms-text-min); + font-weight: 600; + text-decoration: none; + color: var(--hub-link); + background: transparent; + box-shadow: none; + transition: gap 0.22s ease, color 0.22s ease; +} + +.openms-lib-page--hub .openms-lib-topp__cta:hover, +.openms-lib-page--hub .openms-lib-topp__cta:focus-visible { + gap: 0.55rem; + color: var(--hub-link-hover); + outline: none; +} + +.openms-lib-page--hub .openms-lib-topp__features { + display: grid; + gap: clamp(1.25rem, 2.5vw, 1.75rem); + margin: 0; + padding: clamp(0.35rem, 1vw, 0.65rem) 0 0; + border: none; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.08); + background: transparent; + box-shadow: none; + list-style: none; +} + +.openms-lib-page--hub .openms-lib-topp__feature { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.85rem; + align-items: start; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-topp__feature .openms-lib-highlights__check { + margin-top: 0.2rem; +} + +.openms-lib-page--hub .openms-lib-topp__feature-body { + display: grid; + gap: 0.15rem; +} + +.openms-lib-page--hub .openms-lib-topp__feature-text { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.78); +} + +.openms-lib-page--hub .openms-lib-topp__feature .openms-lib-topp__cta { + margin-top: 0.2rem; +} + +@media (min-width: 1025px) { + .openms-lib-page--hub .openms-lib-topp__features { + margin-top: clamp(1.5rem, 3vw, 2.25rem); + padding: clamp(1.5rem, 3vw, 2.25rem) 0 0 clamp(1.5rem, 3vw, 2.5rem); + border-top: none; + border-left: 1px solid rgba(var(--openms-navy-rgb), 0.08); + } +} + +/* ── Section 3: Explore OpenMS-lib — launch pad layout ── */ +.openms-lib-page--hub #getting-started { + background: + radial-gradient(circle at 50% 0%, rgba(var(--openms-purple-rgb), 0.1), transparent 42%), + radial-gradient(circle at 12% 88%, rgba(var(--openms-blue-rgb), 0.08), transparent 38%), + radial-gradient(circle at 88% 72%, rgba(var(--openms-pink-rgb), 0.07), transparent 36%), + var(--openms-white); +} + +.openms-lib-page--hub #getting-started::before { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + opacity: 0.35; + background-image: radial-gradient(rgba(var(--openms-navy-rgb), 0.08) 1px, transparent 1px); + background-size: 1.15rem 1.15rem; + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 92%); +} + +.openms-lib-page--hub .openms-lib-explore { + position: relative; + z-index: 1; + display: grid; + gap: clamp(2rem, 4.5vh, 3rem); +} + +.openms-lib-page--hub .openms-lib-explore__intro { + display: grid; + gap: 0.75rem; + justify-items: center; + max-width: 40rem; + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--hub .openms-lib-explore__title { + margin: 0; + font-size: clamp(2rem, 4.4vw, 3rem); + line-height: 1.06; + letter-spacing: -0.035em; +} + +.openms-lib-page--hub .openms-lib-explore__lead { + margin: 0; + max-width: 42ch; + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.openms-lib-page--hub .openms-lib-explore__deck { + display: grid; + gap: clamp(1.1rem, 2.2vw, 1.5rem); +} + +.openms-lib-page--hub .openms-lib-explore__spotlight--topp { + position: relative; + display: block; + padding: clamp(0.5rem, 1.5vw, 0.85rem) 0; + border: none; + border-radius: 0; + overflow: visible; + text-decoration: none; + color: var(--openms-navy); + background: transparent; + box-shadow: none; + transition: transform 0.34s var(--hub-reveal-ease); +} + +.openms-lib-page--hub .openms-lib-explore__spotlight--topp:hover, +.openms-lib-page--hub .openms-lib-explore__spotlight--topp:focus-visible { + transform: translateX(6px); + box-shadow: none; + outline: none; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight--action { + display: block; + padding: clamp(0.5rem, 1.5vw, 0.85rem) 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-explore:has(.openms-lib-explore__spotlight--action-only) { + gap: clamp(1.25rem, 3vh, 2rem); +} + +.openms-lib-page--hub .openms-lib-explore__spotlight--action-only { + display: flex; + justify-content: center; + padding: 0; + margin-top: -0.5rem; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight--action-only .openms-lib-explore__spotlight-main { + display: flex; + justify-content: center; + width: 100%; + gap: 0; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight--action-only .openms-lib-explore__spotlight-btn { + margin-top: 0; + margin-inline: auto; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-btn { + width: fit-content; + margin-top: 0.35rem; + min-height: clamp(2.45rem, 8.5vw, 2.75rem); + padding: clamp(0.58rem, 2vw, 0.7rem) clamp(0.95rem, 3.2vw, 1.25rem); + font-size: clamp(0.8rem, 0.72rem + 0.35vw, 0.92rem); + text-decoration: none; + transition: + transform 0.22s var(--hub-reveal-ease), + box-shadow 0.22s ease, + background-color 0.22s ease, + border-color 0.22s ease, + color 0.22s ease; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-btn.openms-lib-btn--primary::after { + display: none; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-btn:hover, +.openms-lib-page--hub .openms-lib-explore__spotlight-btn:focus-visible { + transform: translateY(-2px) scale(1.02); +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-main { + position: relative; + z-index: 1; + display: grid; + gap: 0.55rem; + min-width: 0; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.85rem 1.25rem; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-kicker { + margin: 0; + font-size: 0.67rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--hub-label); +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-title { + margin: 0; + max-width: 18ch; + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 2.6vw, 1.95rem); + font-weight: 800; + line-height: 1.12; + letter-spacing: -0.025em; + color: var(--openms-navy); +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-text { + margin: 0; + max-width: 52ch; + font-size: clamp(0.96rem, 1.6vw, 1.05rem); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.66); +} + +.openms-lib-page--hub .openms-lib-explore__spotlight-cta { + display: inline-flex; + align-items: center; + gap: 0.35rem; + width: fit-content; + margin-top: 0.15rem; + padding: 0; + border: none; + border-radius: 0; + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--hub-link); + background: transparent; + box-shadow: none; + transition: gap 0.22s ease, color 0.22s ease; +} + +.openms-lib-page--hub .openms-lib-explore__spotlight--topp:hover .openms-lib-explore__spotlight-cta, +.openms-lib-page--hub .openms-lib-explore__spotlight--topp:focus-visible .openms-lib-explore__spotlight-cta { + gap: 0.55rem; + color: var(--hub-link-hover); +} + +.openms-lib-page--hub .openms-lib-explore__routes { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(0.85rem, 1.8vw, 1.15rem); + padding: clamp(0.85rem, 1.8vw, 1.1rem); + border-radius: var(--hub-radius); + background: rgba(var(--openms-white-rgb), 0.72); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + box-shadow: var(--hub-shadow-sm); +} + +.openms-lib-page--hub .openms-lib-explore__route-group { + display: grid; + gap: 0.45rem; + align-content: start; +} + +.openms-lib-page--hub .openms-lib-explore__route-list { + display: grid; + gap: 0.45rem; + align-items: start; +} + +.openms-lib-page--hub .openms-lib-explore__route-label { + margin: 0; + padding-inline: 0.35rem; + font-size: 0.67rem; + font-weight: 700; + letter-spacing: 0.11em; + text-transform: uppercase; + color: var(--hub-label); +} + +.openms-lib-page--hub .openms-lib-explore__route-link { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: 0.85rem; + align-items: center; + padding: 0.8rem 0.85rem; + border-radius: calc(var(--hub-radius-sm) + 0.1rem); + text-decoration: none; + color: inherit; + background: transparent; + transition: + background-color 0.22s ease, + transform 0.22s var(--hub-reveal-ease); +} + +.openms-lib-page--hub .openms-lib-explore__route-link:hover, +.openms-lib-page--hub .openms-lib-explore__route-link:focus-visible { + background: var(--hub-icon-bg); + transform: translateX(4px); + outline: none; +} + +.openms-lib-page--hub .openms-lib-explore__route-icon { + display: grid; + place-items: center; + width: 2.35rem; + height: 2.35rem; + border-radius: 0.75rem; + color: var(--hub-icon-color); + background: var(--hub-icon-bg); +} + +.openms-lib-page--hub .openms-lib-explore__route-copy { + display: grid; + gap: 0.2rem; + min-width: 0; +} + +.openms-lib-page--hub .openms-lib-explore__route-title { + font-family: var(--openms-font-heading); + font-size: clamp(0.98rem, 1.7vw, 1.08rem); + font-weight: 700; + line-height: 1.25; + color: var(--openms-navy); +} + +.openms-lib-page--hub .openms-lib-explore__route-text { + font-size: var(--openms-text-min); + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.64); +} + +.openms-lib-page--hub .openms-lib-explore__route-arrow { + font-size: 1.1rem; + font-weight: 700; + color: rgba(var(--openms-navy-rgb), 0.38); + transition: transform 0.22s ease, color 0.22s ease; +} + +.openms-lib-page--hub .openms-lib-explore__route-link:hover .openms-lib-explore__route-arrow, +.openms-lib-page--hub .openms-lib-explore__route-link:focus-visible .openms-lib-explore__route-arrow { + transform: translateX(3px); + color: var(--hub-link-hover); +} + +.openms-lib-page--hub .openms-lib-explore__support { + display: grid; + gap: 0.55rem; + justify-items: center; + text-align: center; + padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-explore__support-copy { + display: grid; + gap: 0.25rem; + min-width: 0; + max-width: 36rem; + justify-items: center; +} + +.openms-lib-page--hub .openms-lib-explore__support-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.65rem; + flex: 0 0 auto; +} + +.openms-lib-page--hub .openms-lib-explore__support-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.02rem, 1.85vw, 1.15rem); + font-weight: 700; + line-height: 1.25; + color: var(--openms-navy); +} + +.openms-lib-page--hub .openms-lib-explore__support-text { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.64); +} + + +.openms-lib-page--hub .openms-lib-explore__support-btn { + gap: 0.4rem; +} + + +/* ── Section 4: Contribute — editorial grid (cite panel unchanged below) ── */ +.openms-lib-page--hub .openms-lib-page__outro { + margin-top: 0; + padding: 0; + border: none; + background: var(--openms-white); + overflow-x: visible; +} + +.openms-lib-page--hub .openms-lib-page__outro .openms-lib-block--developers { + width: 100%; + max-width: none; + margin-inline: 0; + padding: var(--hub-pad) max(var(--olib-pad-x), calc((100% - var(--hub-wide-max)) / 2 + var(--olib-pad-x))); + border: none; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-developers__head, +.openms-lib-page--hub .openms-lib-developers__content { + width: 100%; + max-width: var(--olib-max); + margin-inline: auto; +} + +.openms-lib-page--hub .openms-lib-developers__head { + display: grid; + grid-template-columns: 1fr; + gap: 0; + align-items: center; + max-width: 40rem; + width: 100%; + margin-inline: auto; + margin-bottom: clamp(2rem, 4vw, 3rem); + padding-bottom: 0; + border-bottom: none; + text-align: center; + justify-items: center; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-developers__title, +.openms-lib-page--hub .openms-lib-developers__head .openms-lib-developers__title { + grid-column: 1; + align-self: center; + margin: 0; + max-width: none; + font-family: var(--openms-font-heading); + font-size: clamp(1.85rem, 1rem + 3vw, 2.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + text-align: center; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-developers__lead, +.openms-lib-page--hub .openms-lib-developers__head .openms-lib-developers__lead { + grid-column: 1; + align-self: center; + margin: 0.85rem auto 0; + max-width: 38ch; + justify-self: center; + text-align: center; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.7); +} + +.openms-lib-page--hub .openms-lib-developers__head .openms-lib-block__eyebrow { + grid-column: 1; + margin: 0 0 0.75rem; +} + +.openms-lib-page--hub .openms-lib-developers__title { + margin: 0; + font-size: clamp(1.85rem, 1rem + 3vw, 2.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + text-align: center; +} + +.openms-lib-page--hub .openms-lib-developers__lead { + margin: 0.85rem auto 0; + max-width: 38ch; + justify-self: center; + text-align: center; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.7); +} + +.openms-lib-page--hub .openms-lib-developers__content { + gap: 0; +} + +.openms-lib-page--hub .openms-lib-developers__grid { + display: grid; + gap: clamp(0.85rem, 1.8vw, 1.15rem); + align-items: stretch; +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-4, +.openms-lib-page--hub .openms-lib-developers__grid--count-5 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-5 .openms-lib-developers__card--build { + grid-column: 1 / -1; +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6, +.openms-lib-page--hub .openms-lib-developers__grid--count-7 { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: clamp(0.85rem, 1.8vw, 1.15rem); + align-items: stretch; +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(1), +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(2), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(1), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(2) { + grid-column: span 3; + min-height: clamp(9rem, 16vw, 11rem); +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(3), +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(4), +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(5), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(3), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(4), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(5) { + grid-column: span 2; +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card--build, +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card--build { + grid-column: 1 / -1; + order: 0; +} + +.openms-lib-page--hub .openms-lib-developers__card { + position: relative; + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: var(--hub-radius-sm); + background: rgba(var(--openms-white-rgb), 0.92); + box-shadow: var(--hub-shadow-sm); + padding: clamp(1.35rem, 2.4vw, 1.85rem) clamp(1.35rem, 2.5vw, 2rem); + transition: + transform 0.28s var(--hub-reveal-ease), + border-color 0.22s ease, + box-shadow 0.22s ease, + color 0.2s ease; +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:not(.openms-lib-developers__card--build), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:not(.openms-lib-developers__card--build) { + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-bottom: none; +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(2), +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(5), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(2), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(5) { + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08); +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(3), +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(4), +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(5), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(3), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(4), +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(5) { + border-bottom: none; +} + +.openms-lib-page--hub .openms-lib-developers__card--build { + padding: clamp(1.5rem, 2.8vw, 2rem) clamp(1.35rem, 2.5vw, 2rem); + border: none; + background: transparent; + box-shadow: none; + color: var(--openms-navy); +} + +.openms-lib-page--hub .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.55rem; + height: 100%; + min-width: 0; +} + +.openms-lib-page--hub .openms-lib-developers__card-tag { + display: inline-flex; + align-self: flex-start; + margin: 0; + padding: 0.18rem 0.5rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.08); + color: var(--openms-blue); + font-size: 0.67rem; + font-weight: 700; + letter-spacing: 0.09em; + text-transform: uppercase; +} + +/* pyopenms_viz: card tags match the openms-lib page treatment */ +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-developers__card-tag { + border-color: rgba(var(--openms-navy-rgb), 0.12); + background: rgba(var(--openms-navy-rgb), 0.06); + color: rgba(var(--openms-navy-rgb), 0.62); +} + +.openms-lib-page--hub .openms-lib-developers__card-title { + display: flex; + align-items: flex-start; + gap: 0.7rem; + margin: 0; + font-size: clamp(1.08rem, 1.95vw, 1.28rem); + line-height: 1.28; + color: var(--openms-navy); +} + +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(1) .openms-lib-developers__card-title, +.openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(2) .openms-lib-developers__card-title, +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(1) .openms-lib-developers__card-title, +.openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(2) .openms-lib-developers__card-title { + font-size: clamp(1.15rem, 2.1vw, 1.38rem); +} + +.openms-lib-page--hub .openms-lib-developers__card-icon { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 2.35rem; + height: 2.35rem; + margin-top: 0.05rem; + border-radius: 0.7rem; + font-size: 1rem; + line-height: 1; + color: var(--hub-icon-color); + background: var(--hub-icon-bg); + box-shadow: inset 0 0 0 1px rgba(var(--openms-navy-rgb), 0.08); +} + +.openms-lib-page--hub .openms-lib-developers__card-text { + margin: 0; + flex: 1 1 auto; + font-size: var(--openms-text-min); + line-height: 1.58; + color: rgba(var(--openms-navy-rgb), 0.66); +} + +.openms-lib-page--hub .openms-lib-developers__card-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 0.45rem; + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--hub-link); + transition: gap 0.2s ease, color 0.2s ease; +} + +.openms-lib-page--hub .openms-lib-developers__card--link:hover, +.openms-lib-page--hub .openms-lib-developers__card--link:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.22); + box-shadow: var(--hub-shadow-md); + transform: translateY(-2px); + outline: none; +} + +.openms-lib-page--hub .openms-lib-developers__card--link:hover .openms-lib-developers__card-link, +.openms-lib-page--hub .openms-lib-developers__card--link:focus-visible .openms-lib-developers__card-link { + gap: 0.5rem; + color: var(--hub-link-hover); +} + +.openms-lib-page--hub .openms-lib-developers__card--build .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 0.45rem; + width: 100%; + min-height: 0; +} + +.openms-lib-page--hub .openms-lib-developers__card--build .openms-lib-developers__card-tag { + align-self: center; +} + +.openms-lib-page--hub .openms-lib-developers__card--build .openms-lib-developers__card-title { + justify-content: center; + text-align: center; + font-family: var(--openms-font-heading); + font-size: clamp(1.5rem, 3.2vw, 2rem); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.02em; +} + +.openms-lib-page--hub .openms-lib-developers__card--build .openms-lib-developers__card-text { + flex: 0 1 auto; + margin: 0; + text-align: center; + max-width: min(40rem, 100%); + color: rgba(var(--openms-navy-rgb), 0.66); +} + +.openms-lib-page--hub .openms-lib-developers__card--build .openms-lib-developers__platforms { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.55rem; + width: 100%; + margin: 0.85rem 0 0; + padding: 0; +} + +/* ── Citation panel (full width within wide outro, no negative breakout) ── */ +.openms-lib-page--hub .openms-lib-developers__cite--panel { + margin-top: clamp(2rem, 4vh, 3rem); + width: 100%; + max-width: var(--hub-wide-max); + margin-inline: auto; + padding: 0; + border: none; + border-radius: var(--hub-radius); + overflow: hidden; + background: var(--openms-white); + box-shadow: var(--hub-shadow-lg); +} + +.openms-lib-page--hub .openms-lib-developers__cite--separate { + display: grid; + grid-template-columns: minmax(22rem, 0.58fr) minmax(0, 1.42fr); + gap: 0; + align-items: stretch; + position: static; + width: 100%; + max-width: none; + margin-top: clamp(2rem, 4vh, 3rem); + padding-top: 0; + border-top: none; +} + +.openms-lib-page--hub .openms-lib-developers__cite-promo { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.85rem; + padding: clamp(2rem, 3.5vw, 3rem) clamp(2.25rem, 4vw, 3.75rem); + overflow: hidden; + text-align: center; + background: + radial-gradient(ellipse 90% 80% at 0% 100%, rgba(var(--openms-white-rgb), 0.12), transparent 58%), + linear-gradient( + 155deg, + var(--openms-navy) 0%, + color-mix(in srgb, var(--openms-navy) 78%, var(--openms-blue)) 45%, + color-mix(in srgb, var(--openms-blue) 72%, var(--openms-purple)) 100% + ); + color: var(--openms-white); +} + +.openms-lib-page--hub .openms-lib-developers__cite-promo::before { + content: "\201C"; + position: absolute; + top: 0.15rem; + left: 50%; + transform: translateX(-50%); + font-family: var(--openms-font-heading); + font-size: clamp(5rem, 12vw, 7.5rem); + font-weight: 800; + line-height: 1; + color: rgba(var(--openms-white-rgb), 0.28); + pointer-events: none; +} + +.openms-lib-page--hub .openms-lib-developers__cite-promo::after { + content: ""; + position: absolute; + inset: auto -2rem -2rem auto; + width: 9rem; + height: 9rem; + border-radius: 50%; + background: rgba(var(--openms-pink-rgb), 0.22); + filter: blur(1px); + pointer-events: none; +} + +.openms-lib-page--hub .openms-lib-developers__cite-kicker { + display: block; + position: relative; + z-index: 1; + margin: 0; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(var(--openms-white-rgb), 0.95); +} + +.openms-lib-page--hub .openms-lib-developers__cite-intro { + position: relative; + z-index: 1; + margin: 0; + max-width: none; + width: 100%; + font-family: var(--openms-font-heading); + font-size: clamp(1.45rem, 2.9vw, 2.1rem); + font-weight: 700; + line-height: 1.22; + letter-spacing: -0.025em; + color: var(--openms-white); + text-align: center; + text-wrap: pretty; +} + +.openms-lib-page--hub .openms-lib-developers__cite-details { + display: flex; + align-items: center; + padding: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 3.25rem); + background: + radial-gradient(ellipse 70% 60% at 100% 0%, rgba(var(--openms-blue-rgb), 0.07), transparent 62%), + var(--openms-white); +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .openms-lib-developers__cite-card, +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card { + width: 100%; + gap: 0.65rem; + margin: 0; + padding: 0; + border: none; + border-left: none; + box-shadow: none; + background: transparent; +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card:hover { + border: none; + box-shadow: none; +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card__badge { + padding: 0.28rem 0.65rem; + color: var(--openms-navy); + background: linear-gradient( + 120deg, + rgba(var(--openms-yellow-rgb), 0.35) 0%, + rgba(var(--openms-blue-rgb), 0.14) 100% + ); + border-radius: 999px; +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card__topic { + color: var(--openms-navy); +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card__title { + font-size: clamp(1.15rem, 2.1vw, 1.45rem); + line-height: 1.32; + max-width: 52ch; +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card__meta { + gap: 0.5rem; + font-size: var(--openms-text-min); + color: rgba(var(--openms-navy-rgb), 0.62); +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card__journal { + font-weight: 700; + color: var(--openms-navy); +} + +.openms-lib-page--hub .openms-lib-developers__cite--panel .publications-cite-card__authors { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.openms-lib-page--hub .openms-lib-developers__cite-actions { + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: 0.75rem; + margin-top: 0.5rem; + padding-top: 0.85rem; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.08); +} + +/* ── Scroll reveal variants ── */ +.openms-lib-page--hub .openms-lib-hub__reveal { + opacity: 0; + transform: translateY(var(--hub-reveal-distance)); + transition: + opacity var(--hub-reveal-duration) var(--hub-reveal-ease), + transform var(--hub-reveal-duration) var(--hub-reveal-ease); + transition-delay: calc(var(--hub-reveal-index, 0) * 70ms); +} + +.openms-lib-page--hub .openms-lib-hub__reveal--left { + transform: translateX(calc(var(--hub-reveal-distance) * -1.1)); +} + +.openms-lib-page--hub .openms-lib-hub__reveal--right { + transform: translateX(var(--hub-reveal-distance)); +} + +.openms-lib-page--hub .openms-lib-hub__reveal--scale { + transform: scale(0.94); +} + +.openms-lib-page--hub.is-hub-ready .openms-lib-hub__reveal.is-revealed, +.openms-lib-page--hub .openms-lib-hub__reveal.is-revealed { + opacity: 1; + transform: translate(0, 0) scale(1); +} + +.openms-lib-page--hub .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block.openms-lib-hub__reveal { + opacity: 0; + transform: translateY(calc(var(--hub-reveal-distance) * 1.15)); + transition: + opacity 0.68s var(--hub-reveal-ease), + transform 0.68s var(--hub-reveal-ease); +} + +.openms-lib-page--hub.is-hub-ready .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block.openms-lib-hub__reveal.is-revealed { + opacity: 1; + transform: translateY(0); +} + +/* ── Responsive ── */ +@media (max-width: 1024px) { + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__inner { + grid-template-columns: 1fr; + } + + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__head { + position: static; + } + + .openms-lib-page--hub .openms-lib-topp__deck { + grid-template-columns: 1fr; + gap: clamp(1.5rem, 3vw, 2rem); + } + + .openms-lib-page--hub .openms-lib-topp__title { + max-width: none; + margin-inline: 0; + text-align: left; + } + + .openms-lib-page--hub .openms-lib-topp__intro { + justify-items: start; + margin-inline: 0; + text-align: left; + } + + .openms-lib-page--hub .openms-lib-topp__eyebrow { + margin-inline: 0; + } + + .openms-lib-page--hub .openms-lib-topp__lead, + .openms-lib-page--hub #topp-tools .openms-lib-block__lead { + max-width: min(100%, 44ch); + margin-inline: 0; + text-align: left; + } + + .openms-lib-page--hub .openms-lib-topp__intro .openms-lib-topp__cta { + margin-inline: 0; + } + + .openms-lib-page--hub .openms-lib-topp__feature-body { + justify-items: start; + text-align: left; + } + + .openms-lib-page--hub .openms-lib-topp__feature .openms-lib-topp__cta { + margin-inline: 0; + justify-self: start; + } + + .openms-lib-page--hub .openms-lib-developers__head { + grid-template-columns: 1fr; + max-width: 40rem; + } + + .openms-lib-page--hub .openms-lib-developers__head .openms-lib-developers__title, + .openms-lib-page--hub .openms-lib-developers__head .openms-lib-developers__lead { + grid-column: 1; + align-self: center; + text-align: center; + } + + .openms-lib-page--hub .openms-lib-developers__lead { + justify-self: center; + text-align: center; + max-width: 38ch; + } + + .openms-lib-page--hub .openms-lib-explore__spotlight-meta { + flex-direction: column; + align-items: flex-start; + } + + .openms-lib-page--hub .openms-lib-explore__spotlight-title { + max-width: none; + } + + .openms-lib-page--hub .openms-lib-explore__routes { + grid-template-columns: 1fr; + } + + .openms-lib-page--hub .openms-lib-developers__grid--count-3, + .openms-lib-page--hub .openms-lib-developers__grid--count-4, + .openms-lib-page--hub .openms-lib-developers__grid--count-6, + .openms-lib-page--hub .openms-lib-developers__grid--count-7 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(1), + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(2), + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(3), + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(4), + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(5), + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(1), + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(2), + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(3), + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(4), + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(5) { + grid-column: span 1; + min-height: 0; + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-bottom: none; + } + + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(odd):not(.openms-lib-developers__card--build), + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(odd):not(.openms-lib-developers__card--build) { + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08); + } + + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card--build, + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card--build { + grid-column: 1 / -1; + } + + .openms-lib-page--hub .openms-lib-developers__cite--separate { + grid-template-columns: 1fr; + } + + .openms-lib-page--hub .openms-lib-developers__cite-intro { + max-width: none; + } + + .openms-lib-page--hub .openms-lib-developers__cite--panel { + width: 100%; + margin-inline: 0; + } +} + +@media (max-width: 900px) { + .openms-lib-page--hub .openms-lib-hero { + padding-top: clamp(1.85rem, 6vw, 2.75rem); + padding-bottom: clamp(2rem, 6.5vw, 3.25rem); + } + + .openms-lib-page--hub .openms-lib-hero__title { + max-width: min(20ch, 94vw); + line-height: 1.08; + } + + .openms-lib-page--hub .openms-lib-hero__lead { + max-width: min(34ch, 94vw); + line-height: 1.55; + } + + .openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__title { + max-width: min(28ch, 94vw); + } + + .openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__lead { + max-width: min(46ch, 94vw); + } + + .openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__lead { + max-width: min(54ch, 94vw); + } +} + +@media (max-width: 640px) { + .openms-lib-page--hub .openms-lib-hero { + padding-inline: var(--olib-pad-x); + text-align: center; + } + + .openms-lib-page--hub .openms-lib-hero__panel, + .openms-lib-page--hub .openms-lib-hero__content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + margin-inline: auto; + } + + .openms-lib-page--hub .openms-lib-hero__eyebrow { + justify-content: center; + margin-inline: auto; + } + + .openms-lib-page--hub .openms-lib-hero__title, + .openms-lib-page--hub .openms-lib-hero__lead { + text-align: center; + margin-inline: auto; + } + + .openms-lib-page--hub .openms-lib-hero__title { + max-width: min(18ch, 96vw); + font-size: clamp(1.65rem, 7.5vw, 2.2rem); + line-height: 1.1; + } + + .openms-lib-page--hub .openms-lib-hero__lead { + max-width: min(32ch, 96vw); + font-size: clamp(0.9rem, 3.8vw, 1.05rem); + line-height: 1.52; + } + + .openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__title { + max-width: min(24ch, 96vw); + } + + .openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__lead { + max-width: min(40ch, 96vw); + } + + .openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__lead { + max-width: min(48ch, 96vw); + } + + .openms-lib-page--hub .openms-lib-hero__panel::after { + left: 50%; + right: auto; + transform: translateX(-50%); + } + + .openms-lib-page--hub .openms-lib-hero__content { + width: 100%; + } + + .openms-lib-page--hub .openms-lib-explore__eyebrow { + font-size: 0.78rem; + } + + .openms-lib-page--hub .openms-lib-explore__title { + font-size: clamp(1.8rem, 8vw, 2.35rem); + } + + .openms-lib-page--hub .openms-lib-explore__lead { + max-width: 32ch; + font-size: clamp(0.98rem, 4vw, 1.08rem); + line-height: 1.55; + } + + .openms-lib-page--hub .openms-lib-explore__spotlight-title { + font-size: clamp(1.25rem, 5.5vw, 1.55rem); + line-height: 1.16; + } + + .openms-lib-page--hub .openms-lib-explore__spotlight-text { + font-size: clamp(0.9rem, 3.7vw, 0.98rem); + line-height: 1.5; + } + + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__list--facts { + grid-template-columns: 1fr; + } + + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact:nth-child(n) { + --hub-fact-offset-y: 0; + --hub-fact-float-delay: 0s; + } + + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.openms-lib-hub__reveal.is-revealed { + animation: none; + } + + .openms-lib-page--hub .openms-lib-explore__support-actions { + gap: 0.5rem; + } + + .openms-lib-page--hub .openms-lib-developers__grid--count-3, + .openms-lib-page--hub .openms-lib-developers__grid--count-4, + .openms-lib-page--hub .openms-lib-developers__grid--count-5, + .openms-lib-page--hub .openms-lib-developers__grid--count-6, + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:nth-child(n), + .openms-lib-page--hub .openms-lib-developers__grid--count-7, + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:nth-child(n) { + grid-template-columns: 1fr; + grid-column: auto; + } + + .openms-lib-page--hub .openms-lib-developers__grid--count-6 .openms-lib-developers__card:not(.openms-lib-developers__card--build), + .openms-lib-page--hub .openms-lib-developers__grid--count-7 .openms-lib-developers__card:not(.openms-lib-developers__card--build) { + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-bottom: none; + } + + .openms-lib-page--hub .openms-lib-developers__card--build .openms-lib-developers__platforms { + justify-content: center; + margin-top: 0.85rem; + } + + .openms-lib-page--hub #getting-started .openms-lib-resource-card--online { + flex-direction: column; + align-items: flex-start; + } + + .openms-lib-page--hub .openms-lib-hero__actions { + width: 100%; + max-width: none; + margin-inline: auto; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + gap: clamp(0.55rem, 2.4vw, 0.85rem); + } + + .openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn { + width: auto; + flex: 0 1 auto; + min-width: 0; + justify-content: center; + white-space: nowrap; + font-size: clamp(0.74rem, 3vw, 0.88rem); + min-height: 2.4rem; + padding: 0.5rem clamp(1rem, 4.4vw, 1.4rem); + } + + /* openms-lib only: save horizontal space so all three buttons fit on one row */ + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn__platforms { + display: none; + } + + .openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__actions .openms-lib-btn { + min-height: 2.2rem; + padding: 0.42rem 0.95rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--hub .openms-lib-hero__panel::after { + animation: none; + } + + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact.openms-lib-hub__reveal.is-revealed { + animation: none; + transform: translate3d(0, var(--hub-fact-offset-y, 0), 0); + } + + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact::before { + transform: none; + color: rgba(255, 255, 255, 0.24); + } + + .openms-lib-page--hub #what-is-openms .openms-lib-highlights__fact-text { + transform: none; + color: rgba(255, 255, 255, 0.78); + } + + .openms-lib-page--hub .openms-lib-hub__reveal, + .openms-lib-page--hub .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block.openms-lib-hub__reveal { + opacity: 1; + transform: none; + transition: none; + } + + .openms-lib-page--hub .openms-lib-highlights__fact:hover, + .openms-lib-page--hub .openms-lib-explore__spotlight--topp:hover, + .openms-lib-page--hub .openms-lib-explore__spotlight-btn:hover, + .openms-lib-page--hub .openms-lib-explore__route-link:hover, + .openms-lib-page--hub .openms-lib-explore__support-btn:hover, + .openms-lib-page--hub .openms-lib-developers__card--link:hover, + .openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn:hover { + transform: none; + } +} + +/* ── WebApps hub — catalog sections ── */ +.openms-lib-page--hub.openms-lib-page--webapps #featured-webapps, +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__anchor:has(.webapps-affiliates), +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__anchor:has(.webapps-archived) { + position: relative; + overflow: hidden; +} + +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__anchor:has(.webapps-archived)::before { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + background: + linear-gradient( + 180deg, + rgba(var(--openms-navy-rgb), 0.03) 0%, + transparent 38%, + rgba(var(--openms-navy-rgb), 0.025) 100% + ); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-modern-wrap--page .webapps-featured--page, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived { + position: relative; + z-index: 1; + padding: var(--hub-pad) max(var(--olib-pad-x), calc((100% - var(--olib-max)) / 2 + var(--olib-pad-x))); + border: none; + background: transparent; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__inner, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__inner, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__inner { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__header, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__header { + display: grid; + gap: 0.75rem; + justify-items: center; + max-width: 40rem; + margin: 0 auto clamp(1.75rem, 4vh, 2.5rem); + text-align: center; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__intro { + display: grid; + gap: 0.75rem; + justify-items: center; + max-width: min(100%, 40rem); + margin: 0 auto clamp(1.75rem, 4vh, 2.5rem); + text-align: center; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__lead { + margin: 0; + max-width: min(38rem, 92vw); + font-size: clamp(0.98rem, 0.82rem + 0.55vw, 1.125rem); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.72); + text-align: center; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__stack { + max-width: min(100%, 44rem); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__notice { + border-color: rgba(var(--openms-blue-rgb), 0.14); + background: rgba(var(--openms-blue-rgb), 0.045); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived-entry { + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: var(--hub-radius-sm); + background: rgba(var(--openms-white-rgb), 0.92); + box-shadow: var(--hub-shadow-sm); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__revival { + border-style: dashed; + border-color: rgba(var(--openms-navy-rgb), 0.14); + background: rgba(var(--openms-navy-rgb), 0.02); + box-shadow: none; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived__layout { + max-width: min(100%, 72rem); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived__intro { + justify-items: start; + max-width: none; + margin: 0; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived__lead { + max-width: 34ch; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived__notice { + border: none; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: 0; + background: transparent; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived-entry { + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived__revival { + border: none; + background: var(--openms-navy); +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived__lead { + max-width: min(44ch, 94vw); + } +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__eyebrow, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__eyebrow { + display: inline-flex; + align-items: center; + margin: 0; + padding: clamp(0.28rem, 1.2vw, 0.35rem) clamp(0.62rem, 2.5vw, 0.75rem); + font-size: clamp(0.68rem, 0.52rem + 0.65vw, 0.78rem); + 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; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__eyebrow { + display: inline-flex; + align-items: center; + width: fit-content; + margin: 0; + padding: clamp(0.28rem, 1.2vw, 0.35rem) clamp(0.62rem, 2.5vw, 0.75rem); + font-size: clamp(0.68rem, 0.52rem + 0.65vw, 0.78rem); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: rgba(var(--openms-navy-rgb), 0.68); + background: rgba(var(--openms-navy-rgb), 0.04); + border: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: 999px; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__title, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__title, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__title { + margin: 0; + font-size: clamp(1.75rem, 0.65rem + 4.8vw, 3rem); + line-height: 1.06; + letter-spacing: -0.035em; + text-wrap: balance; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__title-accent { + color: color-mix(in srgb, var(--openms-blue) 78%, var(--openms-navy)); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__lead, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__lead { + margin: 0; + max-width: min(46ch, 92vw); + font-size: clamp(0.92rem, 0.78rem + 0.55vw, 1.125rem); + line-height: 1.6; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-project-detail-card { + border: none; + border-radius: var(--hub-radius-sm); + background: rgba(var(--openms-white-rgb), 0.72); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + box-shadow: var(--hub-shadow-sm); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates { + background: transparent; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived { + padding-block: clamp(1.5rem, 3.5vw, 2.5rem) var(--hub-pad); +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__title, + .openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__title { + max-width: min(20ch, 94vw); + line-height: 1.08; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__lead, + .openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__lead { + max-width: min(34ch, 94vw); + line-height: 1.55; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__title { + max-width: min(22ch, 94vw); + line-height: 1.08; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__lead { + max-width: min(36ch, 94vw); + line-height: 1.6; + } +} + +@media (max-width: 640px) { + .openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__title, + .openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__title { + max-width: min(18ch, 96vw); + font-size: clamp(1.65rem, 7.5vw, 2.2rem); + line-height: 1.1; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-featured__lead, + .openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates__lead { + max-width: min(32ch, 96vw); + font-size: clamp(0.9rem, 3.8vw, 1.05rem); + line-height: 1.52; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__title { + max-width: min(18ch, 96vw); + font-size: clamp(1.65rem, 7.5vw, 2.2rem); + line-height: 1.1; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-archived__lead { + max-width: min(34ch, 96vw); + font-size: clamp(0.95rem, 3.8vw, 1.05rem); + line-height: 1.58; + } +} + +/* WebApps hub — Contribute outro */ +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__outro { + padding: 0; +} + +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__outro .webapps-contribute { + position: relative; + z-index: 1; + padding: var(--hub-pad) max(var(--olib-pad-x), calc((100% - var(--olib-max)) / 2 + var(--olib-pad-x))); + border: none; + background: transparent; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__inner { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__title { + font-size: clamp(1.75rem, 0.65rem + 4.8vw, 3rem); + line-height: 1.06; + letter-spacing: -0.035em; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__lead { + max-width: min(52ch, 92vw); + font-size: clamp(0.92rem, 0.78rem + 0.55vw, 1.125rem); + line-height: 1.6; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__eyebrow { + padding: clamp(0.28rem, 1.2vw, 0.35rem) clamp(0.62rem, 2.5vw, 0.75rem); + font-size: clamp(0.68rem, 0.52rem + 0.65vw, 0.78rem); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__action { + border: none; + border-radius: var(--hub-radius-sm); + background: rgba(var(--openms-white-rgb), 0.72); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + box-shadow: var(--hub-shadow-sm); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__action:hover, +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__action:focus-visible { + box-shadow: var(--hub-shadow-md); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__research-impact { + margin-top: clamp(3rem, 6vh, 4.25rem); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__research-impact .openms-lib-developers__cite--separate { + margin-top: 0; +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__title { + max-width: min(20ch, 94vw); + line-height: 1.08; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__lead { + max-width: min(34ch, 94vw); + line-height: 1.55; + } +} + +@media (max-width: 640px) { + .openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__title { + max-width: min(18ch, 96vw); + font-size: clamp(1.65rem, 7.5vw, 2.2rem); + line-height: 1.1; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__lead { + max-width: min(32ch, 96vw); + font-size: clamp(0.9rem, 3.8vw, 1.05rem); + line-height: 1.52; + } +} + +/* ── pyOpenMS + pyopenms_viz: filled CTAs match navbar Sponsor us ── */ +.openms-lib-page--pyopenms .openms-lib-btn--primary, +.openms-lib-page--pyopenms-viz .openms-lib-btn--primary, +.openms-lib-page--pyopenms .openms-lib-btn--navy { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-page--pyopenms .openms-lib-btn--primary::after, +.openms-lib-page--pyopenms-viz .openms-lib-btn--primary::after { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--primary:active, +.openms-lib-page--pyopenms .openms-lib-btn--primary:hover, +.openms-lib-page--pyopenms .openms-lib-btn--primary:focus-visible, +.openms-lib-page--pyopenms .openms-lib-btn--primary:active, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-btn--primary:active, +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--navy:hover, +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--navy:focus-visible, +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--navy:active, +.openms-lib-page--pyopenms .openms-lib-btn--navy:hover, +.openms-lib-page--pyopenms .openms-lib-btn--navy:focus-visible, +.openms-lib-page--pyopenms .openms-lib-btn--navy: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; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--primary:focus-visible, +.openms-lib-page--pyopenms .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-btn--navy:focus-visible, +.openms-lib-page--pyopenms .openms-lib-btn--navy: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); +} + +/* ── Featured / Affiliated apps pages — wider catalog container ── */ +.openms-lib-page--hub.openms-lib-page--webapps.openms-lib-page--featured, +.openms-lib-page--hub.openms-lib-page--webapps.openms-lib-page--affiliated { + --olib-max: 90rem; + --pro-max: 90rem; +} + +/* ── Standalone app pages: hero carries the title, hide in-section headers ── */ +.openms-lib-page--featured .webapps-featured__header, +.openms-lib-page--affiliated .webapps-affiliates__header, +.openms-lib-page--archived .webapps-archived__intro { + display: none; +} + +/* ── pyopenms_viz: typed df.plot() inline in hero lead ── */ +.openms-lib-page--pyopenms-viz .openms-lib-hero__code-chip { + display: inline-flex; + align-items: center; + margin-left: 0.35rem; + padding: 0.12rem 0.55rem; + vertical-align: baseline; + border: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: 0.55rem; + background: rgba(var(--openms-navy-rgb), 0.05); +} + +.openms-lib-page--pyopenms-viz .openms-lib-hero__code-line { + display: inline-block; + overflow: hidden; + white-space: nowrap; + vertical-align: bottom; + width: 9ch; + padding: 0; + border: none; + border-right: 2px solid currentColor; + background: transparent; + font-family: var(--openms-font-mono); + font-size: 0.95em; + font-weight: 600; + color: var(--openms-blue); + animation: + olib-viz-typing 1.6s steps(9, end) 0.5s backwards, + olib-viz-caret 0.9s step-end infinite; +} + +@keyframes olib-viz-typing { + from { + width: 0; + } + to { + width: 9ch; + } +} + +@keyframes olib-viz-caret { + 0%, + 100% { + border-right-color: transparent; + } + 50% { + border-right-color: currentColor; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--pyopenms-viz .openms-lib-hero__code-line { + animation: none; + border-right-color: transparent; + } +} + +/* Project hero titles — match OpenMS-lib sizing */ +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__title, +.openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__title, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__title, +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__title { + width: min(100%, 26ch); + max-width: 100%; + margin: 0 auto; + font-size: clamp(2.35rem, 1.35rem + 4vw, 4.25rem); + font-weight: 800; + line-height: 0.98; + letter-spacing: -0.04em; + text-align: center; + text-transform: none; + text-wrap: balance; + overflow-wrap: anywhere; +} + +.openms-lib-page--hub .openms-lib-hero__lead { + width: min(100%, 58ch); + max-width: 100%; + font-size: clamp(0.95rem, 0.86rem + 0.35vw, 1.125rem); + text-wrap: pretty; +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__title { + width: min(100%, 26ch); + max-width: 100%; + font-size: clamp(2rem, 1.45rem + 3vw, 3rem); + } + + .openms-lib-page--hub .openms-lib-hero__lead { + width: min(100%, 52ch); + max-width: 100%; + } +} + +@media (max-width: 480px) { + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__title { + font-size: clamp(1.75rem, 8vw, 2.25rem); + line-height: 1.05; + letter-spacing: -0.03em; + } + + .openms-lib-page--hub .openms-lib-hero__lead { + width: min(100%, 40ch); + font-size: clamp(0.9rem, 3.8vw, 1rem); + line-height: 1.5; + } +} + +@media (min-width: 481px) and (max-width: 900px) { + .openms-lib-page--hub .openms-lib-hero__content { + max-width: min(100%, 56rem); + } + + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--pyopenms .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__title, + .openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__title { + width: min(100%, 30ch); + } + + .openms-lib-page--hub .openms-lib-hero__lead { + width: min(100%, 64ch); + } +} diff --git a/assets/css/z-openms-lib-pro.css b/assets/css/z-openms-lib-pro.css new file mode 100644 index 00000000..dd0b3020 --- /dev/null +++ b/assets/css/z-openms-lib-pro.css @@ -0,0 +1,6661 @@ +/* OpenMS-lib — Hunter-inspired layout, OpenMS brand tokens + Design system encodes: + - Visual hierarchy (size / weight / tone / spacing stacks) + - Gestalt (proximity, similarity, common region, figure–ground) + - Layout (alignment, rhythm, asymmetric emphasis, max measure) + - Visual design (contrast, atmosphere, intentional motion) */ + +.openms-lib-page--hub.openms-lib-page--openms-lib { + --pro-max: var(--hub-wide-max); + --pro-pad: clamp(1.25rem, 4vw, 2.5rem); + --pro-section-y: clamp(4rem, 9vw, 6.5rem); + --pro-radius: 1rem; + --pro-radius-sm: 1rem; + --pro-shadow: 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05); + --pro-shadow-hover: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.1); + --pro-shadow-feature: 0 18px 40px -20px rgba(var(--openms-navy-rgb), 0.45); + --pro-shadow-feature-hover: 0 22px 44px -20px rgba(var(--openms-navy-rgb), 0.5); + --pro-band-soft: color-mix(in srgb, var(--olib-bg-soft) 70%, var(--openms-white)); + --pro-check: 0.55rem; + + /* Layout — spacing scale + page rhythm */ + --pro-space-1: 0.5rem; + --pro-space-2: 0.75rem; + --pro-space-3: 1rem; + --pro-space-4: 1.25rem; + --pro-space-5: 1.75rem; + --pro-space-6: clamp(2.25rem, 4.5vw, 3.25rem); + --pro-col-gap: clamp(2rem, 5vw, 4rem); + + /* Visual hierarchy — type + component stacks (tight → loose) */ + --pro-stack-eyebrow: var(--pro-space-1); + --pro-stack-lead: var(--pro-space-2); + --pro-stack-actions: var(--pro-space-5); + --pro-head-to-content: var(--pro-space-6); + --pro-measure: 42ch; + --pro-measure-wide: 58ch; + + /* Gestalt — similarity + common region */ + --pro-card-gap: clamp(1rem, 2vw, 1.5rem); + --pro-card-pad: clamp(1rem, 2vw, 1.2rem); + --pro-card-pad-lg: clamp(1rem, 2vw, 1.2rem); + --pro-line: rgba(var(--openms-navy-rgb), 0.1); + --pro-line-strong: rgba(var(--openms-navy-rgb), 0.22); + --pro-focus-line: rgba(var(--openms-navy-rgb), 0.22); + --pro-text: var(--openms-navy); + --pro-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --pro-text-soft: rgba(var(--openms-navy-rgb), 0.48); + --pro-text-on-dark: rgba(255, 255, 255, 0.72); + --pro-kicker-on-dark: rgba(255, 255, 255, 0.65); + + /* Visual design — motion (presence, not noise) */ + --pro-lift: translateY(-3px); + --pro-lift-sm: translateY(-2px); + --pro-motion: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; + --pro-motion-link: gap 0.2s ease, color 0.2s ease; +} + +.openms-lib-page--openms-lib { + --pro-max: var(--hub-wide-max); + --pro-section-y: clamp(4rem, 9vw, 6.5rem); + --pro-radius: 1rem; + --pro-radius-sm: 1rem; + --pro-shadow: 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05); + --pro-shadow-hover: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.1); + --pro-shadow-feature: 0 18px 40px -20px rgba(var(--openms-navy-rgb), 0.45); + --pro-shadow-feature-hover: 0 22px 44px -20px rgba(var(--openms-navy-rgb), 0.5); + --pro-band-soft: color-mix(in srgb, var(--olib-bg-soft) 70%, var(--openms-white)); + --pro-space-1: 0.5rem; + --pro-space-2: 0.75rem; + --pro-space-3: 1rem; + --pro-space-4: 1.25rem; + --pro-space-5: 1.75rem; + --pro-space-6: clamp(2.25rem, 4.5vw, 3.25rem); + --pro-col-gap: clamp(2rem, 5vw, 4rem); + --pro-stack-eyebrow: var(--pro-space-1); + --pro-stack-lead: var(--pro-space-2); + --pro-stack-actions: var(--pro-space-5); + --pro-head-to-content: var(--pro-space-6); + --pro-measure: 42ch; + --pro-measure-wide: 58ch; + --pro-card-gap: clamp(1rem, 2vw, 1.5rem); + --pro-card-pad: clamp(1rem, 2vw, 1.2rem); + --pro-card-pad-lg: clamp(1rem, 2vw, 1.2rem); + --pro-line: rgba(var(--openms-navy-rgb), 0.1); + --pro-line-strong: rgba(var(--openms-navy-rgb), 0.22); + --pro-focus-line: rgba(var(--openms-navy-rgb), 0.22); + --pro-text: var(--openms-navy); + --pro-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --pro-text-soft: rgba(var(--openms-navy-rgb), 0.48); + --pro-text-on-dark: rgba(255, 255, 255, 0.72); + --pro-kicker-on-dark: rgba(255, 255, 255, 0.65); + --pro-lift: translateY(-3px); + --pro-lift-sm: translateY(-2px); + --pro-motion: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; + --pro-motion-link: gap 0.2s ease, color 0.2s ease; +} + +/* ── Hero — full-bleed entry like Hunter ── */ +.openms-lib-page--openms-lib .openms-lib-hero--pro { + position: relative; + padding: + clamp(4rem, 9vw, 6.5rem) + max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))) + clamp(3.5rem, 7vw, 5.25rem); + background: + radial-gradient(ellipse 70% 55% at 50% -10%, rgba(var(--openms-blue-rgb), 0.12), transparent 60%), + radial-gradient(ellipse 45% 40% at 100% 20%, rgba(var(--openms-navy-rgb), 0.05), transparent 55%), + radial-gradient(ellipse 40% 35% at 0% 80%, rgba(var(--openms-blue-rgb), 0.06), transparent 50%), + var(--openms-white); + overflow: hidden; +} + +.openms-lib-page--openms-lib .openms-lib-hero--pro::before, +.openms-lib-page--openms-lib .openms-lib-hero--pro::after, +.openms-lib-page--openms-lib .openms-lib-hero--pro .openms-lib-hero__panel::after { + display: none; +} + +.openms-lib-page--openms-lib .openms-lib-hero__panel, +.openms-lib-page--openms-lib .openms-lib-hero__content { + text-align: center; +} + +.openms-lib-page--openms-lib .openms-lib-hero__content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: min(100%, 62rem); + min-height: 0; + margin-inline: auto; +} + +.openms-lib-page--openms-lib .openms-lib-hero__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 auto var(--pro-stack-eyebrow); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: clamp(0.72rem, 0.58rem + 0.55vw, 0.82rem); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); + box-shadow: none; +} + +.openms-lib-page--openms-lib .openms-lib-hero__eyebrow::before { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__title, +.openms-lib-page--openms-lib .openms-lib-hero__title { + max-width: 26ch; + margin: 0 auto; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-xl-size) * 1.25); + font-weight: var(--openms-heading-xl-weight); + line-height: 1.25; + letter-spacing: normal; + text-align: center; + text-transform: uppercase; +} + +.openms-lib-page--openms-lib .openms-lib-hero__accent--warm { + color: var(--openms-blue); +} + +.openms-lib-page--openms-lib .openms-lib-hero__lead { + max-width: var(--pro-measure-wide); + margin: var(--pro-stack-lead) auto 0; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + text-align: center; + color: var(--pro-text-muted); +} + +/* pyopenms_viz: typed df.plot() chip in hero lead */ +.openms-lib-page--openms-lib .openms-lib-hero__code-chip { + display: inline-flex; + align-items: center; + margin-left: 0.35rem; + padding: 0.12rem 0.55rem; + vertical-align: baseline; + border: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: 0.55rem; + background: rgba(var(--openms-navy-rgb), 0.05); +} + +.openms-lib-page--openms-lib .openms-lib-hero__code-line { + display: inline-block; + overflow: hidden; + white-space: nowrap; + vertical-align: bottom; + width: 9ch; + padding: 0; + border: none; + border-right: 2px solid currentColor; + background: transparent; + font-family: var(--openms-font-mono); + font-size: 0.95em; + font-weight: 600; + color: var(--openms-blue); + animation: + olib-viz-typing 1.6s steps(9, end) 0.5s backwards, + olib-viz-caret 0.9s step-end infinite; +} + +@keyframes olib-viz-typing { + from { + width: 0; + } + to { + width: 9ch; + } +} + +@keyframes olib-viz-caret { + 0%, + 100% { + border-right-color: transparent; + } + 50% { + border-right-color: currentColor; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--openms-lib .openms-lib-hero__code-line { + animation: none; + border-right-color: transparent; + } +} + +.openms-lib-page--openms-lib .openms-lib-hero__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--pro-space-2); + margin-top: var(--pro-stack-actions); +} + +/* ── Unified buttons — navbar Sponsor us hover (scale + glow ring) ── */ +.openms-lib-page--openms-lib .openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + min-height: 2.85rem; + padding: 0.75rem 1.35rem; + border-radius: var(--openms-btn-pill-radius); + font-size: var(--openms-body-size); + 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-lib-page--openms-lib .openms-lib-developers__platform-btn { + min-height: 2.35rem; + padding: 0.45rem 0.85rem; + font-size: 0.82rem; + gap: 0.4rem; +} + +.openms-lib-page--openms-lib .openms-lib-btn--primary { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-page--openms-lib .openms-lib-btn--primary::after { + display: none; +} + +.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost) { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; + text-decoration: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--primary:active, +.openms-lib-page--openms-lib .openms-lib-btn--primary:hover, +.openms-lib-page--openms-lib .openms-lib-btn--primary:focus-visible, +.openms-lib-page--openms-lib .openms-lib-btn--primary: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; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost):hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost):focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost):active, +.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost):hover, +.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost):focus-visible, +.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__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; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--primary:focus-visible, +.openms-lib-page--openms-lib .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); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost):focus-visible, +.openms-lib-page--openms-lib .openms-lib-btn--ghost:not(.openms-lib-cta-band__btn-ghost):focus-visible { + box-shadow: + 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); +} + +/* Hero + CTA band — Install OpenMS / Read documentation match navbar Sponsor + Donate */ +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn, +.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn { + min-height: 2.75rem; + padding: var(--openms-btn-padding); + font-size: var(--openms-text-min); +} + +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--primary, +.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn--primary { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--primary:active, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--primary:hover, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--primary:active, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn--primary: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; +} + +/* Read documentation — same as Donate outline CTA */ +.openms-lib-page--openms-lib .openms-lib-hero__doc-btn, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-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); + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; + 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--hub.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:active, +.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:hover, +.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:focus-visible, +.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:active, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:active, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:hover, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:focus-visible, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn: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--hub.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:focus-visible, +.openms-lib-page--openms-lib .openms-lib-hero__doc-btn:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:focus-visible, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:focus-visible { + box-shadow: + 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); +} + +/* CTA band — Read documentation matches navbar Donate (white outline on dark) */ +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn { + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:active, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:hover, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:focus-visible, +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn:active { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !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; +} + +/* ── Shared section type language ── */ +.openms-lib-page--openms-lib .openms-lib-page__body > .openms-lib-page__anchor { + padding-inline: max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))); +} + +.openms-lib-page--openms-lib #what-is-openms::before, +.openms-lib-page--openms-lib #getting-started::before { + display: none; +} + +.openms-lib-page--openms-lib .openms-lib-about__eyebrow, +.openms-lib-page--openms-lib .openms-lib-topp-split__eyebrow, +.openms-lib-page--openms-lib .openms-lib-resources__eyebrow, +.openms-lib-page--openms-lib .openms-lib-block__eyebrow, +.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-block__eyebrow, +.openms-lib-page--openms-lib .openms-lib-cta-band__eyebrow, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-kicker, +.openms-lib-page--openms-lib .openms-lib-developers__cite-kicker { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 var(--pro-stack-eyebrow); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); + box-shadow: none; +} + +.openms-lib-page--openms-lib .openms-lib-about__title, +.openms-lib-page--openms-lib .openms-lib-topp-split__title, +.openms-lib-page--openms-lib .openms-lib-resources__title, +.openms-lib-page--openms-lib .openms-lib-block__title, +.openms-lib-page--openms-lib .openms-lib-developers__title, +.openms-lib-page--openms-lib .openms-lib-cta-band__title, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-title, +.openms-lib-page--openms-lib .openms-lib-developers__cite-intro { + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--openms-lib .openms-lib-about__lead, +.openms-lib-page--openms-lib .openms-lib-topp-split__lead, +.openms-lib-page--openms-lib .openms-lib-resources__lead, +.openms-lib-page--openms-lib .openms-lib-block__lead, +.openms-lib-page--openms-lib .openms-lib-developers__lead, +.openms-lib-page--openms-lib .openms-lib-cta-band__lead { + margin: var(--pro-stack-lead) 0 0; + max-width: var(--pro-measure); + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-muted); +} + +/* Eyebrows / kickers — brand min text */ +.openms-lib-page--openms-lib .openms-lib-hero__eyebrow, +.openms-lib-page--openms-lib .openms-lib-about__eyebrow, +.openms-lib-page--openms-lib .openms-lib-topp-split__eyebrow, +.openms-lib-page--openms-lib .openms-lib-resources__eyebrow, +.openms-lib-page--openms-lib .openms-lib-block__eyebrow, +.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-block__eyebrow, +.openms-lib-page--openms-lib .openms-lib-cta-band__eyebrow, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-kicker, +.openms-lib-page--openms-lib .openms-lib-developers__cite-kicker { + font-size: var(--openms-text-min); +} + +/* ── Design principles: shared surfaces, tone, proximity ── */ +.openms-lib-page--openms-lib .openms-lib-about__head, +.openms-lib-page--openms-lib .openms-lib-topp-split__intro, +.openms-lib-page--openms-lib .openms-lib-resources__head, +.openms-lib-page--openms-lib .openms-lib-developers__head, +.openms-lib-page--openms-lib .openms-lib-cta-band__copy { + display: grid; + gap: 0; +} + +/* Shared card title + body type — match contact-home cards */ +.openms-lib-page--openms-lib .openms-lib-about__tile-title, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-title, +.openms-lib-page--openms-lib .openms-lib-resources__item-title, +.openms-lib-page--openms-lib .openms-lib-list--resource-grid .openms-lib-list__title, +.openms-lib-page--openms-lib .openms-lib-resource-card--online .openms-lib-list__title, +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route + .openms-lib-developers__card-title, +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.4vw, 1.1rem); + font-weight: 700; + line-height: 1.3; + letter-spacing: normal; + color: var(--openms-navy); +} + +.openms-lib-page--openms-lib .openms-lib-about__tile-text, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-text, +.openms-lib-page--openms-lib .openms-lib-resources__item-text, +.openms-lib-page--openms-lib .openms-lib-list--resource-grid .openms-lib-list__text, +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route + .openms-lib-developers__card-text, +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-text { + margin: 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); +} + +.openms-lib-page--openms-lib .openms-lib-developers__lead { + color: var(--pro-text-muted); +} + +/* Shared card surface — match contact-home cards */ +.openms-lib-page--openms-lib .openms-lib-about__tile, +.openms-lib-page--openms-lib .openms-lib-topp-split__card, +.openms-lib-page--openms-lib .openms-lib-resources__item, +.openms-lib-page--openms-lib .openms-lib-developers__route, +.openms-lib-page--openms-lib .openms-lib-developers__cite-details { + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); +} + +/* Shared card icon chip size */ +.openms-lib-page--openms-lib .openms-lib-about__num, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-icon, +.openms-lib-page--openms-lib .openms-lib-resources__feature-icon, +.openms-lib-page--openms-lib .openms-lib-resources__item-icon, +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-icon, +.openms-lib-page--openms-lib .openms-lib-developers__route-icon { + width: 2.25rem; + height: 2.25rem; + border-radius: 0.65rem; + font-size: 0.95rem; +} + +.openms-lib-page--openms-lib .openms-lib-resources__item-tag, +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-tag { + color: var(--pro-text-soft); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-text, +.openms-lib-page--openms-lib .openms-lib-cta-band__lead, +.openms-lib-page--openms-lib .openms-lib-topp-split__cta-blurb, +.openms-lib-page--openms-lib .openms-lib-resources__support-text, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-text { + color: var(--pro-text-on-dark); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-kicker, +.openms-lib-page--openms-lib .openms-lib-cta-band__eyebrow, +.openms-lib-page--openms-lib .openms-lib-topp-split__cta-kicker, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-tag { + color: var(--pro-kicker-on-dark); +} + +/* Figure–ground: alternating soft / white bands */ +.openms-lib-page--openms-lib #what-is-openms, +.openms-lib-page--openms-lib #getting-started { + background: var(--pro-band-soft); +} + +.openms-lib-page--openms-lib #topp-tools, +.openms-lib-page--openms-lib .openms-lib-page__outro .openms-lib-block--developers { + background: var(--openms-white); +} + +/* ── Overview — editorial head + equal feature grid ── */ +.openms-lib-page--openms-lib #what-is-openms { + overflow: visible; +} + +.openms-lib-page--openms-lib .openms-lib-about { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--openms-lib .openms-lib-about__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--openms-lib .openms-lib-about__head { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); + gap: var(--pro-col-gap); + align-items: end; + margin: 0; + text-align: left; +} + +.openms-lib-page--openms-lib .openms-lib-about__head-copy { + display: grid; + gap: 0; + min-width: 0; +} + +.openms-lib-page--openms-lib .openms-lib-about__title, +.openms-lib-page--openms-lib .openms-lib-about__lead { + text-align: left; +} + +.openms-lib-page--openms-lib .openms-lib-about__lead { + max-width: none; + margin: 0; +} + +.openms-lib-page--openms-lib .openms-lib-about__mosaic { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-card-gap); + align-items: stretch; +} + +.openms-lib-page--openms-lib .openms-lib-about__tile { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.45rem; + min-height: 100%; + padding: var(--pro-card-pad); + text-align: left; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-about__tile:hover, +.openms-lib-page--openms-lib .openms-lib-about__tile:focus-within { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--openms-lib .openms-lib-about__num { + display: inline-flex; + align-items: center; + justify-content: center; + margin-bottom: 0.4rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + background: rgba(var(--openms-navy-rgb), 0.06); + font-family: var(--openms-font-heading); + font-weight: 800; + line-height: 1; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.openms-lib-page--openms-lib .openms-lib-about__tile-text { + max-width: none; +} + +/* ── Pipeline — editorial head + accent CTA panel + feature cards ── */ +.openms-lib-page--openms-lib .openms-lib-topp-split { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__intro { + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); + gap: var(--pro-col-gap); + align-items: end; + margin: 0; + text-align: left; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__intro-copy { + display: grid; + gap: 0; + min-width: 0; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__title { + max-width: 18ch; + text-align: left; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__lead { + max-width: none; + margin: 0; + text-align: left; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__stage { + display: grid; + grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.35fr); + gap: var(--pro-card-gap); + align-items: stretch; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__cta-panel { + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: var(--pro-space-3); + min-height: 100%; + padding: var(--pro-card-pad-lg); + border-radius: var(--pro-radius); + background: + radial-gradient(circle at 0% 0%, rgba(var(--openms-blue-rgb), 0.32), transparent 48%), + linear-gradient(155deg, var(--openms-navy) 0%, color-mix(in srgb, var(--openms-navy) 78%, var(--openms-blue)) 100%); + color: var(--openms-white); + box-shadow: var(--pro-shadow-feature); +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__cta-kicker { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__cta-blurb { + margin: 0; + max-width: 28ch; + font-size: var(--openms-body-size-lg); + line-height: 1.55; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__cta { + margin-top: auto; + align-self: flex-start; + border-color: var(--openms-white) !important; + background: var(--openms-white) !important; + color: var(--openms-navy) !important; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__cta:hover, +.openms-lib-page--openms-lib .openms-lib-topp-split__cta:focus-visible, +.openms-lib-page--openms-lib .openms-lib-topp-split__cta:active { + border-color: var(--openms-white) !important; + background: var(--openms-white) !important; + color: var(--openms-navy) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.28) !important; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__cards { + display: grid; + grid-template-columns: 1fr; + gap: var(--pro-card-gap); + align-items: stretch; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card { + position: relative; + display: flex; + flex-direction: column; + gap: 0.85rem; + min-height: 100%; + padding: var(--pro-card-pad); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card:hover, +.openms-lib-page--openms-lib .openms-lib-topp-split__card:focus-within { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card-mark { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card-icon { + display: grid; + place-items: center; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + box-shadow: none; + transition: transform 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card:hover .openms-lib-topp-split__card-icon, +.openms-lib-page--openms-lib .openms-lib-topp-split__card:focus-within .openms-lib-topp-split__card-icon { + transform: none; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card-body { + display: grid; + gap: 0.55rem; + margin-top: auto; +} + +/* topp-split card title/text type comes from shared card rules */ + +.openms-lib-page--openms-lib .openms-lib-topp-split__card-link { + display: inline-flex; + align-items: center; + justify-self: flex-start; + gap: 0.3rem; + margin-top: 1rem; + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.4; + color: var(--openms-navy) !important; + text-decoration: none !important; + transition: transform 0.2s ease, gap 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card:hover .openms-lib-topp-split__card-link, +.openms-lib-page--openms-lib .openms-lib-topp-split__card:focus-within .openms-lib-topp-split__card-link, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-link:hover, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-link:focus-visible { + gap: 0.5rem; + color: var(--openms-navy) !important; + outline: none; +} + +/* ── Explore — feature + icon card grid ── */ +.openms-lib-page--openms-lib .openms-lib-resources { + padding-block: var(--pro-section-y) 0; +} + +.openms-lib-page--openms-lib .openms-lib-resources__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); + max-width: var(--pro-max); + margin-inline: auto; + padding-bottom: var(--pro-space-6); +} + +.openms-lib-page--openms-lib .openms-lib-resources__head { + display: grid; + justify-items: center; + max-width: 40rem; + margin: 0 auto; + text-align: center; +} + +.openms-lib-page--openms-lib .openms-lib-resources__title, +.openms-lib-page--openms-lib .openms-lib-resources__lead { + text-align: center; +} + +.openms-lib-page--openms-lib .openms-lib-resources__lead { + margin-inline: auto; +} + +.openms-lib-page--openms-lib .openms-lib-resources__toolkit { + display: grid; + grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr); + gap: var(--pro-card-gap); + align-items: stretch; +} + +.openms-lib-page--openms-lib .openms-lib-resources--no-feature .openms-lib-resources__toolkit { + grid-template-columns: minmax(0, 1fr); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature { + display: flex; + flex-direction: column; + gap: var(--pro-space-2); + min-height: 100%; + padding: var(--pro-card-pad-lg); + border: 1px solid transparent; + border-radius: var(--pro-radius); + background: + radial-gradient(circle at 0% 0%, rgba(var(--openms-blue-rgb), 0.28), transparent 48%), + linear-gradient(155deg, var(--openms-navy) 0%, color-mix(in srgb, var(--openms-navy) 78%, var(--openms-blue)) 100%); + color: var(--openms-white); + box-shadow: var(--pro-shadow-feature); + transition: var(--pro-motion); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature:hover, +.openms-lib-page--openms-lib .openms-lib-resources__feature:focus-within { + transform: var(--pro-lift-sm); + box-shadow: var(--pro-shadow-feature-hover); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-kicker { + display: inline-flex; + align-items: center; + gap: var(--pro-space-1); + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--pro-kicker-on-dark); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-icon { + display: grid; + place-items: center; + color: var(--openms-white); + background: rgba(255, 255, 255, 0.14); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-title { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.35; + letter-spacing: normal; + color: var(--openms-white); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-text { + margin: 0; + max-width: 30ch; + font-size: var(--openms-body-size); + line-height: 1.65; + color: var(--pro-text-on-dark); +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-btn { + margin-top: auto; + align-self: flex-start; + border-color: var(--openms-white) !important; + background: var(--openms-white) !important; + color: var(--openms-navy) !important; +} + +.openms-lib-page--openms-lib .openms-lib-resources__feature-btn:hover, +.openms-lib-page--openms-lib .openms-lib-resources__feature-btn:focus-visible, +.openms-lib-page--openms-lib .openms-lib-resources__feature-btn:active { + border-color: var(--openms-white) !important; + background: var(--openms-white) !important; + color: var(--openms-navy) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.28) !important; +} + +.openms-lib-page--openms-lib .openms-lib-resources__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-card-gap); +} + +.openms-lib-page--openms-lib .openms-lib-resources__item { + display: flex; + flex-direction: column; + gap: 0.45rem; + min-height: 100%; + padding: var(--pro-card-pad); + text-decoration: none; + color: inherit; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-resources__item:hover, +.openms-lib-page--openms-lib .openms-lib-resources__item:focus-visible { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); + outline: none; +} + +.openms-lib-page--openms-lib .openms-lib-resources__item-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.55rem; + margin-bottom: 0.4rem; +} + +.openms-lib-page--openms-lib .openms-lib-resources__item-icon { + display: grid; + place-items: center; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + box-shadow: none; +} + +.openms-lib-page--openms-lib .openms-lib-resources__item-tag { + font-size: 0.66rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--pro-text-soft); +} + +.openms-lib-page--openms-lib .openms-lib-resources__item-text { + flex: 1 1 auto; +} + +.openms-lib-page--openms-lib .openms-lib-resources__item-link { + display: inline-flex; + align-items: center; + align-self: flex-start; + gap: 0.3rem; + margin-top: auto; + padding-top: 1rem; + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.4; + color: var(--openms-navy) !important; + text-decoration: none; + transition: gap 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-resources__item:hover .openms-lib-resources__item-link, +.openms-lib-page--openms-lib .openms-lib-resources__item:focus-visible .openms-lib-resources__item-link { + gap: 0.5rem; + color: var(--openms-navy) !important; +} + +/* Need help — split rail: copy + channel paths */ +.openms-lib-page--openms-lib .openms-lib-resources__support { + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: + clamp(2.25rem, 4.5vw, 3.25rem) + max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))); + border: none; + border-radius: 0; + background: + radial-gradient(circle at 100% 0%, rgba(var(--openms-blue-rgb), 0.28), transparent 42%), + var(--openms-navy); + box-shadow: none; + color: var(--openms-white); +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-inner { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); + gap: clamp(1.75rem, 4vw, 3rem); + align-items: center; + width: 100%; + max-width: var(--pro-max); + margin: 0 auto; + padding: 0; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-copy { + display: grid; + gap: 0; + justify-items: start; + width: 100%; + max-width: 28rem; + margin: 0; + text-align: left; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.25; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-white); + text-align: left; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-text { + margin: var(--pro-stack-lead) 0 0; + max-width: 36ch; + font-size: var(--openms-body-size-lg); + line-height: 1.55; + text-align: left; + color: var(--pro-text-on-dark); +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channels { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-space-3); + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channels > li { + min-width: 0; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: 0.85rem; + align-items: center; + min-height: 100%; + padding: clamp(1rem, 2vw, 1.25rem); + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: var(--pro-radius-sm); + background: rgba(255, 255, 255, 0.06); + color: var(--openms-white); + text-decoration: none; + transition: var(--pro-motion), background-color 0.25s ease, border-color 0.25s ease; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel:hover, +.openms-lib-page--openms-lib .openms-lib-resources__support-channel:focus-visible { + border-color: rgba(255, 255, 255, 0.45); + background: rgba(255, 255, 255, 0.12); + transform: var(--pro-lift-sm); + outline: none; + color: var(--openms-white); +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-icon { + display: grid; + place-items: center; + color: var(--openms-white); + background: rgba(255, 255, 255, 0.12); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-body { + display: grid; + gap: 0.2rem; + min-width: 0; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-name { + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + color: var(--openms-white); +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-text { + font-size: var(--openms-body-size); + line-height: 1.45; + color: var(--pro-text-on-dark); +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-arrow { + font-size: 1rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.7); + transition: transform 0.2s ease, color 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-resources__support-channel:hover .openms-lib-resources__support-channel-arrow, +.openms-lib-page--openms-lib .openms-lib-resources__support-channel:focus-visible .openms-lib-resources__support-channel-arrow { + transform: translateX(0.2rem); + color: var(--openms-white); +} + +/* ── CTA band ── */ +.openms-lib-page--openms-lib .openms-lib-cta-band { + padding: + clamp(2.5rem, 5vw, 3.5rem) + max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))); + background: var(--openms-navy); +} + +.openms-lib-page--openms-lib .openms-lib-cta-band__inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 0; + max-width: var(--pro-max); + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--openms-lib .openms-lib-cta-band__copy { + max-width: 40rem; + margin: 0 auto; +} + +.openms-lib-page--openms-lib .openms-lib-cta-band__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 var(--pro-stack-eyebrow); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--pro-kicker-on-dark); + box-shadow: none; +} + +.openms-lib-page--openms-lib .openms-lib-cta-band__title { + margin: 0; + max-width: none; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-white); +} + +.openms-lib-page--openms-lib .openms-lib-cta-band__lead { + margin: var(--pro-stack-lead) auto 0; + max-width: 46ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-on-dark); +} + +.openms-lib-page--openms-lib .openms-lib-cta-band__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--pro-space-4); + flex: 0 0 auto; + margin-top: var(--pro-stack-actions); +} + +/* ── Contribute — centered head + asymmetric mosaic ── */ +.openms-lib-page--openms-lib .openms-lib-page__outro .openms-lib-block--developers { + padding: + var(--pro-section-y) + max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__layout, +.openms-lib-page--openms-lib .openms-lib-developers__layout { + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--pro-head-to-content); + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__head, +.openms-lib-page--openms-lib .openms-lib-developers__head { + position: static; + display: grid; + justify-items: center; + gap: 0; + max-width: 40rem; + margin: 0 auto; + text-align: center; +} + +.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-block__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 var(--pro-stack-eyebrow); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); + box-shadow: none; +} + +.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-block__eyebrow::before { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-developers__title, +.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-developers__title, +.openms-lib-page--openms-lib .openms-lib-developers__title { + margin: 0; + max-width: none; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-align: center; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-developers__lead, +.openms-lib-page--openms-lib .openms-lib-developers__head .openms-lib-developers__lead, +.openms-lib-page--openms-lib .openms-lib-developers__lead { + margin: var(--pro-stack-lead) auto 0; + max-width: var(--pro-measure); + font-size: var(--openms-body-size-lg); + line-height: 1.65; + text-align: center; + color: var(--pro-text-muted); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__content, +.openms-lib-page--openms-lib .openms-lib-developers__content { + width: 100%; + max-width: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__grid--routes, +.openms-lib-page--openms-lib .openms-lib-developers__grid--routes { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: var(--pro-card-gap); + width: 100%; + max-width: none; + margin-inline: 0; + border: none; + align-items: stretch; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route, +.openms-lib-page--openms-lib .openms-lib-developers__route { + position: relative; + display: flex; + flex-direction: column; + gap: 0.45rem; + align-items: stretch; + min-height: 100%; + padding: var(--pro-card-pad); + text-decoration: none; + color: inherit; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +/* Equal mosaic: 2 on first row, 3 on second, Build full-width */ +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) { + grid-column: span 4; + min-height: 0; + justify-content: flex-start; +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(2) { + grid-column: span 2; +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(3), +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(4), +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(5) { + grid-column: span 2; +} + +/* pyopenms_viz Contribute: three equal cards in one row */ +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n) { + grid-column: span 1; + min-height: 0; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route::before, +.openms-lib-page--openms-lib .openms-lib-developers__route::before { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route--build, +.openms-lib-page--openms-lib .openms-lib-developers__route--build { + grid-column: 1 / -1; + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 0.45rem; + align-items: start; + margin-top: 0.1rem; + padding: var(--pro-card-pad); + color: inherit; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__route:hover, +.openms-lib-page--openms-lib .openms-lib-developers__route:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__route:focus-within { + border-color: var(--pro-line-strong); + background: var(--openms-white); + box-shadow: var(--pro-shadow-hover); + transform: var(--pro-lift-sm); + outline: none; + opacity: 1; +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):hover, +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):focus-visible { + border-color: var(--pro-line-strong); + background: var(--openms-white); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route--build:hover, +.openms-lib-page--openms-lib .openms-lib-developers__route--build:hover, +.openms-lib-page--openms-lib .openms-lib-developers__route--build:focus-within { + border-color: var(--pro-line-strong); + background: var(--openms-white); + box-shadow: var(--pro-shadow-hover); + transform: var(--pro-lift-sm); +} + +.openms-lib-page--openms-lib .openms-lib-developers__route-check { + display: none; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route-top { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 0.55rem; + margin: 0; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route-icon { + display: grid; + place-items: center; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + box-shadow: none; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__route-icon { + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); + box-shadow: none; +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) + .openms-lib-developers__route-icon { + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); + box-shadow: none; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.openms-lib-page--openms-lib .openms-lib-developers__route-mark, +.openms-lib-page--openms-lib .openms-lib-developers__route-arrow, +.openms-lib-page--openms-lib .openms-lib-developers__route-index { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-body, +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.25rem; + flex: 1 1 auto; + min-width: 0; + height: auto; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route + .openms-lib-developers__card-tag, +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-tag { + display: inline-flex; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: 0.58rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--pro-text-soft); +} + +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__card-tag { + color: var(--pro-text-soft); +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) + .openms-lib-developers__card-tag { + color: var(--pro-text-soft); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route + .openms-lib-developers__card-title, +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-title { + display: block; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__card-title { + color: var(--openms-navy); +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) + .openms-lib-developers__card-title { + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route + .openms-lib-developers__card-text, +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-text { + max-width: none; + flex: 1 1 auto; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__card-text { + max-width: 52ch; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) + .openms-lib-developers__card-text { + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) + .openms-lib-developers__card-link { + color: var(--openms-navy); +} + +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 1rem; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy); + text-decoration: none; + transition: gap 0.2s ease; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-link::after { + content: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-title, +.openms-lib-page--openms-lib .openms-lib-developers__route:hover .openms-lib-developers__card-title, +.openms-lib-page--openms-lib .openms-lib-developers__route:focus-visible .openms-lib-developers__card-title { + color: var(--openms-navy); +} + +.openms-lib-page--openms-lib .openms-lib-developers__route--build:hover .openms-lib-developers__card-title, +.openms-lib-page--openms-lib .openms-lib-developers__route--build:focus-within .openms-lib-developers__card-title { + color: var(--openms-navy); +} + +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):hover + .openms-lib-developers__card-title, +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):focus-visible + .openms-lib-developers__card-title, +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):hover + .openms-lib-developers__card-link, +.openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):focus-visible + .openms-lib-developers__card-link { + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__card--link:focus-visible + .openms-lib-developers__card-link, +.openms-lib-page--openms-lib .openms-lib-developers__route:hover .openms-lib-developers__card-link, +.openms-lib-page--openms-lib .openms-lib-developers__route:focus-visible .openms-lib-developers__card-link { + gap: 0.5rem; + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--link:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--link:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__card--link:hover, +.openms-lib-page--openms-lib .openms-lib-developers__card--link:focus-visible { + outline: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--link:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__route:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: 4px; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__card-body, +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.4rem; + width: 100%; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__platforms { + display: flex; + flex-wrap: wrap; + gap: 0.65rem; + margin-top: 0.55rem; +} + +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__platform-btn { + min-height: 2.35rem; + padding: 0.45rem 0.85rem; + font-size: 0.82rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.18); + background: transparent; + background-color: transparent; + color: var(--openms-navy) !important; + box-shadow: none; + transition: border-color 0.2s ease, background-color 0.2s ease; + text-decoration: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn:active, +.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn: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; + outline: none; + text-decoration: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib + .openms-lib-developers__route--build + .openms-lib-developers__platform-btn:focus-visible { + box-shadow: + 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; +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__grid--routes, + .openms-lib-page--openms-lib .openms-lib-developers__grid--routes { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1), + .openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(2), + .openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(3), + .openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(4), + .openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(5) { + grid-column: span 1; + } + + .openms-lib-page--openms-lib + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) { + grid-column: 1 / -1; + min-height: 0; + } + + /* pyopenms_viz: stack Contribute cards on tablet */ + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes { + grid-template-columns: 1fr; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n) { + grid-column: auto; + } +} + +@media (max-width: 700px) { + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__grid--routes, + .openms-lib-page--openms-lib .openms-lib-developers__grid--routes { + grid-template-columns: 1fr; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__route--build, + .openms-lib-page--openms-lib .openms-lib-developers__route--build { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--openms-lib .openms-lib-about__tile, + .openms-lib-page--openms-lib .openms-lib-topp-split__card, + .openms-lib-page--openms-lib .openms-lib-resources__feature, + .openms-lib-page--openms-lib .openms-lib-resources__item, + .openms-lib-page--openms-lib .openms-lib-resources__support-channel, + .openms-lib-page--openms-lib .openms-lib-developers__route, + .openms-lib-page--openms-lib .openms-lib-developers__route--build { + transition: none; + } + + .openms-lib-page--openms-lib .openms-lib-about__tile:hover, + .openms-lib-page--openms-lib .openms-lib-about__tile:focus-within, + .openms-lib-page--openms-lib .openms-lib-topp-split__card:hover, + .openms-lib-page--openms-lib .openms-lib-topp-split__card:focus-within, + .openms-lib-page--openms-lib .openms-lib-resources__feature:hover, + .openms-lib-page--openms-lib .openms-lib-resources__feature:focus-within, + .openms-lib-page--openms-lib .openms-lib-resources__item:hover, + .openms-lib-page--openms-lib .openms-lib-resources__item:focus-visible, + .openms-lib-page--openms-lib .openms-lib-resources__support-channel:hover, + .openms-lib-page--openms-lib .openms-lib-resources__support-channel:focus-visible, + .openms-lib-page--openms-lib .openms-lib-developers__route:hover, + .openms-lib-page--openms-lib .openms-lib-developers__route:focus-visible, + .openms-lib-page--openms-lib .openms-lib-developers__route--build:hover { + transform: none; + } +} + +/* Review CTA — full-bleed band like Hunter “Start training today” */ +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__review, +.openms-lib-page--openms-lib .openms-lib-developers__review, +.openms-lib-page--openms-lib .openms-lib-developers__card--build { + --dev-bleed: max(var(--olib-pad-x), calc((100% - var(--hub-wide-max)) / 2 + var(--olib-pad-x))); + width: auto; + max-width: none; + margin: clamp(2.75rem, 5.5vw, 4rem) calc(-1 * var(--dev-bleed)) 0; + padding: clamp(2.75rem, 5.5vw, 4rem) var(--dev-bleed); + border: none; + box-shadow: none; + background: var(--openms-navy); + color: var(--openms-white); +} + +/* Cite — sticky intro + publication panel */ +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--separate, +.openms-lib-page--openms-lib .openms-lib-block--developers > .openms-lib-developers__cite--separate { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr); + gap: var(--pro-col-gap); + align-items: start; + width: 100%; + max-width: var(--pro-max); + margin: clamp(2.75rem, 5.5vw, 4rem) auto 0; + padding: 0; + border: none; + border-radius: 0; + overflow: visible; + background: transparent; + box-shadow: none; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-promo, +.openms-lib-page--openms-lib .openms-lib-developers__cite-promo { + position: sticky; + top: calc(var(--openms-header-height, 4.25rem) + 1.25rem); + display: grid; + justify-items: start; + gap: 0; + max-width: 26rem; + margin: 0; + padding: 0; + overflow: visible; + text-align: left; + background: transparent; + color: inherit; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-promo::before, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-promo::after, +.openms-lib-page--openms-lib .openms-lib-developers__cite-promo::before, +.openms-lib-page--openms-lib .openms-lib-developers__cite-promo::after { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-kicker, +.openms-lib-page--openms-lib .openms-lib-developers__cite-kicker { + display: inline-flex; + margin: 0 0 var(--pro-stack-eyebrow); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-intro, +.openms-lib-page--openms-lib .openms-lib-developers__cite-intro { + margin: 0; + max-width: 22ch; + width: auto; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + text-align: left; + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-details, +.openms-lib-page--openms-lib .openms-lib-developers__cite-details { + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: var(--pro-card-pad-lg); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .openms-lib-developers__cite-card, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .openms-lib-developers__cite-card, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + width: 100%; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__top, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__top { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 0; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title { + margin: 0; + max-width: none; + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.35; + letter-spacing: normal; + text-transform: none; + text-align: left; + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title a, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title a { + color: inherit; + text-decoration: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title a:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title a:hover, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__title a:focus-visible { + color: var(--openms-blue); + outline: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__meta, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__meta { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + gap: 0.45rem 0.75rem; + margin: 0; + justify-content: flex-start; + text-align: left; + font-size: var(--openms-text-min); + color: var(--pro-text-muted); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__journal, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__journal { + font-weight: 700; + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__year, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__year { + display: inline-flex; + align-items: center; + padding: 0.15rem 0.55rem; + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.1); + font-weight: 700; + color: var(--openms-blue); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__authors, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel .publications-cite-card__authors { + display: block; + -webkit-line-clamp: unset; + max-width: none; + margin: 0; + padding-top: 0.35rem; + border-top: 1px solid var(--pro-line); + font-size: var(--openms-text-min); + line-height: 1.55; + text-align: left; + color: var(--pro-text-muted); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-actions, +.openms-lib-page--openms-lib .openms-lib-developers__cite-actions { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: var(--pro-space-2); + margin-top: 0.35rem; + padding-top: var(--pro-space-2); + border-top: 1px solid var(--pro-line); +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel, + .openms-lib-page--openms-lib .openms-lib-developers__cite--panel, + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--separate, + .openms-lib-page--openms-lib .openms-lib-block--developers > .openms-lib-developers__cite--separate { + grid-template-columns: 1fr; + gap: clamp(1.75rem, 4vw, 2.5rem); + } + + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-promo, + .openms-lib-page--openms-lib .openms-lib-developers__cite-promo { + position: static; + max-width: 40rem; + margin: 0 auto; + justify-items: center; + text-align: center; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-intro, + .openms-lib-page--openms-lib .openms-lib-developers__cite-intro { + max-width: 28ch; + text-align: center; + } +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-body, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-body { + align-items: center; + text-align: center; + gap: 0; + max-width: var(--hub-wide-max); + margin-inline: auto; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-tag, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-tag { + align-self: center; + margin: 0 0 var(--pro-stack-eyebrow); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + color: var(--pro-kicker-on-dark); + font-size: clamp(0.72rem, 0.58rem + 0.55vw, 0.82rem); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-title, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-title { + justify-content: center; + text-align: center; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-white); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-text, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-text { + text-align: center; + max-width: none; + margin: var(--pro-stack-lead) auto 0; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-on-dark); + white-space: nowrap; +} + +@media (max-width: 700px) { + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-text, + .openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-text { + white-space: normal; + } +} + +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__badge { + margin-top: 0.85rem; + filter: brightness(1.05); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__platforms, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__platforms { + justify-content: center; + gap: var(--pro-space-4); + margin-top: var(--pro-stack-actions); +} + +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-btn--primary i { + display: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-btn--primary, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-btn--primary { + border-color: var(--openms-white); + background: var(--openms-white); + color: var(--openms-navy) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-btn--primary:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-btn--primary:hover, +.openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-btn--primary:focus-visible { + border-color: var(--openms-white); + background: var(--openms-white); + color: var(--openms-navy) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.28); +} + +.openms-lib-developers__badge { + display: inline-flex; + align-self: center; + margin: 0.15rem 0 0; + line-height: 0; + border-radius: 0.3rem; + transition: transform 0.2s ease, opacity 0.2s ease; +} + +.openms-lib-developers__badge:hover, +.openms-lib-developers__badge:focus-visible { + transform: translateY(-1px); + opacity: 0.85; + outline: none; +} + +.openms-lib-developers__badge img { + display: block; + height: 1.35rem; + width: auto; +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--openms-lib .openms-lib-about__tile, + .openms-lib-page--openms-lib .openms-lib-topp-split__card, + .openms-lib-page--openms-lib .openms-lib-resources__feature, + .openms-lib-page--openms-lib .openms-lib-resources__item, + .openms-lib-page--openms-lib .openms-lib-resources__support-channel, + .openms-lib-page--openms-lib .openms-lib-developers__route { + transition: none; + } + + .openms-lib-page--openms-lib .openms-lib-about__tile:hover, + .openms-lib-page--openms-lib .openms-lib-about__tile:focus-within, + .openms-lib-page--openms-lib .openms-lib-topp-split__card:hover, + .openms-lib-page--openms-lib .openms-lib-topp-split__card:focus-within, + .openms-lib-page--openms-lib .openms-lib-resources__feature:hover, + .openms-lib-page--openms-lib .openms-lib-resources__feature:focus-within, + .openms-lib-page--openms-lib .openms-lib-resources__item:hover, + .openms-lib-page--openms-lib .openms-lib-resources__item:focus-visible, + .openms-lib-page--openms-lib .openms-lib-resources__support-channel:hover, + .openms-lib-page--openms-lib .openms-lib-resources__support-channel:focus-visible { + transform: none; + } +} + +/* ── Responsive ── */ +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__title, + .openms-lib-page--openms-lib .openms-lib-hero__title { + max-width: 20ch; + font-size: calc(var(--openms-heading-xl-size) * 1.18); + } + + .openms-lib-page--openms-lib .openms-lib-about__head, + .openms-lib-page--openms-lib .openms-lib-topp-split__intro, + .openms-lib-page--openms-lib .openms-lib-topp-split__stage { + grid-template-columns: 1fr; + gap: clamp(1.25rem, 3vw, 1.75rem); + } + + .openms-lib-page--openms-lib .openms-lib-about__head, + .openms-lib-page--openms-lib .openms-lib-topp-split__intro { + text-align: center; + } + + .openms-lib-page--openms-lib .openms-lib-about__title, + .openms-lib-page--openms-lib .openms-lib-about__lead, + .openms-lib-page--openms-lib .openms-lib-topp-split__title, + .openms-lib-page--openms-lib .openms-lib-topp-split__lead { + text-align: center; + margin-inline: auto; + } + + /* Eyebrows are flex containers, so centering needs justify-* not text-align */ + .openms-lib-page--openms-lib .openms-lib-about__head-copy, + .openms-lib-page--openms-lib .openms-lib-topp-split__intro { + justify-items: center; + } + + .openms-lib-page--openms-lib .openms-lib-about__eyebrow, + .openms-lib-page--openms-lib .openms-lib-topp-split__eyebrow { + justify-content: center; + } + + .openms-lib-page--openms-lib .openms-lib-topp-split__cta-panel { + min-height: 0; + } + + .openms-lib-page--openms-lib .openms-lib-resources__toolkit { + grid-template-columns: 1fr; + } + + .openms-lib-page--openms-lib .openms-lib-resources__support-inner { + grid-template-columns: 1fr; + gap: var(--pro-space-5); + } + + .openms-lib-page--openms-lib .openms-lib-resources__support-copy { + max-width: 36rem; + justify-items: center; + margin-inline: auto; + text-align: center; + } + + .openms-lib-page--openms-lib .openms-lib-resources__support-title, + .openms-lib-page--openms-lib .openms-lib-resources__support-text { + text-align: center; + } + + .openms-lib-page--openms-lib .openms-lib-resources__support-text { + margin-inline: auto; + } + + .openms-lib-page--openms-lib .openms-lib-cta-band__actions { + width: 100%; + } + + .openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-btn, + .openms-lib-page--openms-lib .openms-lib-cta-band__actions .openms-lib-cta-band__doc-btn { + flex: 1 1 auto; + justify-content: center; + } +} + +@media (max-width: 640px) { + .openms-lib-page--openms-lib .openms-lib-about__mosaic, + .openms-lib-page--openms-lib .openms-lib-resources__grid { + grid-template-columns: 1fr; + } + + .openms-lib-page--openms-lib .openms-lib-resources__support-channels { + grid-template-columns: 1fr; + } + + .openms-lib-page--openms-lib .openms-lib-developers__card--build .openms-lib-developers__card-text { + white-space: normal; + } + + .openms-lib-page--openms-lib .openms-lib-hero__actions { + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + gap: clamp(0.55rem, 2.4vw, 0.85rem); + } + + .openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn { + flex: 0 1 auto; + min-width: 0; + justify-content: center; + white-space: nowrap; + font-size: clamp(0.62rem, 2.6vw, 0.82rem); + min-height: 2.2rem; + padding: 0.42rem clamp(0.5rem, 2.2vw, 0.85rem); + } + + .openms-lib-page--openms-lib .openms-lib-cta-band__actions { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } +} + +/* ============================================================= */ +/* WebApps catalog pages (featured / affiliated / archived) */ +/* Main /webapps/ uses --openms-lib and inherits pro styles. */ +/* ============================================================= */ +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) { + --pro-max: 72rem; + --pro-pad: clamp(1.25rem, 4vw, 2.5rem); + --pro-section-y: clamp(3rem, 7vw, 5rem); +} + +/* ── Hero ── */ +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero--pro { + margin-bottom: 0; + padding: + clamp(3rem, 7vw, 4.75rem) + max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))) + clamp(3rem, 6vw, 4.5rem); + background: var(--openms-white); + overflow: visible; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero--pro::before, +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero--pro::after, +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero--pro .openms-lib-hero__panel::after { + display: none; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__panel, +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__content { + text-align: center; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: min(100%, 48rem); + margin-inline: auto; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.45rem; + margin: 0 auto 0.85rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.02em; + text-transform: none; + color: var(--olib-text-muted, rgba(var(--openms-navy-rgb), 0.68)); + box-shadow: none; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__eyebrow::before { + display: block; + content: ""; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: var(--openms-blue); + flex-shrink: 0; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__title { + max-width: 20ch; + margin: 0 auto; + font-size: clamp(2.35rem, 1.35rem + 4vw, 4.25rem); + font-weight: 800; + line-height: 0.98; + letter-spacing: -0.04em; + text-align: center; + text-transform: none; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__accent--warm { + color: var(--openms-blue); +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; + margin-top: 1.75rem; +} + +/* ── Unified buttons — navbar Sponsor us hover (scale + glow ring) ── */ +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + min-height: 2.85rem; + padding: 0.75rem 1.35rem; + border-radius: var(--openms-btn-pill-radius); + font-size: var(--openms-body-size); + 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-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--primary { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--primary::after { + display: none; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--ghost { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; + text-decoration: none; +} + +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--primary: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; +} + +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .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; +} + +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .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); +} + +/* ── Section shells ── */ +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-page__body > .openms-lib-page__anchor { + padding-inline: max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))); +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-block--highlights, +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-block--resources { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-block__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.35rem 0.75rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.1); + font-size: inherit; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + box-shadow: none; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-block__title { + font-size: clamp(1.85rem, 1rem + 3vw, 2.75rem); + line-height: 1.08; + letter-spacing: -0.03em; +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-block__lead { + max-width: 46ch; + margin-top: 0.65rem; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.7); +} + +/* ── Contribute outro — align with pro container ── */ +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-page__outro .webapps-contribute { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-page__outro .webapps-contribute__inner { + max-width: var(--pro-max); + margin-inline: auto; +} + +@media (max-width: 640px) { + .openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions { + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + gap: clamp(0.55rem, 2.4vw, 0.85rem); + } + + .openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn { + flex: 0 1 auto; + min-width: 0; + justify-content: center; + white-space: nowrap; + font-size: clamp(0.62rem, 2.6vw, 0.82rem); + min-height: 2.2rem; + padding: 0.42rem clamp(0.5rem, 2.2vw, 0.85rem); + } +} + +/* ============================================================= */ +/* /webapps/ main page — OpenMS-lib pro extras */ +/* ============================================================= */ +.openms-lib-page--webapps-pro #using-the-template, +.openms-lib-page--webapps-pro #what-is-openms { + background: transparent; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--static, +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps { + cursor: default; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--static:hover, +.openms-lib-page--webapps-pro .openms-lib-resources__item--static:focus-within, +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps:hover, +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps:focus-within { + transform: none; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps { + display: grid; + grid-template-columns: minmax(14rem, 0.9fr) minmax(0, 1.4fr); + grid-template-areas: + "head gallery" + "link gallery"; + gap: var(--pro-space-4) var(--pro-space-5); + align-items: center; + grid-column: 1 / -1; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__featured-head { + grid-area: head; + display: grid; + gap: 0.45rem; + align-content: start; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps .openms-lib-resources__item-top { + margin-bottom: 0; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps .openms-lib-resources__item-text { + max-width: 34ch; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps .openms-lib-resources__app-links { + grid-area: gallery; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--pro-space-3); + align-self: stretch; + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__app-link { + display: flex; + align-items: center; + justify-content: center; + min-height: 100%; + padding: 0.35rem; + border: none; + border-radius: 0; + background: transparent; + color: var(--openms-navy); + text-decoration: none; + transition: transform 0.2s ease; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__app-logo { + display: grid; + place-items: center; + flex: 0 0 auto; + width: 7.5rem; + height: 7.5rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__app-logo img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__app-link:hover, +.openms-lib-page--webapps-pro .openms-lib-resources__app-link:focus-visible { + transform: var(--pro-lift-sm); + outline: none; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps .openms-lib-resources__item-link { + grid-area: link; + margin-top: 0; + padding-top: 0; +} + +@media (max-width: 900px) { + .openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps { + grid-template-columns: 1fr; + grid-template-areas: + "head" + "gallery" + "link"; + gap: var(--pro-space-4); + } + + .openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps .openms-lib-resources__item-text { + max-width: none; + } +} + +@media (max-width: 700px) { + .openms-lib-page--webapps-pro .openms-lib-resources__item--featured-apps .openms-lib-resources__app-links { + grid-template-columns: 1fr; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__app-link { + padding: 0.5rem; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__app-logo { + width: 5rem; + height: 5rem; + } +} + +/* Contribute — navy panel: intro left (on dark), action card right */ +.openms-lib-page--webapps-pro .openms-lib-page__outro .openms-lib-block--developers { + background: transparent; +} + +.openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__layout, +.openms-lib-page--webapps-pro .openms-lib-developers__layout { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); + gap: var(--pro-col-gap); + align-items: center; + max-width: var(--pro-max); + margin-inline: auto; + padding: clamp(2.25rem, 4.5vw, 3.25rem); + border-radius: var(--pro-radius); + background: + radial-gradient(circle at 100% 0%, rgba(var(--openms-blue-rgb), 0.28), transparent 42%), + var(--openms-navy); + box-shadow: var(--pro-shadow-feature); +} + +.openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__head, +.openms-lib-page--webapps-pro .openms-lib-developers__head { + display: grid; + justify-items: start; + max-width: none; + margin: 0; + text-align: left; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__head .openms-lib-block__eyebrow { + justify-content: flex-start; + color: var(--pro-kicker-on-dark); +} + +.openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__head .openms-lib-developers__title, +.openms-lib-page--webapps-pro .openms-lib-developers__head .openms-lib-developers__title { + text-align: left; + margin-inline: 0; + color: var(--openms-white); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__head + .openms-lib-developers__lead, +.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__head + .openms-lib-developers__lead { + justify-self: start; + width: 100%; + max-width: 36ch; + margin: var(--pro-stack-lead) 0 0; + margin-inline: 0; + text-align: left; + color: var(--pro-text-on-dark); +} + +.openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__content, +.openms-lib-page--webapps-pro .openms-lib-developers__content { + width: 100%; + max-width: none; + margin: 0; + padding: 0; +} + +.openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__grid--routes, +.openms-lib-page--webapps-pro .openms-lib-developers__grid--routes { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--pro-card-gap); + width: 100%; +} + +.openms-lib-page--webapps-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) { + grid-column: auto; + min-height: 100%; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__route { + min-height: 100%; + padding: var(--pro-card-pad-lg); + border: none; +} + +.openms-lib-page--webapps-pro .openms-lib-block--developers > .openms-lib-developers__cite--separate { + margin-top: var(--pro-space-6); +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__layout, + .openms-lib-page--webapps-pro .openms-lib-developers__layout { + grid-template-columns: 1fr; + gap: var(--pro-space-5); + align-items: stretch; + padding: clamp(1.5rem, 4vw, 2.25rem); + } + + .openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__head, + .openms-lib-page--webapps-pro .openms-lib-developers__head { + justify-items: center; + text-align: center; + } + + .openms-lib-page--webapps-pro .openms-lib-developers__head .openms-lib-block__eyebrow { + justify-content: center; + } + + .openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__head .openms-lib-developers__title, + .openms-lib-page--webapps-pro .openms-lib-developers__head .openms-lib-developers__title { + text-align: center; + margin-inline: auto; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__head + .openms-lib-developers__lead, + .openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__head + .openms-lib-developers__lead { + justify-self: start; + margin-inline: 0; + text-align: left; + } +} + +/* ============================================================= */ +/* /featured-apps/ — OpenMS-lib pro catalog */ +/* ============================================================= */ +.openms-lib-page--featured-pro #featured-webapps { + background: var(--pro-band-soft); +} + +.openms-lib-page--featured-pro #affiliated-apps { + background: var(--pro-band-soft); +} + +.openms-lib-page--featured-pro #archived-apps { + background: transparent; +} + +.openms-lib-page--hub.openms-lib-page--featured-pro .webapps-modern-wrap--page .webapps-featured--page { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); + padding-inline: 0; +} + +.openms-lib-page--hub.openms-lib-page--featured-pro .webapps-affiliates { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--hub.openms-lib-page--featured-pro .webapps-archived { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); + padding-inline: 0; +} + +.openms-lib-page--hub.openms-lib-page--featured-pro + .openms-lib-page__anchor:has(.webapps-archived)::before { + display: none; +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail { + gap: var(--pro-card-gap); +} + +.openms-lib-page--featured-pro .webapps-project-detail-card { + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--featured-pro .webapps-project-detail-card:hover, +.openms-lib-page--featured-pro .webapps-project-detail-card:focus-within { + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); + transform: var(--pro-lift-sm); +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card__main { + gap: var(--pro-space-2); + padding: var(--pro-card-pad); +} + +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__logo-wrap { + min-height: clamp(7.5rem, 14vw, 10rem); + padding: 0.35rem 0; + border: none; + border-radius: 0; + background: transparent; +} + +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__logo { + max-height: clamp(6.5rem, 13vw, 8.75rem); +} + +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__logo--large { + max-height: clamp(7.25rem, 14.5vw, 9.5rem); +} + +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__logo--xlarge { + max-height: clamp(8rem, 16vw, 10.5rem); +} + +.openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + background: rgba(var(--openms-navy-rgb), 0.04); +} + +.openms-lib-page--featured-pro .webapps-project-detail-card__name { + font-family: var(--openms-font-heading); + color: var(--openms-navy); +} + +.openms-lib-page--featured-pro .webapps-project-detail-card__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: var(--pro-text-soft); +} + +.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers-label { + display: block; + margin-bottom: 0.2rem; + font-family: var(--openms-font-heading); + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--featured-pro .webapps-project-links__btn { + border: 2px solid var(--openms-blue); + border-radius: var(--openms-btn-pill-radius); + background: transparent; + color: var(--openms-blue) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.openms-lib-page--featured-pro .webapps-project-links__btn:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn:focus-visible { + background: 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; +} + +.openms-lib-page--featured-pro .webapps-project-links__btn--demo, +.openms-lib-page--featured-pro .webapps-project-links__btn--install { + border-color: var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible, +.openms-lib-page--featured-pro .webapps-project-links__btn--install:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn--install:focus-visible { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-page--featured-pro .webapps-catalog__contact { + margin-top: var(--pro-space-6); + color: var(--pro-text-muted); +} + +.openms-lib-page--featured-pro .webapps-catalog__contact a { + color: var(--openms-navy); +} + +.openms-lib-page--featured-pro .webapps-catalog__contact a:hover, +.openms-lib-page--featured-pro .webapps-catalog__contact a:focus-visible { + color: var(--openms-blue); +} + +/* ── Archived Apps — Project archive ── */ +.openms-lib-page--archived .webapps-archived--editorial .webapps-archived__layout { + display: flex; + flex-direction: column; + gap: var(--pro-space-6); + align-items: stretch; + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--archived .webapps-archived--editorial .webapps-archived__context, +.openms-lib-page--archived .webapps-archived--editorial .webapps-archived__intro { + display: none; +} + +.openms-lib-page--featured-pro .webapps-archived__eyebrow, +.openms-lib-page--featured-pro .webapps-archived__projects-kicker, +.openms-lib-page--featured-pro .webapps-archived__revival-kicker { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); + box-shadow: none; +} + +.openms-lib-page--featured-pro .webapps-archived__title, +.openms-lib-page--featured-pro .webapps-archived__projects-title { + margin: var(--pro-stack-eyebrow) 0 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--featured-pro .webapps-archived__projects-title { + font-size: calc(var(--openms-heading-lg-size) * 0.95); +} + +.openms-lib-page--featured-pro .webapps-archived__lead { + margin: var(--pro-stack-lead) 0 0; + max-width: 46ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-muted); +} + +/* Archive block: head → card → notice as one stack */ +.openms-lib-page--archived .webapps-archived--editorial .webapps-archived__projects { + display: grid; + gap: var(--pro-space-5); + padding: 0; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--archived .webapps-archived__projects-head { + display: grid; + gap: 0; + max-width: 40rem; +} + +.openms-lib-page--archived .webapps-archived--editorial .webapps-archived__projects-title { + margin-top: var(--pro-stack-eyebrow); +} + +.openms-lib-page--featured-pro .webapps-archived__grid { + display: grid; + gap: var(--pro-card-gap); + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--featured-pro .webapps-archived__item { + margin: 0; + padding: 0; +} + +/* Reference card — logo rail + content */ +.openms-lib-page--featured-pro .webapps-archived--editorial .webapps-archived-entry { + display: grid; + grid-template-columns: minmax(9.5rem, 12.5rem) minmax(0, 1fr); + gap: 0; + align-items: stretch; + padding: 0; + overflow: visible; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + transition: none; + transform: none; +} + +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--editorial + .webapps-archived-entry:hover, +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--editorial + .webapps-archived-entry:focus-within, +.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--editorial + .webapps-archived-entry:hover, +.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--editorial + .webapps-archived-entry:focus-within { + border: none; + background: transparent; + box-shadow: none; + transform: none; +} + +.openms-lib-page--archived .webapps-archived-entry__media { + display: grid; + place-items: center; + align-self: stretch; + width: auto; + min-height: 100%; + padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.35rem) clamp(1.25rem, 2.5vw, 1.75rem) 0; + border: none; + border-right: none; + background: transparent; +} + +.openms-lib-page--featured-pro .webapps-archived-entry__logo { + display: block; + width: 100%; + height: auto; + max-width: 10.5rem; + max-height: 5.75rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + object-fit: contain; + object-position: center; +} + +.openms-lib-page--archived .webapps-archived-entry__main { + display: flex; + flex-direction: column; + gap: 0; + min-width: 0; + padding: 0 0 0 clamp(1rem, 2.5vw, 1.5rem); +} + +.openms-lib-page--archived .webapps-archived-entry__body { + display: grid; + gap: var(--pro-space-2); + align-content: start; + min-width: 0; + padding: 0; +} + +.openms-lib-page--archived .webapps-archived-entry__meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.45rem 0.65rem; +} + +.openms-lib-page--archived .webapps-archived-entry__type { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.6); +} + +.openms-lib-page--featured-pro .webapps-archived-entry__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.2rem, 2vw, 1.45rem); + font-weight: 700; + line-height: 1.25; + letter-spacing: normal; + color: var(--openms-navy); +} + +.openms-lib-page--featured-pro .webapps-archived-entry__badge { + display: inline-flex; + align-items: center; + padding: 0.16rem 0.55rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: 999px; + background: transparent; + font-size: 0.64rem; + font-weight: 700; + letter-spacing: 0.03em; + text-transform: none; + color: var(--pro-text-muted); +} + +.openms-lib-page--featured-pro .webapps-archived-entry__text { + margin: 0; + max-width: 52ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--featured-pro .webapps-archived-entry__maintainers { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: var(--pro-text-soft); +} + +.openms-lib-page--featured-pro .webapps-archived-entry__maintainers-label { + display: block; + margin-bottom: 0.2rem; + font-family: var(--openms-font-heading); + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--archived .webapps-archived-entry__actions { + margin-top: var(--pro-space-4); + padding: var(--pro-space-3) 0 0; + border-top: 1px solid var(--pro-line); +} + +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 0; + padding: 0; + border: none; + list-style: none; +} + +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn { + display: inline-flex; + align-items: center; + gap: 0.4rem; + min-height: 2.25rem; + padding: 0.4rem 0.9rem; + border: 1.5px solid rgba(var(--openms-navy-rgb), 0.28); + border-radius: var(--openms-btn-pill-radius); + background: transparent; + font-size: 0.8rem; + font-weight: 600; + color: var(--openms-navy) !important; + text-decoration: none; + box-shadow: none; + transition: none; + transform: none; +} + +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn:hover, +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn:focus-visible, +.openms-lib-page--featured-pro + .webapps-archived-entry--nfcore + .webapps-project-links__btn--nfcore:hover, +.openms-lib-page--featured-pro + .webapps-archived-entry--nfcore + .webapps-project-links__btn--nfcore:focus-visible { + background: transparent; + border-color: rgba(var(--openms-navy-rgb), 0.5); + color: var(--openms-navy) !important; + transform: none; + box-shadow: none; + outline: none; + text-decoration: none; +} + +/* Good to know — quiet companion under the card */ +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--editorial + .webapps-archived__notice, +.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--editorial + .webapps-archived__notice { + display: grid; + gap: var(--pro-space-3); + margin: 0; + padding: var(--pro-space-4) 0 0; + border: none; + border-top: 1px solid var(--pro-line); + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--featured-pro .webapps-archived__notice-title { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.6); +} + +.openms-lib-page--featured-pro .webapps-archived__notice-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-space-3) var(--pro-space-5); + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--featured-pro .webapps-archived__notice-item { + position: relative; + margin: 0; + padding: 0 0 0 1rem; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--featured-pro .webapps-archived__notice-item::before { + content: ""; + position: absolute; + top: 0.55rem; + left: 0; + width: 0.35rem; + height: 0.35rem; + border-radius: 50%; + background: rgba(var(--openms-navy-rgb), 0.45); +} + +@media (max-width: 700px) { + .openms-lib-page--featured-pro .webapps-archived--editorial .webapps-archived-entry { + grid-template-columns: 1fr; + } + + .openms-lib-page--archived .webapps-archived-entry__media { + width: 100%; + min-height: 0; + padding: 0 0 var(--pro-space-3); + border-right: none; + border-bottom: none; + justify-items: start; + } + + .openms-lib-page--archived .webapps-archived-entry__main { + padding: 0; + } + + .openms-lib-page--featured-pro .webapps-archived-entry__logo { + max-width: 9.5rem; + max-height: 4.75rem; + } + + .openms-lib-page--featured-pro .webapps-archived__notice-list { + grid-template-columns: 1fr; + gap: var(--pro-space-2); + } +} + +.openms-lib-page--featured-pro .webapps-archived--editorial .webapps-archived__revival { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--pro-stack-actions); + margin: 0; + padding: clamp(2.5rem, 5vw, 3.5rem) var(--pro-card-pad-lg); + border: none; + border-radius: var(--pro-radius); + background: + radial-gradient(circle at 100% 0%, rgba(var(--openms-blue-rgb), 0.28), transparent 42%), + var(--openms-navy); + box-shadow: none; + color: var(--openms-white); + text-align: center; +} + +.openms-lib-page--featured-pro .webapps-archived__revival-copy { + flex: 0 1 auto; + max-width: 46ch; +} + +.openms-lib-page--featured-pro .webapps-archived__revival-kicker { + margin: 0 0 var(--pro-stack-eyebrow); + color: var(--pro-kicker-on-dark); +} + +.openms-lib-page--featured-pro .webapps-archived__revival-text { + margin: 0; + color: var(--openms-white); +} + +.openms-lib-page--featured-pro .webapps-archived__revival-text strong { + display: block; + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-white); +} + +.openms-lib-page--featured-pro .webapps-archived__revival-note { + display: block; + margin-top: var(--pro-stack-lead); + font-size: var(--openms-body-size-lg); + font-weight: 400; + line-height: 1.65; + color: var(--pro-text-on-dark); +} + +.openms-lib-page--featured-pro .webapps-archived__revival-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--pro-space-4); +} + +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + min-height: 2.85rem; + padding: 0.75rem 1.35rem; + border-radius: var(--openms-btn-pill-radius); + font-size: var(--openms-body-size); + 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-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--primary, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--primary { + border: 2px solid var(--openms-white); + background: var(--openms-white); + color: var(--openms-navy) !important; +} + +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--ghost, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--ghost { + border: 2px solid rgba(var(--openms-white-rgb), 0.34); + background: transparent; + background-color: transparent; + color: var(--openms-white) !important; +} + +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--primary:hover, +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--primary:focus-visible, +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--primary:active, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--primary:hover, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--primary:active { + border-color: var(--openms-white); + background: var(--openms-white); + color: var(--openms-navy) !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--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--ghost:hover, +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--ghost:active, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--ghost:hover, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--ghost:active { + border-color: rgba(var(--openms-white-rgb), 0.34); + background: transparent; + background-color: transparent; + 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; +} + +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--primary:focus-visible, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .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); +} + +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived__revival-actions + .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--ghost:focus-visible { + box-shadow: + 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: 900px) { + .openms-lib-page--archived .webapps-archived--editorial .webapps-archived__layout { + gap: var(--pro-space-5); + } + + .openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn { + flex: 1 1 auto; + justify-content: center; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--featured-pro .webapps-project-detail-card, + .openms-lib-page--featured-pro .webapps-project-links__btn, + .openms-lib-page--featured-pro .webapps-archived-entry, + .openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn { + transition: none; + } + + .openms-lib-page--featured-pro .webapps-project-detail-card:hover, + .openms-lib-page--featured-pro .webapps-project-detail-card:focus-within, + .openms-lib-page--featured-pro .webapps-archived-entry:hover, + .openms-lib-page--featured-pro .webapps-archived-entry:focus-within { + transform: none; + } +} + +/* Calendar — keep hero lead on one line on desktop */ +.openms-lib-page--calendar .openms-lib-hero__lead { + max-width: none; + white-space: nowrap; +} + +@media (max-width: 900px) { + .openms-lib-page--calendar .openms-lib-hero__lead { + white-space: normal; + max-width: min(42rem, 100%); + } +} + +/* News — same pro hero lead treatment */ +.openms-lib-page--news .openms-lib-hero__lead { + max-width: none; + white-space: nowrap; +} + +@media (max-width: 900px) { + .openms-lib-page--news .openms-lib-hero__lead { + white-space: normal; + max-width: min(42rem, 100%); + } +} + +.openms-lib-page--news .news-page-block { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.45); +} + +/* Contribute — reuse openms-lib pro section components */ +.openms-lib-page--contribute .openms-lib-hero__lead { + max-width: none; + white-space: nowrap; +} + +@media (max-width: 900px) { + .openms-lib-page--contribute .openms-lib-hero__lead { + white-space: normal; + max-width: min(42rem, 100%); + } +} + +.openms-lib-page--contribute #communication-channels, +.openms-lib-page--contribute #ways-to-contribute { + background: var(--pro-band-soft); +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about__inner { + display: grid; + grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); + gap: var(--pro-col-gap); + align-items: center; +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about__head { + grid-template-columns: 1fr; + align-items: start; + margin: 0; +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about__eyebrow { + margin-bottom: 0.15rem; +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about__lead { + margin-top: 0.2rem; + max-width: 34ch; +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about__mosaic { + grid-template-columns: 1fr; +} + +@media (max-width: 900px) { + .openms-lib-page--contribute #communication-channels .openms-lib-about__inner { + grid-template-columns: 1fr; + } +} + +.openms-lib-page--contribute #code-of-conduct.openms-lib-page__anchor, +.openms-lib-page--contribute .openms-lib-page__outro .openms-lib-block--developers { + background: var(--openms-white); + padding-inline: 0; +} + +.openms-lib-page--contribute .openms-lib-about__tile-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 1rem; + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.4; + color: var(--openms-navy) !important; + text-decoration: none !important; + transition: gap 0.2s ease; +} + +.openms-lib-page--contribute .openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-page--contribute .openms-lib-about__tile:focus-within .openms-lib-about__tile-link { + gap: 0.5rem; +} + +.openms-lib-page--contribute .openms-lib-resources__toolkit { + display: grid; + grid-template-columns: 1fr; + gap: var(--pro-card-gap); + align-items: start; +} + +.openms-lib-page--contribute .openms-lib-resources__feature { + min-height: 0; + gap: 0.55rem; + padding: clamp(1.15rem, 2vw, 1.45rem); + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); + align-items: center; + column-gap: var(--pro-col-gap); +} + +.openms-lib-page--contribute .openms-lib-resources__feature-kicker, +.openms-lib-page--contribute .openms-lib-resources__feature-title, +.openms-lib-page--contribute .openms-lib-resources__feature-text { + grid-column: 1; +} + +.openms-lib-page--contribute .contribute-project-links { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.55rem; + margin: 0; + padding: 0; + list-style: none; + grid-column: 2; + grid-row: 1 / span 3; + align-content: center; +} + +.openms-lib-page--contribute .openms-lib-resources__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +@media (max-width: 960px) { + .openms-lib-page--contribute .openms-lib-resources__feature { + grid-template-columns: 1fr; + } + + .openms-lib-page--contribute .contribute-project-links { + grid-column: 1; + grid-row: auto; + margin-top: 0.35rem; + } + + .openms-lib-page--contribute .openms-lib-resources__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .openms-lib-page--contribute .openms-lib-resources__grid { + grid-template-columns: 1fr; + } + + .openms-lib-page--contribute .contribute-project-links { + grid-template-columns: 1fr; + } +} + +.openms-lib-page--contribute .contribute-project-links a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 2.45rem; + padding: 0.45rem 0.85rem; + border: 1.5px solid rgba(var(--openms-white-rgb), 0.34); + border-radius: var(--openms-btn-pill-radius); + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-white) !important; + text-decoration: none !important; + transition: + border-color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; +} + +.openms-lib-page--contribute .contribute-project-links a:hover, +.openms-lib-page--contribute .contribute-project-links a:focus-visible { + border-color: rgba(var(--openms-white-rgb), 0.55); + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.22); + outline: none; +} + +.openms-lib-page--contribute .openms-lib-resources__item--static { + cursor: default; +} + +.openms-lib-page--contribute .openms-lib-resources__item--static:hover, +.openms-lib-page--contribute .openms-lib-resources__item--static:focus-within { + transform: none; +} + +.openms-lib-page--contribute .contribute-os-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: auto; + padding-top: 1rem; +} + +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn { + flex: 1 1 auto; + min-width: 0; +} + +.openms-lib-page--contribute + .openms-lib-developers__card--build + .openms-lib-developers__card-text { + white-space: normal; + max-width: 42ch; +} + +/* Fellowship — reuse openms-lib pro shell */ +.openms-lib-page--fellowship .openms-lib-hero__title { + max-width: 22ch; +} + +.openms-lib-page--fellowship .fellowship-hero-chips { + grid-column: 1; + grid-row: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.5rem; + width: 100%; + max-width: none; + margin: 1.25rem auto 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--fellowship #fellowship-application { + background: var(--pro-band-soft); +} + +.openms-lib-page--fellowship .fellowship-application { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--fellowship .fellowship-application__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--fellowship .fellowship-application__head { + display: grid; + justify-items: center; + max-width: 40rem; + margin: 0 auto; + text-align: center; +} + +.openms-lib-page--fellowship .fellowship-application__head .openms-lib-resources__lead { + margin-inline: auto; + text-align: center; + max-width: none; +} + +.openms-lib-page--fellowship .fellowship-application__form-card { + max-width: 56rem; + width: 100%; + margin-inline: auto; + border: none; + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: none; + overflow: visible; +} + +/* Developer retreat — reuse openms-lib pro shell */ +.openms-lib-page--developer-retreat #upcoming-retreat { + background: var(--pro-band-soft); +} + +.openms-lib-page--developer-retreat #about-the-retreat { + background: var(--openms-white); +} + +.openms-lib-page--developer-retreat #past-retreat { + background: var(--pro-band-soft); + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.45); +} + +.openms-lib-page--developer-retreat .retreat-upcoming { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--developer-retreat .retreat-upcoming__inner { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); + gap: var(--pro-col-gap); + align-items: center; +} + +.openms-lib-page--developer-retreat .retreat-upcoming__head { + grid-template-columns: 1fr; + align-items: start; + margin: 0; +} + +.openms-lib-page--developer-retreat .retreat-upcoming__facts, +.openms-lib-page--developer-retreat .retreat-upcoming__list { + display: grid; + gap: 0.65rem; + margin: 1rem 0 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--developer-retreat .retreat-upcoming__facts li { + display: flex; + align-items: flex-start; + gap: 0.65rem; + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.45; + color: rgba(var(--openms-dark-rgb), 0.82); +} + +.openms-lib-page--developer-retreat .retreat-upcoming__facts i { + display: grid; + place-items: center; + flex: 0 0 1.5rem; + width: 1.5rem; + margin-top: 0.15em; + color: var(--openms-navy); +} + +.openms-lib-page--developer-retreat .retreat-upcoming__list li { + position: relative; + margin: 0; + padding-left: 1rem; + font-size: var(--openms-body-size-lg); + line-height: 1.5; + color: rgba(var(--openms-dark-rgb), 0.82); +} + +.openms-lib-page--developer-retreat .retreat-upcoming__list li::before { + content: ""; + position: absolute; + left: 0; + top: 0.6em; + width: 0.32rem; + height: 0.32rem; + border-radius: 50%; + background: rgba(var(--openms-navy-rgb), 0.4); +} + +.openms-lib-page--developer-retreat .retreat-upcoming__actions { + margin-top: 1.35rem; +} + +.openms-lib-page--developer-retreat .retreat-upcoming__sponsor { + margin: 1rem 0 0; + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--pro-text-muted); +} + +.openms-lib-page--developer-retreat .retreat-upcoming__sponsor a { + color: var(--openms-navy); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.openms-lib-page--developer-retreat .retreat-upcoming__poster { + margin: 0; +} + +.openms-lib-page--developer-retreat .retreat-upcoming__poster img { + display: block; + width: 100%; + height: auto; + border-radius: var(--pro-radius); + box-shadow: var(--pro-shadow); +} + +.openms-lib-page--developer-retreat .retreat-highlights__mosaic { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.openms-lib-page--developer-retreat .retreat-photo { + display: grid; + gap: 0.75rem; + max-width: var(--pro-max); + margin: 0 auto; +} + +.openms-lib-page--developer-retreat .retreat-photo__image { + display: block; + width: 100%; + height: auto; + border-radius: var(--pro-radius); + box-shadow: var(--pro-shadow); +} + +.openms-lib-page--developer-retreat .retreat-photo__caption { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--pro-text-muted); + text-align: center; +} + +.openms-lib-page--developer-retreat .retreat-register--closed { + cursor: not-allowed; + opacity: 0.72; + position: relative; +} + +.openms-lib-page--developer-retreat .retreat-register--closed:hover, +.openms-lib-page--developer-retreat .retreat-register--closed:focus-visible { + transform: none !important; + box-shadow: none !important; + outline: none; +} + +.openms-lib-page--developer-retreat .retreat-register--closed::after { + content: attr(data-tooltip); + position: absolute; + left: 50%; + bottom: calc(100% + 0.55rem); + transform: translateX(-50%) translateY(0.2rem); + width: max-content; + max-width: 16rem; + padding: 0.45rem 0.7rem; + border-radius: 0.45rem; + background: var(--openms-navy); + color: var(--openms-white); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.35; + text-align: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; + z-index: 2; +} + +.openms-lib-page--developer-retreat .retreat-register--closed:hover::after, +.openms-lib-page--developer-retreat .retreat-register--closed:focus-visible::after { + opacity: 1; + transform: translateX(-50%) translateY(0); +} + +@media (max-width: 900px) { + .openms-lib-page--developer-retreat .retreat-upcoming__inner { + grid-template-columns: 1fr; + } + + .openms-lib-page--developer-retreat .retreat-highlights__mosaic { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--developer-retreat .retreat-register--closed::after { + transition: none; + } +} + +.openms-lib-page--developer-retreat .openms-lib-hero__title { + max-width: max-content; + margin-inline: auto; + text-align: left; +} + +.openms-lib-page--developer-retreat .openms-lib-hero__title-line { + display: block; + white-space: nowrap; + margin-left: -1.25em; +} + +@media (max-width: 640px) { + .openms-lib-page--developer-retreat .openms-lib-hero__title-line { + white-space: normal; + } +} + +/* Scientific and technical support — reuse openms-lib pro shell */ +.openms-lib-page--services-support #quote { + background: var(--pro-band-soft); +} + +.openms-lib-page--services-support .services-support-application { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--services-support .services-support-application__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--services-support .services-support-application__head { + display: grid; + justify-items: center; + max-width: 42rem; + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--services-support + .services-support-application__head + .openms-lib-resources__lead { + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--services-support .services-support-application__form { + width: 100%; + max-width: 48rem; + margin-inline: auto; + border: none; + background: var(--openms-white); + box-shadow: none; +} + +.openms-lib-page--services-support .services-page__form-body, +.openms-lib-page--services-support .services-page__tally-iframe { + width: 100%; +} + +/* ============================================================= */ +/* About pages — shared pro shell */ +/* ============================================================= */ +.openms-lib-page--governance #governance-bodies, +.openms-lib-page--governance #core-developers, +.openms-lib-page--governance #responsibilities, +.openms-lib-page--our-sponsors #our-sponsors, +.openms-lib-page--sponsor-us #why-sponsor, +.openms-lib-page--contributors #contributors, +.openms-lib-page--publications #publications-list, +.openms-lib-page--contact #contact-form, +.openms-lib-page--contact #contact-paths, +.openms-lib-page--research-partnerships #partnerships-include, +.openms-lib-page--research-partnerships #partnership-form, +.openms-lib-page--donate #donate-impact { + background: var(--pro-band-soft); +} + +.openms-lib-page--donate #donate-form { + background: var(--openms-white); +} + +.openms-lib-page--contact #contact-paths { + background: var(--openms-white); +} + +.openms-lib-page--research-partnerships #our-partners { + background: var(--openms-white); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .about-pro-content { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib .about-pro-content__inner { + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--publications .about-pro-content__inner { + max-width: min(68rem, 100%); +} + +/* ── Publications — pro shell parity ── */ +.openms-lib-page--publications .openms-lib-resources__inner { + max-width: min(68rem, 100%); +} + +.openms-lib-page--publications .publications-body { + display: grid; + gap: calc(var(--pro-section-y) * 0.75); + width: 100%; +} + +.openms-lib-page--publications .publications-featured, +.openms-lib-page--publications .publications-bibliography { + display: grid; + gap: var(--pro-head-to-content); + padding: 0; +} + +.openms-lib-page--publications .publications-featured__list, +.openms-lib-page--publications .publication-list, +.openms-lib-page--publications .publications-bibliography__entries { + gap: var(--pro-card-gap); +} + +/* Cards use the shared pro surface */ +.openms-lib-page--publications .publications-cite-card, +.openms-lib-page--publications .publications-year .publication-entry { + gap: 0.55rem; + padding: var(--pro-card-pad-lg); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--publications .publications-cite-card:hover, +.openms-lib-page--publications .publications-cite-card:focus-within, +.openms-lib-page--publications .publications-year .publication-entry:hover, +.openms-lib-page--publications .publications-year .publication-entry:focus-within { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--publications .publications-cite-card--primary { + border-left: 4px solid var(--openms-navy); +} + +.openms-lib-page--publications .publications-cite-card--secondary { + border-left: 4px solid var(--openms-blue); +} + +/* Year filter toolbar */ +.openms-lib-page--publications .publications-toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: 0.6rem 0.85rem; + padding: 0; + margin: calc(var(--pro-head-to-content) * -0.35) 0 0; +} + +.openms-lib-page--publications .publications-toolbar__filter { + flex-direction: row; + align-items: center; + gap: 0.6rem; + min-width: 0; +} + +.openms-lib-page--publications .publications-toolbar__filter-label { + 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.6); +} + +.openms-lib-page--publications .publications-toolbar__select { + border-color: var(--pro-line-strong); + border-radius: var(--pro-radius-sm, 0.6rem); +} + +@media (max-width: 640px) { + .openms-lib-page--publications .publications-toolbar { + justify-content: flex-end; + } + + .openms-lib-page--publications .publications-toolbar__filter { + flex-direction: row; + align-items: center; + width: auto; + } +} + +/* ── Contributors — pro shell parity ── */ +.openms-lib-page--contributors .openms-lib-resources__inner { + max-width: min(68rem, 100%); +} + +.openms-lib-page--contributors .contributors-body { + display: grid; + gap: calc(var(--pro-section-y) * 0.85); + width: 100%; +} + +.openms-lib-page--contributors .contributors-section { + display: grid; + gap: var(--pro-head-to-content); + margin: 0; + padding: 0; +} + +.openms-lib-page--contributors #members .openms-lib-resources__head { + max-width: none; +} + +.openms-lib-page--contributors #members .openms-lib-resources__lead { + display: grid; + gap: 0.15em; + max-width: none; + width: max-content; + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--contributors #members .openms-lib-resources__lead span { + display: block; + white-space: nowrap; +} + +@media (max-width: 640px) { + .openms-lib-page--contributors #members .openms-lib-resources__lead { + width: 100%; + } + + .openms-lib-page--contributors #members .openms-lib-resources__lead span { + white-space: normal; + } +} + +.openms-lib-page--contributors .leadership-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-card-gap); + margin: 0; +} + +.openms-lib-page--contributors .leadership-card { + display: flex; + align-items: flex-start; + gap: 1.1rem; + margin: 0; + padding: var(--pro-card-pad-lg); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--contributors .leadership-card:hover { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--contributors .leadership-card__photo { + flex: 0 0 auto; + width: 5.75rem; + height: 5.75rem; + border-radius: 50%; + object-fit: cover; + object-position: center top; + border: 3px solid rgba(var(--openms-blue-rgb), 0.16); + background: rgba(var(--openms-navy-rgb), 0.04); +} + +.openms-lib-page--contributors .leadership-card__body { + min-width: 0; + display: grid; + gap: 0.2rem; +} + +.openms-lib-page--contributors .leadership-card__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.8vw, 1.2rem); + font-weight: 800; + line-height: 1.3; + color: var(--openms-navy); +} + +.openms-lib-page--contributors .leadership-card__role { + margin: 0 0 0.35rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-page--contributors .leadership-card__bio { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.78); +} + +.openms-lib-page--contributors .contributors-exec-note { + margin: 0 auto; + max-width: 42rem; + text-align: center; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.82); +} + +.openms-lib-page--contributors .contributors-exec-note a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.15em; +} + +/* Members gallery */ +.openms-lib-page--contributors .team { + margin: 0; + padding: 0; +} + +.openms-lib-page--contributors .team > .name.title { + display: none; +} + +.openms-lib-page--contributors .members { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.85rem 0.4rem; + margin: 0 auto; + padding: 0; + max-width: 56rem; + width: 100%; +} + +.openms-lib-page--contributors .member { + display: grid; + justify-items: center; + gap: 0.55rem; + margin: 0; + padding: 0.75rem 0.55rem; + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + text-align: center; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--contributors .member:hover { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--contributors .member > .name { + display: grid; + justify-items: center; + gap: 0.65rem; + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-body-size-lg); + font-weight: 800; + line-height: 1.3; + color: var(--openms-navy); + text-decoration: none; +} + +.openms-lib-page--contributors .member > .name:hover, +.openms-lib-page--contributors .member > .name:focus-visible { + color: var(--openms-blue); + outline: none; +} + +.openms-lib-page--contributors .member .photo { + width: 4.75rem; + height: 4.75rem; + border-radius: 50%; + overflow: hidden; + border: 3px solid rgba(var(--openms-blue-rgb), 0.14); + background: rgba(var(--openms-navy-rgb), 0.04); +} + +.openms-lib-page--contributors .member .photo img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center top; +} + +.openms-lib-page--contributors .member .roles { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.35rem; + margin: 0; +} + +.openms-lib-page--contributors .member .role { + display: inline-flex; + align-items: center; + margin: 0; + padding: 0.22rem 0.55rem; + border-radius: 999px; + background: rgba(var(--openms-navy-rgb), 0.06); + color: rgba(var(--openms-navy-rgb), 0.78); + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + line-height: 1.3; +} + +@media (max-width: 960px) { + .openms-lib-page--contributors .members { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 860px) { + .openms-lib-page--contributors .leadership-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 560px) { + .openms-lib-page--contributors .members { + grid-template-columns: 1fr; + } + + .openms-lib-page--contributors .leadership-card { + flex-direction: column; + align-items: center; + text-align: center; + } + + .openms-lib-page--contributors .leadership-card__body { + justify-items: center; + } +} + +.openms-lib-page--contact .contact-application { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); + padding-bottom: calc(var(--pro-section-y) * 0.35); +} + +.openms-lib-page--contact #contact-paths .openms-lib-resources { + padding-block: calc(var(--pro-section-y) * 0.45) 0; +} + +.openms-lib-page--contact .contact-application__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--contact .contact-application__head { + display: grid; + justify-items: center; + gap: 0; + max-width: min(52rem, 100%); + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--contact .contact-application__lead-intro { + margin: var(--pro-stack-lead) 0 0; + max-width: 36ch; + font-size: var(--openms-body-size-lg); + font-weight: 600; + line-height: 1.55; + color: var(--openms-navy); + text-align: center; +} + +.openms-lib-page--contact .contact-application__lead-columns { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1.35rem 2.5rem; + width: 100%; + margin-top: 1.35rem; + padding-top: 1.35rem; + border-top: 1px solid var(--pro-line); + text-align: left; +} + +.openms-lib-page--contact .contact-application__lead-col { + display: grid; + gap: 0.45rem; + margin: 0; + min-width: 0; +} + +.openms-lib-page--contact .contact-application__lead-label { + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-page--contact .contact-application__lead-text { + font-size: var(--openms-body-size); + line-height: 1.7; + color: var(--pro-text-muted); +} + +@media (max-width: 720px) { + .openms-lib-page--contact .contact-application__lead-columns { + grid-template-columns: 1fr; + gap: 1.1rem; + text-align: center; + } + + .openms-lib-page--contact .contact-application__lead-col { + justify-items: center; + } +} + +.openms-lib-page--contact .contact-application__form { + width: 100%; + max-width: 48rem; + margin-inline: auto; + padding: var(--pro-card-pad-lg); + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + overflow: visible; +} + +.openms-lib-page--contact .contact-page__form-body, +.openms-lib-page--contact .contact-page__tally-iframe { + display: block; + width: 100%; + max-height: none; + overflow: hidden; + border: 0; + background: transparent; +} + +.openms-lib-page--contact .contact-page__tally-iframe { + min-height: 48rem; + height: auto; +} + +.openms-lib-page--contact .contact-paths-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--pro-card-gap); +} + +.openms-lib-page--contact .contact-paths-grid > .contact-page__path-item { + display: flex; + flex-direction: column; + gap: 0.45rem; + min-height: 100%; + padding: var(--pro-card-pad-lg); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--contact .contact-paths-grid > .contact-page__path-item:hover, +.openms-lib-page--contact .contact-paths-grid > .contact-page__path-item:focus-within { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--contact .contact-page__path-icon { + display: grid; + place-items: center; + width: 2.4rem; + height: 2.4rem; + margin-bottom: 0.35rem; + border-radius: 0.65rem; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); +} + +.openms-lib-page--contact .contact-page__path-label { + margin: 0; + font-size: 0.66rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--pro-text-soft); +} + +.openms-lib-page--contact .contact-page__path-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.5vw, 1.2rem); + font-weight: 700; + color: var(--openms-navy); +} + +.openms-lib-page--contact .contact-page__path-desc { + margin: 0; + flex: 1 1 auto; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--contact .contact-page__path-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 0.85rem; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy) !important; + text-decoration: none !important; +} + +.openms-lib-page--contact .contact-page__path-link:hover, +.openms-lib-page--contact .contact-page__path-link:focus-visible { + color: var(--openms-blue) !important; + outline: none; +} + +@media (max-width: 900px) { + .openms-lib-page--contact .contact-paths-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .openms-lib-page--contact .contact-application__form { + padding: 0.85rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--contact .contact-paths-grid > .contact-page__path-item:hover, + .openms-lib-page--contact .contact-paths-grid > .contact-page__path-item:focus-within { + transform: none; + } +} + +/* ── Research partnerships — pro shell parity ── */ +.openms-lib-page--research-partnerships .openms-lib-resources__inner { + max-width: min(68rem, 100%); +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-resources, +.openms-lib-page--research-partnerships #our-partners .openms-lib-resources, +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--research-partnerships .rp-include__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--pro-card-gap); + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--research-partnerships .rp-include__card { + position: relative; + display: flex; + flex-direction: column; + gap: 0.85rem; + margin: 0; + padding: var(--pro-card-pad-lg); + font-family: var(--openms-font-heading); + font-size: clamp(1.02rem, 1.5vw, 1.15rem); + font-weight: 700; + line-height: 1.4; + color: var(--openms-navy); + background: var(--openms-white); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + box-shadow: var(--pro-shadow); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--research-partnerships .rp-include__card::before { + content: ""; + width: 2.4rem; + height: 2.4rem; + border-radius: 0.65rem; + background-color: rgba(var(--openms-navy-rgb), 0.06); + background-repeat: no-repeat; + background-position: center; + background-size: 1.2rem; + box-shadow: none; + transition: transform 0.2s ease; +} + +.openms-lib-page--research-partnerships .rp-include__card:nth-child(1)::before { + background-image: url('data:image/svg+xml;utf8,'); +} + +.openms-lib-page--research-partnerships .rp-include__card:nth-child(2)::before { + background-image: url('data:image/svg+xml;utf8,'); +} + +.openms-lib-page--research-partnerships .rp-include__card:nth-child(3)::before { + background-image: url('data:image/svg+xml;utf8,'); +} + +.openms-lib-page--research-partnerships .rp-include__card:nth-child(4)::before { + background-image: url('data:image/svg+xml;utf8,'); +} + +.openms-lib-page--research-partnerships .rp-include__card:nth-child(5)::before { + background-image: url('data:image/svg+xml;utf8,'); +} + +.openms-lib-page--research-partnerships .rp-include__card:hover { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--research-partnerships .rp-include__card:hover::before { + transform: none; +} + +.openms-lib-page--research-partnerships #our-partners .uni-partners { + margin: 0; +} + +.openms-lib-page--research-partnerships .rp-partners__lead { + display: grid; + gap: 0.15em; + width: max-content; + max-width: 100%; + margin-inline: auto; +} + +.openms-lib-page--research-partnerships .rp-partners__lead span { + display: block; + white-space: nowrap; +} + +.openms-lib-page--research-partnerships #our-partners .uni-partners--static .uni-partners__static { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1rem 1.25rem; + max-width: 64rem; + margin: 0 auto; + padding: 0; +} + +.openms-lib-page--research-partnerships #our-partners .uni-partners--static .uni-partners__item { + display: flex; + align-items: center; + justify-content: center; + min-height: 7rem; + padding: 0.85rem; + border: none; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--research-partnerships #our-partners .uni-partners--static .uni-partners__item img { + max-width: 100%; + max-height: 5rem; + width: auto; + height: auto; + object-fit: contain; +} + +.openms-lib-page--research-partnerships #our-partners .uni-partners--static .uni-partners__item-abbr { + font-size: 1.15rem; + min-width: 3.5rem; + min-height: 3.5rem; +} + +.openms-lib-page--research-partnerships .rp-application__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); +} + +.openms-lib-page--research-partnerships .rp-application__form { + width: 100%; + max-width: 48rem; + margin-inline: auto; + padding: 0; + border: none; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--research-partnerships .rp-application__tally-iframe { + display: block; + width: 100%; + min-height: 484px; + border: 0; +} + +@media (max-width: 960px) { + .openms-lib-page--research-partnerships .rp-include__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .openms-lib-page--research-partnerships #our-partners .uni-partners--static .uni-partners__static { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .openms-lib-page--research-partnerships .rp-partners__lead { + width: 100%; + } + + .openms-lib-page--research-partnerships .rp-partners__lead span { + white-space: normal; + } + + .openms-lib-page--research-partnerships .rp-include__grid { + grid-template-columns: 1fr; + } + + .openms-lib-page--research-partnerships #our-partners .uni-partners--static .uni-partners__static { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--research-partnerships .rp-include__card:hover { + transform: none; + } +} + +/* ── Donate — pro shell parity ── */ +.openms-lib-page--donate .openms-lib-resources__inner { + max-width: min(56rem, 100%); +} + +.openms-lib-page--donate #donate-impact .openms-lib-resources { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--donate #donate-impact .openms-lib-resources__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); +} + +.openms-lib-page--donate .donate-impact-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--pro-card-gap); + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--donate .donate-impact-card { + display: flex; + flex-direction: column; + gap: 0.55rem; + margin: 0; + padding: var(--pro-card-pad-lg); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--donate .donate-impact-card:hover { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--donate .donate-impact-card__icon { + display: grid; + place-items: center; + width: 2.5rem; + height: 2.5rem; + margin-bottom: 0.35rem; + border-radius: 0.65rem; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.06); +} + +.openms-lib-page--donate .donate-impact-card__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.5vw, 1.2rem); + font-weight: 700; + color: var(--openms-navy); +} + +.openms-lib-page--donate .donate-impact-card__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--donate .donate-application { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--donate .donate-application__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content); +} + +.openms-lib-page--donate .donate-application__note { + display: grid; + gap: 0.65rem; + width: 100%; + max-width: 44rem; + margin-inline: auto; + padding: var(--pro-card-pad-lg); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--pro-band-soft); + text-align: center; +} + +.openms-lib-page--donate .donate-application__note p { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.65; + color: var(--pro-text-muted); +} + +.openms-lib-page--donate .donate-page__tax-note { + font-size: var(--openms-text-min); + color: rgba(var(--openms-dark-rgb), 0.62); +} + +.openms-lib-page--donate .donate-application__note a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.openms-lib-page--donate .donate-application__form, +.openms-lib-page--donate .donate-page__embed { + width: 100%; + max-width: 48rem; + margin-inline: auto; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + overflow: visible; +} + +.openms-lib-page--donate .donate-page__zeffy-iframe { + display: block; + width: 100%; + min-height: 42rem; + border: 0; + overflow: hidden; + background: transparent; +} + +.openms-lib-page--donate .donate-application__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; +} + +.openms-lib-page--donate .donate-page__pending { + width: 100%; + max-width: 40rem; + margin-inline: auto; + padding: 1.25rem 1.5rem; + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + text-align: center; +} + +.openms-lib-page--donate .donate-page__pending p { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-muted); +} + +.openms-lib-page--donate .donate-page__pending a { + color: var(--openms-blue); + font-weight: 600; +} + +@media (max-width: 900px) { + .openms-lib-page--donate .donate-impact-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .openms-lib-page--donate .donate-page__zeffy-iframe { + min-height: 36rem; + } + + .openms-lib-page--donate .donate-application__actions { + flex-direction: column; + align-items: stretch; + } +} + +/* Governance — openms-lib section language */ +.openms-lib-page--governance #related-pages, +.openms-lib-page--governance .openms-lib-page__outro .openms-lib-block--developers { + background: var(--openms-white); + padding-inline: 0; +} + +.openms-lib-page--governance #governance-bodies .openms-lib-about, +.openms-lib-page--governance #responsibilities .openms-lib-about { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--governance #core-developers .openms-lib-resources { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--governance .openms-lib-about__head { + grid-template-columns: 1fr; + align-items: start; +} + +.openms-lib-page--governance .openms-lib-about__eyebrow { + margin-bottom: 0.15rem; +} + +.openms-lib-page--governance .openms-lib-about__lead { + margin-top: 0.25rem; + max-width: none; +} + +.openms-lib-page--governance #governance-bodies .governance-lead-line, +.openms-lib-page--governance #core-developers .governance-lead-line, +.openms-lib-page--governance #responsibilities .governance-lead-line { + display: block; + white-space: nowrap; +} + +@media (max-width: 900px) { + .openms-lib-page--governance #governance-bodies .governance-lead-line, + .openms-lib-page--governance #core-developers .governance-lead-line, + .openms-lib-page--governance #responsibilities .governance-lead-line { + white-space: normal; + } +} + +.openms-lib-page--governance .governance-tile__tag { + margin: 0; + font-size: 0.66rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--pro-text-soft); +} + +.openms-lib-page--governance .governance-tile__top { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; +} + +.openms-lib-page--governance .governance-tile__top .openms-lib-about__num { + margin-bottom: 0; +} + +.openms-lib-page--governance .governance-tile__top .governance-tile__tag { + margin: 0; +} + +.openms-lib-page--governance .governance-tile__list { + display: grid; + gap: 0.45rem; + margin: 0.35rem 0 0; + padding: 0; + list-style: none; + flex: 1 1 auto; +} + +.openms-lib-page--governance .governance-tile__list li { + position: relative; + margin: 0; + padding-left: 1rem; + font-size: var(--openms-body-size); + line-height: 1.45; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--governance .governance-tile__list li::before { + content: ""; + position: absolute; + left: 0; + top: 0.55em; + width: 0.32rem; + height: 0.32rem; + border-radius: 50%; + background: rgba(var(--openms-navy-rgb), 0.35); +} + +.openms-lib-page--governance .governance-tile__note { + margin: auto 0 0; + padding-top: 1rem; + font-size: var(--openms-text-min); + line-height: 1.5; + color: var(--pro-text-muted); +} + +.openms-lib-page--governance .openms-lib-about__tile-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 1rem; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy) !important; + text-decoration: none !important; + transition: gap 0.2s ease; +} + +.openms-lib-page--governance .openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-page--governance .openms-lib-about__tile:focus-within .openms-lib-about__tile-link { + gap: 0.5rem; +} + +.openms-lib-page--governance .governance-pillars-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.openms-lib-page--governance .openms-lib-resources__item--static { + cursor: default; +} + +.openms-lib-page--governance .openms-lib-resources__item--static:hover, +.openms-lib-page--governance .openms-lib-resources__item--static:focus-within { + transform: none; +} + +.openms-lib-page--governance .openms-lib-resources__item--static .openms-lib-resources__item-title { + font-size: clamp(1rem, 1.4vw, 1.12rem); +} + +.openms-lib-page--governance .governance-note { + margin: var(--pro-space-5) auto 0; + max-width: 56rem; + padding: 1rem 1.15rem; + border-left: 3px solid rgba(var(--openms-navy-rgb), 0.25); + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.78); + background: rgba(var(--openms-navy-rgb), 0.03); +} + +.openms-lib-page--governance + .openms-lib-developers__card--build + .openms-lib-developers__card-text { + white-space: normal; + max-width: 42ch; +} + +.openms-lib-page--governance .openms-lib-resources__lead a { + color: var(--openms-navy); + font-weight: 600; +} + +.openms-lib-page--governance #core-developers .openms-lib-resources__head { + max-width: none; +} + +.openms-lib-page--governance #core-developers .openms-lib-resources__lead { + max-width: none; +} + +@media (max-width: 960px) { + .openms-lib-page--governance .governance-pillars-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .openms-lib-page--governance .governance-pillars-grid { + grid-template-columns: 1fr; + } +} + +/* Our Sponsors — openms-lib section language */ +.openms-lib-page--our-sponsors #our-sponsors { + background: var(--pro-band-soft); +} + +.openms-lib-page--our-sponsors #sponsor-cta, +.openms-lib-page--our-sponsors .openms-lib-page__outro .openms-lib-block--developers { + background: var(--openms-white); + padding-inline: 0; +} + +.openms-lib-page--our-sponsors .openms-lib-resources { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--our-sponsors .openms-lib-resources__head { + max-width: 42rem; +} + +.openms-lib-page--our-sponsors .sponsors-logo-grid, +.openms-lib-page--sponsor-us .sponsors-logo-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.5rem 0.75rem; + max-width: 36rem; + margin: 0 auto; + width: 100%; +} + +.openms-lib-page--our-sponsors .about-sponsors-logos__item, +.openms-lib-page--sponsor-us .about-sponsors-logos__item { + display: flex; + align-items: center; + justify-content: center; + min-height: 6.5rem; + padding: 0.35rem; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + text-decoration: none; + transition: transform 0.2s ease; +} + +.openms-lib-page--our-sponsors .about-sponsors-logos__item:hover, +.openms-lib-page--our-sponsors .about-sponsors-logos__item:focus-visible, +.openms-lib-page--sponsor-us .about-sponsors-logos__item:hover, +.openms-lib-page--sponsor-us .about-sponsors-logos__item:focus-visible { + transform: var(--pro-lift-sm); + border: none; + background: transparent; + box-shadow: none; + outline: none; +} + +.openms-lib-page--our-sponsors .about-sponsors-logos__item--dark, +.openms-lib-page--our-sponsors .about-sponsors-logos__item--dark:hover, +.openms-lib-page--our-sponsors .about-sponsors-logos__item--dark:focus-visible, +.openms-lib-page--sponsor-us .about-sponsors-logos__item--dark, +.openms-lib-page--sponsor-us .about-sponsors-logos__item--dark:hover, +.openms-lib-page--sponsor-us .about-sponsors-logos__item--dark:focus-visible { + background: transparent; + border: none; + box-shadow: none; +} + +.openms-lib-page--our-sponsors .about-sponsors-logos__logo, +.openms-lib-page--sponsor-us .about-sponsors-logos__logo { + width: 100%; + max-width: 12.5rem; + max-height: 4.25rem; + height: auto; + object-fit: contain; +} + +.openms-lib-page--our-sponsors + .about-sponsors-logos__item + .about-sponsors-logos__logo[src*="Elixir"], +.openms-lib-page--sponsor-us + .about-sponsors-logos__item + .about-sponsors-logos__logo[src*="Elixir"] { + max-width: 9.5rem; + max-height: 7.5rem; +} + +.openms-lib-page--our-sponsors .sponsors-tier { + display: grid; + gap: var(--pro-space-3); +} + +.openms-lib-page--our-sponsors .sponsors-tier + .sponsors-tier { + margin-top: var(--pro-space-5); +} + +.openms-lib-page--our-sponsors .sponsors-tier__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 700; + color: var(--openms-navy); +} + +.openms-lib-page--our-sponsors + .openms-lib-developers__card--build + .openms-lib-developers__card-text { + white-space: normal; + max-width: 42ch; +} + +.openms-lib-page--our-sponsors + .openms-lib-developers__card--build + .openms-lib-btn--ghost { + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + background: transparent !important; + color: var(--openms-white) !important; +} + +.openms-lib-page--our-sponsors + .openms-lib-developers__card--build + .openms-lib-btn--ghost:hover, +.openms-lib-page--our-sponsors + .openms-lib-developers__card--build + .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--our-sponsors + .openms-lib-developers__card--build + .openms-lib-btn--ghost:active { + border-color: rgba(var(--openms-white-rgb), 0.55) !important; + background: transparent !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.22); +} + +@media (max-width: 900px) { + .openms-lib-page--our-sponsors .sponsors-logo-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 560px) { + .openms-lib-page--our-sponsors .sponsors-logo-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .openms-lib-page--our-sponsors .about-sponsors-logos__item { + min-height: 5.5rem; + padding: 0.25rem; + } +} + +/* Sponsor Us — content styles only; page shell/gutters come from openms-lib */ +.openms-lib-page--sponsor-us #why-sponsor { + background: var(--pro-band-soft) !important; +} + +.openms-lib-page--sponsor-us #current-sponsors, +.openms-lib-page--sponsor-us #tiers, +.openms-lib-page--sponsor-us #faq, +.openms-lib-page--sponsor-us #become-a-sponsor, +.openms-lib-page--sponsor-us .openms-lib-page__outro .openms-lib-block--developers { + background: var(--openms-white) !important; +} + +.openms-lib-page--sponsor-us #become-a-sponsor, +.openms-lib-page--sponsor-us .openms-lib-page__outro .openms-lib-block--developers { + padding-inline: 0; +} + +.openms-lib-page--sponsor-us #why-sponsor .openms-lib-about { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--sponsor-us .openms-lib-about__head { + grid-template-columns: minmax(0, 1fr); + align-items: start; + min-width: 0; +} + +.openms-lib-page--sponsor-us .openms-lib-about__eyebrow { + margin-bottom: 0.15rem; +} + +.openms-lib-page--sponsor-us .openms-lib-about__lead { + margin-top: 0.25rem; + max-width: min(58rem, 100%); + overflow-wrap: break-word; +} + +.openms-lib-page--sponsor-us .sponsor-lead-line { + display: block; +} + +.openms-lib-page--sponsor-us .openms-lib-about__mosaic { + grid-template-columns: repeat(2, minmax(0, 1fr)); + width: 100%; + max-width: 100%; + min-width: 0; +} + +.openms-lib-page--sponsor-us .openms-lib-about__tile { + box-sizing: border-box; + min-width: 0; + max-width: 100%; + overflow: hidden; +} + +.openms-lib-page--sponsor-us .openms-lib-about__tile > * { + max-width: 100%; +} + +.openms-lib-page--sponsor-us .sponsor-tile__top { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; + min-width: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tile__top .openms-lib-about__num { + flex: 0 0 auto; + margin-bottom: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tile__top .openms-lib-about__tile-title { + flex: 1 1 auto; + min-width: 0; + margin: 0; + overflow-wrap: break-word; +} + +.openms-lib-page--sponsor-us .sponsor-tile__list { + display: grid; + gap: 0.45rem; + box-sizing: border-box; + width: 100%; + min-width: 0; + margin: 0.35rem 0 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--sponsor-us .sponsor-tile__list li { + position: relative; + margin: 0; + padding-left: 1rem; + font-size: var(--openms-body-size); + line-height: 1.45; + overflow-wrap: break-word; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--sponsor-us .sponsor-tile__list li::before { + content: ""; + position: absolute; + left: 0; + top: 0.55em; + width: 0.32rem; + height: 0.32rem; + border-radius: 50%; + background: rgba(var(--openms-navy-rgb), 0.35); +} + +.openms-lib-page--sponsor-us .openms-lib-about__tile-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 1rem; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy) !important; + text-decoration: none !important; + transition: gap 0.2s ease; +} + +.openms-lib-page--sponsor-us .openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-page--sponsor-us .openms-lib-about__tile:focus-within .openms-lib-about__tile-link { + gap: 0.5rem; +} + +/* Sponsorship levels band */ +.openms-lib-page--sponsor-us .sponsor-tiers-band { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .governance-section.sponsor-tiers { + padding: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head { + display: grid; + grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); + align-items: start; + justify-items: start; + column-gap: var(--pro-col-gap, clamp(2rem, 5vw, 4rem)); + row-gap: 0; + max-width: 100%; + margin-inline: 0; + margin-bottom: var(--pro-head-to-content, clamp(1.5rem, 3vw, 2.25rem)); + text-align: left; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-eyebrow { + grid-column: 1; + grid-row: 1; + justify-self: start; + margin-inline: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head h2 { + grid-column: 1; + grid-row: 2; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + grid-column: 2; + grid-row: 1 / span 2; + align-self: center; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 var(--pro-stack-eyebrow); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); + box-shadow: none; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head h2 { + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + display: grid; + gap: 0.85rem; + margin: 0; + max-width: 100%; + overflow-wrap: break-word; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-muted); + text-align: left; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-lead-col { + display: block; + margin: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1rem; + margin: 0; + align-items: stretch; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier { + --tier-accent: var(--openms-blue); + --tier-accent-rgb: var(--openms-blue-rgb); + --tier-bg: color-mix(in srgb, var(--tier-accent) 10%, var(--openms-white)); + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + min-height: 100%; + padding: 0; + border: 1px solid color-mix(in srgb, var(--tier-accent) 22%, var(--pro-line)); + border-radius: 1rem; + background: var(--tier-bg); + box-shadow: var(--pro-shadow); + overflow: visible; + transition: + border-color 0.2s ease, + background-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier::before { + content: none; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--bronze { + --tier-accent: #a9632a; + --tier-accent-rgb: 169, 99, 42; + --tier-bg: #faf4ee; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--silver { + --tier-accent: #65727e; + --tier-accent-rgb: 101, 114, 126; + --tier-bg: #f3f5f7; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--gold { + --tier-accent: #a97808; + --tier-accent-rgb: 169, 120, 8; + --tier-bg: #fbf6e9; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--platinum { + --tier-accent: #5d5d70; + --tier-accent-rgb: 93, 93, 112; + --tier-bg: #f4f4f8; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:focus-within { + transform: translateY(-2px); + border-color: color-mix(in srgb, var(--tier-accent) 55%, var(--pro-line)); + background: color-mix(in srgb, var(--tier-accent) 14%, var(--openms-white)); + box-shadow: var(--pro-shadow-hover); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured { + border-color: var(--tier-accent); + box-shadow: + 0 0 0 1px var(--tier-accent), + var(--pro-shadow); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__badge { + position: absolute; + top: 0; + left: 50%; + z-index: 2; + margin: 0; + padding: 0.28rem 0.7rem; + border-radius: 999px; + background: var(--tier-accent); + color: var(--openms-white); + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.04em; + line-height: 1.2; + white-space: nowrap; + transform: translate(-50%, -50%); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle { + display: flex; + flex-direction: column; + gap: 1rem; + flex: 1 1 auto; + width: 100%; + min-height: 100%; + height: 100%; + padding: 1.35rem 1.2rem 1.2rem; + margin: 0; + text-align: left; + cursor: pointer; + color: inherit; + appearance: none; + background: transparent; + border: 0; + font: inherit; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__header { + display: grid; + gap: 0.45rem; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.2rem, 1.8vw, 1.4rem); + font-weight: 700; + line-height: 1.2; + color: var(--openms-navy); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__contribution { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.35rem; + margin: 0; + line-height: 1; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__amount { + font-family: var(--openms-font-heading); + font-size: clamp(1.55rem, 2.4vw, 1.9rem); + font-weight: 800; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__period { + font-size: var(--openms-body-size); + font-weight: 600; + color: var(--pro-text-muted); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__motto { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--tier-accent); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__summary { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--pro-text-muted); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__benefits { + display: grid; + gap: 0.55rem; + margin: 0; + padding: 0; + list-style: none; + flex: 1 1 auto; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__benefits li { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.55rem; + align-items: start; + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.45; + color: rgba(var(--openms-dark-rgb), 0.82); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__check { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.15rem; + height: 1.15rem; + margin-top: 0.1rem; + color: #1f9d63; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 2.75rem; + margin-top: auto; + padding: 0.7rem 1rem; + border: 1px solid var(--pro-line-strong, rgba(11, 31, 51, 0.22)); + border-radius: 0.75rem; + background: transparent; + font-size: var(--openms-body-size); + font-weight: 700; + color: var(--openms-navy); + transition: + border-color 0.15s ease, + background-color 0.15s ease, + color 0.15s ease; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:hover .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:focus-within .sponsor-tier__cta { + border-color: var(--tier-accent); + color: var(--tier-accent); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active { + transform: translateY(-2px); + border-color: var(--tier-accent); + background: color-mix(in srgb, var(--tier-accent) 18%, var(--openms-white)); + box-shadow: + 0 0 0 1px var(--tier-accent), + var(--pro-shadow-hover); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta { + border-color: var(--tier-accent); + background: color-mix(in srgb, var(--tier-accent) 14%, var(--openms-white)); + color: var(--tier-accent); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured.sponsor-tier--active { + border-color: var(--tier-accent); + box-shadow: + 0 0 0 1px var(--tier-accent), + var(--pro-shadow-hover); +} + +@media (max-width: 1100px) { + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + grid-template-columns: 1fr; + max-width: 26rem; + margin-inline: auto; + } +} + +.openms-lib-page--sponsor-us .sponsor-tiers__note { + display: grid; + justify-items: center; + gap: var(--pro-stack-actions, 1.25rem); + width: 100%; + max-width: 100%; + margin: var(--pro-space-5) 0 0; + padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; + border: none; + border-radius: 0; + background: none; + box-shadow: none; + text-align: center; +} + +.openms-lib-page--sponsor-us .sponsor-tiers__note-copy { + display: grid; + justify-items: center; + gap: var(--pro-stack-lead, 0.75rem); + min-width: 0; + max-width: var(--pro-measure-wide, 58ch); +} + +.openms-lib-page--sponsor-us .sponsor-tiers__note-kicker { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-page--sponsor-us .sponsor-tiers__note-text { + margin: 0; + max-width: none; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-muted); +} + +.openms-lib-page--sponsor-us .sponsor-note-line { + display: block; +} + +@media (max-width: 720px) { + .openms-lib-page--sponsor-us .sponsor-note-line { + display: inline; + } + + .openms-lib-page--sponsor-us .sponsor-note-line::after { + content: " "; + } +} + +.openms-lib-page--sponsor-us .sponsor-benefits { + margin-top: var(--pro-space-5); + padding: clamp(1.15rem, 2.4vw, 1.5rem); + border: 1px solid var(--pro-line); + border-radius: 1rem; + background: var(--openms-white); + box-shadow: var(--pro-shadow); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__head { + display: grid; + gap: 0.35rem; + margin-bottom: 1rem; +} + +.openms-lib-page--sponsor-us .sponsor-benefits__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 0.9); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: none; + color: var(--openms-navy); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__lead { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--pro-text-muted); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__scroller { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border: 1px solid var(--pro-line); + border-radius: 0.85rem; + background: var(--openms-white); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__matrix { + --tier-cols: 4; + --label-col: minmax(12rem, 1.25fr); + --tier-col: minmax(7.5rem, 1fr); + display: grid; + grid-template-columns: var(--label-col) repeat(var(--tier-cols), var(--tier-col)); + min-width: 44rem; + width: 100%; +} + +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-row { + display: contents; +} + +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.35rem; + min-width: 0; + padding: 0.95rem 1rem; + border-bottom: 1px solid var(--pro-line); + background: var(--openms-white); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-row:last-child .sponsor-benefits__matrix-cell { + border-bottom: none; +} + +.openms-lib-page--sponsor-us + .sponsor-benefits__matrix-row:nth-child(even):not(.sponsor-benefits__matrix-row--head) + .sponsor-benefits__matrix-cell { + background: var(--pro-band-soft); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-row--head .sponsor-benefits__matrix-cell { + position: sticky; + top: 0; + z-index: 1; + padding-block: 0.95rem; + border-bottom: 1px solid var(--pro-line-strong); + background: var(--pro-band-soft); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--label { + position: sticky; + left: 0; + z-index: 2; + font-size: 0.92rem; + font-weight: 600; + line-height: 1.4; + color: var(--openms-navy); + background: var(--pro-band-soft); +} + +.openms-lib-page--sponsor-us + .sponsor-benefits__matrix-row:nth-child(even):not(.sponsor-benefits__matrix-row--head) + .sponsor-benefits__matrix-cell--label { + background: color-mix(in srgb, var(--pro-band-soft) 85%, var(--openms-navy) 4%); +} + +.openms-lib-page--sponsor-us + .sponsor-benefits__matrix-row--head + .sponsor-benefits__matrix-cell--label { + z-index: 3; + font-weight: 700; + background: var(--pro-band-soft); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__col-name { + font-family: var(--openms-font-heading); + font-size: 0.98rem; + font-weight: 700; + line-height: 1.2; + color: var(--openms-navy); + text-align: center; +} + +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--tier { + align-items: center; + text-align: center; + transition: background-color 0.2s ease, box-shadow 0.2s ease; +} + +/* Selected column uses standard page blue highlight */ +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="bronze"] + [data-sponsor-benefits="bronze"], +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="silver"] + [data-sponsor-benefits="silver"], +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="gold"] + [data-sponsor-benefits="gold"], +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="platinum"] + [data-sponsor-benefits="platinum"] { + background: color-mix(in srgb, var(--openms-blue) 8%, var(--openms-white)) !important; + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openms-blue) 22%, transparent); +} + +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="bronze"] + .sponsor-benefits__matrix-row--head + [data-sponsor-benefits="bronze"], +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="silver"] + .sponsor-benefits__matrix-row--head + [data-sponsor-benefits="silver"], +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="gold"] + .sponsor-benefits__matrix-row--head + [data-sponsor-benefits="gold"], +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="platinum"] + .sponsor-benefits__matrix-row--head + [data-sponsor-benefits="platinum"] { + background: color-mix(in srgb, var(--openms-blue) 14%, var(--openms-white)) !important; + box-shadow: inset 0 -3px 0 var(--openms-blue); +} + +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="bronze"] + [data-sponsor-benefits="bronze"] + .sponsor-benefits__col-name, +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="silver"] + [data-sponsor-benefits="silver"] + .sponsor-benefits__col-name, +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="gold"] + [data-sponsor-benefits="gold"] + .sponsor-benefits__col-name, +.openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier="platinum"] + [data-sponsor-benefits="platinum"] + .sponsor-benefits__col-name { + color: var(--openms-blue); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__lines { + display: grid; + gap: 0.35rem; + margin: 0; + padding: 0; + list-style: none; + width: 100%; +} + +.openms-lib-page--sponsor-us .sponsor-benefits__line { + margin: 0; + font-size: 0.86rem; + line-height: 1.45; + color: var(--pro-text, rgba(var(--openms-dark-rgb), 0.86)); + text-align: center; +} + +.openms-lib-page--sponsor-us .sponsor-benefits__check { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.35rem; + height: 1.35rem; + border-radius: 999px; + background: var(--openms-blue); + color: var(--openms-white); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__none { + margin: 0; + font-size: 1.1rem; + line-height: 1; + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.32); +} + +.openms-lib-page--sponsor-us .sponsor-benefits__footnote { + margin: var(--pro-space-3) 0 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: var(--pro-text-muted); +} + +.openms-lib-page--sponsor-us .sponsor-benefits .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--bronze .sponsor-tier__motto, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--silver .sponsor-tier__motto, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--gold .sponsor-tier__motto, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--platinum .sponsor-tier__motto { + color: var(--tier-accent); +} + +/* Current sponsors */ +.openms-lib-page--sponsor-us #current-sponsors .openms-lib-resources { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--sponsor-us #current-sponsors .openms-lib-resources__head { + max-width: min(54rem, 100%); +} + +.openms-lib-page--sponsor-us #current-sponsors .openms-lib-resources__lead { + display: grid; + gap: 0.15em; + width: max-content; + max-width: min(54rem, 100%); + margin-inline: auto; + text-align: center; + font-size: clamp(0.82rem, 2.15vw, var(--openms-body-size-lg)); +} + +.openms-lib-page--sponsor-us #current-sponsors .openms-lib-resources__lead span { + display: block; + white-space: nowrap; +} + +/* FAQ */ +.openms-lib-page--sponsor-us .sponsor-faq-pro { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__inner { + display: flex; + flex-direction: column; + gap: var(--pro-head-to-content, clamp(1.5rem, 3vw, 2.25rem)); + max-width: min(56rem, 100%); + margin-inline: auto; +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__head { + display: grid; + justify-items: center; + gap: 0; + text-align: center; +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__head .openms-lib-resources__eyebrow { + margin: 0 0 var(--pro-stack-eyebrow); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); + justify-content: center; +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__head .openms-lib-resources__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.15); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-navy); + text-align: center; +} + +.openms-lib-page--sponsor-us .sponsor-faq__list { + margin: 0; +} + +.openms-lib-page--sponsor-us .sponsor-faq__item { + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); +} + +/* Outro CTA */ +.openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-developers__card-text { + white-space: normal; + max-width: 48ch; +} + +/* ============================================================= */ +/* Sponsor-us — responsive (content only; shell = openms-lib) */ +/* ============================================================= */ + +/* —— Large tablet / small desktop —— */ +@media (max-width: 1100px) { + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +/* —— Tablet —— */ +@media (max-width: 992px) { + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head { + grid-template-columns: 1fr; + row-gap: var(--pro-stack-lead); + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-eyebrow, + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head h2, + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + grid-column: 1; + grid-row: auto; + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head h2 { + font-size: calc(var(--openms-heading-lg-size) * 1.05); + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + max-width: 60ch; + gap: 0.75rem; + font-size: var(--openms-body-size); + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.85rem; + } + + .openms-lib-page--sponsor-us .openms-lib-about__mosaic { + gap: clamp(0.85rem, 2vw, 1.25rem); + } + + .openms-lib-page--sponsor-us .sponsor-benefits { + padding: clamp(1rem, 2.5vw, 1.35rem); + } + + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell { + padding: 0.85rem 0.95rem; + } + + .openms-lib-page--sponsor-us + .sponsor-benefits[data-active-tier] + .sponsor-benefits__matrix { + grid-template-columns: minmax(8rem, 0.85fr) minmax(0, 1.4fr); + min-width: 0; + } +} + +/* —— Large phone / small tablet —— */ +@media (max-width: 768px) { + .openms-lib-page--sponsor-us .sponsor-lead-line { + display: inline; + } + + .openms-lib-page--sponsor-us .sponsor-lead-line::after { + content: " "; + } + + .openms-lib-page--sponsor-us .openms-lib-about__lead { + max-width: none; + } + + .openms-lib-page--sponsor-us .openms-lib-about__mosaic { + grid-template-columns: 1fr; + } + + .openms-lib-page--sponsor-us .sponsor-tile__top { + align-items: flex-start; + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + grid-template-columns: 1fr; + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head h2 { + font-size: var(--openms-heading-lg-size); + line-height: 1.25; + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier { + padding: 0; + } + + .openms-lib-page--sponsor-us .sponsor-benefits__matrix { + min-width: 40rem; + } + + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell { + padding: 0.75rem 0.85rem; + } + + .openms-lib-page--sponsor-us .about-sponsors-logos__item { + min-height: 5.5rem; + padding: 0.25rem; + } + + .openms-lib-page--sponsor-us .sponsor-faq__question { + white-space: normal; + overflow-wrap: break-word; + } + + .openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-developers__platforms { + flex-direction: column; + align-items: stretch; + gap: 0.6rem; + } + + .openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-developers__platforms + .openms-lib-btn { + width: 100%; + justify-content: center; + } + + .openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-developers__card-text { + max-width: none; + } +} + +/* —— Phone —— */ +@media (max-width: 560px) { + .openms-lib-page--sponsor-us .sponsor-tiers__note { + padding: clamp(1rem, 4vw, 1.25rem) 0 0; + gap: var(--pro-stack-actions, 1.25rem); + } + + .openms-lib-page--sponsor-us .sponsor-note-line { + display: inline; + } + + .openms-lib-page--sponsor-us .sponsor-note-line::after { + content: " "; + } + + .openms-lib-page--sponsor-us .sponsor-benefits__line, + .openms-lib-page--sponsor-us .sponsor-tile__list li { + font-size: var(--openms-text-min); + } + + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__contribution { + font-size: clamp(1.1rem, 5vw, 1.3rem); + } + + .openms-lib-page--sponsor-us .sponsor-benefits { + padding: 0.85rem; + } +} + +/* Privacy — scannable accordion on openms-lib shell */ +.openms-lib-page--privacy .openms-lib-hero__title { + max-width: 18ch; +} + +.openms-lib-page--privacy .openms-lib-hero__lead { + max-width: 38ch; +} + +.openms-lib-page--privacy .privacy-pro__toolbar { + display: flex; + flex-wrap: wrap; + gap: 0.55rem; + justify-content: flex-end; + margin: 0 0 0.85rem; +} + +.openms-lib-page--privacy .privacy-pro__tool-btn { + appearance: none; + margin: 0; + min-height: 2.5rem; + padding: 0.45rem 0.95rem; + border: 1px solid var(--pro-line); + border-radius: 999px; + background: var(--openms-white); + color: var(--openms-navy, #0b1f33); + font: inherit; + font-size: var(--openms-text-min); + font-weight: 600; + cursor: pointer; +} + +.openms-lib-page--privacy .privacy-pro__tool-btn:hover, +.openms-lib-page--privacy .privacy-pro__tool-btn:focus-visible { + border-color: color-mix(in srgb, var(--openms-blue) 40%, var(--pro-line)); + color: var(--openms-blue); + outline: none; +} + +.openms-lib-page--privacy .privacy-pro__list { + display: grid; + gap: 0.65rem; + max-width: min(56rem, 100%); +} + +.openms-lib-page--privacy .privacy-pro__item { + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + overflow: clip; + scroll-margin-top: 6rem; +} + +.openms-lib-page--privacy .privacy-pro__summary { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: start; + gap: 0.85rem 1rem; + min-height: 3.5rem; + padding: 1rem 1.15rem; + cursor: pointer; + list-style: none; +} + +.openms-lib-page--privacy .privacy-pro__summary::-webkit-details-marker { + display: none; +} + +.openms-lib-page--privacy .privacy-pro__summary::after { + content: ""; + width: 0.55rem; + height: 0.55rem; + margin-top: 0.45rem; + border-right: 2px solid var(--openms-navy, #0b1f33); + border-bottom: 2px solid var(--openms-navy, #0b1f33); + transform: rotate(45deg); + transition: transform 0.15s ease; + justify-self: end; +} + +.openms-lib-page--privacy .privacy-pro__item[open] .privacy-pro__summary::after { + transform: rotate(225deg); + margin-top: 0.65rem; +} + +.openms-lib-page--privacy .privacy-pro__summary-index { + margin-top: 0.2rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.06em; + color: var(--openms-blue); + font-variant-numeric: tabular-nums; +} + +.openms-lib-page--privacy .privacy-pro__summary-copy { + display: grid; + gap: 0.25rem; + min-width: 0; +} + +.openms-lib-page--privacy .privacy-pro__summary-title { + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.5vw, 1.12rem); + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy, #0b1f33); +} + +.openms-lib-page--privacy .privacy-pro__summary-text { + color: var(--pro-text-muted); + font-size: var(--openms-body-size); + line-height: 1.45; +} + +.openms-lib-page--privacy .privacy-pro__answer { + padding: 0 1.15rem 1.2rem 1.15rem; + border-top: 1px solid var(--pro-line); +} + +.openms-lib-page--privacy .privacy-pro__answer > *:first-child { + margin-top: 1rem; +} + +.openms-lib-page--privacy .privacy-pro__rich { + color: var(--pro-text, #1a2332); + font-size: var(--openms-body-size); + line-height: 1.65; +} + +.openms-lib-page--privacy .privacy-pro__rich p { + margin: 0 0 0.85rem; +} + +.openms-lib-page--privacy .privacy-pro__rich > *:last-child { + margin-bottom: 0; +} + +.openms-lib-page--privacy .privacy-pro__rich a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.15em; + overflow-wrap: anywhere; +} + +.openms-lib-page--privacy .privacy-pro__rich a:hover, +.openms-lib-page--privacy .privacy-pro__rich a:focus-visible { + color: var(--openms-navy, #0b1f33); +} + +.openms-lib-page--privacy .privacy-pro__rich strong { + font-weight: 700; + color: var(--openms-navy, #0b1f33); +} + +.openms-lib-page--privacy .openms-lib-page__outro .openms-lib-block--developers { + background: var(--openms-white); + padding-inline: 0; +} + +@media (max-width: 900px) { + .openms-lib-page--privacy .openms-lib-about__head { + grid-template-columns: 1fr; + gap: var(--pro-stack-lead, 0.75rem); + } +} + +@media (max-width: 640px) { + .openms-lib-page--privacy .privacy-pro__toolbar { + justify-content: stretch; + } + + .openms-lib-page--privacy .privacy-pro__tool-btn { + flex: 1 1 calc(50% - 0.3rem); + } + + .openms-lib-page--privacy .privacy-pro__summary { + grid-template-columns: auto 1fr auto; + gap: 0.7rem; + padding: 0.9rem 0.95rem; + } + + .openms-lib-page--privacy .privacy-pro__answer { + padding-inline: 0.95rem; + } + + .openms-lib-page--privacy .privacy-pro__summary-text { + font-size: var(--openms-text-min); + } +} + diff --git a/assets/icons/external-link.svg b/assets/icons/external-link.svg new file mode 100644 index 00000000..5fa2d8fa --- /dev/null +++ b/assets/icons/external-link.svg @@ -0,0 +1 @@ + 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..e61dea11 --- /dev/null +++ b/assets/js/navbar-search.js @@ -0,0 +1,250 @@ +/** + * 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]"); + var scrollY = document.body.style.top + ? Math.abs(parseInt(document.body.style.top, 10)) || 0 + : 0; + 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"); + document.body.style.position = ""; + document.body.style.top = ""; + document.body.style.left = ""; + document.body.style.right = ""; + document.body.style.width = ""; + document.documentElement.style.removeProperty("--openms-menu-offset"); + if (scrollY) window.scrollTo(0, scrollY); + } + + 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..bf01ce48 --- /dev/null +++ b/assets/js/navbar.js @@ -0,0 +1,452 @@ +/** + * Mobile navbar — burger menu, dropdown toggles, backdrop & close on navigate. + * Switches to mobile layout when the viewport is narrow or when the search icon + * would overlap the horizontal nav link text. + */ +(function () { + var MOBILE_MAX = 1023; + var MOBILE_LAYOUT_CLASS = "navbar-nav--mobile-layout"; + var COLLISION_ENTER_PX = 0; + var COLLISION_EXIT_PX = 18; + var menuScrollY = 0; + var collisionMobile = false; + + function isViewportMobile() { + return window.matchMedia("(max-width: " + MOBILE_MAX + "px)").matches; + } + + function isMobileNav() { + return ( + isViewportMobile() || + document.documentElement.getAttribute("data-navbar-layout") === "mobile" + ); + } + + function isTouchNav() { + return window.matchMedia("(hover: none), (pointer: coarse)").matches; + } + + function usesDropdownAccordion() { + if (isMobileNav()) return false; + return isTouchNav(); + } + + function usesMobileDrawerAccordion(nav) { + if (!isMobileNav() || !nav) return false; + var menu = nav.querySelector(".navbar-menu"); + return menu && menu.classList.contains("is-active"); + } + + function getNavElements() { + return { + nav: document.getElementById("nav"), + clone: document.getElementById("navbar-clone"), + }; + } + + function getNavCollisionGap(nav) { + if (!nav) return Number.POSITIVE_INFINITY; + + var links = nav.querySelector(".navbar-links"); + var search = nav.querySelector(".navbar-actions .navbar-search--desktop"); + if (!links || !search) return Number.POSITIVE_INFINITY; + + var linksRect = links.getBoundingClientRect(); + var searchRect = search.getBoundingClientRect(); + var rightmost = linksRect.right; + + links.querySelectorAll(".navbar-link, a.navbar-item").forEach(function (el) { + var rect = el.getBoundingClientRect(); + if (rect.width > 0 && rect.right > rightmost) { + rightmost = rect.right; + } + }); + + return searchRect.left - rightmost; + } + + function setLayoutAttributes(useMobile) { + var root = document.documentElement; + var nodes = getNavElements(); + + if (useMobile) { + root.setAttribute("data-navbar-layout", "mobile"); + } else { + root.removeAttribute("data-navbar-layout"); + } + + [nodes.nav, nodes.clone].forEach(function (el) { + if (!el) return; + el.classList.toggle(MOBILE_LAYOUT_CLASS, useMobile); + }); + } + + function measureDesktopCollision() { + var nodes = getNavElements(); + if (!nodes.nav) return false; + + var wasMobile = document.documentElement.getAttribute("data-navbar-layout") === "mobile"; + if (wasMobile) { + setLayoutAttributes(false); + void nodes.nav.offsetHeight; + } + + var gap = getNavCollisionGap(nodes.nav); + var shouldUseMobile; + + if (collisionMobile) { + shouldUseMobile = gap < COLLISION_EXIT_PX; + } else { + shouldUseMobile = gap <= COLLISION_ENTER_PX; + } + + collisionMobile = shouldUseMobile; + setLayoutAttributes(shouldUseMobile); + return shouldUseMobile; + } + + function updateNavbarLayoutMode() { + if (isViewportMobile()) { + collisionMobile = false; + setLayoutAttributes(true); + return; + } + + measureDesktopCollision(); + } + + 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 setDropdownOpen(parent, open) { + if (!parent) return; + var link = parent.querySelector(".navbar-link"); + var panel = parent.querySelector(".navbar-dropdown"); + parent.classList.toggle("is-active", open); + if (link) link.setAttribute("aria-expanded", open ? "true" : "false"); + if (panel) panel.setAttribute("aria-hidden", open ? "false" : "true"); + } + + function closeDropdowns(nav, except) { + if (!nav) return; + nav.querySelectorAll(".navbar-item.has-dropdown.is-active").forEach(function (el) { + if (except && el === except) return; + setDropdownOpen(el, false); + }); + } + + function initDropdownPanels(nav) { + if (!nav) return; + nav.querySelectorAll(".navbar-item.has-dropdown").forEach(function (parent) { + var panel = parent.querySelector(".navbar-dropdown"); + if (panel) { + panel.setAttribute( + "aria-hidden", + parent.classList.contains("is-active") ? "false" : "true" + ); + } + }); + } + + function updateHeaderHeight() { + if (document.body.classList.contains("navbar-menu-open")) return; + var header = document.querySelector(".site-header"); + if (!header) return; + document.documentElement.style.setProperty( + "--openms-header-height", + header.offsetHeight + "px" + ); + var banner = document.querySelector(".site-header .news-banner"); + var bannerHeight = banner ? banner.offsetHeight : 0; + document.documentElement.style.setProperty( + "--openms-news-banner-height", + bannerHeight + "px" + ); + } + + function captureMenuOffset() { + var banner = document.querySelector(".site-header .news-banner"); + var bannerHeight = banner ? banner.offsetHeight : 0; + document.documentElement.style.setProperty( + "--openms-news-banner-height", + bannerHeight + "px" + ); + document.documentElement.style.setProperty( + "--openms-menu-offset", + bannerHeight + "px" + ); + } + + function clearMenuOffset() { + document.documentElement.style.removeProperty("--openms-menu-offset"); + document.documentElement.style.removeProperty("--openms-news-banner-height"); + } + + function lockBodyScroll() { + menuScrollY = window.scrollY || window.pageYOffset || 0; + document.body.style.position = "fixed"; + document.body.style.top = "-" + menuScrollY + "px"; + document.body.style.left = "0"; + document.body.style.right = "0"; + document.body.style.width = "100%"; + document.body.classList.add("navbar-menu-open"); + } + + function unlockBodyScroll() { + document.body.classList.remove("navbar-menu-open"); + document.body.style.position = ""; + document.body.style.top = ""; + document.body.style.left = ""; + document.body.style.right = ""; + document.body.style.width = ""; + window.scrollTo(0, menuScrollY); + } + + function syncMenuAccessibility(nav, open) { + if (!nav) return; + var menu = nav.querySelector(".navbar-menu"); + if (!menu) return; + + if (!isMobileNav()) { + menu.removeAttribute("aria-hidden"); + if ("inert" in menu) { + menu.inert = false; + } + return; + } + + menu.setAttribute("aria-hidden", open ? "false" : "true"); + if ("inert" in menu) { + menu.inert = !open; + } + } + + function setMenuOpen(nav, open, options) { + if (!nav) return; + + options = options || {}; + if (open && isMobileNav() && !options.fromBurger) return; + if (nav.classList.contains("is-menu-open") === 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.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); + syncMenuAccessibility(nav, open); + + if (open) { + closeAllSearch(); + captureMenuOffset(); + lockBodyScroll(); + var scrollHost = menu && menu.querySelector(".navbar-end"); + if (scrollHost) scrollHost.scrollTop = 0; + } else { + closeDropdowns(nav); + unlockBodyScroll(); + clearMenuOffset(); + window.requestAnimationFrame(updateHeaderHeight); + } + } + + function closeMobileMenu(nav) { + setMenuOpen(nav, false); + } + + function toggleDropdown(nav, parent) { + var open = parent.classList.contains("is-active"); + + closeDropdowns(nav, open ? parent : null); + + if (!open) { + setDropdownOpen(parent, true); + var link = parent.querySelector(".navbar-link"); + if (link && typeof link.blur === "function") link.blur(); + } else { + setDropdownOpen(parent, 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(); + e.stopImmediatePropagation(); + + var willOpen = !menu.classList.contains("is-active"); + setMenuOpen(nav, willOpen, { fromBurger: true }); + }, + true + ); + } + + if (menu) { + menu.addEventListener( + "click", + function (e) { + if (!isMobileNav()) return; + if (menu.classList.contains("is-active")) return; + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + }, + true + ); + } + + if (backdrop) { + backdrop.addEventListener("click", function () { + if (!isMobileNav()) return; + closeMobileMenu(nav); + }); + } + + var closeBtn = nav.querySelector(".navbar-menu__close"); + if (closeBtn) { + closeBtn.addEventListener("click", function () { + if (!isMobileNav()) return; + closeMobileMenu(nav); + }); + } + + nav.addEventListener("click", function (e) { + if (usesMobileDrawerAccordion(nav)) { + if (e.target.closest(".navbar-dropdown a.navbar-item")) return; + + var drawerLink = e.target.closest( + ".navbar-item.has-dropdown > .navbar-link" + ); + if (!drawerLink || !nav.contains(drawerLink)) return; + + e.preventDefault(); + e.stopPropagation(); + + var drawerParent = drawerLink.closest(".navbar-item.has-dropdown"); + if (drawerParent) toggleDropdown(nav, drawerParent); + return; + } + + if (!usesDropdownAccordion()) return; + if (e.target.closest(".navbar-dropdown a.navbar-item")) return; + + var link = e.target.closest(".navbar-item.has-dropdown > .navbar-link"); + if (!link || !nav.contains(link)) return; + + e.preventDefault(); + e.stopPropagation(); + + var parent = link.closest(".navbar-item.has-dropdown"); + if (parent) toggleDropdown(nav, parent); + }); + + if (menu) { + menu + .querySelectorAll("a.navbar-item[href], a.navbar-cta-item, .navbar-dropdown a.navbar-item") + .forEach(function (anchor) { + anchor.addEventListener("click", function (e) { + if (!isMobileNav()) return; + e.stopPropagation(); + closeMobileMenu(nav); + }); + }); + } + } + + function onLayoutChange() { + var nodes = getNavElements(); + updateNavbarLayoutMode(); + updateHeaderHeight(); + + closeMobileMenu(nodes.nav); + closeMobileMenu(nodes.clone); + + syncMenuAccessibility( + nodes.nav, + !!(nodes.nav && nodes.nav.classList.contains("is-menu-open")) + ); + syncMenuAccessibility( + nodes.clone, + !!(nodes.clone && nodes.clone.classList.contains("is-menu-open")) + ); + + if (!usesDropdownAccordion()) { + closeDropdowns(nodes.nav); + closeDropdowns(nodes.clone); + } + } + + var resizeRaf = 0; + var settleTimer = 0; + function scheduleLayoutUpdate() { + // Keep the settling class on for the whole resize gesture (plus a small + // tail) so breakpoint/collision layout swaps never animate the drawer. + document.documentElement.classList.add("navbar-layout-settling"); + if (settleTimer) window.clearTimeout(settleTimer); + settleTimer = window.setTimeout(function () { + settleTimer = 0; + document.documentElement.classList.remove("navbar-layout-settling"); + }, 200); + + if (resizeRaf) return; + resizeRaf = window.requestAnimationFrame(function () { + resizeRaf = 0; + onLayoutChange(); + }); + } + + document.addEventListener("DOMContentLoaded", function () { + var nodes = getNavElements(); + setupNav(nodes.nav); + setupNav(nodes.clone); + syncMenuAccessibility(nodes.nav, false); + syncMenuAccessibility(nodes.clone, false); + initDropdownPanels(nodes.nav); + initDropdownPanels(nodes.clone); + updateNavbarLayoutMode(); + updateHeaderHeight(); + + window.addEventListener("resize", scheduleLayoutUpdate); + window.addEventListener("orientationchange", scheduleLayoutUpdate); + + if (document.fonts && document.fonts.ready) { + document.fonts.ready.then(scheduleLayoutUpdate).catch(function () {}); + } + + 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..482b79d9 --- /dev/null +++ b/assets/js/news-year-filter.js @@ -0,0 +1,154 @@ +(function () { + "use strict"; + + var PAGE_SIZE = 5; + var ALL = "all"; + + var root = document.querySelector("[data-news-year-filter]"); + if (!root) return; + + var selectEl = root.querySelector("[data-news-year-select]"); + var listEl = root.querySelector("[data-news-list]"); + if (!selectEl || !listEl) return; + + var entries = Array.prototype.slice.call( + listEl.querySelectorAll("[data-news-year]") + ); + if (!entries.length) return; + + var pagerEl = root.querySelector("[data-news-pager]"); + var prevBtn = root.querySelector("[data-news-prev]"); + var nextBtn = root.querySelector("[data-news-next]"); + var statusEl = root.querySelector("[data-news-status]"); + + var allYears = []; + entries.forEach(function (entry) { + var year = entry.getAttribute("data-news-year"); + if (year && allYears.indexOf(year) === -1) { + allYears.push(year); + } + }); + allYears.sort(function (a, b) { + return Number(b) - Number(a); + }); + + var currentYear = ALL; + var currentPage = 0; + + 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 === ALL) { + url.searchParams.delete("year"); + } else { + url.searchParams.set("year", year); + } + window.history.replaceState({}, "", url); + } + + function filteredEntries() { + if (currentYear === ALL) return entries; + return entries.filter(function (entry) { + return entry.getAttribute("data-news-year") === currentYear; + }); + } + + function render() { + var visible = filteredEntries(); + var pageCount = Math.max(1, Math.ceil(visible.length / PAGE_SIZE)); + if (currentPage > pageCount - 1) currentPage = pageCount - 1; + if (currentPage < 0) currentPage = 0; + + var start = currentPage * PAGE_SIZE; + var end = start + PAGE_SIZE; + + entries.forEach(function (entry) { + entry.hidden = true; + }); + visible.slice(start, end).forEach(function (entry) { + entry.hidden = false; + }); + + if (pagerEl) { + pagerEl.hidden = pageCount <= 1; + } + if (prevBtn) prevBtn.disabled = currentPage === 0; + if (nextBtn) nextBtn.disabled = currentPage >= pageCount - 1; + if (statusEl) { + statusEl.textContent = "Page " + (currentPage + 1) + " of " + pageCount; + } + + root.setAttribute("data-active-year", currentYear); + } + + function selectYear(year) { + if (year !== ALL && allYears.indexOf(year) === -1) { + year = ALL; + } + currentYear = year; + currentPage = 0; + selectEl.value = year; + render(); + setYearInUrl(year); + } + + function changePage(delta) { + currentPage += delta; + render(); + var target = root.querySelector(".news-archive") || root; + target.scrollIntoView({ behavior: "smooth", block: "start" }); + } + + function initYear() { + var fromUrl = getYearFromUrl(); + if (fromUrl && allYears.indexOf(fromUrl) !== -1) { + return fromUrl; + } + return ALL; + } + + function buildSelect() { + selectEl.innerHTML = ""; + + var allOpt = document.createElement("option"); + allOpt.value = ALL; + allOpt.textContent = selectEl.getAttribute("data-all-label") || "All years"; + selectEl.appendChild(allOpt); + + 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); + }); + if (prevBtn) { + prevBtn.addEventListener("click", function () { + changePage(-1); + }); + } + if (nextBtn) { + nextBtn.addEventListener("click", function () { + changePage(1); + }); + } + + buildSelect(); + selectYear(initYear()); + root.classList.add("news-year-filter--ready"); + + window.addEventListener("popstate", function () { + selectYear(initYear()); + }); +})(); diff --git a/assets/js/openms-lib-hub.js b/assets/js/openms-lib-hub.js new file mode 100644 index 00000000..1abc497c --- /dev/null +++ b/assets/js/openms-lib-hub.js @@ -0,0 +1,115 @@ +(function () { + var page = document.querySelector(".openms-lib-page--hub"); + if (!page) return; + + var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + + function reveal(el) { + if (!el) return; + el.classList.add("is-revealed"); + } + + function markReveal(el, index, variant) { + el.classList.add("openms-lib-hub__reveal"); + if (variant) el.classList.add("openms-lib-hub__reveal--" + variant); + el.style.setProperty("--hub-reveal-index", String(index)); + } + + page.querySelectorAll(".openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block").forEach(function (block, index) { + if (block.closest("#what-is-openms")) return; + markReveal(block, index); + }); + + var whatIsHead = page.querySelector("#what-is-openms .openms-lib-highlights__head, #what-is-openms .openms-lib-about__head"); + if (whatIsHead) { + whatIsHead.querySelectorAll(".openms-lib-block__eyebrow, .openms-lib-block__title, .openms-lib-about__eyebrow, .openms-lib-about__title").forEach(function (el, index) { + markReveal(el, index, "left"); + }); + } + + var whatIsList = page.querySelector("#what-is-openms .openms-lib-highlights__list--facts"); + if (whatIsList) { + markReveal(whatIsList, 2, "scale"); + } + + page.querySelectorAll("#what-is-openms .openms-lib-highlights__fact").forEach(function (card, index) { + markReveal(card, index + 3, index % 2 === 0 ? "left" : "right"); + }); + + page.querySelectorAll("#what-is-openms .openms-lib-about__tile").forEach(function (tile, index) { + markReveal(tile, index + 1, index === 0 ? "scale" : index % 2 === 0 ? "left" : "right"); + }); + + page.querySelectorAll(".openms-lib-topp__intro").forEach(function (el) { + markReveal(el, 0, "left"); + }); + + page.querySelectorAll(".openms-lib-topp__feature").forEach(function (el, index) { + markReveal(el, index + 1, "right"); + }); + + page.querySelectorAll(".openms-lib-topp-split__intro").forEach(function (el) { + markReveal(el, 0, "left"); + }); + + page.querySelectorAll(".openms-lib-topp-split__card").forEach(function (el, index) { + markReveal(el, index + 1, "right"); + }); + + var exploreRoutes = page.querySelector(".openms-lib-explore__routes"); + if (exploreRoutes) { + markReveal(exploreRoutes, 1, "scale"); + } + + page.querySelectorAll(".openms-lib-resources__head").forEach(function (el) { + markReveal(el, 0, "left"); + }); + + page.querySelectorAll(".openms-lib-resources__feature").forEach(function (el) { + markReveal(el, 0, "left"); + }); + + page.querySelectorAll(".openms-lib-resources__item").forEach(function (el, index) { + markReveal(el, index % 4, index % 2 === 0 ? "right" : "scale"); + }); + + page.querySelectorAll(".openms-lib-resources__support").forEach(function (el) { + markReveal(el, 2, "scale"); + }); + + page.querySelectorAll(".openms-lib-developers__card").forEach(function (card, index) { + markReveal(card, index % 6, index % 3 === 0 ? "scale" : index % 2 === 0 ? "left" : "right"); + }); + + var citePanel = page.querySelector(".openms-lib-developers__cite--panel"); + if (citePanel) { + markReveal(citePanel, 2, "left"); + } + + var outroBlock = page.querySelector(".openms-lib-page__outro .openms-lib-block--developers"); + if (outroBlock && !outroBlock.classList.contains("openms-lib-hub__reveal")) { + markReveal(outroBlock, 0); + } + + if (prefersReducedMotion || !("IntersectionObserver" in window)) { + page.classList.add("is-hub-ready"); + page.querySelectorAll(".openms-lib-hub__reveal").forEach(reveal); + return; + } + + var observer = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (!entry.isIntersecting) return; + reveal(entry.target); + observer.unobserve(entry.target); + }); + }, + { rootMargin: "0px 0px -6% 0px", threshold: 0.1 } + ); + + page.classList.add("is-hub-ready"); + page.querySelectorAll(".openms-lib-hub__reveal").forEach(function (el) { + observer.observe(el); + }); +})(); 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/sponsor-tiers.js b/assets/js/sponsor-tiers.js new file mode 100644 index 00000000..f12db0ea --- /dev/null +++ b/assets/js/sponsor-tiers.js @@ -0,0 +1,39 @@ +(function () { + "use strict"; + + var root = document.querySelector("[data-sponsor-tiers]"); + if (!root) return; + + var toggles = Array.prototype.slice.call( + root.querySelectorAll("[data-sponsor-tier]") + ); + var benefits = root.querySelector("[data-sponsor-benefits-wrap]"); + if (!toggles.length || !benefits) return; + + var featured = root.querySelector(".sponsor-tier--featured [data-sponsor-tier]"); + var initial = + (featured && featured.getAttribute("data-sponsor-tier")) || + toggles[0].getAttribute("data-sponsor-tier"); + + function activate(tierId, scroll) { + benefits.setAttribute("data-active-tier", tierId); + toggles.forEach(function (toggle) { + var match = toggle.getAttribute("data-sponsor-tier") === tierId; + toggle.setAttribute("aria-expanded", match ? "true" : "false"); + toggle + .closest(".sponsor-tier") + .classList.toggle("sponsor-tier--active", match); + }); + if (scroll) { + benefits.scrollIntoView({ behavior: "smooth", block: "nearest" }); + } + } + + toggles.forEach(function (toggle) { + toggle.addEventListener("click", function () { + activate(toggle.getAttribute("data-sponsor-tier"), true); + }); + }); + + activate(initial, false); +})(); 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..383a3b8e 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,155 +62,1253 @@ 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: >- + Code, docs, design, outreach, and more — find a path that fits your skills. + links: + discord: https://discord.com/invite/v9tv5BxPch + githubDiscussions: https://github.com/OpenMS/OpenMS/discussions + githubIssues: https://github.com/openms/openms/issues/new/choose + governance: /governance/ + websiteRepo: https://github.com/OpenMS/OpenMS-website + websiteIssues: https://github.com/OpenMS/OpenMS-website/issues + editContributePage: https://github.com/OpenMS/OpenMS-website/edit/main/content/en/contribute.md + social: + discord: https://discord.com/invite/v9tv5BxPch + linkedin: https://www.linkedin.com/company/openms-org + x: https://twitter.com/OpenMSTeam + bluesky: https://bsky.app/profile/openms.bsky.social + communityEmail: communitymanager@openms.de + fellowshipPage: + eyebrow: Community + headline: >- + Gain hands-on experience + in open-source science. + blurb: >- + Work alongside researchers worldwide on the OpenMS ecosystem —
+ develop algorithms, test software, and write tutorials for + computational mass spectrometry. + chips: + - Fully remote & unpaid + - Biweekly mentor meetings + - Certificate of completion + tallyFormId: 44qqqd + projectsTitle: Projects you can contribute to + projectsLead: >- + Fellows are matched with a mentor on one of these OpenMS ecosystem + projects. Browse each project to learn more and see how to contribute. + projects: + - title: OpenMS-lib + description: Core C++ library and TOPP tools for LC-MS data management and analysis. + url: /openms-lib/ + contributeUrl: "/openms-lib/#for-developers" + - title: pyOpenMS + description: Python bindings for scripting, notebooks, and workflow integration. + url: /pyopenms/ + contributeUrl: "/pyopenms/#for-developers" + - title: pyOpenMS Viz + description: Visualization library for spectra and chromatograms from pandas dataframes. + url: /pyopenms-viz/ + contributeUrl: "/pyopenms-viz/#for-developers" + - title: OpenMS WebApps + description: Streamlit-based web applications built on OpenMS pipelines. + url: /webapps/ + contributeUrl: "/webapps/#for-developers" + - title: Documentation + description: User guides, tutorials, and developer documentation for the OpenMS ecosystem. + url: https://github.com/OpenMS/OpenMS-docs + external: true + contributeUrl: https://github.com/OpenMS/OpenMS-docs/issues + developerRetreatPage: + eyebrow: Annual Developer Retreat + pageTitle: Annual Developer Retreat + headline: >- + Shape the future of
+ computational mass spectrometry. + about: >- + The annual OpenMS developers retreat brings together researchers + from around the world for a week of talks, tutorials, and code + sprints. + highlightsTitle: About the retreat + highlights: + - title: Who it's for + text: >- + Core developers, new developers, and potential future contributors + of OpenMS projects and apps — everyone is welcome. + - title: What happens + text: >- + Short talks, developer tutorials, and code sprints are intertwined + throughout the week. + - title: What you'll build + text: >- + Design custom tools and workflows together with instructors, and + get involved with the OpenMS community. + pastPhoto: + src: /images/dev_retreat_2026.jpeg + alt: OpenMS contributors at the 2026 developer retreat in Poland + caption: 2026 Developer retreat at the Piotrowice Nyskie Palace in Poland + upcoming: + title: Upcoming retreat + facts: + - icon: far fa-calendar + text: March 14–21, 2027 + - icon: fas fa-map-marker-alt + text: Resort Natura, Algarve, Portugal + - icon: far fa-clock + text: Registration opens in August 2026 + poster: + src: /images/dev_retreat_2027_poster.png + alt: OpenMS Developer Retreat 2027 — Algarve, Portugal + registration: + open: false + url: "" + label: Register here + closedHint: Registration will open August 2026 + 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. + # ── Our Sponsors page (/our-sponsors/) ────────────────────────────────── + # To ADD A SPONSOR: append an entry to `sponsors:` below. + # Full instructions: docs/common-tasks/update-sponsors.md + # + # Tiers: keep `tier` commented out until there are enough sponsors to + # group by level. Then set `groupByTier: true` below and give each + # sponsor a tier id from sponsorTiers.levels (platinum/gold/silver/bronze). + # Only tiers that actually have sponsors are shown. + sponsorsSection: + eyebrow: About us + intro: >- + OpenMS receives direct funding from organizations that sponsor the project. + listTitle: "Sponsors include:" + contactCta: Interested in sponsoring us? Contact us for more information. + contactUrl: /contact/ + # groupByTier: true + sponsors: + - name: LiBiS + url: https://libis.uni-heidelberg.de/ + logo: /images/logos/LiBiS-Logo.svg + alt: LiBiS — Life Science Informatics + # tier: gold + - name: ELIXIR + url: https://elixir-europe.org/platforms/data/core-data-resources + logo: /images/logos/Elixir.png + alt: ELIXIR Core Data Resource + # tier: platinum + - name: deNBI + url: https://www.denbi.de/ + logo: /images/logos/denbi.jpeg + alt: deNBI — German Network for Bioinformatics Infrastructure + # tier: silver + sponsorshipProgram: + title: Our Sponsorship Program + headline: With Open Science, both industry and community profit + blurb: >- + OpenMS is building and maintaining a unified, trusted, and openly accessible + commons of knowledge, software, education, and research resources for the + mass spectrometry community. + enablesTitle: Your sponsorship enables + enables: + - Continued development and maintenance of OpenMS software and infrastructure + - Training programs, workshops, and educational materials + - Community outreach and researcher support + - Open standards, interoperability, and reproducible science + - Long-term stewardship of scientific software used worldwide + taxNote: >- + As a nonprofit organization, sponsorship contributions are tax-deductible + to the extent permitted by law. + contactCta: Interested in sponsoring us? Contact us for more information. + contactUrl: /contact/ + 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: + googleScholarUrl: https://scholar.google.ca/citations?user=tQ26gxIAAAAJ&hl + googleScholarText: Follow us on Google Scholar + 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: We’re interested in hearing your idea for a partnership. + 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. + servicesSupportPage: + eyebrow: Services + subtitle: >- + We're here to help develop scalable and reproducible computational mass + spectrometry solutions catered to your needs. + formTitle: Get in touch with us for a quote. + newsSection: + eyebrow: OpenMS + title: News + subtitle: Announcements, releases, workshops, and community updates from OpenMS. + yearFilterLabel: Filter news + allYearsLabel: All years + 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 + developerRetreat: + text: Developer Retreat + url: /developer-retreat/ + # 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: "" + sponsorTiers: + eyebrow: Sponsorship levels + title: Foundation sponsorship levels + intro: >- + + + note: >- + + + # Tier cards show: name, price, motto, and summary. Detailed benefits are + # configured in `benefitsMatrix` below and revealed when a card is clicked. + # Set `showInProgram: false` to hide a tier until ready. + # Optional `tier` on aboutPage.sponsors entries should match `id` below when grouping logos. + levels: + - id: bronze + name: Bronze + contribution: $5,000 / year + motto: Show your support + summary: >- + For organizations that want to demonstrate support for open science + and open-source software. + showInProgram: true + - id: silver + name: Silver + contribution: $10,000 / year + motto: Partner with the community + summary: >- + For organizations seeking a partnership with the scientific + open-source ecosystem. + showInProgram: true + - id: gold + name: Gold + contribution: $50,000 / year + motto: Prominent voice in the community + summary: >- + For organizations investing strategically in the future of mass + spectrometry software and education. + showInProgram: true + - id: platinum + name: Platinum + contribution: $250,000 / year + motto: Executive Partnership + summary: >- + For organizations committed to shaping the future of open scientific + infrastructure. + showInProgram: true + # ── Sponsorship Benefits comparison ────────────────────────────────────── + # Rendered as an interactive breakdown under the tier cards: visitors click a + # level (Bronze/Silver/Gold/Platinum) to reveal that tier's benefits below. + # Each row is one benefit category. Per-tier values are a list of lines: + # • omit the key or use [] → shows an em dash (not included) + # • use ["✓"] → shows a check mark (included, no extra detail) + # • otherwise → each list item is shown as a line of text + # Tier keys must match the `id`s in `levels` above. + benefitsTitle: Benefit comparison + featuredLevel: gold + taxFootnote: "*where applicable by law" + benefitsMatrix: + - category: Annual Developer Retreat perks + bronze: [] + silver: + - 1 discounted registration pass (20% off) + gold: + - 1 free registration pass + - Opportunity to host a technical session, workshop, or case study presentation + platinum: + - 3 free registration passes + - Opportunity to host a technical session, workshop, or case study presentation + - category: Logo placement + bronze: + - Website + silver: + - Website & presentations + gold: + - Website & presentations + platinum: + - Prominent placement on website, presentations & social media + - category: Named recognition + bronze: + - Sponsorship listings, community communications + silver: + - Sponsorship listings, community communications, annual reports + gold: + - Sponsorship listings, community communications, annual reports + platinum: + - Sponsorship listings, announcements & strategic partnership recognition on website & social media + - category: Dedicated engagement meeting + bronze: [] + silver: [] + gold: [] + platinum: ["✓"] + - category: Sponsorship opportunity for roadmap and executive initiatives + bronze: [] + silver: ["✓"] + gold: ["✓"] + platinum: ["✓"] + - category: Permission to display OpenMS supporter badge + bronze: ["✓"] + silver: ["✓"] + gold: ["✓"] + platinum: ["✓"] + - category: Tax-deductible* + bronze: ["✓"] + silver: ["✓"] + gold: ["✓"] + platinum: ["✓"] + 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 + - name: HUPO-PSI + logo: /images/logos/hupo-psi.png + url: https://www.psidev.info/ 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. + - label: Community + text: Trusted and used by scientists worldwide. + + 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: Featured Apps + text: Community web apps built on the OpenMS WebApps framework. + url: /webapps/#featured-webapps + + 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: + eyebrow: Overview + title: What is OpenMS? + lead: >- + A mature, high-performance C++ framework for proteomics and metabolomics + workflows—built for reproducibility, scale, and long-term research use. + items: + - title: Two decades of expertise + text: 20+ years of development + - title: Open by design + text: Open source under the BSD-3 clause license + - title: Global community + text: Backed by an active community of researchers and developers + - title: Built for scale + text: High performance and optimized for scale + + openmsLibTopp: + eyebrow: Pipeline + title: Ships with the TOPP command-line tools + lead: Modular command-line tools covering the complete MS analysis pipeline + ctaKicker: TOPP suite + ctaBlurb: Browse 200+ modular tools for every stage of the mass spectrometry pipeline. + features: + - title: Compose workflows + text: Chain TOPP tools together to build custom workflows tailored to your data. + - title: Engine integration + text: Integrates with common workflow engines like Nextflow and KNIME. + linkText: Learn more + linkUrl: https://openms.readthedocs.io/en/latest/getting-started/workflows.html + ctaText: Explore TOPP tools + ctaUrl: https://archive.openms.de/openms/Documentation/release/latest/html/TOPP_documentation.html + + openmsLibGettingStarted: + eyebrow: Get started + title: Explore OpenMS-lib + lead: Documentation, tools, and community resources to start building with OpenMS-lib. + items: + - title: TOPP Tools + text: Browse the full suite of processing and analysis tools in the TOPP pipeline. + url: https://archive.openms.de/openms/Documentation/release/latest/html/TOPP_documentation.html + linkText: Explore TOPP tools + - title: Featured Apps + tag: Apps + icon: fas fa-window-maximize + text: Web applications and workflows built on top of OpenMS-lib. + url: /webapps/#featured-webapps + linkText: Featured Apps + - title: Python bindings + tag: pyOpenMS + icon: fab fa-python + text: Use OpenMS algorithms and data structures directly from Python. + url: /pyopenms/ + linkText: Explore pyOpenMS + - title: Read Documentation + tag: Docs + icon: fas fa-book-open + text: Tutorials and guides to help you get productive quickly. + url: https://openms.readthedocs.io/en/latest/getting-started/introduction.html + linkText: Read documentation + - title: API Reference + tag: API + icon: fas fa-code + text: Full C++ class and method reference for OpenMS-lib. + url: https://archive.openms.de/openms/Documentation/release/latest/ + linkText: API reference + - title: Need help? + type: online + text: Chat with the community on Discord, or open a GitHub issue for bugs and feature requests. + links: + - name: Ask on Discord + icon: fab fa-discord + text: Quick questions and community chat + url: https://discord.com/invite/v9tv5BxPch + - name: Report an issue + icon: fab fa-github + text: Bugs and feature requests + url: https://github.com/OpenMS/OpenMS/issues/new/choose + + openmsLibDevelopers: + eyebrow: For Developers + title: Contribute + lead: Your improvements help researchers worldwide. + citeSeparate: true + citeText: Used OpenMS-lib in your work? If so, please cite. + citation: + 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: /publications/ + moreText: More citations + boxes: + - title: Contributing Guidelines + tag: Contribute + icon: fas fa-hands-helping + text: How to propose changes, open pull requests, and work with the OpenMS community. + url: https://openms.readthedocs.io/en/latest/manual/develop.html#contribution-guidelines + linkText: Read guidelines + - 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/new/choose + linkText: Report an issue + - 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 + - title: Building OpenMS from source + type: links + tag: Build + icon: fas fa-hammer + text: Compile the C++ core and tools locally with platform-specific guides. + platforms: + - name: Linux + icon: fab fa-linux + url: https://archive.openms.de/openms/Documentation/release/latest/html/install_linux.html + - name: macOS + icon: fab fa-apple + url: https://archive.openms.de/openms/Documentation/release/latest/html/install_mac.html + - name: Windows + icon: fab fa-windows + url: https://archive.openms.de/openms/Documentation/release/latest/html/install_win.html + - title: Review pull requests + type: build + tag: Review + text: Help move contributions forward by reviewing open pull requests. + badge: + src: https://img.shields.io/github/issues-pr/OpenMS/OpenMS?label=open%20PRs&color=1a56db&style=flat-square + alt: Number of open OpenMS pull requests + url: https://github.com/OpenMS/OpenMS/pulls + platforms: + - name: View open PRs + icon: fab fa-github + url: https://github.com/OpenMS/OpenMS/pulls + - name: How to review PRs + icon: fas fa-book-open + url: https://github.com/ParadiseSS13/Paradise/discussions/19410 + + pyopenmsPage: + highlights: + eyebrow: Overview + title: What is pyOpenMS? + lead: >- + Python bindings to the OpenMS-lib C++ framework — script, prototype, + and automate mass spectrometry analysis from Python. + items: + - title: Native algorithms + text: Run OpenMS-lib algorithms directly in Python + - title: DataFrame export + text: Pandas DataFrame export for common OpenMS data structures + - title: Scripts & notebooks + text: Run in scripts or Jupyter notebooks + - title: Scientific stack + text: Seamless integration with the scientific Python stack + + gettingStarted: + eyebrow: Get started + title: Explore pyOpenMS + lead: Documentation, tutorials, and community resources to start building with pyOpenMS. + featureKicker: Install + featureIcon: fab fa-python + items: + - title: Installation + text: Install via pip, conda, or build from source. + url: https://pyopenms.readthedocs.io/en/latest/user_guide/installation.html + linkText: Installation guide + - title: Tutorials + tag: Learn + icon: fab fa-python + text: Jupyter notebooks and guided examples for common tasks. + url: https://pyopenms.readthedocs.io/en/latest/user_guide/index.html + linkText: View tutorials + - title: Documentation + tag: Docs + icon: fas fa-book-open + text: User guides and reference material for pyOpenMS. + url: https://pyopenms.readthedocs.io/ + linkText: Read documentation + - title: API Reference + tag: API + icon: fas fa-code + text: Full Python class and method reference for pyOpenMS. + url: https://pyopenms.readthedocs.io/en/latest/apidocs/index.html + linkText: API reference + + developers: + eyebrow: For Developers + title: Contribute + lead: Any class in OpenMS-lib can be wrapped and used from Python — your contributions help researchers worldwide. + citeSeparate: true + citeText: Used pyOpenMS in your work? If so, please cite. + citation: + 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: /publications/ + 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/new/choose + linkText: Report an issue + - title: Build from Source + tag: Build + icon: fas fa-hammer + text: Platform-specific guides for compiling pyOpenMS locally. + url: https://pyopenms.readthedocs.io/en/latest/community/build_from_source.html + linkText: Build from source + - title: Wrapping New Classes + tag: Extend + icon: fas fa-puzzle-piece + text: Step-by-step guide for exposing new OpenMS classes to Python. + url: https://pyopenms.readthedocs.io/en/latest/community/wrapping_workflows_new_classes.html + linkText: Wrapping guide + - title: Developer manual + tag: Docs + icon: fas fa-book + text: Architecture and contribution workflows for pyOpenMS. + url: https://pyopenms.readthedocs.io/en/latest/community/index.html + linkText: Read the manual + + pyopenmsVizPage: + developers: + eyebrow: For Developers + title: Contribute + lead: Help improve visualization for the OpenMS ecosystem — report issues, extend plot types, and share examples. + citeSeparate: true + citeText: "Used pyopenms_viz in your work? If so, please cite." + citation: + variant: secondary + topic: pyOpenMS-viz + title: >- + pyOpenMS-viz: Streamlining Mass Spectrometry Data Visualization + with pandas + journal: bioRxiv + year: "2025" + boxes: + - title: Open an Issue + tag: GitHub + icon: fab fa-github + text: Report bugs or request new plot types on GitHub. + url: https://github.com/OpenMS/pyopenms_viz/issues/new + linkText: Open an issue + - title: API Reference + tag: API + icon: fas fa-code + text: Explore the Python API for plot types and customization options. + url: https://pyopenms-viz.readthedocs.io/en/latest/API.html + linkText: API reference + - title: Contribute on GitHub + tag: Source + icon: fab fa-github + text: Fork the repository and submit pull requests with new features or fixes. + url: https://github.com/OpenMS/pyopenms_viz + linkText: View repository + + webappsPage: + highlights: + eyebrow: Overview + title: Features + lead: >- + Build interactive Streamlit apps on top of OpenMS pipelines — from local + demos to shareable deployments. + items: + - title: Local or cloud + text: Run locally or deploy with docker-compose + - title: Python-first + text: Python-based pipeline creation and frontend development + - title: TOPP UI + text: Auto-generates UI for TOPP tools + - title: Custom visuals + text: Customizable visualizations and results display + - title: Shareable workspaces + text: Workspaces for user data with unique shareable IDs + + usingTemplate: + eyebrow: Get started + title: Using the template + lead: Documentation, deployment options, and example apps built on the OpenMS WebApps framework. + items: + - tag: Docs + title: Documentation + icon: fas fa-book-open + text: Guides for customizing and extending the Streamlit template. + url: https://template.webapps.openms.org/documentation + linkText: Documentation + - tag: Getting Started + title: Getting Started + icon: fas fa-rocket + text: Fork and customize the template for your pipeline. + url: https://github.com/OpenMS/streamlit-template/fork + linkText: Fork Template + - tag: Deploy + title: streamlit-deployment + icon: fab fa-docker + text: Host multiple WebApps together with Docker Compose. + url: https://github.com/OpenMS/streamlit-deployment + linkText: Deploy with docker compose + - type: static + tag: Windows + title: Deploy as Windows Executable + icon: fab fa-windows + text: Package your WebApp as a standalone Windows executable. + - type: featured-apps + tag: Examples + title: Featured WebApps + icon: fas fa-window-maximize + text: Community apps built on the OpenMS WebApps framework. + url: /featured-apps/ + linkText: Browse all apps + apps: + - name: OpenDIAKiosk + logo: /images/webapp/logo/OpenDIAKiosk_logo_portrait.svg + url: http://opendia.webapps.openms.org/ + - name: umetaflow + logo: /images/webapp/logo/umetaflow.png + url: https://abi-services.cs.uni-tuebingen.de/umetaflow/ + - name: OpenDDA + logo: /images/webapp/logo/openDDA.svg + url: http://opendda.webapps.openms.org/ + + developers: + eyebrow: For Developers + title: Contribute + lead: Help improve the WebApps template and deployment tooling for the OpenMS community. + citeSeparate: true + citeText: "Used OpenMS WebApps in your work? If so please cite:" + citation: + variant: secondary + topic: OpenMS WebApps + title: "OpenMS WebApps: Building User-Friendly Solutions for MS Analysis" + journal: Box + year: "2025" + url: https://www.ncbi.nlm.nih.gov/pubmed/39881492 + actionText: View on PubMed + boxes: + - title: Open an Issue + tag: GitHub + icon: fab fa-github + text: Report bugs or suggest features for the Streamlit template. + url: https://github.com/OpenMS/streamlit-template/issues/new + linkText: File on GitHub + + 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. + pageTitle: Featured Apps + pageDescription: >- + GUI or Command Line Apps actively maintained by the OpenMS core + development team + contactNote: "Don't see your functionality tool? Contact us." + contactUrl: /contact/ + ctaText: View app + showAll: + text: Show all apps + url: /webapps/#featured-webapps + + affiliateSection: + eyebrow: Partner ecosystem + title: Affiliated Apps + description: >- + These projects are not directly maintained by the OpenMS team but are + dependent on OpenMS infrastructure or funding. + contactNote: "Don't see your functionality tool? Contact us." + contactUrl: /contact/ + + affiliateProjects: + - name: mzPeak + logo: /images/webapp/logo/affiliate/mzpeak.png + logoSize: wide + description: >- + Next generation file format for mass spectrometry run files, built + on top of Apache Parquet + maintainers: >- + Joshua Klein, Sam Wein, Tim Van Den Bossche, Peter Jones, + Oliver Kohlbacher + links: + - type: github + url: https://github.com/HUPO-PSI/mzPeak + - type: homepage + url: https://www.mzpeak.org/ + - name: QuantMS + logo: /images/webapp/logo/affiliate/quantms.svg + logoSize: large + description: An open-source ecosystem for large-scale quantitative proteomics. + maintainers: >- + Yasset Perez-Riverol, Mingze Bai, Timo Sachsenberg, Chengxin Dai, + Julianus Pfeuffer + links: + - type: homepage + url: https://quantms.org/index.html + - type: github + url: https://github.com/bigbio/quantms + - name: Casanovo + logo: /images/webapp/logo/affiliate/casanovo.svg + description: >- + De Novo Mass Spectrometry Peptide Sequencing with a Transformer Model + maintainers: Wout Bittremieux, Bill Noble + links: + - type: github + url: https://github.com/Noble-Lab/casanovo + - type: pypi + url: https://pypi.org/project/casanovo/ + - name: easypqp + logo: /images/webapp/logo/affiliate/easypqp.svg + description: Spectral library generation tool for DIA. + maintainers: Justin Sing + links: + - type: github + url: https://github.com/grosenberger/easypqp + - type: pypi + url: https://pypi.org/project/easypqp/ + - name: Pyprophet + logo: /images/webapp/logo/affiliate/pyprophet.png + logoSize: large + description: Semi-supervised learning and scoring of OpenSWATH results + maintainers: Justin Sing + links: + - type: github + url: https://github.com/PyProphet/pyprophet + - type: pypi + url: https://pypi.org/project/pyprophet/ + + archivedSection: + eyebrow: Legacy + title: Archived Apps + lead: These projects are kept for reference. They still work, but are no longer updated or supported by the community. + notice: + label: Good to know + points: + - You can still use them as-is for your analysis. + - Check for known limitations or compatibility issues before you start. + catalogTitle: Available references + revivalPrompt: Interested in reviving one of these projects? + revivalNote: Get in touch to discuss maintenance, funding, or community support. + contactText: Contact Us + contactUrl: /contact/ + sponsorText: Sponsor Us + sponsorUrl: /sponsor-us/ + + archivedProjects: + - name: diaproteomics + displayName: diaProteomics + variant: nfcore-pipeline + tag: NF-Core pipeline + logo: /images/webapp/logo/nf-core.png + description: >- + A bioinformatics analysis pipeline used for quantitative processing + of data independent (DIA) proteomics data. + links: + - type: nfcore + label: NF Core + url: https://nf-co.re/diaproteomics/1.2.4/ + - type: github + url: https://github.com/nf-core/diaproteomics 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 + maintainers: Tom Muller, Kyowon Jeong + links: + - type: demo + url: http://flashapp.webapps.openms.org/ + - type: install + label: Install (Windows) + url: https://github.com/OpenMS/FLASHApp/releases/latest + - type: github + url: https://github.com/OpenMS/FLASHApp/ + - 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 + maintainers: Justin Sing + links: + - type: demo + url: http://opendia.webapps.openms.org/ + - type: install + label: Install (Windows) + url: https://github.com/OpenMS/OpenDIAKiosk/releases/latest + - type: github + url: https://github.com/openms/opendiakiosk + - 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 + links: + - type: demo + url: https://abi-services.cs.uni-tuebingen.de/umetaflow/ + - type: github + url: https://github.com/OpenMS/umetaflow + - 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 + maintainers: Tom Müller + links: + - type: demo + url: http://opendda.webapps.openms.org/ + - type: github + url: https://github.com/OpenMS/quantms-web + - type: install + label: Install (Windows) + url: https://github.com/OpenMS/quantms-web/releases/tag/OpenDDA-1.0 + - 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) + maintainers: Sam Wein + links: + - type: demo + url: https://abi-services.cs.uni-tuebingen.de/naseweis/?workspace=032ba1ba-578a-11f1-92ec-7e2f2bc7f0f7 + - type: github + url: https://github.com/poshul/nase-weis/ + - 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 + maintainers: Arslan Siraj + links: + - type: demo + url: https://abi-services.cs.uni-tuebingen.de/nuxl/ + - type: install + label: Install (Windows) + url: https://github.com/Arslan-Siraj/nuxl-app/releases/latest + - type: github + url: https://github.com/Arslan-Siraj/nuxl-app/ + - 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 + maintainers: Jonas Scheid + links: + - type: demo + url: https://abi-services.cs.uni-tuebingen.de/mhcquant/ + + ecosystemSection: + title: Build your own pipelines using our ecosystem + titleHighlight: ecosystem + items: + - name: OpenMS-lib + url: /openms-lib/ + tag: C++ library + 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/ + tag: Python + 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/ + tag: Web apps + 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/ + tag: Visualization + accent: viz + size: wide + description: >- + Visualization library for mass spectrometry data. Create interactive + and static plots directly from Python dataframes. section5: false footer: title: OpenMS deployedBy: /images/deployed-by-netlify.png - sponsorLogo1: /images/logos/denbi-logo-white.svg - 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. 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 + heading: SUPPORT links: - - text: Install - link: https://openms.readthedocs.io/en/latest/about/installation.html - - text: Documentation - link: https://openms.readthedocs.io/en/latest/ - - text: Citing OpenMS - link: /citing-openms + - text: Donate + link: /donate/ + - text: Sponsor Us + link: /sponsor-us/ column2: heading: COMMUNITY links: - - text: Community - link: /communication - - text: Code of conduct - link: /code-of-conduct - - text: Contribute + - text: Calendar + link: /calendar/ + - text: News + link: /news + - text: Getting Involved link: /contribute - - text: Core Developers - link: /core_developers + - text: OpenMS Fellowship + link: /fellowship/ + - text: Annual Developer Retreat + link: /developer-retreat/ column3: heading: ABOUT links: - - text: OpenMS Inc. - link: /about - - text: Executive committee - link: /exec_committee - text: Governance link: /governance - - text: Jobs - link: /jobs + - text: Our Sponsors + link: /our-sponsors/ + - text: Our Sponsorship Program + link: /sponsor-us/ + - text: Publications + link: /publications + - text: Contributors + link: /contributors/ + - text: Contact + link: /contact/ column4: heading: LEGAL links: - - text: Help - link: /help - - text: Terms of use - link: /terms - text: Privacy link: /privacy - text: Press kit @@ -190,35 +1317,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: Projects + url: /openms-lib/ + sublinks: + - title: OpenMS-lib + url: /openms-lib/ + - title: pyOpenMS + url: /pyopenms/ + - title: pyOpenMS Viz + url: /pyopenms-viz/ + - title: OpenMS Web Apps + url: /webapps/ + - title: Apps + url: /webapps/#featured-webapps + sublinks: + - title: Featured Apps + url: /featured-apps/ + - title: Affiliated Apps + url: /affiliated-apps/ + - title: Archived Apps + url: /archived-apps/ + - 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: /fellowship/ + - title: Annual Developer Retreat + url: /developer-retreat/ + - title: Services + url: /scientific-and-technical-support/ + sublinks: + - title: Scientific and Technical Support + url: /scientific-and-technical-support/ + - title: About sublinks: - title: Governance url: /governance - - title: Contributors - url: /contributors - url: /about - - title: Use Cases - url: /publications - sublinks: - - title: Applications - url: /applications + - title: Our Sponsors + url: /our-sponsors/ + - title: Our Sponsorship Program + url: /sponsor-us/ - title: Publications url: /publications - - title: Help Request - url: /help-request + - title: Contributors + url: /contributors/ + - title: Contact + url: /contact/ + - title: Research Partnerships + url: /research-partnerships/ + - title: Partner with OpenMS + shortTitle: Partner + url: /research-partnerships/ button: true + buttonVariant: sponsor diff --git a/content/en/about.md b/content/en/about.md deleted file mode 100644 index 14040b8f..00000000 --- a/content/en/about.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: OpenMS Inc. -sidebar: false ---- - -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 - -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 - -OpenMS receives direct funding from the following sources: -{{< sponsors >}} - - -## 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. diff --git a/content/en/affiliated-apps.md b/content/en/affiliated-apps.md new file mode 100644 index 00000000..da2b28c6 --- /dev/null +++ b/content/en/affiliated-apps.md @@ -0,0 +1,30 @@ +--- +title: Affiliated Apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + + diff --git a/content/en/applications/_index.md b/content/en/applications/_index.md deleted file mode 100644 index 4b1fc38f..00000000 --- a/content/en/applications/_index.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: OpenMS Applications -date: 2017-03-23 -publishdate: 2017-03-24 -shortcutDepth: 2 ---- - -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 - - -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. - -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 diff --git a/content/en/applications/diametalyzer.md b/content/en/applications/diametalyzer.md deleted file mode 100644 index b8434381..00000000 --- a/content/en/applications/diametalyzer.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: DIAMetAlyzer -subtitle: Data-independent acquisition metabolomics analyzer workflow -sidebar: false ---- - -DIAMetAlyzer is a KNIME workflow which integrates DDA and targeted DIA analysis for metabolomics, which allows for false-discovery rate estimation based a target-decoy approach (see figure 1). It performs DDA based candidate identification and constructs a target/decoy assay library, which is used for DIA target extraction and statistical validation (FDR estimation) - -
{{< figure src="/images/content_images/applications/Figure_1-1536x765.png" caption="**Fig. 1: DIAMetAlyzer – pipeline for assay library generation and targeted analysis with statistical validation**" >}}
- -Candidate identification includes feature detection, adduct grouping and accurate mass search. Library construction uses the knowledge determined by compound identification. Here, potential composition, adducts and corresponding fragment spectra are used to perform fragment annotation via compositional fragmentation trees to extract transitions for assay library. FDR estimation is based on the target-decoy approach, with decoys being generated using a fragmentation tree method, which reduces bias in decoy generation. In the targeted extraction step, the assay library is used to analyse DIA data, which involves chromatogram extraction and peak-group scoring. Statistical validation uses semi-supervised learning to build a composite score and estimate q-values. - -If you would like to try the DIAMetAlyzer workflow, you will need to install **KNIME** and the **OpenMS** plugin: - - - -**Steps:** -1) Download the KNIME installer for your platform via the button above -2) Install KNIME -3) After installation follow this small [video tutorial](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Tutorials/Videos/installOpenMSKNIMEplugin.mp4) to install the OpenMS plugin. Use the following update site URL for -the copy-paste step in the video: https://abibuilder.cs.uni-tuebingen.de/archive/openms/knime-plugin/updateSite/release/latest/ -You can give it any name (e.g. OpenMS latest Update Site). - -Additional prerequisites are Python 3.x as well as the following packages: - -- NumPy -- pandas -- PyProphet -- pyopenms - -For an in-depth explanation on the installation and application of the workflow please see the “Additional Tutorials” section below. - -**Download sources and example data:** -_Example Data_: You can use the converted mzMLs on our server as direct input to the KNIME workflow that is also linked there. The data comes from the MTBLS1108. - -_Additional Tutorial_: OpenMS, in general, provides a multitude of Tutorials for data processing. You can either have look at our handout or check the OpenMS Tutorials GitHub page. The DIAMetAlyzer Tutorial is listed as “OpenSWATH for Metabolomics”. - -_Publication_: TBD \ No newline at end of file diff --git a/content/en/applications/diaproteomics.md b/content/en/applications/diaproteomics.md deleted file mode 100644 index 1e88c9d1..00000000 --- a/content/en/applications/diaproteomics.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DIAproteomics -subtitle: Quantitative data independent proteomics workflow -sidebar: false ---- - -DIAproteomics is a bioinformatics analysis pipeline used for quantitative processing of data independent (DIA) proteomics data. - -The workflow is based on the OpenSwathWorkflow for SWATH-MS proteomic data. DIA RAW files (mzML) serve as inputs and library search is performed based on a given input spectral library. If specified internal retention time standards (irts) will be used to align library and DIA measurements into the same retention time space. FDR rescoring is applied using Pyprophet based on a competitive target-decoy approach on peakgroup or global peptide and protein level. Optionally EasyPQP can be used for library generation and DIAlignR for chromatogram alignment and quantification. - -The pipeline is built using Nextflow, a workflow tool to run tasks across multiple compute infrastructures in a very portable manner. It comes with docker / singularity containers making installation trivial and results highly reproducible. - -
{{< figure src="/images/content_images/applications/DIAproteomics.png" >}}
- -The Nextflow Workflow is available at: - -https://github.com/nf-core/diaproteomics - -See also the detailed description of parameters and workflow output at: - -https://nf-co.re/diaproteomics - diff --git a/content/en/applications/epifany.md b/content/en/applications/epifany.md deleted file mode 100644 index 0d965a51..00000000 --- a/content/en/applications/epifany.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: EPIFANY -sidebar: false -summaryImage: /images/content_images/epifany_factor_graph-wpcf_465x400.png -subtitle: Efficient bayesian protein inference -authors: ["Julianus Pfeuffer"] ---- - -
-
{{< figure src="/images/content_images/epifany_factor_graph-wpcf_465x400.png" >}}
- -_EPIFANY_ is a tool for efficient bayesian protein inference. It is included in OpenMS since 2.5. -It takes one or more peptide database search engine results (in OpenMS' idXML format) that were post-processed -by the PercolatorAdapter or IDPosteriorErrorProbability tool and adds posterior probabilities and/or -false discovery rates for each protein or protein group to it. - - - -### Introduction - -_EPIFANY_ is a protein inference engine based on a Bayesian network. Currently, a similar model to -Fido is used with the main parameters alpha (pep_emission), beta (pep_spurious_emission) and gamma (prot_prior). -If not specified, these parameters are trained based on their classification performance and calibration -via a grid search by simply running with several possible combinations and evaluating. Unless you see very extreme output -probabilities (e.g. many close to 1.0 or 0.0) or you know good parameters (e.g. from an earlier run), -grid search is recommended, although slower. The tool will merge multiple idXML files (union of proteins -and concatenation of PSMs) when given more than one. This is useful for fractions or replicates if they were not merged already. -It assumes one search engine run per input file but might work on more with undefined behavior. -Proteins need to be indexed by OpenMS’s PeptideIndexer but this is usually done before -Percolator/IDPEP since target/decoy associations are needed there already. Make sure that the input PSM -probabilities are not too extreme already (garbage in – garbage out). After merging, the input probabilities -are preprocessed with a low posterior probability cutoff to neglect very unreliable matches. Then -the probabilities are aggregated with the maximum per peptide and the graph is built and split into -connected components. When compiled with the OpenMP flag (default enabled in the release binaries) the tool is multithreaded which can -be activated at runtime by the threads parameter. Note that peak memory requirements -may rise when processing multiple components of the graph at the same time. The tool offers an option for a greedy group resolution -which is helpful for reducing false-positive identifications in the presence of many shared peptides between present and non-present proteins. -Note that it might reduce true positives, too and introduces a fake certainty by removing proteins without evidence after retaining only associations -between a peptide and its best producing group (after probabilistic inference). The option is mainly suggested when protein inference -is the last step of the analysis. A middle-ground between greedy resolution and standard (sum-product) inference is a regularized -max-product inference (for this, set the regularize flag and choose a p-norm smaller than 0 [implying infinity]). - -### Update (February 2020) – Now in OpenMS 2.5+ - -EPIFANY can now also be found in the official OpenMS 2.5 release (or later). We recommend using the version that ships with your OpenMS distribution of choice. For the -binary used in the publication, you can use the installation links and methods below or check out the source code from the [corresponding GitHub tag](https://github.com/jpfeuffer/OpenMS/tree/epifany_paper). - -{{< button download "https://abibuilder.cs.uni-tuebingen.de/archive/openms/OpenMSInstaller/experimental/feature/proteomic_lfq/" >}} -DOWNLOAD EPIFANY WITH OpenMS AS COMMAND LINE TOOL -{{< /button >}} - -Steps: -1) Download the installer for your platform via the button above -2) Install OpenMS following the Installation instructions -3) After installation and adding the TOPP tools (including EPIFANY) to your global Path environment, -you can start scripting. Follow the instructions here for some introduction to scripting with OpenMS - -{{< button download "https://www.knime.com/downloads/download-knime" >}} -USE EPIFANY IN KNIME WORKFLOWS WITH GRAPHICAL USER INTERFACE -{{< /button >}} - -Steps: -1) Download the KNIME installer for your platform via the button above -2) Install KNIME -3) After installation follow this small [video tutorial](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Tutorials/Videos/installOpenMSKNIMEplugin.mp4) to install the OpenMS plugin. Use the following update site URL for -the copy-paste step in the video: https://abibuilder.cs.uni-tuebingen.de/archive/openms/knime-plugin/updateSite/experimental/feature/proteomic_lfq -You can give it any name (e.g. OpenMS EPIFANY Update Site). -4) You will then find EPIFANY (together with the other OpenMS nodes) in the node repository in the lower left of the program. -5) You can create a new workflow with it or import the workflow for our example data. Don’t forget to configure Input File(s) to point to the files on your computer - -### System Requirements: - -Install or build OpenMS (see OpenMS’ requirements at the bottom of the page). You can do it either standalone or as a KNIME plugin. - -### Command Line - -Command line documentation of the tool can be found here (in the UTILS section of the OpenMS documentation under the tool’s name). - -### Limitations - -Contradicting connected components may dictate runtime in certain parameter settings. -Extensive parameter grid search is computationally expensive (may be reduced if there are good estimates). - -### Inputs - -**Direct input for the tool**: An idXML file with indexed and target-decoy annotated proteins and peptides that carry probabilities (e.g. from OpenMS’ IDPosteriorProbability, Percolator, Peptide/iProphet…) - -**General input for a complete protein inference workflow**: Centroided mzMLs from a bottom-up/shotgun data-dependent acquisition experiment. If your data is in “.raw” format you can do the conversion and centroiding with e.g. proteo-wizard (included in every OpenMS installation, too). -Inputs can be replicates and/or fractions. Depending on your goals you could also merge conditions. We advise calculating peptide probabilities on a global (i.e. merged) level, as done in the example workflow. - -*** - -### Download sources and example data - -**Publication:** J. Pfeuffer, T. Sachsenberg, T. M. Dijkstra, O. Serang, K. Reinert, and O. Kohlbacher, “EPIFANY-A method for efficient high-confidence protein inference,” Journal of proteome research, p. 734327, 2019. - -Experimental **installer downloads** until it is merged into the OpenMS Release: [OpenMS experimental archive](https://abibuilder.cs.uni-tuebingen.de/archive/openms/OpenMSInstaller/experimental/feature/proteomic_lfq) - -**Example Data**: You can use the converted mzMLs on our [server](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Tutorials/Data/iPRG2016/) as direct input to the KNIME workflow that is also linked there. The data comes from the [iPRG2016](https://www.ebi.ac.uk/pride/archive/projects/PXD008425) study (sample “B”). You can also use the merged idXML on the server for a direct input to EPIFANY. - -**Large-scale Example Data**: An example for larger scale data can be found on the same [server](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Tutorials/Data/iPRG2016/) (bigDataProbabilities.idXML). Its raw files/mzMLs will be referenced after the dataset is published. - -**Example KNIME Workflow**: Workflows implemented in [KNIME](http://www.knime.com/) are also found on the [server](https://abibuilder.cs.uni-tuebingen.de/archive/openms/Tutorials/Data/iPRG2016/). The outputs of the workflow are compatible with the evaluation script of the [iPRG2016](https://github.com/statisticalbiotechnology/proteoform-standard) study. Experimental update site for the plugin installation in KNIME (copy-paste when adding a new update site under Help->Install New Software): [https://abibuilder.cs.uni-tuebingen.de/archive/openms/knime-plugin/updateSite/experimental/feature/proteomic_lfq](https://abibuilder.cs.uni-tuebingen.de/archive/openms/knime-plugin/updateSite/experimental/feature/proteomic_lfq) - -OpenMS implementation **sources**: [github.com](https://github.com/OpenMS/OpenMS/tree/feature/proteomic_lfq) (Epifany.cpp and BayesianProteinInferenceAlgorithm class) - -**Inference library source**: [Evergreen](https://bitbucket.org/orserang/evergreenforest) diff --git a/content/en/applications/flashdeconv.md b/content/en/applications/flashdeconv.md deleted file mode 100644 index fcf7ed5f..00000000 --- a/content/en/applications/flashdeconv.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: FLASHDeconv -subtitle: Ultra-fast MS1/MS2 deconvolution for top-down proteomics -sidebar: false ---- - -## FLASHDECONV 2.0 BETA+, FINALLY WITH A GUI! - -Finally a GUI is here. You can find the GUI command in [OpenMS path]/bin folder. Go to [OpenMS path]/bin and run FLASHDeconvWizard! FLASHDeconv 2.0 beta+ works for MS1 and MS2 spectral deconvolution and feature deconvolution. It supports various output formats (e.g., *.tsv, *.mzML, *.msalign, and *.feature). FLASHDeconv 2.0 stable version will be officially integrated in OpenMS 2.7.0 released in near future. FLASHDeconv 2.0 beta+ also supports TopPIC identification better than the previous version, by generating all msalign and feature files for TopPIC inputs. We also added spectral merging function to support QTOF dataset analysis and NativeMS dataset analysis. - -Changes: -- FLASHDeconvWizard (GUI) is added! -- FLASHIda support (-in_log option) -- We no longer recommend profile mode spectra. Peak picked spectra (by MSConvert vendor provided peak picking) are recommended as inputs. -- merging_method option is introduced to merge or average MS2 spectra. -- use_ensemble_spectrum option has been removed (replaced by -merging_method). -- target_mass option is added to perform targeted deconvolution (deconvolution quality control is relaxed for target masses) – target_sequence or proteoform option will be soon added. -- min_precursor_snr option is introduced that (currently) only affects msalign and feature files for TopPIC. -- out_topFD_feature option is introduced that outputs feature file for TopPIC. In TopPIC, no need to use -x option with this feature file input. -- Quality measure score (QScore) is added per each deconvolved mass in spectral deconvolution results. QScore is the probability that a mass is identified, learned by a logistic regression (related publication will be added here). Note that it is the probability that the mass is “identified” not “correct.” -- Both MS1 and MS2 deconvolution have been extensively improved (tested by proteoform ID sensitivity, coupled with TopPIC). -- Works well for both centroid and profile spectra. In particular for MS2, centroid spectra should be used. -- Support negative charges (set by -Algorithm:min_charge and -Algorithm:max_charge parameters; see below). -- Parameter set is redefined (see below). -- Batch execution is not supported for FLASHDeconv binary. Separate batch files will be prepared soon. -- Deconvolved spectra may be output in mzml format (-out_mzml [mzml file]). -- Deconvolved MS1 spectra may be output in Promex format (-out_promex [ms1ft file]). -- Deconvolved MS1/2 spectra may be output in TopFD format (-out_topFD [msalign file per MS level]). -- Deconvolved MS1/2 features may be output in TopFD format (-out_topFD_feature [feature file per MS level]). -- Effective harmonic artifact elimination in mass dimension effectively reduces false negatives while keeping true positives. - -Under development - -- Proforma 2.0 support (-target_seq option) -- Deep learning based deconvolution quality measure -- QScore training interface -- Parameter set for different protocols (e.g., Native-MS, HighRes TDP, …) -- Merge into OpenMS 3.0 - -## Installation - -FLASHDeconv installation files (OpenMS-2.x.0-HEAD-, for windows *.exe, for mac *.dmg, and for linux *.deb) and source code (*-src.tar.gz) are found in [here](https://abibuilder.cs.uni-tuebingen.de/archive/openms/OpenMSInstaller/experimental/FLASHDeconvFix/). For the latest version, go to the bottom side of the page and select the most recent installation file. - -## Parameters - -FLASHDeconv basic parameters are found by simply running FLASHDeconv. Only -in and -out are mandatory. FLASH advanced parameters are found by running FLASHDeconv –helphelp. FLASHDeconv parameters have three categories: FLASHDeconv tool parameters, FLASHDeconv algorithm parameters, and FeatureTracing algorithm parameters. Firstly the basic parameters in each category are described, and then the advanced ones are explained. - -### Basic tool parameters: - -- **in**: input file (only *.mzML files are currently accepted). -- **in_log**: Log file generated by FLASHIda (IDA*.log). Only needed for coupling with FLASHIda acquisition (valid formats: ‘log’) -- **out**: *.tsv file for feature level deconvolution results. -- **out_spec**: *.tsv files for spectrum level deconvolution results. Files should be specified per MS level. -- **out_mzml**: *.mzML file for MS1 and MS2 deconvolved spectra. -- **out_promex**: *.ms1ft (promex output format) file. Only MS1 deconvolved masses are written. -- **out_topFD**: *.msalign (TopFD output format) files. Files should be specified per MS level. -- **out_topFD_feature**: *.feature (TopFD feature output format) files. Files should be specified per MS level. -- **min_precursor_snr**: minimum precursor SNR (default 1.0) -- **mzml_mass_charge**: specifies the charge of deconvolved masses (-1, 0, or +1) in mzML output. -- **preceding_MS1_cout**: specifies until how many preceding MS1 spectra precursor mass will be searched in, given an MS2 spectrum. In top-down proteomics, some precursor peaks in MS2 are not part of deconvolved masses in MS1 immediatly preceding the MS2. In such cases, increasing this parameter allows for the search in further preceding MS1 spectra and helps determine exact precursor masses. -- **write_detail**: to write peak information more in detail (in spectrum level deconvolution *tsv files) -- **merging** method: method of spectra merging which should be used. 0: No merging (default) 1: Average gaussian method to perform moving gaussian averaging of spectra per MS level. Effective to increase proteoform ID sensitivity (in particular for Q-TOF datasets). 2: Block method to perform merging of all spectra into a single one per MS level (e.g., for NativeMS datasets) -- **target_mass**: target monoisotopic masses for deconvolution or a txt file containing target masses. Masses are separated by commas. For instance, 100.0,200.0 will target 100.0 and 200.0 Da masses. A plane text file containing the same target mass information may be used instead. For each targeted mass, FLASHDeconv attempts to find the mass from input spectrum file. If spectral peaks corresponding to the target mass, the target mass will be reported regardless of its quality (e.g., IsotopeCosine score). - -### Basic algorithm parameters (with prefix Algorithm: ) - -- **Algorithm:tol**: tolerance for each MS level in PPM. For example, 10.0 15.0 specify 10ppm and 15ppm for MS1 and MS2, respectively. -- **Algorithm:min_mass**: minimum deconvolved mass. -- **Algorithm:max_mass**: maximum deconvolved mass. -- **Algorithm:min_charge**: minimum charge of MS1 peaks. This can be set negative for negative mode MS runs (as in RNA sequencing). For MS2, minimum charge is set to 1. -- **Algorithm:max_charge**: maximum charge of MS1 peaks. This can be set negative for negative mode MS runs (as in RNA sequencing). For MS2, maximum charge is set to its precursor charge. -- **Algorithm:min_isotope_cosine**: Cosine threshold between avg. and observed isotope pattern for MS1, 2, … - -### Basic FeatureTracing parameters (with prefix FeatureTracing: ) - -- **FeatureTracing**:mass_error: mass tolerance for feature tracing. Default mass tolerance unit is ppm. -- **FeatureTracing**:mass_error_unit: mass tolerance unit for feature tracing. ppm (default) or da. -- **FeatureTracing**:min_sample_rate: minimum fraction of scans along the feature trace that must contain a peak. To raise feature detection sensitivity, lower this value close to 0. -- **FeatureTracing**:min_trace_length: minimum expected length of a feature in second. - -### Advanced tool parameters: - -- **max_MS_level**: specifies the maximum MS level. -- **use_RNA_averagine**: if set to 1, RNA averageine model is used instead of protein model. - -### Advanced algorithm parameters (with prefix Algorithm: ) - -- **Algorithm:min_mz** : minimum m/z value in Th. -- **Algorithm:max_mz** : maximum m/z value in Th. -- **Algorithm:min_rt** : minimum retention time in seconds. -- **Algorithm:max_rt** : maximum retention time in seconds. -- **Algorithm:min_peaks** : minimum number of peaks of consecutive charge states per MS level.(e.g., -min_peaks 4 2 to specify 4 and 2 for MS1 and MS2, respectively). This affects only for peaks of highly charged peaks (>8). The peaks of low charges are detected based on m/z distance between isotopes. -- **Algorithm:min_mass_count** : minimum number of deconvolved mass per spectrum. Only used for real time deconvolution. -- **Algorithm:min_intensity** : minimum peak intensity to consider. Default is 100 to remove extremely low intensity peaks (e.g., in Bruker spectra) -- **Algorithm:rt_window** : retention time window for MS1 deconvolution. - -### Advanced FeatureTracing parameters (with prefix FeatureTracing: ) - -- **FeatureTracing:quant_method**: Method of quantification for mass traces. For LC data ‘area’ is recommended, ‘median’ for direct injection data. ‘max_height’ simply uses the most intense peak in the trace. -- **FeatureTracing:max_trace_length**: maximum expected length of a feature in second. -- **FeatureTracing:min_isotope_cosine**: Cosine threshold between avg. and observed isotope pattern for mass features. If not set, controlled by -Algorithm:min_isotope_cosine_ option. - -## Running FLASHDeconv with GUI - -GUI command is found under [OpenMS path]/bin directory. From the bin directory, type - -./FLASHDeconvWizard - -And this window pops up. - -
{{< figure src="/images/content_images/Screen-Shot-2022-03-17-at-12.28.30-PM.png" >}}
- -From the “LC-MS files” menu you can select (possibly multiple) mzML files to analyze. The selected files are analyzed with the same parameter set. - -Then if you go to the “Run FLASHDeconv” menu, you can control all the parameters and output options. - -
{{< figure src="/images/content_images/Screen-Shot-2022-03-17-at-12.30.17-PM.png" >}}
- -The default output folder is [home directory]/FLASHDeconvOut folder. You may change this by using Browse button in the right side. Below we have four toggle output buttons. - -If “masses per spectrum” is selected (selected by default), spectrum level deconvolution results (per MS level) are generated (in tsv format). In the command line, this is controlled with -out_spec option, and users must specify file name per MS level. But in GUI, simply activating this “masses per spectrum” button will set the output spectrum file name per MS level automatically. - -If “mzML” is selected, the deconvolved spectra are generated in mzML format. - -“Promex (*.ms1ft)” triggers the Promex format output generation (only for MS1), and “TopFD (*.msalign,*.feature)” triggers the TopFD format output generation (both msalign and feature formats). Again, these buttons override -out_promex, -out_topFD, and -out_topFD_feature in the command line and automatically set the output file names. - -The box below the toggle buttons controls the parameters. In default it shows only basic parameters. If the “Show advanced parameters” toggle button is activated, the advanced parameters will appear. - -Lastly, the “Log” menu shows the log from FLASHDeconv. During or after FLASHDeconv run, one may check the log from FLASHDeconv from this menu. Here, also the command line commands corresponding to the current parameter selection by GUI also appear for reference and future use. - -## Running FLASHDeconv on command line - -Runnable FLASHDeconv file can be found under [OpenMS path]/bin directory. - -The mandatory options are -in and -out options. FLASHDeconv 2.0 only takes mzML file as its input. Basic parameters could be adjusted by the user according to instrumental setup. For input mzML file conversion from raw file, we recommend to use MSConvert with vendor provided peak picking methods. - -For example if one wants to deconvolve /User/me/data/infile.mzml and get the result /User/me/out/outfilefeature.tsv, - -one could run FLASHDeconv by typing as follows in the directory where FLASHDeconv is installed. - -./FLASHDeconv -in /User/me/data/infile.mzml -out /User/me/out/outfilefeature.tsv - -Output files - -- Deconvolved feature file (*.tsv) specified by -out -- (optional) Deconvolved MSn spectra files (*.tsv) specified by -out_spec -- (optional) Deconvolved mzML spectra file (*.mzML) specified by -out_mzml -- (optional) Deconvolved MS1 in promex output format (*.ms1ft) specified by -out_promex -- (optional) Deconvolved MSn spectra files in topfd output format (*.msalign) specified by -out_topFD -- (optional) Deconvolved MSn feature files in topfd output format (*.feature) specified by -out_topFD_feature - -### Example datasets - -Mass spectrometry datasets(*.raw and *.mzML) and corresponding results have been uploaded to MassIVE (https://massive.ucsd.edu) and are available under accession number [MSV000084001](https://massive.ucsd.edu/ProteoSAFe/dataset.jsp?task=89c42bfd08474bcd901ceaa3ace97573). - diff --git a/content/en/applications/flashida.md b/content/en/applications/flashida.md deleted file mode 100644 index 4b9f2219..00000000 --- a/content/en/applications/flashida.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: FLASHIda -subtitle: Intelligent data acquisition for top-down proteomics -sidebar: false ---- - -## FLASHIda - -FLASHIda is an intelligent online data acquisition algorithm for top-down proteomics (TDP) that ensures the real-time selection of high-quality precursors of diverse proteoforms. FLASHIda combines fast decharging algorithms in FLASHDeconv and machine learning-based quality assessment to identify optimal precursors for fragmentation. Currently the C# source code and instruction of FLASHIda is available in here under a BSD three-clause license. We are working on merging FLASHIda into OpenMS. - -{{< notice info >}} -FLASHIda beta version (under construction) -{{< /notice >}} diff --git a/content/en/applications/flashquant.md b/content/en/applications/flashquant.md deleted file mode 100644 index 9f69026f..00000000 --- a/content/en/applications/flashquant.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: FLASHQuant -subtitle: Quantification for top-down proteomics -sidebar: false ---- - -FLASHQuant performs MS1-level label-free quantification data analysis in top-down proteomics with an automatic overlapping signal resolution method. - -{{< button github "https://github.com/JeeH-K/OpenMS/tree/feature/FLASHQuant">}} -Check it out on Github! -{{< /button >}} - -Now binary installer files for all platforms are available here: (Please use the latest version) -{{< button normal "https://abibuilder.cs.uni-tuebingen.de/archive/openms/OpenMSInstaller/experimental/feature/FLASHQuantDevelop/">}} -Download Page -{{< /button >}} - -### Input/Output -- Input: Centroided MS1 scans (\*.mzML) -- Output: Quantified proteoforms in a tab-separated file (\*.tsv); optionally, OpenMS LC-MS features output (\*.featureXML) - - for each proteoform, mono-isotopic/average mass, retention time range, charge range, different types for quantity values, and isotope cosine similarity score are provided. -- Parameters can be found by running FLASHQuant using the "--helphelp" option. - -### Consensus FeatureGroup (putative proteoform) detection -FLASHQuant executes per LC-MS run; thus, we provide an additional simple tool for detecting consensus feature groups (i.e., jointly detected proteoforms) among multiple scans (i.e., technical replicates) named **ConsensusFeatureGroupDetector**. Retention time and mass tolerance can be adjusted with parameters. - -### GUI -FLASHQuant and (consecutive) ConsensusFeatureGroupDetector can be executed easily with the GUI, **FLASHQuantWizard**. -
{{< figure src="/images/content_images/FLASHQuantWizard.png" >}}
- -To learn how to run the programs, please check FLASHDeconv page for details. \ No newline at end of file diff --git a/content/en/applications/metaprosip.md b/content/en/applications/metaprosip.md deleted file mode 100644 index 77b272ac..00000000 --- a/content/en/applications/metaprosip.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: MetaProSIP -subtitle: Stable isotope probing -sidebar: false ---- - -## MetaProSIP: automated inference of elemental fluxes in microbial communities - -{{< notice info >}} -MetaProSIP has been fully integrated into OpenMS. No additional installer is required anymore. -{{< /notice >}} - -**Update: MetaProSIP now supports labeling experiments with heavy water (D, 18O)** - -Download an updated KNIME workflow: [here](https://sourceforge.net/projects/open-ms/files/Papers/MetaProSIP/) - -Advanced workflow including mass recalibration, alignment, and ID pooling: [here](https://sourceforge.net/projects/open-ms/files/Papers/MetaProSIP/) - -### Requirements - -- High-Resolution MS, CID, or HCD MS2 -- Developed and tested on orbitrap instruments -- MS1 and MS2 need to be centroided (either on acquisition, conversion or in a workflow using the TOPP tool HiResPeakPicker) - -For additional information on sample handling and acquisition please refer to the original MetaProSIP publication. - -### Publications: - -MetaProSIP: automated inference of stable isotope incorporation rates in proteins for functional metaproteom - -
-[Bibtex] -
@article{sachsenberg2014metaprosip,
-title={MetaProSIP: automated inference of stable isotope incorporation
- rates in proteins for functional metaproteomics},
-author={Sachsenberg, Timo and Herbst, Florian-Alexander and Taubert, Martin and Kermer, Ren{\'e}
- and Jehmlich, Nico and von Bergen, Martin and Seifert, Jana and Kohlbacher, Oliver},
-journal={Journal of proteome research},
-year={2014},
-publisher={ACS Publications}
-}
-
-
- -### FAQ: - -- Q: I get an “Error: Process returned with a non-zero status.“ “Error: File not found (the file ‘C:/Users/USER/AppData/Local/Temp/cluster_result_15NMix_1_3_a_picked_yD9N.dat’ could not be found)“. -- A: Make sure that a suitable R version (32 bit) and the R packages are installed and add the directory to your PATH environment variable. -- Q: What do the columns in the group output refer to -- A: See [this](https://docs.google.com/spreadsheets/d/1i8JoLFenmsUlkh4dYSsu1AUGXKGczPPSX7E7rXKYLhA/edit?usp=sharing%20for%20a%20detailed%20explanation) annotated example sheet - -**If you want to use the original binaries and data of the original MetaProSIP publication you may download the files below:** - -### Raw files: -The mass spectrometry proteomics data have been deposited to the ProteomeXchange Consortium (http://proteomecentral.proteomexchange.org) via the PRIDE partner repository with the dataset identifier [PXD000382](https://www.ebi.ac.uk/pride/archive/projects/PXD000382). - -### Download sample data and TOPPAS workflows: -[MetaProSIP sample data](http://www-bs2.informatik.uni-tuebingen.de/services/sachsenb/MetaProSIP/15N_Mix_sample.zip) -Please note that experimental data (mzML files) have already been picked to reduce the size of the file. - -Example output and quality control report for 15N mix dataset (replicate a, 1:3): -[MetaProSIP quality control report](http://open-ms.sourceforge.net/wp-content/uploads/2013/08/MetaProSIP_quality_control_report.zip) - -Download Win64 installer of the original publication: -[Win64 installer](http://www-bs2.informatik.uni-tuebingen.de/services/sachsenb/MetaProSIP/OpenMS-1.11_MetaProSIP_Win64_setup.exe) - -{{< notice info >}} -Note that MetaProSIP requires R installed and accessible via the path environment variable. -{{< /notice >}} - -Additionally, following R libraries need to be installed: -1. gplots -2. fpc -3. clValid - - diff --git a/content/en/applications/mhcquant.md b/content/en/applications/mhcquant.md deleted file mode 100644 index 0e5c3701..00000000 --- a/content/en/applications/mhcquant.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: MHCquant -subtitle: Quantification and identification workflow for MHC peptides -sidebar: false ---- - -**MHCquant: Identify and quantify peptides from mass spectrometry raw data** - -MHCquant is an nf-core best-practice bioinformatics analysis pipeline used for quantitative processing of data dependent (DDA) peptidomics data. - -It was specifically designed to analyze immunopeptidomics data, which deals with the analysis of affinity-purified, unspecifically cleaved peptides presented on major histocompatibility complex (MHC) molecules. - -This analysis has central implications for clinical research and T cell-centric immunotherapies in the context of cancer vaccines and personalized medicine. - -
{{< figure src="/images/content_images/applications/mhcquant2.png" >}}
- -The workflow is based on the OpenMS C++ framework for computational mass spectrometry. Spectrum files (mzML/Thermo raw/Bruker tdf) serve as inputs and a database search (Comet) is performed based on a given input protein database. Peptide properties are predicted by MS²Rescore, which combines retention time prediction (DeepLC), fragment ion intensity prediction (MS²PIP), and ion mobility prediction (Ionmob) to dramatically boost immunopeptide identification rates. FDR rescoring is then applied using Percolator or Mokapot based on a competitive target-decoy approach (reversed decoys). The pipeline supports both local FDR control (per sample-condition group) and global FDR control (across all samples), providing flexibility for different experimental designs. - -Moreover, binding predictions on specified alleles using various binding prediction tools can be directly run on all matched PSMs to directly annotate MHC binders and non-binders and calculate a refined FDR on a subset of PSMs leading to higher identification rates. For label-free quantification, all input files undergo identification-based retention time alignment and targeted feature extraction. The pipeline can also generate spectrum libraries suitable for DIA-based searches as well as computing consensus epitopes using epicore. - -In addition, mutation-informed fastas can be specified to search for patient-specific neo-epitopes. - -The pipeline is built using Nextflow, a workflow tool to run tasks across multiple compute infrastructures in a very portable manner. It comes with docker / singularity containers making installation trivial and results highly reproducible. - -The Nextflow Workflow is available at: - -https://github.com/nf-core/mhcquant - -## Citation - -If you use MHCquant, please cite: - -Scheid et al. (2025). MHCquant2 refines immunopeptidomics tumor antigen discovery. Genome Biology. diff --git a/content/en/applications/nase.md b/content/en/applications/nase.md deleted file mode 100644 index 2caf6032..00000000 --- a/content/en/applications/nase.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: NASE -subtitle: Nucleic acid search engine -sidebar: false ---- - -NASE is now included in OpenMS release, 2.5 or later. - -Requirements: - -- HCD (or ETD) data of RNA oligonucleotides acquired on a high-resolution mass spectrometer -- Fragment spectra (MS/MS) need to be centroided (either on acquisition, conversion, or in a workflow using the TOPP tool PeakPickerHiRes) -- Developed and tested on Linux (Ubuntu 18.04 and 18.10) systems with data from orbitrap instruments -- Operating system: OpenMS installers have been tested on Ubuntu Linux 18.04, Windows 7/8/10, and macOS 10.12-10.14. If you experience any troubles don’t hesitate to contact the OpenMS team or open an issue in the OpenMS [GitHub repository](https://github.com/OpenMS/OpenMS/issues). - -### Publication: - -Wein, S., Andrews, B., Sachsenberg, T. et al. A computational platform for high-throughput analysis of RNA sequences and modifications by mass spectrometry. Nat Commun 11, 926 (2020). https://doi.org/10.1038/s41467-020-14665-7 - -### Example data: - -Mass spectrometry data and analysis results from four validation datasets have been deposited to the ProteomeXchange Consortium (http://proteomecentral.proteomexchange.org) via the PRIDE partner repository with the dataset identifiers [PXD012094](https://www.ebi.ac.uk/pride/archive/projects/PXD012094), [PXD016308](https://www.ebi.ac.uk/pride/archive/projects/PXD016308), [PXD016323](https://www.ebi.ac.uk/pride/archive/projects/PXD016323), and [PXD016328](https://www.ebi.ac.uk/pride/archive/projects/PXD016328). - -### Example workflow: - -{{< button normal "https://sourceforge.net/projects/open-ms/files/Papers/NASE/NME1_pipeline.toppas/download" >}} -Example TOPPAS workflow -{{< /button >}} - -This workflow can be used to reproduce the results from the [PXD016308](https://www.ebi.ac.uk/pride/archive/projects/PXD016308) dataset. Both input files and expected output files are available in the dataset. Runtime should be less than a minute. Usage instructions for TOPPAS can be found here. diff --git a/content/en/applications/nuxl.md b/content/en/applications/nuxl.md deleted file mode 100644 index af8df91f..00000000 --- a/content/en/applications/nuxl.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: NuXL -subtitle: Protein-RNA and DNA cross-linking -sidebar: false ---- - -## Introduction - -NuXL is a novel tool for protein-RNA and DNA cross-linking studies. It is available as a -[stand-alone tool](#installation-as-stand-alone-tool) and as a [Proteome Discoverer community node](#installation-for-proteome-discoverer) or as a [web application](#run-as-web-application) that doesn't require you to install additional software. This guide outlines the steps to install NuXL, set up your analysis, and interpret your data using the provided tools and workflows. - -
{{< figure src="/images/content_images/applications/NuXL.png" >}}
- -### Requirements: - -- HCD data acquired on a high-resolution MS -- Developed and tested on orbitrap instruments (including Velos, Lumos, and Astral) - -## Installation for Proteome Discoverer -NuXL is currently compatible with Proteome Discoverer 3.0 and 3.1. - -**For PD 3.1 you need to:** -1. Download and install `PDNuXLNode_3_1.msi` from https://github.com/Arslan-Siraj/PDNuXLNodeInstaller/releases/tag/v0.0.3 -2. The installer will automatically detect your Proteome Discoverer installation directory and deploy the NuXL nodes correctly. - -**For PD 3.0 you need to:** -1. Download and install `PDNuXLNode_3_0.msi` from https://github.com/Arslan-Siraj/PDNuXLNodeInstaller/releases/tag/v0.0.2 -2. The installer will automatically detect your Proteome Discoverer installation directory and deploy the NuXL nodes correctly. - -> **Note:** After installation, open PD, go to `Administration -> Manage Licenses`. Click `Scan for Missing Features` on top of the list of available licenses on the right side of the PD window. - -**Troubleshooting** - - Sometimes the operating system blocks the execution of .dlls copied from an external source. In these cases, it is necessary to go to the folder containing the .dll, right-click on it, choose properties, and then security. The dialog offers an option to unblock the .dll from execution. - -**Manuall installation** - - If the installer fails, see the manual installation guide: https://github.com/Arslan-Siraj/PDNuXLNodeInstaller - -### Setting Up Your Study - -1. **Create a New Study:** - - Open Proteome Discoverer - - Create a new study, define a root directory and study name (e.g., `NuXL Study`). If you set up your first NuXL study, leave `(empty workflow)` - -2. **Adding a Protein Database:** - - Use the `Administration' -> `Maintain FASTA file` option in Proteome Discoverer to add new protein databases to your project. Once configured, you can select this database in the NuXL node of the processing workflow. - -### Analysis Workflows - -1. **Generating an analysis Template:** - - Click on `New Analysis`. Note: Once completed, you will later find the analysis template in "Open Analysis Template". - - In the analysis window you can set up 'processing' and 'consensus' workflows for NuXL - - **Processing Workflow** - - Click on Edit in the 'Processing Step' window - - If you want to use a preconfigured workflow click `Open` and select the template of your choice. - - For a minimal workflow, add and connect `Spectrum Files`, `Spectrum Selector`, and `NuXL` nodes. Note: You will find the NuXL node under the `Sequence Database Search` category. - -
{{< figure src="/images/content_images/applications/NuXL_minimalwf.png" >}}
- - - Important settings in `Spectrum Selector`: set `MS Order` to `Any` to ensure MS1 spectra are not discarded. - - Configuring NuXL: - - By clicking on the NuXL processing node symbol in the workflow tree, you can adapt settings Note: If you click on `Show Advanced Parameter`, you will find additional parameters. - - NuXL provides `Presets` for different crosslinking mass spectrometry protocols. For most use cases, users just need to select a preset that fits their experimental protocol. In most cases, default parameters work reasonably well but results can sometimes be improved by tweaking other parameters. - -
{{< figure src="/images/content_images/applications/NuXL_params.png" >}}
- - - Other Parameters: - - `Peptide identification` -> `Precursor mass tolerance` and `Fragment mass tolerance`: Adjust the fragment search mass accuracy according to your instrument. - - `Peptide identification` -> `Static modification` and `Dynamic modification`: Note: Standard fixed modification (e.g., `Carbamidomethyl (C)`) should be specified as Dynamic if the expected amino acid can form crosslinks, as otherwise these identifications would be lost. - - `Cross-links` -> `Length`: Depending on your nuclease digestion protocol, you might expect different lengths of nucleotide adducts. NuXL is trained and tested on nucleotide adducts of 1-4 nucleotide length. For properly digested samples we recommend lowering the length value to 2. In most cases, the default value works well. - - `Cross-links` -> `Sequence`: If your experiment involves a specific RNA or DNA species with a known sequence, it can be useful to enter the sequence in this field. The node then only considers possible nucleotide adduct combinations, potentially reducing false positives. - - `Peptide identification` -> `Peptide length min`: For complex proteome searches, we recommend using the value `6` as the minimum amino acid count. For complexes of few proteins, that would allow manual validation this can be further decreased. - - `Peptide identification` -> `Peptide length max`: We recommend setting a limit of ~30 for complex proteome-wide searches. - - `Peptide identification` -> `Missed cleavages`: If significant crosslinking is expected to occur and create missed cleavages, the value can be increased up to 3. - - - Advanced users: - - Users can define their own fragmentation rules and crosslink adduct settings. Select `none` in `Presets`. You can then define `Fragment adducts` and `Modifications` in advanced parameters according to your protocol in the following format: `[target nucleotide]:[formula]` or `[precursor adduct] ->[fragment adduct formula];[name]`. NuXL will use this information to generate all chemically feasible precursor adduct and fragment adduct combinations. - - `Cross-link identification` -> `Can cross-link`: If you expect only a single or subset of nucleotides to be amenable to crosslinking, set this up here. Nucleotides are specified by their one-letter code without a separator (e.g. UA for U and A nucleotides) - - `Cross-link identification` -> `Cysteine adduct`: If DTT is present during UV irradiation, it can generate additional crosslinks including a 152 Da linker. For more information see 1. If needed to be identified, we recommend specifying the composition of the linker in modifications and 'Fragment adducts' instead. Set this flag to true, if the 152 adduct is expected. - - `Cross-links` -> `Target nucleotides`: Sum formulas of the target nucleotides of the crosslink. Heavy labeled atoms are specified with parenthesis in front with the nominal mass of the respective isotope (e.g. (13)C, (15)N). - - - **Consensus Workflow**: Click on Edit in the 'Consensus Step' window - - Connect an `MSF Files` node to the 'NuXL Consensus' node. - - Set `Spectra to Store` to `All` in the MSF Files node. - -
{{< figure src="/images/content_images/applications/NuXL_minimalcwf.png" >}}
- - -3. **Running the Workflow:** - - Drag and drop your Thermo Scientific .raw files onto the Processing Step in the Analysis tab - - Important: Ensure the "By File" checkbox is selected. - - Save the template - - Run the workflow - -
{{< figure src="/images/content_images/applications/NuXL_files.png" >}}
- - -### Post-Analysis - -You can monitor the progress of your analysis by opening `Administration` -> `Show Job Queue`. - -1. **Viewing Results:** - - Result files are not exported automatically. All results are listed under the Analysis Results tab. You can view your results in Proteome Discoverer by double-clicking the result file. - -
{{< figure src="/images/content_images/applications/NuXL_result_file.png" >}}
- - - Results are displayed in several tabs. You can view: `Proteins`, `PSMs and NuXL`, `MS/MS Spectrum Info`, `Input Files`, `Specialized Traces`, and `Study Information`. Depending on your consensus workflow, you might see additional tabs. - - The `PSMs and NuXL` table provides information about all peptide and crosslink spectrum matches (PSMs and NuXLs, respectively). Key columns include `Annotated Sequence`, `Modifications`, `Protein Accessions`, `q-value` (CSM-level q-value). We recommend to filter your results for 1% CSM-level FDR (`q-value` <= 0.01). - -
{{< figure src="/images/content_images/applications/NuXL_visualize.png" >}}
- -2. **Exporting Data:** - - To export the results for further analysis in spreadsheet software (e.g., Microsoft Excel), navigate to `File -> Export -> To Microsoft Excel`. - -3. **Quality Assessment:** - - You can manually validate spectra quality by viewing annotated spectra. To do so, click on the "Show Spectrum" button in the 'PSM and NuXL' tab. - - Assess features such as peptide sequence coverage and the presence of key ions. - -Note: Please take a look at the Proteome Discoverer user guide for general information on Proteome Discoverer and additional nodes. - -## Installation as stand-alone tool - -NuXL is developed using the OpenMS framework. Once installed, it is accessible through the OpenNuXL tool. OpenMS offers a suite of tools for graphical interfaces and command-line operations, compatible with Windows, MacOS, and Linux platforms. This guide focuses specifically on using the graphical application on Windows. - -Alongside NuXL, the following core OpenMS software modules are also available and will be utilized in this tutorial. You can click on each term to access the respective documentation: - -TOPPAS: A workflow design and processing tool that allows for the automated analysis of mass spectrometry data. -TOPPView: A visualization tool that enables detailed analysis and review of mass spectrometric data. -This step-by-step guide ensures you can leverage the full capabilities of NuXL and the associated OpenMS modules efficiently. - -### Downloading the OpenMS installer with NuXL. -Download the OpenMS-NuXL installer from https://github.com/timosachsenberg/OpenMS/releases/tag/NuXLPublication - -### Preparing the input files: Raw data conversion. - -NuXL is compatible with Thermo raw files and also supports files that have been converted to the mzML format using freely available tools such as ProteoWizard's msconvert. If you provide NuXL with Thermo raw files, it automatically utilizes the ThermoRawFileParser from Thermo Scientific™ for efficient data conversion. This flexibility ensures seamless integration with your existing data processing workflows. - -### Getting started – setting up a basic processing workflow. - -Advanced users have the option to run the OpenNuXL tool directly from the command line, offering precise control over the tool's functionality. - -For those who prefer a more user-friendly setup, TOPPAS can be utilized to create streamlined workflows. - -To begin, launch an empty workflow window by running the TOPPAS pipeline tool. This approach allows you to design and manage your workflows visually, making complex configurations more manageable and accessible. - -To build a workflow in TOPPAS, utilize the drag-and-drop functionality. You can start by selecting the required tools from the 'TOPP tools' pane on the left side of the TOPPAS window. A basic workflow typically includes the following components: - -- **Input Files Node**: Designate nodes for input files labeled ``. -- **Output Files Node**: Set up nodes for output files labeled ``. -- **OpenNuXL Node**: This is found under the 'utils' collection and serves as the central processing node. - -A workflow must include at least two input nodes. To connect these input nodes to the OpenNuXL node: -1. Drag each node and drop it onto the workflow window. -2. Connect the nodes to establish a connection. - -Configure `File: database [fasta]` for one node and `File: in [mzML, raw]` for the other node as parameters in the pop-up window. As output options, you have the choice to select idXML (`File: out [idXML]`, for spectrum annotations in TOPPView), tsv (`File: out_tsv [tsv]`), or xls (`File: out_xls [xls]`) output file formats. - -### Configuring Percolator in the OpenNuXL Node - -To specify the path to the postprocessing tool Percolator within your workflow: - -1. **Access the Configuration Menu**: - - Double-click on the OpenNuXL node. This will open the configuration menu. - -2. **Set the Path for Percolator**: - - Find the field labeled `percolator_executable`. - - Enter the absolute path to the `percolator.exe` file, typically found in the OpenMS installation directory at `\share\OpenMS\THIRDPARTY\Percolator`. - -3. **Save Configuration Changes**: - - After setting the path, click 'Ok' to save the modifications to the node settings. - -4. **Save the Pipeline**: - - Go to the 'File' menu. - - Choose 'Save' to preserve your entire pipeline configuration. - -These steps ensure that Percolator is properly integrated into your workflow, enhancing the robustness of data post-processing through the OpenNuXL tool. - -With this step, the initial configuration of the OpenNuXL is completed and the pipeline can be saved from `File -> Save as` and used as a template. - -
{{< figure src="/images/content_images/applications/NuXL_toppas_basic.png" >}}
- -### Run Configuration - -**Preset Selection**: Select a nucleotide adduct preset according to your workflow. - -Depending on your experiment, you can select an RNA or DNA preset or define your own adduct settings for custom protocols: - -
{{< figure src="/images/content_images/applications/NuXL_toppas_presets.png" >}}
- -To view the MS1 (modifications) and MS2 (fragment_adducts) of the specific presets you can tick the box for advanced parameters and scroll to your preset of interest. - -**Advanced Users: Setting up Custom Nucleotide Adducts** - -In case none of the available presets matches your workflow, custom presets can be defined by defining 'target_nucleotides', 'can_cross-link', 'fragment_adducts', and 'modifications'. - If no preset is selected ('none'), you can add custom sum formulae in the same format as shown in advanced parameters for the presets (format: `[target nucleotide]:[formula]` or `[precursor adduct] ->[fragment adduct formula];[name]; - -
{{< figure src="/images/content_images/applications/NuXL_toppas_adducts.png" >}}
- -**Other settings** - -Numerous other parameters can be specified to fine tune the search process (Table T1). In most cases defaults combined with proper presets should work. - -**Table T1. OpenNuXL Parameters Editable by the User** - -| Parameter | Description | Comment | -|----------------------------|--------------------------------------------------|---------------------------------------------------------------| -| `NET_executable` | Path to .NET framework executable | Only required on linux and mac. | -| `ThermoRaw_executable` | Path to ThermoRawFileParser executable | | -| `database` | The protein database used for identification | | -| `out_tsv` | tsv output file | | -| `out_xls` | XL output file with group q-values calculated at the XL PSM-level. Generated for the highest FDR threshold in report:xlFDR. | | -| `output_folder` | Store intermediate files (and final result) also in this output folder | Convenient for TOPPAS/KNIME/etc. users because these files are otherwise only stored in tmp folders. | -| `percolator_executable` | Path to percolator executable of the installation e.g. 'percolator.exe' | If no percolator results are reported (“perc” idxml files) check if the path is correctly filled in. | -| `filter` | Filtering steps applied to results | | -| `window_size` | Peak window for spectra preprocessing | | -| `peak_count` | Retained peaks in peak window | | -| `log` | Name of log file (created only when specified) | | -| `debug` | Sets the debug level | | -| `threads` | Sets the number of threads allowed to be used by the TOPP tool | | -| `no_progress` | Disables progress logging to command line | | -| `force` | Overwrites tool-specific checks | | -| `test` | Enables the test mode (needed for internal use only) | | -| `precursor -> mass_tolerance` | Precursor mass tolerance (+/- around precursor m/z) | Adjust the precursor search mass accuracy according to the used instrument. | -| `precursor -> mass_tolerance_unit` | Unit of precursor mass tolerance | | -| `precursor -> min_charge` | Minimum precursor charge to be considered. | | -| `precursor -> max_charge` | Maximum precursor charge to be considered. | | -| `precursors -> isotopes` | Corrects for mono-isotopic peak misassignments. (E.g.: 1 = prec. may be misassigned to first isotopic peak) | | -| `fragment -> mass_tolerance` | Fragment mass tolerance (+/- around fragment m/z) | Adjust the fragment search mass accuracy according to the used instrument. | -| `fragment -> mass_tolerance_unit` | Unit of fragment mass tolerance | | -| `modifications -> fixed` | Fixed modifications, specified using UniMod (www.unimod.org) terms, e.g. 'Carbamidomethyl (C)' | Standard fixed modification (e.g. 'Carbamidomethyl (C)') should be specified as variable, if the expected amino acid can form crosslinks, as otherwise these identifications would be lost. | -| `modifications -> variable`| Variable modifications, specified using UniMod (www.unimod.org) terms, e.g. 'Oxidation (M)' | | -| `modifications -> variable_max_per_peptide` | Maximum number of residues carrying a variable modification per candidate peptide | | -| `peptide -> min_size` | Minimum size of a peptide considered in the search | For complex proteome searches, we recommend using 5 as minimum amino acid count. | -| `peptide -> max_size` | Maximum size - -**Note**: Each `.raw`/`.mzML` file will be processed separately and requires one database file to be added. - -As an alternative to loading database files via an `` node, you can define the database in the OpenNuXL node by double-clicking the value field of the database parameter and selecting the respective database (Figure Database Configuration). - -
{{< figure src="/images/content_images/applications/NuXL_toppas_db.png" >}}
- -**Figure Database Configuration**: Within the OpenNuXL node, select the sequence database. - -**Advanced Users**: In case you would like to combine several files in one search, we suggest using the OpenMS node ``, which can be found in 'File Handling'. The node needs to be combined with ``+`` and ``. - -
{{< figure src="/images/content_images/applications/NuXL_toppas_merge.png" >}}
- -**Figure Workflow to merge `.mzML` files**: The `` node can be used as shown in this scheme for merging `.mzML` files e.g., from multiple fractions. - -To export FDR-filtered result files, specify the absolute path for an output folder by double-clicking the value field of the `output_folder` parameter and pasting your selected path. - -
{{< figure src="/images/content_images/applications/NuXL_toppas_outputfolder.png" >}}
- -**Figure Output folder path**: To generate FDR filtered result files, a path needs to be specified. - -### OpenNuXL Pipeline Execution - -After selection of analysis parameters and defining input files, the workflow can be executed by selecting 'Pipeline' -> 'Run' or pressing F5. A popup window asking to specify the output directory appears. Once specified, OpenNuXL analysis is started. All current tasks are displayed in the Log window below the workflow window. Unfiltered result files will be saved in the `TOPPAS_out` folder, which is automatically generated in the selected path. - -**Figure Output Directory.**: Upon pipeline execution, the displayed pop-up window appears to enter the absolute path of the output folder. - -
{{< figure src="/images/content_images/applications/NuXL_toppas_log.png" >}}
- -**Figure OpenNuXL Log window.**: The progress of OpenNuXL search is shown. - -### Result File Access - Visualization of Crosslinked Peptide-(Oligo)Nucleotide Spectra Using TOPPView - -If executed on `.raw` files, the OpenNuXL node will create corresponding `.mzML` files in the output directory (defined as in Figure Output Directory). For visualization of annotated spectra, open `.mzML` files in TOPPView. By default, double-clicking on `.mzML` files should automatically open the file in TOPPView. Once it is loaded, spectrum annotations matched by OpenNuXL can be added by loading `.idXML` files generated by the tool. Select: 'Tools' -> 'Annotate with peptide identifications'. See Figure Annotated MS2 Spectrum for an annotated MS2 spectrum of a UV-crosslinked peptide-RNA(oligo)nucleotide. To add/remove columns of the result grid 'identifications' below the spectrum window, right-click on the column header and a list of potential columns appears that you can choose from (Figure Custom columns). - -**Note**: The FDR-controlled results for crosslinked and non-crosslinked peptides are available in the `output_folder` as defined in the OpenNuXL node. Results contain `.csv`, `.tsv`, and `.idXML` files. File suffixes indicate whether percolator rescoring was performed ('_perc'), on which level results are reported ('_proteins', '_peptides', or '_XLs'), and for which FDR the results were filtered (e.g., FDR of 1%, '_0.0100'). The '_ambiguous_masses.csv' file contains precursor ion masses that match to... - -**Tip**: You can export the TOPPView inbuilt result table by clicking on 'Export table' below the result grid. - -
{{< figure src="/images/content_images/applications/nuxl_tv_vis.png" >}}
- -**Figure Annotated MS2 spectrum**: of a UV-crosslinked peptide-RNA(oligo)nucleotide displayed in TOPPView. The spectrum window shows OpenNuXL peak annotations in color (green and red) and unmatched peaks in black. The window contains the peptide sequence showing coverage with annotated fragment peaks. - -
{{< figure src="/images/content_images/applications/nuxl_tv_columns.png" >}}
- -**Figure Custom Columns**: By right-clicking on the result grid header, a pop-up window appears that allows choosing different columns to be added/removed. - -To export an image of the annotated spectrum, right-click on the spectrum and choose 'Save' -> 'As image'. You then have the option to export the image as a vector or raster image. - -**Tip**: You can add annotations manually by right-clicking on a peak. You can choose to define a label or an annotation ('Add label', 'Add peak annotation') and/or to display the m/z value ('Add peak annotation mz'). - -## Run as Web-Application -Please visit https://abi-services.cs.uni-tuebingen.de/nuxl/ to try out (or download) the experimental NuXL web app. - -
{{< figure src="/images/content_images/applications/NuXL_webapp.jpg" >}}
- - diff --git a/content/en/applications/openpepxl.md b/content/en/applications/openpepxl.md deleted file mode 100644 index 7e84e60a..00000000 --- a/content/en/applications/openpepxl.md +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: OpenPepXL -subtitle: Protein-protein cross-linking -sidebar: false ---- - -## OpenPepXL: an open source peptide cross-link identification tool - -OpenPepXL is a protein-protein cross-link identification tool implemented in C++ as part of OpenMS. It works with all uncleavable labeled and label-free cross-linkers but not (yet) with cleavable ones. - -## Requirements - -The current version of OpenPepXL, version 1.1 is available as part of OpenMS 2.5. Installers for Windows, MacOS and Linux can be found here. OpenPepXL can be used effectively on a desktop computer with 16BG of memory. - -## Input and output - -As input OpenPepXL requires - -- mzML file(s) with centroided MS2 spectra (centroided either on acquisition, on conversion to mzML or using the OpenMS tool PeakPickerHiRes) -- fasta file with the protein database - -As output OpenPepXL supports - -- idXML format, which is OpenMS’ internal format compatible with various tools in OpenMS, e.g. for quantification and visualization -- mzIdentML 1.2 format (Vizcaíno et al., 2017) will allow complete submission of cross-linking data to the PRIDE database and ProteomeXchange (Ternent et al., 2014) -- xQuest format (Rinner et al., 2008) and thus compatible with xProphet (Leitner et al., 2014) for FDR estimation and xTract (Walzthoeni et al., 2015) for quantification, as well as the UCSF Chimera plug-in Xlink Analyzer (Kosinski et al., 2015) for visualizing and analyzing cross-links on structures. - -## Beginners: use OpenPepXL through the workflow manager KNIME - -To use OpenPepXL in KNIME, first install the newest KNIME release and install OpenMS 2.5 through the KNIME community contributions. Instructions are at https://openms.readthedocs.io/en/latest/getting-started/knime-get-started.html). - -For a general introduction to KNIME and OpenMS start here: -https://openms.readthedocs.io/en/latest/getting-started/knime-get-started.html -Building workflows is done by finding tools in the tool list (e.g. by text search) and dragging and dropping their nodes on the workflow pane. The output from one node can be connected to the input of another node by dragging the mouse from one port to another. The ports are the rectangular or triangular symbols on the left and right sides of tool nodes. Inputs are always on the left, outputs on the right. Each node can be configured by double-clicking on its icon or right-clicking and selecting the configure option. A pop-up window will then list the parameters of the node. The figures below show example workflows for OpenPepXL (labeled cross-linkers) and OpenPepXLLF (unlabeled cross-linkers). - - -{{< figure src="/images/content_images/applications/KNIME_PepXLLF-1.png" >}} - -{{< figure src="/images/content_images/applications/KNIME_PepXL.png" >}} - -For reading in input files there are the nodes Input File and Input Files. Input File has one file path as its parameter and can be used for single files, like a protein database. The Input Files node takes a list of file paths for other nodes to iterate over. The ZipLoopStart and ZipLoopEnd nodes allow for a section of the workflow to iterate over multiple entries in a list. In this case FeatureFinderMultiplex and OpenPepXL or OpenPepXLLF are run multiple times, once for each input file defined in the Input Files node. The Output Folder nodes have a path to a directory as their parameter and write out all incoming data as files into that directory. The names of these files will be equal to the names of the mzML input files, but with a different file ending. The ZipLoopEnd node collects all the results of the loop before sending them further to the output nodes, so the results are written once after all processing is finished. Putting an Output Folder node inside the loop, e.g. right after OpenPepXL, will write out the results of the current input file right after OpenPepXL is finished with it. This type of workflow will go through the input files iteratively one by one and parallelization for each run can be set using the -threads parameter of OpenPepXL. To run a KNIME workflow, click on the green arrow button above the workflow pane. - -Below you can see a more complex workflow with FDR estimation and additional filtering. This is a label-free OpenPepXL workflow available for download at the [OpenMS 2.5 page](https://github.com/enetz/OpenMS/releases). - -{{< figure src="/images/content_images/applications/OpenPepXL_fullWorkflow-1.png" >}} - -It will run OpenPepXLLF on all mzML input files, run the FDR estimation, filter by 5% FDR, remove decoys and write out idXML files for visualization in TOPPView (more below), as well as an CSV file containing all 1st ranked PSMs with FDR < 5% from all input mzML files. To run FeatureFinderMultiplex and OpenPepXL for labeled cross-link search, remove the OpenPepXLLF node and drag those two in. Connect the inputs and outputs in a similar way to the workflow above. You can also add a PeakPickerHiRes node for peak picking in front of FeatureFinderMultiplex or OpenPepXLLF if needed and adapt the filters as needed. The IDFilter node has a lot of options, but the only one used here is to filter by specific meta values of each ID (cross-link). The parameter -remove_peptide_hits_by_metavalue accepts three text strings that make up a condition. All IDs that fulfill this condition are accepted, others are filtered out. Look at the conditions set in the nodes of the workflow to get an idea about how this works. Most of the columns in the table returned by TextExporter can be used for filtering. - -If you have any questions, suggestions, or bug reports, please visit the support page, open an issue on github, or write an email to eugen.netz@tuebingen.mpg.de - -## Advanced: use OpenPepXL as stand-alone application - -The current stand-alone version of OpenPepXL, version 1.1 is available as part of OpenMS 2.5. Installers for Windows, MacOS and Linux can be found [here](https://abibuilder.cs.uni-tuebingen.de/archive/openms/OpenMSInstaller/release/2.5.0/). - -### Introduction to tool settings for command line use - -All the TOPP (The OpenMS Proteomics Pipeline) tools are controlled through so-called INI files. To generate a tool specific INI file with default settings, call the tool executable with the parameter `-write_ini filename.ini` - -```bash -OpenPepXLLF -write_ini OPXL.ini -``` - -To edit the settings open the .ini file in the TOPP tool INIFileEditor. An example of an INI file is shown in the figure. - -
{{< figure src="/images/content_images/applications/INIFileEditor-1.png" >}}
- -The INIFileEditor shows a description of each parameter at the bottom and helps to fill out many parameters, e.g. by using a file browser to select input and output files and showing the possible choices of parameters with limited options. To see the full list of parameters, including advanced parameters that should not be necessary for most users, check the box for advanced parameters on the bottom. The INI files can also be edited using a text editor when opening a GUI is not possible, e.g. when working on a remote server. -To run a tool using the edited INI file, call the tool executable with the parameter `-ini filename.ini`. - -**Example:** - -```bash -OpenPepXLLF -ini path/to/OPXL.ini -``` - -One INI file can be used for several runs with different parameters (e.g. another input and output file) by explicitly giving the tool additional parameters on the command line. These command line parameters will have higher priority than the values for these parameters in the INI file. This allows to have a fixed set of parameters using an INI file with a subset of variable parameters that you can change for each run. -Examples: - -```bash -OpenPepXLLF -ini path/OPXL.ini -in path/input_file_01.mzML -out_idXML path/output_file_01.idXML -``` - -```bash -OpenPepXLLF -ini path/OPXL.ini -in path/input_file_02.mzML -out_idXML path/output_file_02.idXML -``` - -All parameters adjustable through an INI file are also adjustable through the command line. Many parameters are grouped into categories, e.g. all OpenPepXL parameters concerning precursor masses are in the precursor group. To adjust these through the command line, you have to use the group name as a prefix, e.g. `-precursor:mass_tolerance` 10 and `-precursor:mass_tolerance_unit` ppm. The examples shown here assume OpenMS with OpenPepXL is installed on a Linux computer and the binaries are in the PATH. On Windows computers the binaries of the tools would end with .exe, otherwise everything should work in the same way. - -### Setting up and running OpenPepXLLF (label-free linkers): - -1. Generate an INI file for OpenPepXLLF (`OpenPepXLLF -write_ini OPXL.ini`). Open the generated INI file with the INIFileEditor. Choose your mzML input file (parameter: -in) and output files in any of the three supported formats (`-out_xquestxml, -out_idxml, -out_mzid`). If you do not specify any of these, the tool will run through to the end, but will not write out any results! Note that you can use multiple output formats. - -2. The preferred output format is the internal identification format of OpenMS: idXML. This is most compatible with XFDR and other post-processing and filtering tools within OpenMS, like IDFilter and IDMerger. Results can be formatted into other formats than idXML, e.g. mzIdentML using IDFileConverter or into a CSV table using TextExporter. Before running the tool, make sure you set up the protein database in a way that is compatible with XFDR (see the next section). - -3. With the parameter -threads you can choose the number of CPU threads the tool will use for this run with the given input file. Alternatively you can start the tool with different parameters or input files in parallel using multiple terminals. Processing multiple files in parallel will be a bit more time efficient, but will add up the required memory for each run. Using the -threads parameter to process one input file in parallel will use the same amount of memory as processing it on a single thread. - -4. Adapt the precursor and fragment mass tolerances to your MS instrument (for Orbitrap data, usually a precursor mass tolerance of 10 ppm and a fragment mass tolerance of 20 ppm) and add fixed and variable modifications, which you expect in your samples (aside from the cross-linker). - -5. In the cross-linker category you can define your cross-linker. The default settings are for DSS and are also correct for BS3. The -residue1 and -residue2 parameters accept lists of residues for each reactive group of the linker, so that you can define any heterobifunctional cross-linker. N-term and C-term are also valid entries for these two parameters and will link protein termini. - -6. Run the tool using the command line: - -```bash -OpenPepXLLF -ini OPXL.ini -``` -or in case of multiple input files and/or parameter sets - -```bash -OpenPepXLLF -ini OPXL1.ini -in path/file1.mzML -out_idXML path/file1.idXML -``` - -```bash -OpenPepXLLF -ini OPXL2.ini -in path/file2.mzML -out_idXML path/file2.idXML -``` - -### Setting up and running XFDR (FDR estimation for XL-MS): - -**Quickstart:** - -1. Generate a default parameter file for XFDR: - -```bash -XFDR -write_ini XFDR.ini -``` - -2. Edit parameter file using INIFileEditor (or a text editor) and run XFDR: - -```bash -XFDR -ini XFDR.ini -in filename.idXML -out_idXML filename.idXML -``` - -**Full Explanation:** - -XFDR is a reimplementation of xProphet (Leitner et al., 2014). It reads in cross-link identifications (IDs) and computes score distributions for decoys and targets from the first ranked IDs of each MS2 spectrum. Using these score distributions it assigns an FDR value to every hit. XFDR divides the set if IDs into intra- and inter-protein cross-links as well as mono-links/dead-end-links and loop-links and computes separate score distributions and FDRs for each of these groups. To be able to count the number of intra-protein target-decoy hybrids, XFDR expects that the OpenPepXL/LF search has been done with a corresponding decoy protein for each target protein in the database. The name of each decoy protein should be equal to the target protein with a decoy prefix, e.g. target: “Protein1”, decoy: “decoy_Protein1”. Importantly removing the decoy prefix should make the names exactly the same, in the example case it would be “decoy_”. The specific prefix for decoys can be set to any prefix you wish, but it has to be set consistently in OpenPepXL/LF and XFDR in the -decoy_string parameter. - -Some of the parameters of XFDR influence which IDs are used to compute the score distributions for FDR estimation. By default all first ranked IDs are used. The -minborder and -maxborder parameters allow you to set a range of precursor mass errors (the default values of -1 will not apply this filter), e.g. you can compute FDRs from IDs with a precursor mass error between -5 ppm and 5 ppm even if the OpenPepXL/LF search used a precursor tolerance of 10 or 15 ppm. The parameter -mindeltas applies a filter to the score difference between the first and second ranked IDs of an MS2 spectrum. A value of 0.95 will only use IDs with a score ratio of at most 95% between the second and first ranked IDs (or in other words will enforce a score difference of at least 5%). Setting the parameter -uniquexl to “true” will only consider the top scoring ID among those IDs recognized as equal by XFDR. Equal IDs are those that link the same positions in the same digested peptide sequences and are not what one would consider unique cross-links on the protein level. - -### Setting up and running OpenPepXL (labeled linkers): - -**Quickstart:** - -1. Generate a default parameter file for FeatureFinderMultiplex (FFM): - -```bash -FeatureFinderMultiplex -write_ini FFM.ini -``` - -2. Edit parameter file using INIFileEditor (or a text editor) and run the FFM: - -```bash -FeatureFinderMultiplex -ini FFM.ini -in filename.mzML -out_multiplets filename.consensusXML -``` - -3. Generate a default parameter file for OpenPepXL: - -```bash -OpenPepXL -write_ini OPXL.ini -``` - -4. Edit parameter file using INIFileEditor (or a text editor) and run the tool using the parameter file: - -```bash -OpenPepXL -ini OPXL.ini -in filename.mzML -consensus filename.consensusXML -out_idXML filename.idXML -``` - -**Full Explanation:** - -All of the parameters as well as the FDR estimation procedure described for OpenPepXLLF above are applicable to OpenPepXL, so this section will mainly describe the additional steps necessary to run OpenPepXL to search for labeled linkers. -To use the additional preprocessing features for labeled cross-links, OpenPepXL requires additional information to link together the correct MS2 spectra. This information is provided by a consensusXML file, an OpenMS format containing the boundaries of MS1 features and connections between them. For every .mzML input file, OpenPepXL requires a .consensusXML with linked MS1 features from that .mzML file. Generating a .consensusXML file is a two step process. First finding the MS1 features defined as a group of isotopic mass traces showing a characteristic intensity bell curve along the retention time axis. Each MS1 feature represents one species of molecules, e.g. one peptide or cross-linked peptide pair, localized to a contiguous patch of the two-dimensional m/z vs. retention time map. The second step is linking features at a mass distance that corresponds to the mass difference of the labeled cross-linkers. There are multiple ways of achieving these steps with different TOPP tools. The recommended way is to use FeatureFinderMultiplex. This tool takes care of both steps at once and will only report paired features and discard any unpaired features from the first step. - -### Setting up FeatureFinderMultiplex (finding feature pairs on the MS1 level): - -To run the FeatureFinderMultiplex (FFM) generate an *.ini file (FeatureFinderMultiplex -write_ini FFM.ini) and open it with the INIFileEditor. FFM expects an .mzML input file with centroided MS1 spectra. Choose your .mzML input file and a .consensusXML output file (parameter: -out_multiplets). The parameter value for -algorithm:labels should look like this: [0][mass_difference], e.g. [0][12.07573] for a mixture of labeled DSS linker, DSS-d0 and DSS-d12. Change the -algorithm:charge parameter to what you want to search for (for XL-MS usually 3:7, meaning the range from +3 to +7) and -algorithm:mz_tolerance and -algorithm:mz_unit to your MS instruments MS1 tolerance. This can be set to the same value as the precursor mass tolerance for the OpenPepXL search. Set the parameter -algorithm:rt_band to at least 2, this will make the search more robust and increase the sensitivity by sacrificing a small amount of specificity. Because FFM is used to generate candidate spectrum pairs to search through, sensitivity is more important than specificity. -Run FeatureFinderMultiplex in the command line with - -```bash -FeatureFinderMultiplex -ini FFM.ini -``` - -You can now run OpenPepXL using the command line in the same way as OpenPepXLLF with the additional input parameter -consensus filename.consensusXML defined in the INI file or directly as a command line parameter. - -### Setting up PeakPickerHiRes (centroiding / peak picking of MS1 and/or MS2 spectra): - -FeatureFinderMultiplex expects centroided MS1 spectra, while OpenPepXL and OpenPepXLLF expect centroided MS2 spectra. If you have .mzML files that are not centroided or if you are not sure whether they are, you can use PeakPickerHiRes. -Generate an INI file (PeakPickerHiRes -write_ini picker.ini) and open it with the INIFileEditor. Choose your input and output file and the MS levels that you want to centroid using the -algorithm:ms_levels parameter. This will force peak picking on these levels, even if they are already picked. You can also leave the -algorithm:ms_levels parameter empty to pick peaks at all MS levels that are not centroided yet. The other settings do not need to be changed from the default for most applications. -Run the tool using the command line: - -```bash -PeakPickerHiRes -ini picker.ini -``` - -### Visualizing spectra and matched peaks with TOPPView: - -
{{< figure src="/images/content_images/applications/TOPPView_annotate.png" >}}
- -First, open a spectrum in TOPPView. Then go to Tools->Annotate with identification and select the .mzid or .idXML file produced by OpenPepXL. -You can select an identified cross-link in the table on the right side of the TOPPView window to visualize it. -TOPPView allows you to zoom in and out freely. Peak annotations are read from the identification file but can be edited, moved, added or removed, e.g. to prepare clean images for publication. These custom labels can also be stored to file and retrieved in .idXML files, the internal OpenMS identification data format. - -
{{< figure src="/images/content_images/applications/TOPPView_Spec-1024x505.png" >}}
- -The identified features and feature pairs from FeatureFinderMultiplex (FFM) can also be visualized in TOPPView by loading in the .mzML, then the .featureXML output file (optional, not necessary for OpenPepXL, but contains detailed information about each feature, FFM parameter: -out) and the .consensusXML as additional layers through File->Open file and selecting new layer in the appearing pop-up window. - -**References** - -Rinner O, Seebacher J, Walzthoeni T, Mueller L, Beck M, Schmidt A, Mueller M, Aebersold R (2008) Identification of cross-linked peptides from large sequence databases. - -Leitner A, Walzthoeni T, Aebersold R. (2014) Lysine-specific chemical cross-linking of protein complexes and identification of cross-linking sites using LC-MS/MS and the xQuest/xProphet software pipeline. - -Walzthoeni T, Joachimiak LA, Rosenberger G, Röst HL, Malmström L, Leitner A, Frydman R, Aebersold R (2015) xTract: software for characterizing conformational changes of protein complexes by quantitative cross-linking mass spectrometry. - -Kosinski, J., et al. (2015) Xlink Analyzer: Software for analysis and visualization of cross-linking data in the context of three-dimensional structures. J. Struct. Biol. - -Vizcaíno, J. A., Mayer, G., Perkins, S. R., Barsnes, H., Vaudel, M., Perez-Riverol, Y., … & Rappsilber, J. (2017). The mzIdentML data standard version 1.2, supporting advances in proteome informatics. Molecular & Cellular Proteomics, mcp-M117. - -Ternent, T., Csordas, A., Qi, D., Gómez‐Baena, G., Beynon, R.J., Jones, A.R., Hermjakob, H. and Vizcaíno, J.A., 2014. How to submit MS proteomics data to ProteomeXchange via the PRIDE database. Proteomics, 14(20), pp.2233-2241. - - - diff --git a/content/en/archived-apps.md b/content/en/archived-apps.md new file mode 100644 index 00000000..b2dc4830 --- /dev/null +++ b/content/en/archived-apps.md @@ -0,0 +1,30 @@ +--- +title: Archived Apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + + 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/citing-openms.md b/content/en/citing-openms.md deleted file mode 100644 index ede2f69b..00000000 --- a/content/en/citing-openms.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Citing OpenMS -authors: ["Tjeerd Dijkstra", "Matteo Pilz"] -sidebar: false ---- - -Julianus Pfeuffer, Chris Bielow, Samuel Wein, Kyowon Jeong, Eugen Netz, Axel Walter, Oliver Alka, Lars Nilse, Pasquale Domenico Colaianni, Douglas McCloskey, Jihyung Kim, George Rosenberger, Leon Bichmann, Mathias Walzer, Johannes Veit, Bertrand Boudaud, Matthias Bernt, Nikolaos Patikas, Matteo Pilz, Michał Piotr Startek, Svetlana Kutuzova, Lukas Heumos, Joshua Charkow, Justin Cyril Sing, Ayesha Feroz, Arslan Siraj, Hendrik Weisser, Tjeerd M. H. Dijkstra, Yasset Perez-Riverol, Hannes Röst, Oliver Kohlbacher and Timo Sachsenberg - -* OpenMS 3 enables reproducible analysis of large-scale mass spectrometry data. Nature Methods, vol. 21, 2024. - -_In BibTeX format:_ - - ``` -@article{pfeuffer2024openms, - title={OpenMS 3 enables reproducible analysis of large-scale mass spectrometry data}, - author={Pfeuffer, Julianus and Bielow, Chris and Wein, Samuel and Jeong, Kyowon and Netz, Eugen and Walter, Axel and Alka, Oliver and Nilse, Lars and Colaianni, Pasquale Domenico and McCloskey, Douglas and others}, - journal={Nature methods}, - volume={21}, - number={3}, - pages={365--367}, - year={2024}, - publisher={Nature Publishing Group US New York} -} -``` - -Röst, H.L., Sachsenberg, T., Aiche, S., Bielow, C., Weisser, H., Aicheler, F., Andreotti, S., Ehrlich, H.-C., Gutenbrunner, P., Kenar, E., Liang, X., Nahnsen, S., Nilse, L., Pfeuffer, J., Rosenberger, G., Rurik, M., Schmitt, U., Veit, J., Walzer, M., Wojnar, D., Wolski, W.E., Schilling, O., Choudhary, J.S., Malmström, L., Aebersold, R., Reinert, K., Kohlbacher, O. - -* OpenMS: A flexible open-source software platform for mass spectrometry data analysis. Nature Methods, vol. 13, 2016. doi:10.1038/nmeth.3959 - -_In BibTeX format:_ - - ``` -@article{rost2016openms, - title={OpenMS: a flexible open-source software platform for mass spectrometry data analysis}, - author={R{"o}st, Hannes L and Sachsenberg, Timo and Aiche, Stephan and Bielow, Chris and Weisser, Hendrik and Aicheler, Fabian and Andreotti, Sandro and Ehrlich, Hans-Christian and Gutenbrunner, Petra and Kenar, Erhan and others}, - journal={Nature methods}, - volume={13}, - number={9}, - pages={741--748}, - year={2016}, - publisher={Nature Publishing Group} -} -``` diff --git a/content/en/code-of-conduct.md b/content/en/code-of-conduct.md index 4e7e84a5..21af0f58 100644 --- a/content/en/code-of-conduct.md +++ b/content/en/code-of-conduct.md @@ -1,91 +1,115 @@ --- title: OpenMS Code of Conduct sidebar: false +hidePageTitle: true +hideShortcuts: true aliases: - - /conduct.html + - /conduct.html --- -### Code of Conduct (Summary View) +
+

Summary

+

We are dedicated to providing a welcoming and supportive environment for all people, regardless of background or identity. By participating in this community, participants accept to abide by OpenMS' Code of Conduct and accept the procedures by which any Code of Conduct incidents are resolved. Any form of behaviour to exclude, intimidate, or cause discomfort is a violation of the Code of Conduct.

-We are dedicated to providing a welcoming and supportive environment for all people, regardless of background or identity. By participating in this community, participants accept to abide by OpenMS' Code of Conduct and accept the procedures by which any Code of Conduct incidents are resolved. Any form of behaviour to exclude, intimidate, or cause discomfort is a violation of the Code of Conduct. In order to foster a positive and professional learning environment we encourage the following kinds of behaviours in all platforms and events: +
+

We encourage

+
    +
  • Use welcoming and inclusive language
  • +
  • Be respectful of different viewpoints and experiences
  • +
  • Gracefully accept constructive criticism
  • +
  • Focus on what is best for the community
  • +
  • Show courtesy and respect towards other community members
  • +
+
-- Use welcoming and inclusive language -- Be respectful of different viewpoints and experiences -- Gracefully accept constructive criticism -- Focus on what is best for the community -- Show courtesy and respect towards other community members + +
-If you believe someone is violating the Code of Conduct, we ask that you report it to the Code of Conduct Committee, who will take the appropriate action to address the situation. +
+

Detailed view

-### Code of Conduct (Detailed View) +

Part 1 — Introduction

-#### Part 1 - Introduction +

OpenMS is a community-led project. We value the involvement of everyone in the community. We are committed to creating a friendly and respectful place for learning, teaching and contributing. All participants in our events and communications are expected to show respect and courtesy to others.

-OpenMS is a community-led project. We value the involvement of everyone in the community. We are committed to creating a friendly and respectful place for learning, teaching and contributing. All participants in our events and communications are expected to show respect and courtesy to others. +

To make clear what is expected, everyone participating in OpenMS activities is required to conform to the Code of Conduct. This Code of Conduct applies to all spaces managed by OpenMS including, but not limited to, workshops, email lists, and online forums such as GitHub, Discord and LinkedIn. Workshop hosts are expected to assist with the enforcement of the Code of Conduct.

-To make clear what is expected, everyone participating in OpenMS activities is required to conform to the Code of Conduct. This Code of Conduct applies to all spaces managed by OpenMS including, but not limited to, workshops, email lists, and online forums such as GitHub, Slack and Twitter. Workshop hosts are expected to assist with the enforcement of the Code of Conduct. +

The OpenMS Code of Conduct Committee is responsible for enforcing the Code of Conduct. It can be contacted by emailing open-ms-c_o_c@lists.sourceforge.net. All reports will be reviewed by the Code of Conduct Committee and will be kept confidential. See the report handling manual for how reports are followed up.

-The OpenMS Code of Conduct Committee is responsible for enforcing the Code of Conduct. It can be contacted by emailing open-ms-c_o_c@lists.sourceforge.net. All reports will be reviewed by the Code of Conduct Committee and will be kept confidential. +

Part 2 — OpenMS Code of Conduct

-#### Part 2 - OpenMS Code of Conduct +

OpenMS is dedicated to providing a welcoming and supportive environment for all people, regardless of background or identity. As such, we do not tolerate behaviour that is disrespectful to our teachers or learners or that excludes, intimidates, or causes discomfort to others. We do not tolerate discrimination or harassment based on characteristics that include, but are not limited to, gender identity and expression, sexual orientation, disability, physical appearance, body size, citizenship, nationality, ethnic or social origin, pregnancy, familial status, veteran status, genetic information, religion or belief (or lack thereof), membership of a national minority, property, age, education, socio-economic status, technical choices, and experience level.

-OpenMS is dedicated to providing a welcoming and supportive environment for all people, regardless of background or identity. As such, we do not tolerate behaviour that is disrespectful to our teachers or learners or that excludes, intimidates, or causes discomfort to others. We do not tolerate discrimination or harassment based on characteristics that include, but are not limited to, gender identity and expression, sexual orientation, disability, physical appearance, body size, citizenship, nationality, ethnic or social origin, pregnancy, familial status, veteran status, genetic information, religion or belief (or lack thereof), membership of a national minority, property, age, education, socio-economic status, technical choices, and experience level. +

Everyone who participates in OpenMS activities is required to conform to this Code of Conduct. It applies to all spaces managed by OpenMS including, but not limited to, workshops, email lists, and online forums such as GitHub, Discord and LinkedIn. Workshop hosts are expected to assist with the enforcement of the Code of Conduct. By participating, participants indicate their acceptance of the procedures by which OpenMS resolves any Code of Conduct incidents, which may include storage and processing of their personal information.

-Everyone who participates in OpenMS activities is required to conform to this Code of Conduct. It applies to all spaces managed by OpenMS including, but not limited to, workshops, email lists, and online forums such as GitHub, Gitter and Twitter. Workshop hosts are expected to assist with the enforcement of the Code of Conduct. By participating, participants indicate their acceptance of the procedures by which OpenMS resolves any Code of Conduct incidents, which may include storage and processing of their personal information. +

Part 2.1 — Expected behaviour

-#### Part 2.1 - Expected behaviour +

All participants in our events and communications are expected to show respect and courtesy to others. All interactions should be professional regardless of platform: either online or in-person. In order to foster a positive and professional learning environment we encourage the following kinds of behaviours in all OpenMS events and platforms:

-All participants in our events and communications are expected to show respect and courtesy to others. All interactions should be professional regardless of platform: either online or in-person. In order to foster a positive and professional learning environment we encourage the following kinds of behaviours in all OpenMS events and platforms: +
    +
  • Use welcoming and inclusive language
  • +
  • Be respectful of different viewpoints and experiences
  • +
  • Gracefully accept constructive criticism
  • +
  • Focus on what is best for the community
  • +
  • Show courtesy and respect towards other community members
  • +
-- Use welcoming and inclusive language -- Be respectful of different viewpoints and experiences -- Gracefully accept constructive criticism -- Focus on what is best for the community -- Show courtesy and respect towards other community members +

Note: See the four social rules for further recommendations.

-Note: See the four [social rules](https://www.recurse.com/manual#sub-sec-social-rules) for further recommendations. +

Part 2.2 — Unacceptable behaviour

-#### Part 2.2 - Unacceptable behaviour +

Examples of unacceptable behaviour by participants at any OpenMS event/platform include:

-Examples of unacceptable behaviour by participants at any OpenMS event/platform include: +
    +
  • written or verbal comments which have the effect of excluding people on the basis of membership of any specific group
  • +
  • causing someone to fear for their safety, such as through stalking, following, or intimidation
  • +
  • violent threats or language directed against another person
  • +
  • the display of sexual or violent images
  • +
  • unwelcome sexual attention
  • +
  • nonconsensual or unwelcome physical contact
  • +
  • sustained disruption of talks, events or communications
  • +
  • insults or put downs
  • +
  • sexist, racist, homophobic, transphobic, ableist, or exclusionary jokes
  • +
  • excessive swearing
  • +
  • incitement to violence, suicide, or self-harm
  • +
  • continuing to initiate interaction (including photography or recording) with someone after being asked to stop
  • +
  • publication of private communication without consent
  • +
-- written or verbal comments which have the effect of excluding people on the basis of membership of any specific group -- causing someone to fear for their safety, such as through stalking, following, or intimidation -- violent threats or language directed against another person -- the display of sexual or violent images -- unwelcome sexual attention -- nonconsensual or unwelcome physical contact -- sustained disruption of talks, events or communications -- insults or put downs -- sexist, racist, homophobic, transphobic, ableist, or exclusionary jokes -- excessive swearing -- incitement to violence, suicide, or self-harm -- continuing to initiate interaction (including photography or recording) with someone after being asked to stop -- publication of private communication without consent +

Part 2.3 — Consequences of unacceptable behaviour

-#### Part 2.3 Consequences of Unacceptable behaviour +

Participants who are asked to stop any inappropriate behaviour are expected to comply immediately. This applies to any OpenMS events and platforms, either online or in-person. If a participant engages in behaviour that violates this code of conduct, the organisers may warn the offender, ask them to leave the event or platform (without refund), or engage OpenMS Code of Conduct Committee to investigate the Code of Conduct violation and impose appropriate sanctions.

+
-Participants who are asked to stop any inappropriate behaviour are expected to comply immediately. This applies to any OpenMS events and platforms, either online or in-person. If a participant engages in behaviour that violates this code of conduct, the organisers may warn the offender, ask them to leave the event or platform (without refund), or engage OpenMS Code of Conduct Committee to investigate the Code of Conduct violation and impose appropriate sanctions. +
+

Incident reporting, resolution & enforcement

-### Incident reporting resolution & Code of Conduct enforcement +

This section summarizes the most important points; more details are in the OpenMS Code of Conduct — How to follow up on a report.

-_This section summarizes the most important points, more details can be found in_ [OpenMS Code of Conduct - How to follow up on a report](/report-handling-manual). +

We will investigate and respond to all complaints. The OpenMS Code of Conduct Committee and the OpenMS Executive Committee (if involved) will protect the identity of the reporter, and treat the content of complaints as confidential (unless the reporter agrees otherwise).

-We will investigate and respond to all complaints. The OpenMS Code of Conduct Committee and the OpenMS Executive Committee (if involved) will protect the identity of the reporter, and treat the content of complaints as confidential (unless the reporter agrees otherwise). +

In case of severe and obvious breaches, e.g. personal threat or violent, sexist or racist language, we will immediately disconnect the originator from OpenMS communication channels; please see the manual for details.

-In case of severe and obvious breaches, e.g. personal threat or violent, sexist or racist language, we will immediately disconnect the originator from OpenMS communication channels; please see the manual for details. +

In cases not involving clear severe and obvious breaches of this Code of Conduct the process for acting on any received Code of Conduct violation report will be:

-In cases not involving clear severe and obvious breaches of this Code of Conduct the process for acting on any received Code of Conduct violation report will be: +
    +
  1. Acknowledge report is received,
  2. +
  3. Reasonable discussion/feedback,
  4. +
  5. Mediation (if feedback didn't help, and only if both reporter and reportee agree to this),
  6. +
  7. Enforcement via transparent decision (see Resolutions) by the Code of Conduct Committee.
  8. +
-1. Acknowledge report is received, -2. Reasonable discussion/feedback, -3. Mediation (if feedback didn’t help, and only if both reporter and reportee agree to this), -4. Enforcement via transparent decision (see [Resolutions](/report-handling-manual/#resolutions)) by the Code of Conduct Committee. +

The Committee will respond to any report as soon as possible, and at most within 72 hours.

+
-The Committee will respond to any report as soon as possible, and at most within 72 hours. - -### About this Document +## About this Document This document is adapted from guidelines written by the [The Carpentries Project](https://github.com/carpentries/handbook/blob/master/topic_folders/policies/code-of-conduct.md), which was itself based on the [Django Project](https://www.djangoproject.com/conduct/enforcement-manual/) and [Ada Initiative](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Responding_to_reports) template and the [PyCon 2013 Procedure for Handling Harassment Incidents](https://us.pycon.org/2013/about/code-of-conduct/harassment-incidents/). -[licensed CC BY 3.0](http://creativecommons.org/licenses/by/3.0/) \ No newline at end of file +[licensed CC BY 3.0](http://creativecommons.org/licenses/by/3.0/) diff --git a/content/en/communication.md b/content/en/communication.md deleted file mode 100644 index deb590c7..00000000 --- a/content/en/communication.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Community -sidebar: false ---- - -## Welcome to OpenMS! - -@OpenMS is an open-source C++ software library for LC-MS data management and analysis with python wrappers, a large modular toolset and workflows for e.g., Galaxy, KNIME and nextflow. - -OpenMS is a community-driven open source project developed by a diverse group of [contributors](/contributors). The OpenMS leadership has made a strong commitment to creating an open, inclusive, and positive community. Please read the [OpenMS Code of Conduct](/code-of-conduct) for guidance on how to interact with others in a way that makes the community thrive. - -Here's how to get started: - -- 📚 Browse through the main library code under [OpenMS/OpenMS](https://github.com/openms/openms/issues) -- 👩‍💻 Check out the [documentation](https://openms.readthedocs.io/en/latest/index.html). -- 🙋‍♀️ Come and say hi on our [![Discord Shield](https://img.shields.io/discord/832282841836159006?style=flat-square&message=Discord&color=5865F2&logo=Discord&logoColor=FFFFFF&label=Discord)](https://discord.gg/v9tv5BxPch) channel. -- 🍿 Tune in for news about developer/user meetings and events, [get involved]({{< ref "news.md" >}})! -- 🌈 Please abide by our [community code of conduct](https://github.com/OpenMS/OpenMS/blob/develop/CODE_OF_CONDUCT.md) - -We offer several communication channels to learn, share your knowledge and connect with others within the OpenMS community. - -*** - -### Discord - -Discord allows the users to communicate in different channels, publicly as well as privately - -*** - -### GitHub - -The following repositories can be used: -- [OpenMS](https://github.com/OpenMS/OpenMS) (Bug Reports, Feature requests) -- [OpenMS-docs](https://github.com/OpenMS/OpenMS-docs) (Documentation-related issues) -- [OpenMS.de](https://github.com/OpenMS/openms.de) (Any issue related to website) -- [pyopenms-docs](https://github.com/OpenMS/pyopenms-docs) (Any issue related to pyopenms) - -In case if you are confused, please ask your query [here](/help-request) - -*** - -### GitHub issue tracker - -The issue tracker can be used for: - -OpenMS -- [Bug reports](https://github.com/OpenMS/OpenMS/labels/bug) (e.g. "Filter doesn't work for 1D data") -- [Feature requests](https://github.com/OpenMS/OpenMS/labels/enhancement) -- [Tools](https://github.com/OpenMS/OpenMS/issues?q=is%3Aopen+is%3Aissue+label%3ATOPP) (**T**he **O**penMS **P**i**p**eline - TOPP) -- [TOPPView](https://github.com/OpenMS/OpenMS/labels/TOPPView) - -Documentation -- [Bug reports](https://github.com/OpenMS/OpenMS-docs/labels/bug) -- [Feature requests](https://github.com/OpenMS/OpenMS-docs/labels/enhancement) - -*** - -### OpenMS mailing list - - -These lists are the main form of receiving OpenMS-related updates, like new features, changes to the roadmap, and all kinds of project-wide decision making. - -There are two mailing list currently: -- [open-ms-announcements](https://sourceforge.net/p/open-ms/mailman/open-ms-announcements/) - Announcements about OpenMS, such as for releases, developer meetings, sprints or conference talks are made on this list. -- [open-ms-general](https://sourceforge.net/p/open-ms/mailman/open-ms-general/) - For addressing any queries or suggestion from the users. - - -*** - -## Join the OpenMS Community - -To thrive, the OpenMS project needs your expertise and enthusiasm. Not a coder? Not a problem! There are many ways to contribute to OpenMS. - -If you are interested in becoming a OpenMS contributor (yay!) we recommend checking out our [Contribute](/contribute) page. 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..285469c4 100644 --- a/content/en/contribute.md +++ b/content/en/contribute.md @@ -1,215 +1,6 @@ --- 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. - ---- - -## Getting Started - -If you are new to the project, here are good first steps: - -1. Learn about the **project structure and governance** -2. Join the **communication channels** -3. Explore **ways to contribute** -4. Find a **good first contribution** - -You do not need to understand the entire codebase before contributing—many contributors begin with documentation improvements, bug reports, or small fixes. - -**For code contributors**: See the [CONTRIBUTING.md guide](https://github.com/OpenMS/OpenMS/blob/develop/CONTRIBUTING.md) in the main repository for specific instructions on reporting issues, submitting pull requests, and following OpenMS coding conventions. - -**For technical documentation**: See the [OpenMS Developer Guide](https://openms.readthedocs.io/en/latest/manual/develop.html) for coding conventions, building OpenMS, and architectural details. - ---- - -## Communication Channels - -Most project discussions take place through the OpenMS GitHub organization and the OpenMS Discord server. - -### GitHub Issues and Pull Requests - -Used for **formal discussions** related to the project: - -- bug reports -- feature requests -- development discussions -- proposing code changes -- reviewing contributions - -If you encounter a problem with OpenMS or want to propose an improvement, opening a [GitHub issue](https://github.com/openms/openms/issues) is usually the best place to start. - -### Discord - -For **informal discussions and quick questions**, join the OpenMS Discord server: - -https://discord.gg/v9tv5BxPch - -Discord is useful for: - -- asking quick questions -- discussing ideas before opening an issue -- connecting with other contributors -- general community interaction - -While Discord is helpful for informal communication, important technical discussions and decisions should generally be recorded on GitHub so they remain searchable and accessible to the wider community. - -### Mailing Lists - -If you're unsure where to start or how your skills fit in, you can also ask on the [mailing list](https://lists.sourceforge.net/lists/listinfo/open-ms-general/). - -If you only want to be informed of new versions of OpenMS, please subscribe to the mailing list [open-ms-announcements](https://lists.sourceforge.net/lists/listinfo/open-ms-announcements). - -### Project Meetings - -Governance discussions also take place during meetings of the Executive Committee. Minutes from these meetings are recorded and made publicly available. - ---- - -## Code of Conduct - -Our community aspires to treat everyone equally and to value all contributions. We have a [Code of Conduct](/code-of-conduct) to foster an open and welcoming environment. - ---- - -## Ways to Contribute - -Your choices aren't limited to programming—there are many areas where we need **your** help. - -### Writing Code - -Programmers, the [CONTRIBUTING.md guide](https://github.com/OpenMS/OpenMS/blob/develop/CONTRIBUTING.md) explains how to contribute to the OpenMS codebase. - -### Reviewing Pull Requests - -The project has more than 45+ open pull requests—meaning many potential improvements and many open-source contributors waiting for feedback. If you're a developer who knows OpenMS, you can help even if you're not familiar with the entire codebase. You can: - -* summarize a long-running discussion -* triage documentation PRs -* test proposed changes - -### Developing Educational Materials - -OpenMS's [User Guide](https://github.com/OpenMS/OpenMS/wiki) is undergoing rehabilitation. We're in need of new tutorials, how-to's, and deep-dive explanations, and the site needs restructuring. Opportunities aren't limited to writers. We'd also welcome worked examples, notebooks, and videos. [OpenMS-Docs](https://github.com/OpenMS/OpenMS-docs/issues) lays out our ideas—and you may have others. - -### Issue Triaging - -The [OpenMS issue tracker](https://github.com/openms/openms/issues) has a _lot_ of open issues. Some are no longer valid, some should be prioritized, and some would make good issues for new contributors. You can: - -* check if older bugs are still present -* find duplicate issues and link related ones -* add good self-contained reproducers to issues -* label issues correctly (this requires triage rights—just ask) - -Please just dive in. - -### Website Development - -We've just revamped our website, but we're far from done. If you love web development, these [issues](https://github.com/openms/openms.de/issues) list some of our unmet needs—and feel free to share your own ideas. - -### Graphic Design - -We can barely begin to list the contributions a graphic designer can make here. Our docs are parched for illustration; our growing website craves images—opportunities abound. - -### Community Coordination and Outreach - -Through community contact we share our work more widely and learn where we're falling short. We're eager to get more people involved in efforts like our [Twitter](https://twitter.com/OpenMSTeam) account, organizing events, a newsletter, and perhaps a blog. - -### Fundraising - -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. - ---- - -## Understanding the Project - -OpenMS is organized as both an **open-source software project** and a **nonprofit organization** that supports its development. - -### Governance - -The governance of the project is described in the following documents: - -- [Governance]({{< relref "/governance" >}}) — overview of project governance structure -- [Executive Committee]({{< relref "/exec_committee" >}}) — primary governance body of the project -- [Core Developers]({{< relref "/core_developers" >}}) — trusted maintainers who guide the project - -In general: - -- **Core developers** maintain the project and participate in governance -- The **Executive Committee** guides the direction of the project -- **Contributors** submit improvements, fixes, and new features - -Anyone is welcome (and encouraged!) to contribute to OpenMS. - -### Main Repositories - -The most important repositories in the OpenMS GitHub organization are: - -- **[OpenMS](https://github.com/OpenMS/OpenMS/)** — The main codebase containing algorithms, tools, and core libraries, as well as Python bindings for PyOpenMS - -- **[OpenMS-docs](https://github.com/OpenMS/OpenMS-docs)** — Documentation sources for the OpenMS ReadTheDocs site - -- **[pyopenms-docs](https://github.com/OpenMS/pyopenms-docs)** — Documentation sources for the pyOpenMS Python interface - -- **[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 - -There are additional repositories for tutorials, experimental features, and supporting infrastructure. - ---- - -## Finding Something to Work On - -If you would like to contribute but are unsure where to start, there are many possible ways to get involved. - -Examples include: - -- improving documentation -- fixing bugs -- adding tests -- improving build infrastructure -- implementing new algorithms - -Issues labeled **"good first issue"** are often a good place for new contributors to begin. - -If you are unsure where to start, feel free to ask for suggestions on the [OpenMS Discord Server](https://discord.gg/v9tv5BxPch), or by opening a [GitHub issue](https://github.com/OpenMS/OpenMS/issues). - ---- - -## Contributor Path - -Many contributors start by reporting issues or submitting small fixes. Over time, contributors may become more involved in the development of the project. - -A typical progression in open-source projects looks like this: - -- **User** — uses the software and provides feedback -- **Contributor** — submits improvements, bug reports, or fixes -- **Frequent contributor** — regularly contributes to the project -- **Core developer** — trusted maintainer who guides the project - -Core developers are trusted maintainers who help guide the project and participate in governance. - -More information about this role is available on the [Core Developers]({{< relref "/core_developers" >}}) page. - ---- - -## Next Steps - -To continue exploring the project, you may want to: - -- read the [CONTRIBUTING.md guide](https://github.com/OpenMS/OpenMS/blob/develop/CONTRIBUTING.md) for code contribution guidelines -- read the [developer documentation](https://openms.readthedocs.io/en/latest/manual/develop.html) for technical details -- explore the [OpenMS repositories](https://github.com/OpenMS) -- review [open issues](https://github.com/OpenMS/OpenMS/issues) -- submit your first [pull request](https://github.com/OpenMS/OpenMS/pulls) - -We are glad you are interested in contributing to OpenMS! - diff --git a/content/en/contributors.md b/content/en/contributors.md index b1d140e1..7ab790bf 100644 --- a/content/en/contributors.md +++ b/content/en/contributors.md @@ -1,15 +1,116 @@ --- -title: OpenMS Teams +title: Contributors sidebar: false +hidePageTitle: true +hideShortcuts: true --- -We are an international team on a mission to support scientific and research -communities worldwide by building quality, open-source software. -[Join us]({{< relref "/contribute" >}})! +
+
+

Leadership

+

Board of directors

+

The board provides legal and financial stewardship for OpenMS Inc., our nonprofit organization.

+
+
+
+ Portrait of Dr. Sam Wein +
+

Dr. Sam Wein

+

Chief Executive Officer

+

+ Sam Wein (they/them) is a scientist and nonprofit executive with extensive experience + in organizational leadership, project sustainability, and strategic planning. They serve + as chief executive officer of OpenMS Inc. and chair its board of directors. Outside of + work, Sam enjoys photography, travel, and helping to organize anime conventions. +

+
+
+
+ Portrait of Dr. Oliver Kohlbacher +
+

Dr. Oliver Kohlbacher

+

Chief Scientific Officer

+

+ Oliver is Professor of Medical Bioinformatics at the University of Tübingen and one of + the founders of OpenMS. As chief scientific officer, he guides the scientific direction + of the project, connecting OpenMS development with research in computational mass + spectrometry and translational bioinformatics. +

+
+
+
+ Portrait of Dr. Timo Sachsenberg +
+

Dr. Timo Sachsenberg

+

Chief Technology Officer

+

+ Timo is a researcher at the University of Tübingen and a long-time OpenMS core + developer. As chief technology officer, he oversees the technical direction of the + project, from the core C++ library to the wider ecosystem of tools built on top of it. +

+
+
+
+ Portrait of Tom Müller +
+

Tom Müller

+

Chief Product Officer

+

+ Tom is a bioinformatician with industry experience spanning small startups and large + international corporations. He serves as Chief Product Officer and board member of + OpenMS, and also sits on the board of the open-source project Biotite. Outside of work, + Tom enjoys biking, camping, and bouldering. +

+
+
+
+ Portrait of Dr. Tjeerd Dijkstra +
+

Dr. Tjeerd Dijkstra

+

Treasurer

+

+ Tjeerd (he/him) has a passion for analysing large data sets especially from biology and + the clinic. Within the OpenMS team, he focuses on finances. He also has a passion for + cooking for large groups, which you can taste for yourself at the yearly developer's + meeting. +

+
+
+
+ Portrait of Dr. Joshua Charkow +
+

Dr. Joshua Charkow

+

Community Manager

+

+ Joshua is a research scientist and developer committed to making complex technologies + more efficient, intuitive, and impactful so researchers can tackle increasingly + challenging questions. In his spare time, he enjoys skiing, hiking, gardening and + spending time with his pug Peaches. +

+
+
+
+
-{{< include-html "static/gallery/members.html" >}} - -# Governance - -For information about the Executive Committee, please see the [Executive Committee page]({{< relref "/exec_committee" >}}). +
+
+

Project governance

+

Executive Committee

+

The Executive Committee leads development of the OpenMS project and sets technical priorities.

+
+

+ Learn how the committee works on our + Governance page + or see the current + committee members. +

+
+
+
+

Community

+

Members

+

Maintainers, docs contributors, and community managerswho keep OpenMS moving forward.

+
+ {{< include-html "static/gallery/members.html" >}} +
diff --git a/content/en/developer-retreat.md b/content/en/developer-retreat.md new file mode 100644 index 00000000..7041dc22 --- /dev/null +++ b/content/en/developer-retreat.md @@ -0,0 +1,6 @@ +--- +title: Annual Developer Retreat +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- 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/featured-apps.md b/content/en/featured-apps.md new file mode 100644 index 00000000..cdb2235e --- /dev/null +++ b/content/en/featured-apps.md @@ -0,0 +1,30 @@ +--- +title: Featured Apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + + diff --git a/content/en/fellowship.md b/content/en/fellowship.md new file mode 100644 index 00000000..f2512805 --- /dev/null +++ b/content/en/fellowship.md @@ -0,0 +1,6 @@ +--- +title: OpenMS Fellowship +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- diff --git a/content/en/governance.md b/content/en/governance.md index 70ebafa6..3871463b 100644 --- a/content/en/governance.md +++ b/content/en/governance.md @@ -1,70 +1,5 @@ --- 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" >}}). 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. +

+ +

+ 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). +

+ +
+
+

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. +

+ +
+
+

Python

+

pyOpenMS documentation

+

+ Documentation on how to use OpenMS in Python. +

+ +
+
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..eda22faa --- /dev/null +++ b/content/en/openms-lib.md @@ -0,0 +1,69 @@ +--- +title: OpenMS-lib +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+
+
+
+

OpenMS-lib

+

+ 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 >}} +
+
+ {{< openms-lib-topp >}} +
+
+ {{< openms-lib-getting-started >}} +
+
+
+ {{< openms-lib-developers >}} +
+
diff --git a/content/en/our-sponsors.md b/content/en/our-sponsors.md new file mode 100644 index 00000000..6515d2fa --- /dev/null +++ b/content/en/our-sponsors.md @@ -0,0 +1,6 @@ +--- +title: Our Sponsors +sidebar: false +hideShortcuts: true +hidePageTitle: true +--- diff --git a/content/en/privacy.md b/content/en/privacy.md index 4a30d7dc..2df6eb22 100644 --- a/content/en/privacy.md +++ b/content/en/privacy.md @@ -1,6 +1,8 @@ --- title: Privacy Policy sidebar: false +hidePageTitle: true +hideShortcuts: true --- ### WHO WE ARE diff --git a/content/en/publications.md b/content/en/publications.md index 40ae701e..dca1dcba 100644 --- a/content/en/publications.md +++ b/content/en/publications.md @@ -1,237 +1,227 @@ -# 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 +--- + + + +
+
+

Archive

+

All publications

+

Browse peer-reviewed research from the OpenMS community, year by year.

+
+{{< publications-year-select >}} +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
    +
  • 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

  • +
+
+
+ +
+
+ +
+
+
    +
  • 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

  • +
+
+
+ +
+
+ +
+
+ +
+
+
    +
  • 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

  • +
+
+
+ +
+
+ +
+
+
    +
  • 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..db322c78 --- /dev/null +++ b/content/en/pyopenms-viz.md @@ -0,0 +1,60 @@ +--- +title: pyopenms_viz +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + + diff --git a/content/en/pyopenms.md b/content/en/pyopenms.md new file mode 100644 index 00000000..931bbaf5 --- /dev/null +++ b/content/en/pyopenms.md @@ -0,0 +1,49 @@ +--- +title: pyOpenMS +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+
+
+
+

pyOpenMS

+

+ Python bindings for mass spectrometry. +

+

+ 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..7671d057 --- /dev/null +++ b/content/en/research-partnerships.md @@ -0,0 +1,82 @@ +--- +title: Research Partnerships +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+
+
+

Collaborate

+

Partnerships include

+

Ways research groups and organizations work with OpenMS on science, software, and infrastructure.

+
+
    +
  • Joint grant proposals
  • +
  • Consortium & collaborative projects
  • +
  • Workflow & algorithm development
  • +
  • Benchmarking studies
  • +
  • Infrastructure & sustainability initiatives
  • +
+
+
+
+ +
+
+
+
+

Community

+

Our partners

+

OpenMS partners with academic research groups, core facilities,national infrastructure, nonprofits, and industry.

+
+ {{< partners >}} +
+
+
+ +
+
+
+
+

Get in touch

+

Tell us about your idea

+

Share a short note about your partnership idea and we will follow up with next steps.

+
+
+ +
+ + +
+
+
diff --git a/content/en/scientific-and-technical-support.md b/content/en/scientific-and-technical-support.md new file mode 100644 index 00000000..640753fc --- /dev/null +++ b/content/en/scientific-and-technical-support.md @@ -0,0 +1,6 @@ +--- +title: Scientific and Technical Support +sidebar: false +hidePageTitle: true +hideShortcuts: true +--- diff --git a/content/en/sponsor-us.md b/content/en/sponsor-us.md new file mode 100644 index 00000000..7b7d7873 --- /dev/null +++ b/content/en/sponsor-us.md @@ -0,0 +1,6 @@ +--- +title: Our Sponsorship Program +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- diff --git a/content/en/terms.md b/content/en/terms.md deleted file mode 100644 index 985f9db2..00000000 --- a/content/en/terms.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Terms of Use -sidebar: false ---- - -*Last updated January 4, 2020* - - -## AGREEMENT TO TERMS - -These Terms of Use constitute a legally binding agreement made between you, whether personally or on behalf of an entity (“you”) and OpenMS ("**Project**", “**we**”, “**us**”, or “**our**”), concerning your access to and use of the openms.org website as well as any other media form, media channel, mobile website or mobile application related, linked, or otherwise connected thereto (collectively, the “Site”). You agree that by accessing the Site, you have read, understood, and agreed to be bound by all of these Terms of Use. IF YOU DO NOT AGREE WITH ALL OF THESE TERMS OF USE, THEN YOU ARE EXPRESSLY PROHIBITED FROM USING THE SITE AND YOU MUST DISCONTINUE USE IMMEDIATELY. - - - -Supplemental terms and conditions or documents that may be posted on the Site from time to time are hereby expressly incorporated herein by reference. We reserve the right, in our sole discretion, to make changes or modifications to these Terms of Use at any time and for any reason. We will alert you about any changes by updating the “Last updated” date of these Terms of Use, and you waive any right to receive specific notice of each such change. It is your responsibility to periodically review these Terms of Use to stay informed of updates. You will be subject to, and will be deemed to have been made aware of and to have accepted, the changes in any revised Terms of Use by your continued use of the Site after the date such revised Terms of Use are posted. - - - -The information provided on the Site is not intended for distribution to or use by any person or entity in any jurisdiction or country where such distribution or use would be contrary to law or regulation or which would subject us to any registration requirement within such jurisdiction or country. Accordingly, those persons who choose to access the Site from other locations do so on their own initiative and are solely responsible for compliance with local laws, if and to the extent local laws are applicable. - - -## USER REPRESENTATIONS - -By using the Site, you represent and warrant that: (1) you have the legal capacity and you agree to comply with these Terms of Use; (2) you will not use the Site for any illegal or unauthorized purpose; and (3) your use of the Site will not violate any applicable law or regulation. - - -If you provide any information that is untrue, inaccurate, not current, or incomplete, we have the right to refuse any and all current or future use of the Site (or any portion thereof). - - -## PROHIBITED ACTIVITIES - -You may not access or use the Site for any purpose other than that for which we make the Site available. - -As a user of the Site, you agree not to: - -1. Systematically retrieve data or other content from the Site to create or compile, directly or indirectly, a collection, compilation, database, or directory without written permission from us. - -2. Make any unauthorized use of the Site, including collecting usernames and/or email addresses of users by electronic or other means for the purpose of sending unsolicited email, or creating user accounts by automated means or under false pretenses. - -3. Use the Site to advertise or offer to sell goods and services. - -4. Circumvent, disable, or otherwise interfere with security-related features of the Site. - -5. Engage in unauthorized framing of or linking to the Site. - -6. Trick, defraud, or mislead us and other users, especially in any attempt to learn sensitive account information such as user passwords. - -7. Make improper use of our support services or submit false reports of abuse or misconduct. - -8. Engage in any automated use of the system, such as using scripts to send comments or messages, or using any data mining, robots, or similar data gathering and extraction tools. - -9. Interfere with, disrupt, or create an undue burden on the Site or the networks or services connected to the Site. - -10. Attempt to impersonate another user or person or use the username of another user. - -11. Use any information obtained from the Site in order to harass, abuse, or harm another person. - -12. Except as may be the result of standard search engine or Internet browser usage, use, launch, develop, or distribute any automated system, including without limitation, any spider, robot, cheat utility, scraper, or offline reader that accesses the Site, or using or launching any unauthorized script or other software. - -13. Upload or transmit (or attempt to upload or to transmit) any material that acts as a passive or active information collection or transmission mechanism, including without limitation, clear graphics interchange formats (“gifs”), 1×1 pixels, web bugs, cookies, or other similar devices (sometimes referred to as “spyware” or “passive collection mechanisms” or “pcms”). - -14. Upload or transmit (or attempt to upload or to transmit) viruses, Trojan horses, or other material, including excessive use of capital letters and spamming (continuous posting of repetitive text), that interferes with any party’s uninterrupted use and enjoyment of the Site or modifies, impairs, disrupts, alters, or interferes with the use, features, functions, operation, or maintenance of the Site. - -15. Harass, annoy, intimidate, or threaten any of our employees or agents engaged in providing any portion of the Site to you. - -16. Attempt to bypass any measures of the Site designed to prevent or restrict access to the Site, or any portion of the Site. - - -## SUBMISSIONS - -You acknowledge and agree that any questions, comments, suggestions, ideas, feedback, or other information regarding the Site ("Submissions") provided by you to us are non-confidential and shall become our sole property. We shall own exclusive rights, including all intellectual property rights, and shall be entitled to the unrestricted use and dissemination of these Submissions for any lawful purpose, commercial or otherwise, without acknowledgment or compensation to you. You hereby waive all moral rights to any such Submissions, and you hereby warrant that any such Submissions are original with you or that you have the right to submit such Submissions. You agree there shall be no recourse against us for any alleged or actual infringement or misappropriation of any proprietary right in your Submissions. - -## THIRD-PARTY WEBSITES AND CONTENT - -The Site may contain (or you may be sent via the Site) links to other websites ("Third-Party Websites") as well as articles, photographs, text, graphics, pictures, designs, music, sound, video, information, applications, software, and other content or items belonging to or originating from third parties ("Third-Party Content"). Such Third-Party Websites and Third-Party Content are not investigated, monitored, or checked for accuracy, appropriateness, or completeness by us, and we are not responsible for any Third-Party Websites accessed through the Site or any Third-Party Content posted on, available through, or installed from the Site, including the content, accuracy, offensiveness, opinions, reliability, privacy practices, or other policies of or contained in the Third-Party Websites or the Third-Party Content. Inclusion of, linking to, or permitting the use or installation of any Third-Party Websites or any Third-Party Content does not imply approval or endorsement thereof by us. If you decide to leave the Site and access the Third-Party Websites or to use or install any Third-Party Content, you do so at your own risk, and you should be aware these Terms of Use no longer govern. You should review the applicable terms and policies, including privacy and data gathering practices, of any website to which you navigate from the Site or relating to any applications you use or install from the Site. Any purchases you make through Third-Party Websites will be through other websites and from other companies, and we take no responsibility whatsoever in relation to such purchases which are exclusively between you and the applicable third party. You agree and acknowledge that we do not endorse the products or services offered on Third-Party Websites and you shall hold us harmless from any harm caused by your purchase of such products or services. Additionally, you shall hold us harmless from any losses sustained by you or harm caused to you relating to or resulting in any way from any Third-Party Content or any contact with Third-Party Websites. - - -## SITE MANAGEMENT - -We reserve the right, but not the obligation, to: (1) monitor the Site for violations of these Terms of Use; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or these Terms of Use, including without limitation, reporting such user to law enforcement authorities; (3) in our sole discretion and without limitation, refuse, restrict access to, limit the availability of, or disable (to the extent technologically feasible) any of your Contributions or any portion thereof; (4) in our sole discretion and without limitation, notice, or liability, to remove from the Site or otherwise disable all files and content that are excessive in size or are in any way burdensome to our systems; and (5) otherwise manage the Site in a manner designed to protect our rights and property and to facilitate the proper functioning of the Site. - - -## PRIVACY POLICY - -We care about data privacy and security. Please review our [Privacy Policy](/privacy). By using the Site, you agree to be bound by our Privacy Policy, which is incorporated into these Terms of Use. Please be advised the Site is hosted in the United States. If you access the Site from the European Union, Asia, or any other region of the world with laws or other requirements governing personal data collection, use, or disclosure that differ from applicable laws in the United States, then through your continued use of the Site, you are transferring your data to the United States, and you expressly consent to have your data transferred to and processed in the United States. Further, we do not knowingly accept, request, or solicit information from children or knowingly market to children. Therefore, in accordance with the U.S. Children’s Online Privacy Protection Act, if we receive actual knowledge that anyone under the age of 13 has provided personal information to us without the requisite and verifiable parental consent, we will delete that information from the Site as quickly as is reasonably practical. - -## TERM AND TERMINATION - -These Terms of Use shall remain in full force and effect while you use the Site. WITHOUT LIMITING ANY OTHER PROVISION OF THESE TERMS OF USE, WE RESERVE THE RIGHT TO, IN OUR SOLE DISCRETION AND WITHOUT NOTICE OR LIABILITY, DENY ACCESS TO AND USE OF THE SITE (INCLUDING BLOCKING CERTAIN IP ADDRESSES), TO ANY PERSON FOR ANY REASON OR FOR NO REASON, INCLUDING WITHOUT LIMITATION FOR BREACH OF ANY REPRESENTATION, WARRANTY, OR COVENANT CONTAINED IN THESE TERMS OF USE OR OF ANY APPLICABLE LAW OR REGULATION. WE MAY TERMINATE YOUR USE OR PARTICIPATION IN THE SITE OR DELETE ANY CONTENT OR INFORMATION THAT YOU POSTED AT ANY TIME, WITHOUT WARNING, IN OUR SOLE DISCRETION. - - -## MODIFICATIONS AND INTERRUPTIONS - -We reserve the right to change, modify, or remove the contents of the Site at any time or for any reason at our sole discretion without notice. However, we have no obligation to update any information on our Site. We also reserve the right to modify or discontinue all or part of the Site without notice at any time. We will not be liable to you or any third party for any modification, suspension, or discontinuance of the Site. - -We cannot guarantee the Site will be available at all times. We may experience hardware, software, or other problems or need to perform maintenance related to the Site, resulting in interruptions, delays, or errors. We reserve the right to change, revise, update, suspend, discontinue, or otherwise modify the Site at any time or for any reason without notice to you. You agree that we have no liability whatsoever for any loss, damage, or inconvenience caused by your inability to access or use the Site during any downtime or discontinuance of the Site. Nothing in these Terms of Use will be construed to obligate us to maintain and support the Site or to supply any corrections, updates, or releases in connection therewith. - - -## GOVERNING LAW - -These Terms of Use and your use of the Site are governed by and construed in accordance with the laws of the Commonwealth of Pennsylvania, without regard to its conflict of law principles. - - -## CORRECTIONS - -There may be information on the Site that contains typographical errors, inaccuracies, or omissions. We reserve the right to correct any errors, inaccuracies, or omissions and to change or update the information on the Site at any time, without prior notice. - - -## DISCLAIMER - -THE SITE IS PROVIDED ON AN AS-IS AND AS-AVAILABLE BASIS. YOU AGREE THAT YOUR USE OF THE SITE AND OUR SERVICES WILL BE AT YOUR SOLE RISK. TO THE FULLEST EXTENT PERMITTED BY LAW, WE DISCLAIM ALL WARRANTIES, EXPRESS OR IMPLIED, IN CONNECTION WITH THE SITE AND YOUR USE THEREOF, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. WE MAKE NO WARRANTIES OR REPRESENTATIONS ABOUT THE ACCURACY OR COMPLETENESS OF THE SITE’S CONTENT OR THE CONTENT OF ANY WEBSITES LINKED TO THE SITE AND WE WILL ASSUME NO LIABILITY OR RESPONSIBILITY FOR ANY (1) ERRORS, MISTAKES, OR INACCURACIES OF CONTENT AND MATERIALS, (2) PERSONAL INJURY OR PROPERTY DAMAGE, OF ANY NATURE WHATSOEVER, RESULTING FROM YOUR ACCESS TO AND USE OF THE SITE, (3) ANY UNAUTHORIZED ACCESS TO OR USE OF OUR SECURE SERVERS AND/OR ANY AND ALL PERSONAL INFORMATION AND/OR FINANCIAL INFORMATION STORED THEREIN, (4) ANY INTERRUPTION OR CESSATION OF TRANSMISSION TO OR FROM THE SITE, (5) ANY BUGS, VIRUSES, TROJAN HORSES, OR THE LIKE WHICH MAY BE TRANSMITTED TO OR THROUGH THE SITE BY ANY THIRD PARTY, AND/OR (6) ANY ERRORS OR OMISSIONS IN ANY CONTENT AND MATERIALS OR FOR ANY LOSS OR DAMAGE OF ANY KIND INCURRED AS A RESULT OF THE USE OF ANY CONTENT POSTED, TRANSMITTED, OR OTHERWISE MADE AVAILABLE VIA THE SITE. WE DO NOT WARRANT, ENDORSE, GUARANTEE, OR ASSUME RESPONSIBILITY FOR ANY PRODUCT OR SERVICE ADVERTISED OR OFFERED BY A THIRD PARTY THROUGH THE SITE, ANY HYPERLINKED WEBSITE, OR ANY WEBSITE OR MOBILE APPLICATION FEATURED IN ANY BANNER OR OTHER ADVERTISING, AND WE WILL NOT BE A PARTY TO OR IN ANY WAY BE RESPONSIBLE FOR MONITORING ANY TRANSACTION BETWEEN YOU AND ANY THIRD-PARTY PROVIDERS OF PRODUCTS OR SERVICES. AS WITH THE PURCHASE OF A PRODUCT OR SERVICE THROUGH ANY MEDIUM OR IN ANY ENVIRONMENT, YOU SHOULD USE YOUR BEST JUDGMENT AND EXERCISE CAUTION WHERE APPROPRIATE. - - -## LIMITATIONS OF LIABILITY - -IN NO EVENT WILL WE OR OUR DIRECTORS, EMPLOYEES, OR AGENTS BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, SPECIAL, OR PUNITIVE DAMAGES, INCLUDING LOST PROFIT, LOST REVENUE, LOSS OF DATA, OR OTHER DAMAGES ARISING FROM YOUR USE OF THE SITE, EVEN IF WE HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. NOTWITHSTANDING ANYTHING TO THE CONTRARY CONTAINED HEREIN, OUR LIABILITY TO YOU FOR ANY CAUSE WHATSOEVER AND REGARDLESS OF THE FORM OF THE ACTION, WILL AT ALL TIMES BE LIMITED TO THE AMOUNT PAID, IF ANY, BY YOU TO US DURING THE SIX (6) MONTH PERIOD PRIOR TO ANY CAUSE OF ACTION ARISING. CERTAIN STATE LAWS DO NOT ALLOW LIMITATIONS ON IMPLIED WARRANTIES OR THE EXCLUSION OR LIMITATION OF CERTAIN DAMAGES. IF THESE LAWS APPLY TO YOU, SOME OR ALL OF THE ABOVE DISCLAIMERS OR LIMITATIONS MAY NOT APPLY TO YOU, AND YOU MAY HAVE ADDITIONAL RIGHTS. - - -## INDEMNIFICATION - -You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of our respective officers, agents, partners, and employees, from and against any loss, damage, liability, claim, or demand, including reasonable attorneys’ fees and expenses, made by any third party due to or arising out of: (1) use of the Site; (2) breach of these Terms of Use; (3) any breach of your representations and warranties set forth in these Terms of Use; (4) your violation of the rights of a third party, including but not limited to intellectual property rights; or (5) any overt harmful act toward any other user of the Site with whom you connected via the Site. Notwithstanding the foregoing, we reserve the right, at your expense, to assume the exclusive defense and control of any matter for which you are required to indemnify us, and you agree to cooperate, at your expense, with our defense of such claims. We will use reasonable efforts to notify you of any such claim, action, or proceeding which is subject to this indemnification upon becoming aware of it. - - -## USER DATA - -We will maintain certain data that you transmit to the Site for the purpose of managing the performance of the Site, as well as data relating to your use of the Site. Although we perform regular routine backups of data, you are solely responsible for all data that you transmit or that relates to any activity you have undertaken using the Site. You agree that we shall have no liability to you for any loss or corruption of any such data, and you hereby waive any right of action against us arising from any such loss or corruption of such data. - - -## ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES - -Visiting the Site, sending us emails, and completing online forms constitute electronic communications. You consent to receive electronic communications, and you agree that all agreements, notices, disclosures, and other communications we provide to you electronically, via email and on the Site, satisfy any legal requirement that such communication be in writing. YOU HEREBY AGREE TO THE USE OF ELECTRONIC SIGNATURES, CONTRACTS, ORDERS, AND OTHER RECORDS, AND TO ELECTRONIC DELIVERY OF NOTICES, POLICIES, AND RECORDS OF TRANSACTIONS INITIATED OR COMPLETED BY US OR VIA THE SITE. You hereby waive any rights or requirements under any statutes, regulations, rules, ordinances, or other laws in any jurisdiction which require an original signature or delivery or retention of non-electronic records, or to payments or the granting of credits by any means other than electronic means. - - -## MISCELLANEOUS - -These Terms of Use and any policies or operating rules posted by us on the Site or in respect to the Site constitute the entire agreement and understanding between you and us. Our failure to exercise or enforce any right or provision of these Terms of Use shall not operate as a waiver of such right or provision. These Terms of Use operate to the fullest extent permissible by law. We may assign any or all of our rights and obligations to others at any time. We shall not be responsible or liable for any loss, damage, delay, or failure to act caused by any cause beyond our reasonable control. If any provision or part of a provision of these Terms of Use is determined to be unlawful, void, or unenforceable, that provision or part of the provision is deemed severable from these Terms of Use and does not affect the validity and enforceability of any remaining provisions. There is no joint venture, partnership, employment or agency relationship created between you and us as a result of these Terms of Use or use of the Site. You agree that these Terms of Use will not be construed against us by virtue of having drafted them. You hereby waive any and all defenses you may have based on the electronic form of these Terms of Use and the lack of signing by the parties hereto to execute these Terms of Use. diff --git a/content/en/webapps.md b/content/en/webapps.md new file mode 100644 index 00000000..18ba99ee --- /dev/null +++ b/content/en/webapps.md @@ -0,0 +1,50 @@ +--- +title: OpenMS-Web apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+
+
+
+

OpenMS WebApps

+

+ Build a WebApp to showcase your pipeline. +

+ +
+
+
+
+ +
+
+ {{< webapps-highlights >}} +
+
+ {{< webapps-using-template >}} +
+
+
+ {{< webapps-developers >}} +
+
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..6916f266 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,86 @@ +# 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) | +| Add or remove a sponsor logo | [Update sponsors](common-tasks/update-sponsors.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 +│ ├── update-sponsors.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 +University of Tübingen +``` + +## 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..50af9d34 --- /dev/null +++ b/docs/common-tasks/configure-donate-zeffy.md @@ -0,0 +1,45 @@ +# Configure the donate page (Zeffy) + +The footer **Donate** link goes to **`/donate/`**. Donations are collected through [Zeffy](https://www.zeffy.com/) (embedded on the page when configured). + +## 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 ` + + {{- else if $hasZeffyForm -}} + + {{- else -}} + + {{- end -}} + + + + + + diff --git a/layouts/partials/ecosystem-home.html b/layouts/partials/ecosystem-home.html new file mode 100644 index 00000000..56f6c211 --- /dev/null +++ b/layouts/partials/ecosystem-home.html @@ -0,0 +1,53 @@ +{{- $cfg := site.Params.ecosystemSection | default dict -}} +{{- $title := index $cfg "title" | default "Build your own pipelines using our ecosystem" -}} +{{- $titleHighlight := index $cfg "titleHighlight" | default "ecosystem" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- if gt (len $items) 0 }} +
+
+
+
+

+ {{- if and $titleHighlight (in $title $titleHighlight) }} + {{ replace $title $titleHighlight (printf "%s" $titleHighlight) | safeHTML }} + {{- else }} + {{ $title }} + {{- end }} +

+
+
+ +
+
+{{- end }} diff --git a/layouts/partials/events-year-select.html b/layouts/partials/events-year-select.html new file mode 100644 index 00000000..faeefdd6 --- /dev/null +++ b/layouts/partials/events-year-select.html @@ -0,0 +1,25 @@ +{{- $cfg := .Site.Params.calendarSection | default dict -}} +{{- $listTitle := index $cfg "pastTitle" | default "Past events" -}} +{{- $yearFilterLabel := index $cfg "yearFilterLabel" | default "Filter events by year" -}} +{{- $pastHint := index $cfg "pastHint" | default "Browse events from previous years." -}} +{{- $years := .years | default (slice) -}} +{{- $defaultYear := .defaultYear | default (index $years 0) -}} +
+
+

{{ $listTitle }}

+

{{ $pastHint }}

+
+ +
diff --git a/layouts/partials/fellowship-form-embed.html b/layouts/partials/fellowship-form-embed.html new file mode 100644 index 00000000..a973398e --- /dev/null +++ b/layouts/partials/fellowship-form-embed.html @@ -0,0 +1,37 @@ +{{- $formId := .formId | default "44qqqd" -}} +{{- $title := .title | default "OpenMS Fellowship Application" -}} +
+ +
+ + diff --git a/layouts/partials/fellowship-main.html b/layouts/partials/fellowship-main.html new file mode 100644 index 00000000..ab55ab83 --- /dev/null +++ b/layouts/partials/fellowship-main.html @@ -0,0 +1,47 @@ +{{- $cfg := .Site.Params.fellowshipPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Community" -}} +{{- $headline := index $cfg "headline" | default "Gain hands-on experience in open-source science." -}} +{{- $blurb := index $cfg "blurb" | default "" -}} +{{- $chips := index $cfg "chips" | default (slice) -}} +{{- $formId := index $cfg "tallyFormId" | default "44qqqd" -}} +
+
+
+
+
+
+

{{ $eyebrow }}

+

{{ $headline | safeHTML }}

+ {{- if $blurb -}} +

{{ $blurb | safeHTML }}

+ {{- end -}} + {{- with $chips }} +
    + {{- range . }} +
  • {{ . }}
  • + {{- end }} +
+ {{- end }} +
+
+
+
+ +
+
+
+
+
+

Apply

+

Apply for the fellowship

+

Complete the application below.
We review submissions on a rolling basis and will follow up by email.

+
+
+ {{ partial "fellowship-form-embed.html" (dict "formId" $formId) }} +
+
+
+
+
+
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d219add1..450a92cf 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,68 +1,97 @@ {{- $footer := .Site.Params.footer }} {{- $title := index $footer "title" }} {{- $deployedBy := index $footer "deployedBy" }} -{{- $sponsorLogo1 := index $footer "sponsorLogo1" }} -{{- $sponsorLogo2 := index $footer "sponsorLogo2" }} -{{- $sponsorLogo3 := index $footer "sponsorLogo3" }} {{- $quickLinks := index $footer "quicklinks" }} {{- $socialMedia := index $footer "socialmedia" }} +{{- $footerLogo := index $footer "logo" | default .Site.Params.navbarlogo }} +{{- $donate := index $footer "donate" }} +{{- $sponsor := index $footer "sponsor" }} - + + diff --git a/layouts/partials/governance-main.html b/layouts/partials/governance-main.html new file mode 100644 index 00000000..ce031df6 --- /dev/null +++ b/layouts/partials/governance-main.html @@ -0,0 +1,184 @@ +{{- $cfg := .Site.Params.governancePage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "OpenMS governance" -}} +{{- $subtitle := index $cfg "subtitle" | default "OpenMS combines a nonprofit corporation for legal and financial stewardship with an Executive Committee that leads technical direction and community governance." -}} +
+
+
+
+
+
+

{{ $eyebrow }}

+

+ Built for stability, guided by community. +

+

{{ $subtitle }}

+ +
+
+
+
+ +
+
+
+
+
+
+

Structure

+

Two layers of governance

+

+ A nonprofit corporation provides legal and financial stewardship, + while the Executive Committee leads the software project. +

+
+
+ +
+
+ +

Corporate Governance

+

OpenMS Inc.

+

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 primary governance body for the software project — 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 +
+
+
+
+
+ +
+
+
+
+

Community

+

How Core Developers Fit In

+

+ Core developers are trusted maintainers who review contributions, mentor contributors, + and participate in project governance through the Executive Committee. +

+
+ +
+
+
+
+ + Review +
+

Review and approve contributions

+
+
+
+ + Direction +
+

Guide technical direction

+
+
+
+ + Mentorship +
+

Mentor new contributors

+
+
+
+ + Votes +
+

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. +

+
+
+
+ +
+
+
+
+
+

Clarity

+

Separation of Responsibilities

+

+ This model gives OpenMS institutional stability + while preserving independent technical governance by the active maintainer community. +

+
+
+ +
+
+
+ +

Board of Directors

+
+

Corporate

+

Legal entity, nonprofit compliance, and financial stewardship.

+
+
+
+ +

Executive Committee

+
+

Project

+

Software roadmap, contributor governance, and technical or community decisions.

+
+
+
+
+
+
+ +
+ +
+
+
diff --git a/layouts/partials/help-main.html b/layouts/partials/help-main.html new file mode 100644 index 00000000..b411ab1f --- /dev/null +++ b/layouts/partials/help-main.html @@ -0,0 +1,27 @@ +{{- $cfg := .Site.Params.helpPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Support" -}} +{{- $subtitle := index $cfg "subtitle" | default "Find the right channel for user questions, development issues, documentation, and community discussion — from Stack Overflow to the OpenMS mailing list." -}} +
+
+
+
+

{{ $eyebrow }}

+

+ Scientific & technical help for OpenMS. +

+

{{ $subtitle }}

+ +
+
+
+ +
+
+ {{ .Content }} +
+
+
diff --git a/layouts/partials/hero-logo-diagram.html b/layouts/partials/hero-logo-diagram.html new file mode 100644 index 00000000..625ea558 --- /dev/null +++ b/layouts/partials/hero-logo-diagram.html @@ -0,0 +1,82 @@ +{{- $hero := .Site.Params.hero }} +{{- $diagramAlt := index $hero "imageAlt" | default "Animated OpenMS logo with pulsing mass spectrometry peak diagram" }} + +
+
+
+ +
+
+
diff --git a/layouts/partials/hero-spectrum-bg.html b/layouts/partials/hero-spectrum-bg.html new file mode 100644 index 00000000..57e563a4 --- /dev/null +++ b/layouts/partials/hero-spectrum-bg.html @@ -0,0 +1,43 @@ + diff --git a/layouts/partials/hero-sponsors.html b/layouts/partials/hero-sponsors.html new file mode 100644 index 00000000..686d7ed6 --- /dev/null +++ b/layouts/partials/hero-sponsors.html @@ -0,0 +1,38 @@ +{{- $sponsors := .Site.Params.homeSponsors }} +{{- if and $sponsors (index $sponsors "enabled") }} +{{- $label := index $sponsors "label" | default "Supported by" }} +{{- $description := index $sponsors "description" }} +{{- $items := index $sponsors "sponsors" }} +
+
+
+

{{ $label }}

+ {{- with $description }} +

{{ . }}

+ {{- end }} +
+ {{- with $items }} +
    + {{- range . }} +
  • + + {{ .alt | default .name }} + +
  • + {{- end }} +
+ {{- end }} +
+
+{{- end }} diff --git a/layouts/partials/hero-stat-card.html b/layouts/partials/hero-stat-card.html new file mode 100644 index 00000000..eb367423 --- /dev/null +++ b/layouts/partials/hero-stat-card.html @@ -0,0 +1,16 @@ +{{- $stat := .stat -}} +
+

{{ $stat.label }}

+

+ {{- with $stat.prefix }}{{ . }}{{ end -}} + 0{{- with $stat.suffix -}}{{ . }}{{- end -}} +

+ {{- with $stat.description }} +

{{ . }}

+ {{- end }} +
diff --git a/layouts/partials/hero-stats.html b/layouts/partials/hero-stats.html new file mode 100644 index 00000000..87608b56 --- /dev/null +++ b/layouts/partials/hero-stats.html @@ -0,0 +1,64 @@ +{{- $stats := .stats }} +{{- $class := .class | default "hero-modern__stats" }} +{{- $layout := .layout | default "" }} +{{- $below := in $class "hero-modern__stats--below" }} +{{- $homeMetrics := eq $class "hero-home__metrics" }} +{{- $bento := eq $layout "bento" }} +{{- with $stats }} +{{- if $bento }} +
+
+ {{- range . }} + {{ partial "hero-stat-card.html" (dict "stat" .) }} + {{- end }} +
+
+{{- else }} +{{- $statCount := len . }} +
+ {{- range $index, $stat := . }} +
+ {{- if $homeMetrics }} +
+ {{ $stat.label }} +
+
0{{ $stat.suffix | default "" }}
+ {{- else }} +
+ + {{ $stat.label }} +
+
0{{ $stat.suffix | default "" }}
+ {{- end }} +
+ {{- if and (not $homeMetrics) (lt (add $index 1) $statCount) }} + + {{- end }} + {{- end }} +
+{{- end }} +{{- end }} diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html new file mode 100644 index 00000000..e5fcb597 --- /dev/null +++ b/layouts/partials/hero.html @@ -0,0 +1,69 @@ +{{- $hero := .Site.Params.hero }} +{{- $titleBefore := index $hero "titleBefore" | default "The " }} +{{- $titleHighlight := index $hero "titleHighlight" | default "open-source framework" }} +{{- $titleAfter := index $hero "titleAfter" | default " for Mass Spectrometry" }} +{{- $description := index $hero "description" }} +{{- $buttonText := index $hero "buttontext" }} +{{- $buttonLink := index $hero "buttonlink" }} +{{- $secondaryText := index $hero "secondaryButtonText" }} +{{- $secondaryLink := index $hero "secondaryButtonLink" }} +{{- $microcopy := index $hero "microcopy" }} + +
+
+
+
+
+
+

+ {{ $titleBefore }}{{ $titleHighlight }}{{ $titleAfter }} +

+ {{- with $description }} +

{{ . }}

+ {{- end }} +
+ + +
+ +
+
+ {{ partial "hero-logo-diagram.html" . }} + {{- with $microcopy }} +
+
    + {{- range split . " · " }} +
  • {{ trim . " " }}
  • + {{- end }} +
+
+ {{- end }} +
+
+
+
+
+
diff --git a/layouts/partials/heroitems.html b/layouts/partials/heroitems.html index 51663a44..cd39e7dd 100644 --- a/layouts/partials/heroitems.html +++ b/layouts/partials/heroitems.html @@ -1,48 +1,101 @@ -{{- $heroGroup := .Site.Params.heroGroup }} +{{- $site := .Site -}} +{{- $filterVariant := .variant -}} +{{- $embed := .embed -}} +{{- $heroGroup := $site.Params.heroGroup -}} {{- range $heroGroup }} +{{- if and $filterVariant (ne (.variant | default "") $filterVariant) }}{{- continue }}{{- end }} {{- $bgColor := .bgColor }} -
-

{{ .title }}

-
-{{- range .heroItems }} -
-
-
- {{- if .leftAlign }} -
-
- Description -
-
- {{- end}} -
-

- {{ .title }} -

- {{- with .subtitle }} -

- {{ . }} -

- {{- end }} - +{{- $eyebrow := .eyebrow }} +{{- $titleHighlight := .titleHighlight }} +{{- $subtitle := .subtitle }} +{{- $variant := .variant | default "default" }} +{{- $isLibList := eq $embed "openms-lib" }} +
+
+
+ {{- with $eyebrow }} +

{{ . }}

+ {{- end }} +

+ {{- if and $titleHighlight (in .title $titleHighlight) }} + {{ replace .title $titleHighlight (printf "%s" $titleHighlight) | safeHTML }} + {{- else }} + {{ .title }} + {{- end }} +

+ {{- with $subtitle }} +

{{ . }}

+ {{- end }} +
+ +
    + {{- range $index, $item := .heroItems }} +
  • +
    + {{- if and $isLibList .buttonLink (and (ne $variant "users") (ne $variant "developers")) }} + + {{- end }} + + + -
+
+ + + {{- end }} + +
+ {{- end }} -
-{{- end }} \ No newline at end of file diff --git a/layouts/partials/home-metric-card.html b/layouts/partials/home-metric-card.html new file mode 100644 index 00000000..fd24c6bc --- /dev/null +++ b/layouts/partials/home-metric-card.html @@ -0,0 +1,20 @@ +{{- $stat := .stat -}} +
+

{{ $stat.label }}

+ {{- if $stat.text }} +

{{ $stat.text }}

+ {{- else }} +

+ {{- with $stat.prefix }}{{ . }}{{ end -}} + 0{{- with $stat.suffix -}}{{ . }}{{- end -}} +

+ {{- end }} + {{- with $stat.description }} +

{{ . }}

+ {{- end }} +
diff --git a/layouts/partials/home-metrics.html b/layouts/partials/home-metrics.html new file mode 100644 index 00000000..219dd247 --- /dev/null +++ b/layouts/partials/home-metrics.html @@ -0,0 +1,13 @@ +{{- $metrics := .Site.Params.homeMetrics | default dict -}} +{{- $stats := $metrics.stats | default (index .Site.Params.hero "stats") -}} +{{- with $stats }} +
+
+
+ {{- range . }} + {{ partial "home-metric-card.html" (dict "stat" .) }} + {{- end }} +
+
+
+{{- end }} diff --git a/layouts/partials/home-pathways.html b/layouts/partials/home-pathways.html new file mode 100644 index 00000000..c348fad8 --- /dev/null +++ b/layouts/partials/home-pathways.html @@ -0,0 +1,35 @@ +{{- $page := .Page -}} +{{- $section := $page.Site.Params.homePage | default dict -}} +{{- $eyebrow := index $section "pathwaysEyebrow" | default "Explore" -}} +{{- $title := index $section "pathwaysTitle" | default "Where to go next" -}} +{{- $items := .items | default (index $section "pathways") | default (slice) -}} +{{- if gt (len $items) 0 }} +
+
+
+

{{ $eyebrow }}

+

{{ $title }}

+
+
    + {{- range $index, $item := $items }} +
  1. + + + + {{ $item.title }} + {{- with $item.text }} + {{ . }} + {{- end }} + + + +
  2. + {{- end }} +
+
+
+{{- end }} diff --git a/layouts/partials/keyfeatures.html b/layouts/partials/keyfeatures.html index 2913d134..73311f52 100644 --- a/layouts/partials/keyfeatures.html +++ b/layouts/partials/keyfeatures.html @@ -1,13 +1,122 @@ -{{- $keyfeatures := .Site.Params.keyfeatures }} +{{- $page := .Page | default . -}} +{{- $keyfeatures := $page.Site.Params.keyfeatures }} +{{- $embed := .embed -}} +{{- $isOverview := eq $embed "openms-lib" }} {{- $title := index $keyfeatures "title" }} -{{- $subtitle := index $keyfeatures "subtitle" }} +{{- $eyebrow := index $keyfeatures "eyebrow" }} +{{- $titleHighlight := index $keyfeatures "titleHighlight" }} +{{- $description := index $keyfeatures "description" | default (index $keyfeatures "subtitle") }} +{{- $note := index $keyfeatures "note" }} {{- $features := index $keyfeatures "features" }} -
-
-

{{ $title }}

-

{{ $subtitle }}

-
+
+
+ {{- if $isOverview }} +
+ {{- with $eyebrow }} +

{{ . }}

+ {{- end }} +

+ {{- if and $titleHighlight (in $title $titleHighlight) }} + {{ replace $title $titleHighlight (printf "%s" $titleHighlight) | safeHTML }} + {{- else }} + {{ $title }} + {{- end }} +

+ {{- with $description }} +
+ {{ . | markdownify }} +
+ {{- end }} +
+ {{- with $features }} +
    + {{- range $index, $feature := . }} +
  • +
    + +
    + {{- with $feature.tag }} +
    + {{- range (split . " · ") }} + {{ . }} + {{- end }} +
    + {{- end }} + {{- with $feature.title }} +

    {{ . }}

    + {{- end }} + {{- with $feature.text }} +

    {{ . }}

    + {{- end }} +
    +
    +
  • + {{- end }} +
+ {{- end }} + + {{- with $note }} + + {{- end }} + {{- else }} +
+
+
+ {{- with $eyebrow }} +

{{ . }}

+ {{- end }} +

{{ replaceRE "(OpenMS)" "$1" $title | safeHTML }}

+
+ {{- with $description }} +
+ {{ . | markdownify }}
+ {{- end }} +
+ + {{- with $features }} +
    + {{- range $index, $feature := . }} +
  • +
    + + {{- with $feature.img }} + + {{- else }} + + {{- end }} +
    + {{- with $feature.title }} +

    {{ . }}

    + {{- end }} + {{- with $feature.text }} +

    {{ . }}

    + {{- end }} +
    +
    +
  • + {{- end }} +
+ {{- end }} + + {{- with $note }} + + {{- end }}
-
\ No newline at end of file + {{- end }} +
+
diff --git a/layouts/partials/navbar-clone.html b/layouts/partials/navbar-clone.html new file mode 100644 index 00000000..17532ca0 --- /dev/null +++ b/layouts/partials/navbar-clone.html @@ -0,0 +1,81 @@ +{{- $title := .Site.Params.title }} +{{- $navbar := .Site.Params.navbar }} +{{- $navbarLogo := .Site.Params.navbarlogo }} + diff --git a/layouts/partials/navbar-cta.html b/layouts/partials/navbar-cta.html new file mode 100644 index 00000000..9fec9bd9 --- /dev/null +++ b/layouts/partials/navbar-cta.html @@ -0,0 +1,10 @@ +{{- $item := . }} + + {{ $item.title }} + {{ $item.shortTitle | default $item.title }} + {{ if $item.is_external }}{{ partial "svg-icon" "launch" }}{{ end }} + diff --git a/layouts/partials/navbar-menu-header.html b/layouts/partials/navbar-menu-header.html new file mode 100644 index 00000000..b8b1d2af --- /dev/null +++ b/layouts/partials/navbar-menu-header.html @@ -0,0 +1,7 @@ + diff --git a/layouts/partials/navbar-mobile-ctas.html b/layouts/partials/navbar-mobile-ctas.html new file mode 100644 index 00000000..2130ac0c --- /dev/null +++ b/layouts/partials/navbar-mobile-ctas.html @@ -0,0 +1,11 @@ +{{- $site := .Site -}} +{{- if not $site }}{{ $site = index . "Site" }}{{ end -}} +{{- $placement := .placement | default "menu" -}} +{{- $navbar := $site.Params.navbar -}} + diff --git a/layouts/partials/navbar-search.html b/layouts/partials/navbar-search.html new file mode 100644 index 00000000..52ddcb1d --- /dev/null +++ b/layouts/partials/navbar-search.html @@ -0,0 +1,61 @@ +{{- $site := .Site -}} +{{- $cfg := $site.Params.navbarSearch -}} +{{- if and $cfg (ne $cfg.enabled false) -}} +{{- $id := .inputId | default "navbar-search-input" -}} +{{- $variant := .variant | default "desktop" -}} + +{{- end -}} diff --git a/layouts/partials/navbar-social.html b/layouts/partials/navbar-social.html new file mode 100644 index 00000000..00e84c7c --- /dev/null +++ b/layouts/partials/navbar-social.html @@ -0,0 +1,14 @@ +{{- $socialMedia := index .Site.Params.footer "socialmedia" }} +{{- if $socialMedia }} + +{{- end }} diff --git a/layouts/partials/navbar-sublinks.html b/layouts/partials/navbar-sublinks.html new file mode 100644 index 00000000..b725fed2 --- /dev/null +++ b/layouts/partials/navbar-sublinks.html @@ -0,0 +1,10 @@ +{{- range . }} +{{- if .is_heading }} +{{ .title }} +{{- else }} + + {{ .title }} + {{ if .is_external }}{{ partial "svg-icon" "external-link" }}{{ end }} + +{{- end }} +{{- end }} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html new file mode 100644 index 00000000..63e13591 --- /dev/null +++ b/layouts/partials/navbar.html @@ -0,0 +1,82 @@ +{{- $title := .Site.Params.title }} +{{- $navbar := .Site.Params.navbar }} +{{- $navbarLogo := .Site.Params.navbarlogo }} + diff --git a/layouts/partials/news-banner.html b/layouts/partials/news-banner.html new file mode 100644 index 00000000..e02cd74e --- /dev/null +++ b/layouts/partials/news-banner.html @@ -0,0 +1,27 @@ +{{- $banner := .Site.Params.newsBanner }} +{{- if and $banner $banner.enabled }} +{{- $link := $banner.link }} + +{{- end }} diff --git a/layouts/partials/news-date-badge.html b/layouts/partials/news-date-badge.html new file mode 100644 index 00000000..148f2be1 --- /dev/null +++ b/layouts/partials/news-date-badge.html @@ -0,0 +1,9 @@ +{{- if not .Date.IsZero }} +
+ +
+{{- end }} diff --git a/layouts/partials/news-entry.html b/layouts/partials/news-entry.html new file mode 100644 index 00000000..71ac823a --- /dev/null +++ b/layouts/partials/news-entry.html @@ -0,0 +1,30 @@ +{{- $page := .page -}} +{{- $readMore := .readMore -}} +
  • +

    + {{ $page.Title }} +

    + {{- if not $page.Date.IsZero }} + + {{- else }} + {{- with or $page.Params.authors $page.Params.Authors }} + + {{- end }} + {{- end }} + {{- with $page.Summary }} +

    {{ . }}

    + {{- end }} + {{ $readMore }} +
  • diff --git a/layouts/partials/news-home.html b/layouts/partials/news-home.html new file mode 100644 index 00000000..20965880 --- /dev/null +++ b/layouts/partials/news-home.html @@ -0,0 +1,58 @@ +{{- $cfg := site.Params.newsSection | default dict -}} +{{- $title := index $cfg "homeTitle" | default "Latest news" -}} +{{- $titleHighlight := index $cfg "homeTitleHighlight" | default "news" -}} +{{- $viewAllText := index $cfg "homeViewAllText" | default "View all" -}} +{{- $viewAllUrl := index $cfg "homeViewAllUrl" | default "/news/" -}} +{{- $limit := index $cfg "homeLimit" | default 4 -}} +{{- $emptyMessage := index $cfg "homeEmptyMessage" | default "No news articles yet. Check back soon for announcements and updates." -}} +{{- $newsSection := site.GetPage "section" "news" -}} +{{- $pages := slice -}} +{{- if $newsSection -}} + {{- range $newsSection.RegularPages.ByDate.Reverse -}} + {{- if not .Date.IsZero -}} + {{- $pages = $pages | append . -}} + {{- end -}} + {{- end -}} +{{- end -}} +{{- $latest := first $limit $pages -}} +{{- $newsCount := len $latest -}} + +
    +
    +

    + {{- if and $titleHighlight (in $title $titleHighlight) -}} + {{ replace $title $titleHighlight (printf "%s" $titleHighlight) | safeHTML }} + {{- else -}} + {{ $title }} + {{- end -}} +

    + + {{ $viewAllText }} + + +
    + + {{- if gt $newsCount 0 -}} + + {{- else -}} +

    {{ $emptyMessage }}

    + {{- end -}} +
    diff --git a/layouts/partials/news-single-main.html b/layouts/partials/news-single-main.html new file mode 100644 index 00000000..792969ef --- /dev/null +++ b/layouts/partials/news-single-main.html @@ -0,0 +1,72 @@ +{{- $cfg := .Site.Params.newsSection | default dict }} +{{- $eyebrow := index $cfg "eyebrow" | default "OpenMS" }} +{{- $backLabel := index $cfg "backToNewsLabel" | default "Back to news" }} +{{- $newsUrl := "/news/" | relURL }} +{{- $year := "" }} +{{- if not .Date.IsZero }} + {{- $year = .Date.Format "2006" }} +{{- end }} +{{- if $year }} + {{- $newsUrl = printf "%s?year=%s" $newsUrl $year }} +{{- end }} +
    +
    +
    +
    +

    {{ $eyebrow }} · News

    +

    {{ .Title }}

    + {{- with .Params.subtitle }} +

    {{ . }}

    + {{- end }} + +
    +
    +
    + + {{- $toc := .TableOfContents }} + {{- $hasToc := and $toc (in (printf "%s" $toc) "]*>(.*)\s*$` "$1" (printf "%s" $toc) | safeHTML }} +
    +
    +
    +
    +
    + {{ partial "news-date-badge.html" . }} + {{- with or .Params.authors .Params.Authors }} + + {{- end }} +
    + + {{- if $hasToc }} + + {{- end }} + +
    + {{ .Content }} +
    + + +
    +
    + {{- if $hasToc }} + + {{- end }} +
    +
    +
    diff --git a/layouts/partials/news-year-select.html b/layouts/partials/news-year-select.html new file mode 100644 index 00000000..4b74cde4 --- /dev/null +++ b/layouts/partials/news-year-select.html @@ -0,0 +1,15 @@ +{{- $cfg := .Site.Params.newsSection | default dict -}} +{{- $yearFilterLabel := index $cfg "yearFilterLabel" | default "Filter news" -}} +{{- $allLabel := index $cfg "allYearsLabel" | default "All years" -}} +
    + +
    diff --git a/layouts/partials/openms-lib-developers.html b/layouts/partials/openms-lib-developers.html new file mode 100644 index 00000000..117c3be7 --- /dev/null +++ b/layouts/partials/openms-lib-developers.html @@ -0,0 +1 @@ +{{ partial "product-developers.html" (dict "cfg" site.Params.openmsLibDevelopers "id" "openms-lib-developers-title") }} diff --git a/layouts/partials/openms-lib-explore-hub.html b/layouts/partials/openms-lib-explore-hub.html new file mode 100644 index 00000000..67cd596e --- /dev/null +++ b/layouts/partials/openms-lib-explore-hub.html @@ -0,0 +1,150 @@ +{{- $cfg := .cfg | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Getting started" -}} +{{- $title := index $cfg "title" -}} +{{- $lead := index $cfg "lead" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- $id := .id | default "openms-lib-getting-started-title" -}} +{{- $spotlightAfterRoutes := index $cfg "spotlightAfterRoutes" | default false -}} +{{- $routeOffset := 0 -}} +{{- $spotlight := false -}} +{{- with index $items 0 -}} +{{- if and (not .tag) (not .icon) -}} +{{- $spotlight = . -}} +{{- $routeOffset = 1 -}} +{{- end -}} +{{- end -}} +{{- $featured := index $items $routeOffset -}} +{{- $python := index $items (add $routeOffset 1) -}} +{{- $docs := index $items (add $routeOffset 2) -}} +{{- $api := index $items (add $routeOffset 3) -}} +{{- $support := index $items (add $routeOffset 4) -}} +
    +
    + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} + {{- with $title }} +

    {{ . }}

    + {{- end }} + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + +
    + {{- if and $spotlight (not $spotlightAfterRoutes) }} + {{ partial "openms-lib-explore-spotlight.html" $spotlight }} + {{- end }} + + + + {{- if and $spotlight $spotlightAfterRoutes }} + {{ partial "openms-lib-explore-spotlight.html" (dict "item" $spotlight "afterRoutes" true) }} + {{- end }} + + {{- with $support }} + + {{- end }} +
    +
    diff --git a/layouts/partials/openms-lib-explore-spotlight.html b/layouts/partials/openms-lib-explore-spotlight.html new file mode 100644 index 00000000..760dcda8 --- /dev/null +++ b/layouts/partials/openms-lib-explore-spotlight.html @@ -0,0 +1,42 @@ +{{- $item := .item | default . -}} +{{- $afterRoutes := .afterRoutes | default false -}} +{{- if $item.button }} + +{{- else }} + +
    +

    {{ $item.title }}

    + {{- with $item.text }} +

    {{ . }}

    + {{- end }} + + {{ $item.linkText | default "Learn more" }} + +
    +
    +{{- end }} diff --git a/layouts/partials/openms-lib-getting-started.html b/layouts/partials/openms-lib-getting-started.html new file mode 100644 index 00000000..7599b161 --- /dev/null +++ b/layouts/partials/openms-lib-getting-started.html @@ -0,0 +1,119 @@ +{{- $cfg := .cfg | default site.Params.openmsLibGettingStarted | default dict -}} +{{- $id := .id | default "openms-lib-getting-started-title" -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Get started" -}} +{{- $title := index $cfg "title" | default "Explore OpenMS-lib" -}} +{{- $lead := index $cfg "lead" -}} +{{- $featureKicker := index $cfg "featureKicker" | default "Pipeline" -}} +{{- $featureIcon := index $cfg "featureIcon" | default "fas fa-terminal" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- $topp := false -}} +{{- $resources := slice -}} +{{- $support := false -}} +{{- range $i, $item := $items -}} +{{- if eq $i 0 -}} +{{- if and $item.url (not $item.icon) (not $item.tag) -}} +{{- $topp = $item -}} +{{- end -}} +{{- else if and $item.links (not $item.url) -}} +{{- $support = $item -}} +{{- else if or $item.icon $item.tag -}} +{{- $resources = $resources | append $item -}} +{{- end -}} +{{- end -}} +
    +
    +
    + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + +
    + {{- with $topp }} + + {{- end }} + + +
    +
    + + {{- with $support }} + + {{- end }} +
    diff --git a/layouts/partials/openms-lib-highlights.html b/layouts/partials/openms-lib-highlights.html new file mode 100644 index 00000000..9085df48 --- /dev/null +++ b/layouts/partials/openms-lib-highlights.html @@ -0,0 +1,38 @@ +{{- $cfg := .cfg | default site.Params.openmsLibHighlights | default dict -}} +{{- $id := .id | default "openms-lib-about-title" -}} +{{- $eyebrow := index $cfg "eyebrow" -}} +{{- $title := index $cfg "title" | default "What is OpenMS?" -}} +{{- $lead := index $cfg "lead" -}} +{{- $items := index $cfg "items" | default (slice) -}} +
    +
    +
    +
    + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} +

    {{ $title }}

    +
    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + + {{- with $items }} +
    + {{- range $i, $item := . }} +
    + + {{- with $item.title }} +

    {{ . }}

    + {{- end }} +

    {{ $item.text }}

    +
    + {{- end }} +
    + {{- end }} +
    +
    diff --git a/layouts/partials/openms-lib-main.html b/layouts/partials/openms-lib-main.html new file mode 100644 index 00000000..8e179a04 --- /dev/null +++ b/layouts/partials/openms-lib-main.html @@ -0,0 +1,3 @@ +
    + {{ .Content }} +
    diff --git a/layouts/partials/openms-lib-topp.html b/layouts/partials/openms-lib-topp.html new file mode 100644 index 00000000..9c902b98 --- /dev/null +++ b/layouts/partials/openms-lib-topp.html @@ -0,0 +1,68 @@ +{{- $cfg := site.Params.openmsLibTopp | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" -}} +{{- $title := index $cfg "title" | default "Ships with the TOPP command-line tools" -}} +{{- $lead := index $cfg "lead" -}} +{{- $features := index $cfg "features" | default (slice) -}} +{{- $ctaText := index $cfg "ctaText" | default "Explore TOPP tools" -}} +{{- $ctaUrl := index $cfg "ctaUrl" -}} +{{- $ctaBlurb := index $cfg "ctaBlurb" -}} +{{- $featureIcons := slice "fas fa-project-diagram" "fas fa-cogs" -}} +
    +
    +
    +
    + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} +

    {{ $title }}

    +
    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + +
    + {{- with $ctaUrl }} + + {{- end }} + + {{- with $features }} +
    + {{- range $i, $feature := . }} + + {{- end }} +
    + {{- end }} +
    +
    +
    diff --git a/layouts/partials/our-sponsors-main.html b/layouts/partials/our-sponsors-main.html new file mode 100644 index 00000000..8abb969e --- /dev/null +++ b/layouts/partials/our-sponsors-main.html @@ -0,0 +1,98 @@ +{{- /* + Our Sponsors page (/our-sponsors/). + + Config: params.aboutPage.sponsorsSection + params.aboutPage.sponsors + See docs/common-tasks/update-sponsors.md +*/ -}} +{{- $about := .Site.Params.aboutPage | default dict -}} +{{- $section := index $about "sponsorsSection" | default dict -}} +{{- $sponsors := index $about "sponsors" | default (slice) -}} +{{- $eyebrow := index $section "eyebrow" | default "About us" -}} +{{- $intro := index $section "intro" | default "OpenMS receives direct funding from organizations that sponsor the project." -}} +{{- $listTitle := index $section "listTitle" | default "Sponsors include:" -}} +{{- $contactCta := index $section "contactCta" | default "Interested in sponsoring us? Contact us for more information." -}} +{{- $contactUrl := index $section "contactUrl" | default "/contact/" -}} +{{- $groupByTier := index $section "groupByTier" | default false -}} +{{- $tiers := .Site.Params.sponsorTiers.levels | default (slice) -}} +
    +
    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Our Sponsors. +

    +

    {{ $intro }}

    + +
    +
    +
    +
    + +
    +
    +
    +
    + {{- if $groupByTier -}} +
    + {{- range $tiers -}} + {{- $tierId := .id -}} + {{- $tierSponsors := where $sponsors "tier" $tierId -}} + {{- if gt (len $tierSponsors) 0 -}} +
    +

    {{ .name }}

    +
    + {{- range $tierSponsors -}} + {{ partial "about-sponsor-logo.html" . }} + {{- end -}} +
    +
    + {{- end -}} + {{- end -}} +
    + {{- else -}} +
    + {{- range $sponsors -}} + {{ partial "about-sponsor-logo.html" . }} + {{- end -}} +
    + {{- end -}} +
    +
    +
    +
    + +
    + +
    +
    +
    diff --git a/layouts/partials/privacy-main.html b/layouts/partials/privacy-main.html new file mode 100644 index 00000000..4f6e670a --- /dev/null +++ b/layouts/partials/privacy-main.html @@ -0,0 +1,187 @@ +{{- $cfg := .Site.Params.privacyPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Legal" -}} +{{- $subtitle := index $cfg "subtitle" | default "A clear overview of how OpenMS handles personal data on this website." -}} +{{- $summaryMap := dict + "Comments" "We collect form fields, IP address, and browser info to help detect spam." + "Media" "Avoid uploading images that include embedded location data." + "Cookies" "Optional cookies can remember comment details and login preferences." + "Embedded content from other websites" "Third-party embeds may collect data as if you visited their site." + "HOW LONG WE RETAIN YOUR DATA" "Comments are kept so follow-ups can be recognized; profiles stay editable." + "WHAT RIGHTS YOU HAVE OVER YOUR DATA" "You can request an export or erasure of personal data we hold about you." + "WHERE WE SEND YOUR DATA" "Comments may be checked through an automated spam detection service." +-}} +{{- $titleMap := dict + "HOW LONG WE RETAIN YOUR DATA" "How long we keep data" + "WHAT RIGHTS YOU HAVE OVER YOUR DATA" "Your rights" + "WHERE WE SEND YOUR DATA" "Where data goes" +-}} +{{- $items := slice -}} +{{- $parts := split .RawContent "\n### " -}} +{{- range $i, $part := $parts -}} + {{- if eq $i 0 -}}{{- continue -}}{{- end -}} + {{- $lines := split $part "\n" -}} + {{- $heading := index $lines 0 | strings.TrimSpace -}} + {{- if not $heading -}}{{- continue -}}{{- end -}} + {{- $body := trim (delimit (after 1 $lines) "\n") " \n\r\t" -}} + {{- if eq $heading "WHO WE ARE" -}} + {{- continue -}} + {{- else if or (strings.Contains $body "\n#### ") (hasPrefix $body "#### ") -}} + {{- $topicSource := $body -}} + {{- if hasPrefix $topicSource "#### " -}} + {{- $topicSource = printf "\n%s" $topicSource -}} + {{- end -}} + {{- range $ti, $topic := (split $topicSource "\n#### ") -}} + {{- if eq $ti 0 -}}{{- continue -}}{{- end -}} + {{- $tLines := split $topic "\n" -}} + {{- $tHeading := index $tLines 0 | strings.TrimSpace -}} + {{- if not $tHeading -}}{{- continue -}}{{- end -}} + {{- $tBody := trim (delimit (after 1 $tLines) "\n") " \n\r\t" -}} + {{- $items = $items | append (dict + "id" ($tHeading | urlize) + "title" $tHeading + "summary" (index $summaryMap $tHeading | default "") + "body" $tBody + ) -}} + {{- end -}} + {{- else -}} + {{- $items = $items | append (dict + "id" ($heading | urlize) + "title" (index $titleMap $heading | default ($heading | lower | title)) + "summary" (index $summaryMap $heading | default "") + "body" $body + ) -}} + {{- end -}} +{{- end -}} + +
    +
    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Privacy Policy +

    +

    {{ $subtitle }}

    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

    Overview

    +

    Who we are

    +
    +

    + This policy applies to the OpenMS website at www.openms.de. +

    +
    +
    +
    +
    + +
    +
    +
    +
    +

    Details

    +

    Privacy topics

    +

    Scan the short summary, then open a topic only when you need the full wording.

    +
    + +
    + + +
    + +
    + {{- range $i, $item := $items -}} +
    + + + + {{ $item.title }} + {{- with $item.summary -}} + {{ . }} + {{- end -}} + + +
    + {{ $item.body | markdownify }} +
    +
    + {{- end -}} +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Questions

    +

    Need help with your data?

    +

    + Contact us to request an export or deletion of personal data we hold about you. +

    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + diff --git a/layouts/partials/product-developers-cite.html b/layouts/partials/product-developers-cite.html new file mode 100644 index 00000000..cc5581ed --- /dev/null +++ b/layouts/partials/product-developers-cite.html @@ -0,0 +1,66 @@ +{{- $citeText := .citeText -}} +{{- $citation := .citation | default dict -}} +{{- $citeVariant := .citeVariant | default "primary" -}} +{{- $citeLabel := .citeLabel -}} +{{- $separate := .separate | default false -}} + diff --git a/layouts/partials/product-developers.html b/layouts/partials/product-developers.html new file mode 100644 index 00000000..4ceecd14 --- /dev/null +++ b/layouts/partials/product-developers.html @@ -0,0 +1,152 @@ +{{- $cfg := .cfg | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "For Developers" -}} +{{- $title := index $cfg "title" | default "Contribute" -}} +{{- $lead := index $cfg "lead" -}} +{{- $boxes := index $cfg "boxes" | default (slice) -}} +{{- $citeText := index $cfg "citeText" -}} +{{- $citation := index $cfg "citation" | default dict -}} +{{- $citeVariant := index $citation "variant" | default "primary" -}} +{{- $citeSeparate := index $cfg "citeSeparate" | default false -}} +{{- $hasCite := or $citeText $citation -}} +{{- $sectionId := .id | default "product-developers-title" -}} +{{- $citeLabel := index $cfg "citeLabel" | default (printf "Cite %s" (index $citation "topic" | default "OpenMS")) -}} +{{- $citeCtx := dict "citeText" $citeText "citation" $citation "citeVariant" $citeVariant "citeLabel" $citeLabel -}} +{{- $links := slice -}} +{{- $buildLinks := false -}} +{{- $review := false -}} +{{- range $boxes -}} + {{- $type := .type | default "link" -}} + {{- if eq $type "build" -}} + {{- $review = . -}} + {{- else if eq $type "links" -}} + {{- $buildLinks = . -}} + {{- else -}} + {{- $links = $links | append . -}} + {{- end -}} +{{- end -}} +{{- $routeCount := add (len $links) (cond $buildLinks 1 0) -}} +
    +
    +
    +

    {{ $eyebrow }}

    +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + +
    +
    + {{- range $links }} + +
    + {{- with .icon }} + + {{- end }} + {{- with .tag }} + {{ . }} + {{- end }} +
    +
    +

    + {{ .title }} +

    + {{- with .text }} +

    {{ . }}

    + {{- end }} + + {{ .linkText | default "Learn more" }} + +
    +
    + {{- end }} + + {{- with $buildLinks }} + + {{- end }} +
    + + {{- if and $hasCite (not $citeSeparate) }} + {{ partial "product-developers-cite.html" $citeCtx }} + {{- end }} +
    +
    + + {{- with $review }} + + {{- end }} + + {{- if and $hasCite $citeSeparate }} + {{ partial "product-developers-cite.html" (merge $citeCtx (dict "separate" true)) }} + {{- end }} +
    diff --git a/layouts/partials/product-highlights.html b/layouts/partials/product-highlights.html new file mode 100644 index 00000000..f8f53b5f --- /dev/null +++ b/layouts/partials/product-highlights.html @@ -0,0 +1,76 @@ +{{- $cfg := .cfg | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" -}} +{{- $title := index $cfg "title" | default "Key features" -}} +{{- $lead := index $cfg "lead" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- $note := index $cfg "note" -}} +{{- $id := .id | default "product-highlights-title" -}} +{{- $layout := index $cfg "layout" | default "" -}} +{{- $isChecklist := eq $layout "checklist" -}} +{{- $isFacts := eq $layout "facts" -}} +{{- $itemCount := len $items -}} +
    +
    +
    + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + + {{- with $items }} +
      + {{- range $item := . }} + {{- if $isFacts }} +
    • + {{- with $item.icon }} + + {{- else }} + + {{- end }} +

      {{ $item.text }}

      +
    • + {{- else }} +
    • + {{- if $item.title }} + {{- if $item.icon }} + + {{- else }} + + {{- end }} +
      +

      {{ $item.title }}

      +

      {{ $item.text }}

      +
      + {{- else }} + +
      +

      {{ $item.text }}

      +
      + {{- end }} +
    • + {{- end }} + {{- end }} +
    + {{- end }} + + {{- with $note }} + + {{- end }} +
    +
    diff --git a/layouts/partials/product-resources.html b/layouts/partials/product-resources.html new file mode 100644 index 00000000..2dfa6355 --- /dev/null +++ b/layouts/partials/product-resources.html @@ -0,0 +1,72 @@ +{{- $cfg := .cfg | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Getting started" -}} +{{- $title := index $cfg "title" -}} +{{- $lead := index $cfg "lead" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- $id := .id | default "product-resources-title" -}} +{{- $variant := .variant | default "" -}} +
    +
    + {{- if $title }} + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} +

    {{ $title }}

    + {{- else if $eyebrow }} +

    {{ $eyebrow }}

    + {{- end }} + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + +
    + {{- range $items }} + {{- $type := .type | default "link" -}} + {{- if eq $type "online" }} + + {{- else }} + +
    + {{- with .tag }} + {{ . }} + {{- end }} +

    {{ .title }}

    + {{- with .text }} +

    {{ . }}

    + {{- end }} + + {{ .linkText | default "Learn more" }} + +
    +
    + {{- end }} + {{- end }} +
    +
    diff --git a/layouts/partials/product-topp.html b/layouts/partials/product-topp.html new file mode 100644 index 00000000..8b9891aa --- /dev/null +++ b/layouts/partials/product-topp.html @@ -0,0 +1,51 @@ +{{- $cfg := .cfg | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" -}} +{{- $title := index $cfg "title" | default "Ships with the TOPP command-line tools" -}} +{{- $lead := index $cfg "lead" -}} +{{- $features := index $cfg "features" | default (slice) -}} +{{- $ctaText := index $cfg "ctaText" | default "Explore the tools" -}} +{{- $ctaUrl := index $cfg "ctaUrl" -}} +{{- $id := .id | default "openms-lib-topp-title" -}} +
    +
    +
    +
    + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} + {{- with $ctaUrl }} + {{ $ctaText }} + {{- end }} +
    + + {{- with $features }} + + {{- end }} +
    +
    +
    diff --git a/layouts/partials/publications-main.html b/layouts/partials/publications-main.html new file mode 100644 index 00000000..bb31a754 --- /dev/null +++ b/layouts/partials/publications-main.html @@ -0,0 +1,73 @@ +{{- $cfg := .Site.Params.publicationsPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "About us" -}} +{{- $subtitle := index $cfg "subtitle" | default "Peer-reviewed papers, software citations, and community research built with OpenMS." -}} +{{- $scholarUrl := index $cfg "googleScholarUrl" | default "https://scholar.google.ca/citations?user=tQ26gxIAAAAJ&hl" -}} +{{- $scholarText := index $cfg "googleScholarText" | default "Follow us on Google Scholar" -}} +
    +
    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Publications +

    +

    {{ $subtitle }}

    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + {{ .Content }} +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Cite OpenMS +

    + Using OpenMS in your research? +

    +

    Citations help us secure funding and keep OpenMS free and open source. Please reference the papers above in your publications.

    + +
    +
    +
    +
    +
    +
    +
    diff --git a/layouts/partials/publications-year-select.html b/layouts/partials/publications-year-select.html new file mode 100644 index 00000000..daee2b77 --- /dev/null +++ b/layouts/partials/publications-year-select.html @@ -0,0 +1,11 @@ +
    + + +
    diff --git a/layouts/partials/pyopenms-viz-hero-code.html b/layouts/partials/pyopenms-viz-hero-code.html new file mode 100644 index 00000000..36a45454 --- /dev/null +++ b/layouts/partials/pyopenms-viz-hero-code.html @@ -0,0 +1,20 @@ + diff --git a/layouts/partials/research-partnerships-main.html b/layouts/partials/research-partnerships-main.html new file mode 100644 index 00000000..1d2cc8f0 --- /dev/null +++ b/layouts/partials/research-partnerships-main.html @@ -0,0 +1,32 @@ +{{- $cfg := .Site.Params.researchPartnershipsPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Partner with OpenMS" -}} +{{- $subtitle := index $cfg "subtitle" | default "We’re interested in hearing your idea for a partnership." -}} +
    + +
    diff --git a/layouts/partials/scientific-and-technical-support-main.html b/layouts/partials/scientific-and-technical-support-main.html new file mode 100644 index 00000000..c1699c23 --- /dev/null +++ b/layouts/partials/scientific-and-technical-support-main.html @@ -0,0 +1,69 @@ +{{- $cfg := .Site.Params.servicesSupportPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Services" -}} +{{- $subtitle := index $cfg "subtitle" | default "We're here to help develop scalable and reproducible computational mass spectrometry solutions catered to your needs." -}} +{{- $formTitle := index $cfg "formTitle" | default "Get in touch with us for a quote." -}} +
    +
    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Expert support for your analyses. +

    +

    {{ $subtitle }}

    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    Contact us

    +

    {{ $formTitle }}

    +

    Tell us about your project and the support you need.

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + + +
    +
    diff --git a/layouts/partials/single/content.html b/layouts/partials/single/content.html new file mode 100644 index 00000000..4e5c9d7c --- /dev/null +++ b/layouts/partials/single/content.html @@ -0,0 +1,34 @@ +
    + {{- $showShortcuts := not (.Params.hideShortcuts | default false) -}} + {{- if $showShortcuts }} +
    +
    On this page
    +
    +
    + {{- end }} +
    +
    +
    + {{- $showTitle := not (.Params.hidePageTitle | default false) -}} + {{- $subtitle := .Params.Subtitle -}} + {{- if $showTitle }} +

    {{ .Title }}

    + {{- end }} + {{- with $subtitle }} +
    {{ . }}
    + {{- end }} + {{- if or $showTitle $subtitle }} +
    + {{- end }} +
    +
    + {{ with partial "post_meta.html" . -}} + + {{- end }} + +
    + {{ .Content }} +
    +
    +
    + diff --git a/layouts/partials/sponsor-tiers.html b/layouts/partials/sponsor-tiers.html new file mode 100644 index 00000000..85be1d0f --- /dev/null +++ b/layouts/partials/sponsor-tiers.html @@ -0,0 +1,198 @@ +{{- $tiers := .Site.Params.sponsorTiers | default dict -}} +{{- $allLevels := index $tiers "levels" | default (slice) -}} +{{- $levels := slice -}} +{{- range $allLevels -}} + {{- if ne .showInProgram false -}} + {{- $levels = $levels | append . -}} + {{- end -}} +{{- end -}} +{{- $matrix := index $tiers "benefitsMatrix" | default (slice) -}} +{{- $benefitsTitle := index $tiers "benefitsTitle" | default "Benefit comparison" -}} +{{- $taxFootnote := index $tiers "taxFootnote" | default "*where applicable by law" -}} +{{- $featuredId := index $tiers "featuredLevel" | default "gold" -}} +{{- if gt (len $levels) 0 -}} + +{{- end -}} diff --git a/layouts/partials/sponsor-us-main.html b/layouts/partials/sponsor-us-main.html new file mode 100644 index 00000000..8f0d4152 --- /dev/null +++ b/layouts/partials/sponsor-us-main.html @@ -0,0 +1,167 @@ +{{- $cfg := .Site.Params.sponsorUsPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Support OpenMS" -}} +{{- $subtitle := index $cfg "subtitle" | default "Sponsorship provides direct funding for software engineering, documentation, community events, and the long-term sustainability of the OpenMS ecosystem." -}} +
    +
    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Our Sponsorship Program. +

    +

    {{ $subtitle }}

    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

    Impact

    +

    Why sponsor OpenMS

    +

    + + + +

    +
    +
    + +
    +
    + + +
    +
    + +

    OpenMS Inc. is a U.S. 501(c)(3) public charity that stewards project finances and accepts sponsorships aligned with our nonprofit mission.

    + + About OpenMS Inc. +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +

    Community

    +

    Current sponsors

    +

    OpenMS receives direct funding from the organizations below.We are grateful for their support of open-source mass spectrometry software.

    +
    + +
    + {{- range .Site.Params.aboutPage.sponsors -}} + {{ partial "about-sponsor-logo.html" . }} + {{- end -}} +
    +
    +
    +
    + +
    + +
    +
    + +
    +
    +
    +
    +
    + Get started +

    + Become a sponsor +

    +

    Whether you represent a company, institute, or foundation, we would like to hear about your goals and how sponsorship can support OpenMS development and the broader community.

    + +
    +
    +
    +
    +
    +
    +
    diff --git a/layouts/partials/tally-form-embed.html b/layouts/partials/tally-form-embed.html new file mode 100644 index 00000000..53ecf36b --- /dev/null +++ b/layouts/partials/tally-form-embed.html @@ -0,0 +1,37 @@ +
    + +
    + + diff --git a/layouts/partials/trusted-by.html b/layouts/partials/trusted-by.html new file mode 100644 index 00000000..be645a87 --- /dev/null +++ b/layouts/partials/trusted-by.html @@ -0,0 +1,327 @@ +{{- $site := .Site | default site -}} +{{- $variant := .variant | default "" -}} +{{- $home := eq $variant "home" -}} +{{- $ribbon := eq $variant "ribbon" -}} +{{- $wall := eq $variant "wall" -}} +{{- $strip := eq $variant "strip" -}} +{{- $compact := or (eq $variant "compact") $strip -}} +{{- $section := $site.Params.trustedBySection | default dict -}} +{{- $items := $site.Params.trustedBy | default (slice) -}} +{{- if gt (len $items) 0 -}} +{{- $eyebrow := index $section "eyebrow" | default "Trusted by" -}} +{{- $title := index $section "title" | default "As used by leading teams" -}} +{{- $titleHighlight := index $section "titleHighlight" -}} +{{- $subtitle := index $section "subtitle" | default "" -}} +{{- $linkLabel := index $section "linkLabel" | default "Visit website" -}} +
    +
    + {{- if $home }} +
    +
    +

    + + {{ $eyebrow }} +

    +

    + {{- if and $titleHighlight (in $title $titleHighlight) -}} + {{ replace $title $titleHighlight (printf "%s" $titleHighlight) | safeHTML }} + {{- else -}} + {{ $title }} + {{- end -}} +

    + {{- with $subtitle }} +

    {{ . }}

    + {{- end }} +
    + + +
    + {{- else if $ribbon }} +
    +
    +

    {{ $eyebrow }}

    +

    {{ $title }}

    +
    + {{- with $subtitle }} +

    {{ . }}

    + {{- end }} + +
    + {{- else if $wall }} +
    +
    +

    {{ $eyebrow }}

    +

    + {{- if and $titleHighlight (in $title $titleHighlight) -}} + {{ replace $title $titleHighlight (printf "%s" $titleHighlight) | safeHTML }} + {{- else -}} + {{ $title }} + {{- end -}} +

    + {{- with $subtitle }} +

    {{ . }}

    + {{- end }} +
    + +
    + {{- else if $strip }} +
    +

    {{ $eyebrow }}

    + +
    + {{- else if $compact }} +

    {{ $eyebrow }}

    + + {{- else }} +
    +

    {{ $eyebrow }}

    +

    + {{- if and $titleHighlight (in $title $titleHighlight) -}} + {{ replace $title $titleHighlight (printf "%s" $titleHighlight) | safeHTML }} + {{- else -}} + {{ $title }} + {{- end -}} +

    + {{- with $subtitle }} +

    {{ . }}

    + {{- end }} +
    + + + {{- end }} +
    +
    +{{- end -}} diff --git a/layouts/partials/university-partner-item.html b/layouts/partials/university-partner-item.html new file mode 100644 index 00000000..85341f67 --- /dev/null +++ b/layouts/partials/university-partner-item.html @@ -0,0 +1,31 @@ +{{- $name := .name | default "Organization" -}} +{{- $url := .url | default "" -}} +{{- $logo := .logo | default "" -}} +{{- $abbr := .abbr | default (substr $name 0 2) -}} +{{- $alt := .alt | default $name -}} +{{- $isExternal := and $url (in $url "://") -}} +{{- if $url -}} + +{{- else -}} + +{{- end -}} diff --git a/layouts/partials/university-partners.html b/layouts/partials/university-partners.html new file mode 100644 index 00000000..594e948d --- /dev/null +++ b/layouts/partials/university-partners.html @@ -0,0 +1,66 @@ +{{- $showHeader := .showHeader | default true -}} +{{- $staticOnly := .staticOnly | default false -}} +{{- $variant := .variant | default "" -}} +{{- $compact := or (eq $variant "compact") (eq $variant "home") -}} +{{- $partners := site.Params.universityPartners | default (slice) -}} +
    +
    + {{- if $showHeader }} + {{- if eq $variant "home" }} +
    +
    +

    + Trusted and used by scientists worldwide. +

    +
    +
    + {{- else }} +
    +
    +

    Partners

    +

    + University Partners +

    + {{- if not $compact }} +

    + Research groups and institutions contributing to OpenMS development and adoption. +

    + {{- end }} +
    +
    + {{- end }} + {{- end }} + + {{- if and (not $staticOnly) (gt (len $partners) 0) }} + + {{- end }} + + {{- if gt (len $partners) 0 }} +
    + {{- range $partners }} + {{ partial "university-partner-item.html" . }} + {{- end }} +
    + {{- end }} +
    +
    diff --git a/layouts/partials/webapps-affiliates.html b/layouts/partials/webapps-affiliates.html new file mode 100644 index 00000000..055e5416 --- /dev/null +++ b/layouts/partials/webapps-affiliates.html @@ -0,0 +1,23 @@ +{{- $section := site.Params.affiliateSection | default dict -}} +{{- $projects := site.Params.affiliateProjects | default (slice) -}} +{{- if $projects }} +
    +
    +
      + {{- range $projects }} +
    • + {{ partial "webapps-project-detail-card.html" (dict "project" . "class" "webapps-project-detail-card--affiliate") }} +
    • + {{- end }} +
    + + {{- $contactNote := index $section "contactNote" -}} + {{- $contactUrl := index $section "contactUrl" | default "/contact/" -}} + {{- with $contactNote }} +

    + {{ replace . "Contact us" (printf `Contact us` $contactUrl) | safeHTML }} +

    + {{- end }} +
    +
    +{{- end }} diff --git a/layouts/partials/webapps-archived-project.html b/layouts/partials/webapps-archived-project.html new file mode 100644 index 00000000..39fff928 --- /dev/null +++ b/layouts/partials/webapps-archived-project.html @@ -0,0 +1,41 @@ +{{- $project := . -}} +{{- $variant := $project.variant | default "default" -}} +{{- $name := $project.displayName | default $project.name -}} +
    + {{- with $project.logo }} + + {{- end }} +
    +
    + +

    {{ $name }}

    + {{- with $project.description }} +

    {{ . }}

    + {{- end }} + {{- with $project.maintainers }} +

    + Maintainers + {{ . }} +

    + {{- end }} +
    +
    + {{ partial "webapps-project-links.html" (dict "links" $project.links) }} +
    +
    +
    diff --git a/layouts/partials/webapps-archived.html b/layouts/partials/webapps-archived.html new file mode 100644 index 00000000..5e04cf40 --- /dev/null +++ b/layouts/partials/webapps-archived.html @@ -0,0 +1,64 @@ +{{- $section := site.Params.archivedSection | default dict -}} +{{- $projects := site.Params.archivedProjects | default (slice) -}} +{{- if $projects }} +
    +
    +
    +
    +
    +

    Project archive

    +

    + {{ index $section "catalogTitle" | default "Available references" }} +

    +
    + +
      + {{- range $projects }} +
    • + {{ partial "webapps-archived-project.html" . }} +
    • + {{- end }} +
    + + {{- with index $section "notice" }} + {{- $notice := . -}} + {{- with .points }} + + {{- end }} + {{- end }} +
    + + {{- $revivalPrompt := index $section "revivalPrompt" -}} + {{- $revivalNote := index $section "revivalNote" -}} + {{- $contactText := index $section "contactText" | default "Contact Us" -}} + {{- $contactUrl := index $section "contactUrl" | default "/contact/" -}} + {{- $sponsorText := index $section "sponsorText" | default "Sponsor Us" -}} + {{- $sponsorUrl := index $section "sponsorUrl" | default "/sponsor-us/" -}} + {{- with $revivalPrompt }} +
    +
    +

    Community opportunity

    +

    + {{ . }} + {{- with $revivalNote }} + {{ . }} + {{- end }} +

    +
    + +
    + {{- end }} +
    +
    +
    +{{- end }} diff --git a/layouts/partials/webapps-developers.html b/layouts/partials/webapps-developers.html new file mode 100644 index 00000000..e22032fa --- /dev/null +++ b/layouts/partials/webapps-developers.html @@ -0,0 +1,64 @@ +{{- $cfg := site.Params.webappsPage.developers | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "For Developers" -}} +{{- $title := index $cfg "title" | default "Contribute" -}} +{{- $lead := index $cfg "lead" -}} +{{- $boxes := index $cfg "boxes" | default (slice) -}} +{{- $citeText := index $cfg "citeText" -}} +{{- $citation := index $cfg "citation" | default dict -}} +{{- $citeVariant := index $citation "variant" | default "secondary" -}} +{{- $citeLabel := index $cfg "citeLabel" | default (printf "Cite %s" (index $citation "topic" | default "OpenMS WebApps")) -}} +{{- $citeCtx := dict "citeText" $citeText "citation" $citation "citeVariant" $citeVariant "citeLabel" $citeLabel "separate" true -}} +
    +
    +
    +

    {{ $eyebrow }}

    +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + + + + {{- if or $citeText $citation }} +
    + {{ partial "product-developers-cite.html" $citeCtx }} +
    + {{- end }} +
    +
    diff --git a/layouts/partials/webapps-project-card.html b/layouts/partials/webapps-project-card.html new file mode 100644 index 00000000..37041f03 --- /dev/null +++ b/layouts/partials/webapps-project-card.html @@ -0,0 +1,64 @@ +{{- $project := .project }} +{{- $embed := .embed | default "" }} +{{- $ctaText := .ctaText | default "View project" }} +{{- $url := $project.url }} +{{- $isExternal := in $url "://" }} +{{- $ariaLabel := $project.name }} +{{- if $isExternal }} + {{- $ariaLabel = printf "%s (opens in new tab)" $ariaLabel }} +{{- end }} + diff --git a/layouts/partials/webapps-project-detail-card.html b/layouts/partials/webapps-project-detail-card.html new file mode 100644 index 00000000..17d3e3e6 --- /dev/null +++ b/layouts/partials/webapps-project-detail-card.html @@ -0,0 +1,33 @@ +{{- $project := .project -}} +{{- $class := .class | default "" -}} +{{- $hideName := .hideName | default false -}} +
    +
    + {{- with $project.logo }} +
    + {{ $project.name }} +
    + {{- end }} +
    + {{- if not $hideName }} +

    {{ $project.name }}

    + {{- end }} + {{- with $project.description }} +

    {{ . }}

    + {{- end }} + {{- with $project.maintainers }} +

    + Maintainers + {{ . }} +

    + {{- end }} + {{ partial "webapps-project-links.html" (dict "links" $project.links) }} +
    +
    +
    diff --git a/layouts/partials/webapps-project-links.html b/layouts/partials/webapps-project-links.html new file mode 100644 index 00000000..19bc3d98 --- /dev/null +++ b/layouts/partials/webapps-project-links.html @@ -0,0 +1,51 @@ +{{- $links := .links | default (slice) -}} +{{- if $links }} + +{{- end }} diff --git a/layouts/partials/webapps-using-template.html b/layouts/partials/webapps-using-template.html new file mode 100644 index 00000000..1727ccdc --- /dev/null +++ b/layouts/partials/webapps-using-template.html @@ -0,0 +1,122 @@ +{{- $cfg := .cfg | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Using the template" -}} +{{- $title := index $cfg "title" | default $eyebrow -}} +{{- $lead := index $cfg "lead" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- $id := .id | default "webapps-template-title" -}} +
    +
    +
    + {{- with $eyebrow }} +

    {{ . }}

    + {{- end }} +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + +
    +
    + {{- range $i, $item := $items }} + {{- $type := $item.type | default "link" -}} + {{- if eq $type "static" }} +
    +
    + {{- with $item.icon }} + + {{- end }} + {{- with $item.tag }} + {{ . }} + {{- end }} +
    +

    {{ $item.title }}

    + {{- with $item.text }} +

    {{ . }}

    + {{- end }} +
    + {{- else if eq $type "featured-apps" }} + + {{- else }} + +
    + {{- with $item.icon }} + + {{- end }} + {{- with $item.tag }} + {{ . }} + {{- end }} +
    +

    {{ $item.title }}

    + {{- with $item.text }} +

    {{ . }}

    + {{- end }} + + {{ $item.linkText | default $item.title }} + +
    + {{- end }} + {{- end }} +
    +
    +
    +
    diff --git a/layouts/partials/webapps.html b/layouts/partials/webapps.html index d87e4e2f..bd8310c6 100644 --- a/layouts/partials/webapps.html +++ b/layouts/partials/webapps.html @@ -1,22 +1,119 @@ -{{- $webapps := .Site.Params.webapps }} +{{- $page := .Page | default . -}} +{{- $site := $page.Site | default site -}} +{{- $embed := .embed | default "" -}} +{{- $section := $site.Params.webappsSection }} +{{- $webapps := $site.Params.webapps }} +{{- if $webapps }} +{{- $eyebrow := index $section "eyebrow" }} +{{- $title := index $section "title" | default "Featured Apps" }} +{{- if eq $embed "page" }} +{{- $title = index $section "pageTitle" | default "Featured Apps" }} +{{- end }} +{{- $titleHighlight := index $section "titleHighlight" }} +{{- $description := index $section "description" }} +{{- if eq $embed "page" }} +{{- $description = index $section "pageDescription" | default $description }} +{{- end }} +{{- $ctaText := index $section "ctaText" | default "View app" }} +{{- $showAll := index $section "showAll" }} +{{- $extraLinks := index $section "links" | default (slice) }} +{{- $contactNote := index $section "contactNote" -}} +{{- $contactUrl := index $section "contactUrl" | default "/contact/" -}} +{{- $cardCtx := dict "ctaText" $ctaText }} +{{- $isPage := eq $embed "page" -}} +
    + +
    +{{- end }} diff --git a/layouts/shortcodes/about-sponsors.html b/layouts/shortcodes/about-sponsors.html new file mode 100644 index 00000000..354a1a08 --- /dev/null +++ b/layouts/shortcodes/about-sponsors.html @@ -0,0 +1 @@ +{{ partial "about-sponsors-section.html" . }} diff --git a/layouts/shortcodes/about-sponsorship-program.html b/layouts/shortcodes/about-sponsorship-program.html new file mode 100644 index 00000000..ee382212 --- /dev/null +++ b/layouts/shortcodes/about-sponsorship-program.html @@ -0,0 +1 @@ +{{ partial "about-sponsorship-program.html" . }} diff --git a/layouts/shortcodes/heroitems.html b/layouts/shortcodes/heroitems.html new file mode 100644 index 00000000..5696c5e3 --- /dev/null +++ b/layouts/shortcodes/heroitems.html @@ -0,0 +1,2 @@ +{{- $variant := .Get "variant" -}} +{{ partial "heroitems.html" (dict "Site" site "variant" $variant "embed" "openms-lib") }} diff --git a/layouts/shortcodes/keyfeatures.html b/layouts/shortcodes/keyfeatures.html new file mode 100644 index 00000000..4bb47219 --- /dev/null +++ b/layouts/shortcodes/keyfeatures.html @@ -0,0 +1 @@ +{{ partial "keyfeatures.html" (dict "Page" .Page "embed" "openms-lib") }} diff --git a/layouts/shortcodes/openms-lib-developers.html b/layouts/shortcodes/openms-lib-developers.html new file mode 100644 index 00000000..e268ff9d --- /dev/null +++ b/layouts/shortcodes/openms-lib-developers.html @@ -0,0 +1 @@ +{{ partial "openms-lib-developers.html" . }} diff --git a/layouts/shortcodes/openms-lib-getting-started.html b/layouts/shortcodes/openms-lib-getting-started.html new file mode 100644 index 00000000..d1df7e50 --- /dev/null +++ b/layouts/shortcodes/openms-lib-getting-started.html @@ -0,0 +1 @@ +{{ partial "openms-lib-getting-started.html" (dict "cfg" site.Params.openmsLibGettingStarted "id" "openms-lib-getting-started-title") }} diff --git a/layouts/shortcodes/openms-lib-highlights.html b/layouts/shortcodes/openms-lib-highlights.html new file mode 100644 index 00000000..723ed3bc --- /dev/null +++ b/layouts/shortcodes/openms-lib-highlights.html @@ -0,0 +1 @@ +{{ partial "openms-lib-highlights.html" (dict "cfg" site.Params.openmsLibHighlights "id" "openms-lib-about-title") }} diff --git a/layouts/shortcodes/openms-lib-topp.html b/layouts/shortcodes/openms-lib-topp.html new file mode 100644 index 00000000..be999405 --- /dev/null +++ b/layouts/shortcodes/openms-lib-topp.html @@ -0,0 +1 @@ +{{ partial "openms-lib-topp.html" . }} diff --git a/layouts/shortcodes/partners.html b/layouts/shortcodes/partners.html index b4c2fa54..977e2402 100644 --- a/layouts/shortcodes/partners.html +++ b/layouts/shortcodes/partners.html @@ -1,57 +1 @@ - - - - \ No newline at end of file +{{ partial "university-partners.html" (dict "Site" .Site "showHeader" false "staticOnly" true) }} \ No newline at end of file diff --git a/layouts/shortcodes/publications-year-select.html b/layouts/shortcodes/publications-year-select.html new file mode 100644 index 00000000..c5e274f2 --- /dev/null +++ b/layouts/shortcodes/publications-year-select.html @@ -0,0 +1 @@ +{{ partial "publications-year-select.html" .Page }} diff --git a/layouts/shortcodes/pyopenms-developers.html b/layouts/shortcodes/pyopenms-developers.html new file mode 100644 index 00000000..49061d01 --- /dev/null +++ b/layouts/shortcodes/pyopenms-developers.html @@ -0,0 +1 @@ +{{ partial "product-developers.html" (dict "cfg" site.Params.pyopenmsPage.developers "id" "pyopenms-developers-title") }} diff --git a/layouts/shortcodes/pyopenms-getting-started.html b/layouts/shortcodes/pyopenms-getting-started.html new file mode 100644 index 00000000..7070a633 --- /dev/null +++ b/layouts/shortcodes/pyopenms-getting-started.html @@ -0,0 +1 @@ +{{ partial "openms-lib-getting-started.html" (dict "cfg" site.Params.pyopenmsPage.gettingStarted "id" "pyopenms-getting-started-title") }} diff --git a/layouts/shortcodes/pyopenms-highlights.html b/layouts/shortcodes/pyopenms-highlights.html new file mode 100644 index 00000000..9ff0f5b8 --- /dev/null +++ b/layouts/shortcodes/pyopenms-highlights.html @@ -0,0 +1 @@ +{{ partial "openms-lib-highlights.html" (dict "cfg" site.Params.pyopenmsPage.highlights "id" "pyopenms-highlights-title") }} diff --git a/layouts/shortcodes/pyopenms-viz-developers.html b/layouts/shortcodes/pyopenms-viz-developers.html new file mode 100644 index 00000000..59972e2d --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-developers.html @@ -0,0 +1 @@ +{{ partial "product-developers.html" (dict "cfg" site.Params.pyopenmsVizPage.developers "id" "pyopenms-viz-developers-title") }} diff --git a/layouts/shortcodes/pyopenms-viz-getting-started.html b/layouts/shortcodes/pyopenms-viz-getting-started.html new file mode 100644 index 00000000..d982853b --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-getting-started.html @@ -0,0 +1 @@ +{{ partial "openms-lib-getting-started.html" (dict "cfg" site.Params.pyopenmsVizPage.gettingStarted "id" "pyopenms-viz-getting-started-title") }} diff --git a/layouts/shortcodes/pyopenms-viz-hero-code.html b/layouts/shortcodes/pyopenms-viz-hero-code.html new file mode 100644 index 00000000..4c3d6a09 --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-hero-code.html @@ -0,0 +1 @@ +{{ partial "pyopenms-viz-hero-code.html" . }} diff --git a/layouts/shortcodes/pyopenms-viz-highlights.html b/layouts/shortcodes/pyopenms-viz-highlights.html new file mode 100644 index 00000000..ad6d8e53 --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-highlights.html @@ -0,0 +1 @@ +{{ partial "openms-lib-highlights.html" (dict "cfg" site.Params.pyopenmsVizPage.highlights "id" "pyopenms-viz-highlights-title") }} diff --git a/layouts/shortcodes/pyopenms-viz-workflows.html b/layouts/shortcodes/pyopenms-viz-workflows.html new file mode 100644 index 00000000..c81b571d --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-workflows.html @@ -0,0 +1 @@ +{{ partial "product-topp.html" (dict "cfg" site.Params.pyopenmsVizPage.workflows "id" "pyopenms-viz-workflows-title") }} diff --git a/layouts/shortcodes/pyopenms-workflows.html b/layouts/shortcodes/pyopenms-workflows.html new file mode 100644 index 00000000..25d96d30 --- /dev/null +++ b/layouts/shortcodes/pyopenms-workflows.html @@ -0,0 +1 @@ +{{ partial "product-topp.html" (dict "cfg" site.Params.pyopenmsPage.workflows "id" "pyopenms-workflows-title") }} diff --git a/layouts/shortcodes/sponsor-tiers.html b/layouts/shortcodes/sponsor-tiers.html new file mode 100644 index 00000000..df5168a6 --- /dev/null +++ b/layouts/shortcodes/sponsor-tiers.html @@ -0,0 +1 @@ +{{ partial "sponsor-tiers.html" .Page }} diff --git a/layouts/shortcodes/sponsors.html b/layouts/shortcodes/sponsors.html index 6772ca79..9dd7e138 100644 --- a/layouts/shortcodes/sponsors.html +++ b/layouts/shortcodes/sponsors.html @@ -1,40 +1,7 @@ -