diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 4b434eae..9104d63f 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,5 +1,3 @@ - - #### Brief description of what is fixed or changed +#### Website checklist (content / config PRs) + +- [ ] Netlify deploy preview checked (link below when ready) +- [ ] If `config.yaml`: valid YAML, homepage (and affected pages) reviewed on preview +- [ ] If news post: `date`, `summary`, and `type: news` set; article and `/news` listing checked +- [ ] If new images: files under `static/`, paths use `/images/...` +- [ ] No secrets or internal-only URLs committed + +**Maintainer docs:** [docs/README.md](../docs/README.md) diff --git a/README.md b/README.md index b5d06af2..22aea15a 100644 --- a/README.md +++ b/README.md @@ -41,3 +41,9 @@ error: failed to transform resource: TOCSS: failed to transform "style.sass" ``` if you don't have the Hugo extended version. + +## Maintainer documentation + +**Non-developers** updating news, pages, or homepage text should start here: + +**[docs/README.md](docs/README.md)** — task guides (add news, edit banner, config.yaml reference, PR workflow, troubleshooting). diff --git a/archetypes/news.md b/archetypes/news.md new file mode 100644 index 00000000..0418aa16 --- /dev/null +++ b/archetypes/news.md @@ -0,0 +1,10 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +authors: [] +date: {{ .Date.Format "2006-01-02" }} +summary: "" +type: news +draft: true +--- + +Write your news article here. diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 00000000..36913416 --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,1136 @@ +.about-page-layout { + --olib-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --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: var(--pro-cluster-max, min(100%, 68rem)); + 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: var(--openms-btn-gap, 0.75rem); + 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; + min-height: var(--openms-btn-min-height, 2.75rem); + height: auto; + 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: var(--openms-btn-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-btn-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 { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + 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-blue); + border-color: var(--openms-blue); + 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: none; + 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-content-link, var(--openms-navy)); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); +} + +.sponsor-faq__answer a:hover, +.sponsor-faq__answer a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: none; +} + +@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-blue); + background: var(--openms-blue); + 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..7c7f85b2 --- /dev/null +++ b/assets/css/brand-palette.css @@ -0,0 +1,498 @@ +/* OpenMS brand palette — load before other site CSS (filename sorts first) */ +:root { + --fontFamily: "Montserrat", system-ui, -apple-system, + "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --openms-font-heading: var(--fontFamily); + --openms-font-body: "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; + + /* Shared page title design (heroes + section H2s) */ + --openms-page-hero-title-size: calc(var(--openms-heading-xl-size) * 1.25); + --openms-page-hero-title-weight: var(--openms-heading-xl-weight); + --openms-page-hero-title-color: rgba(var(--openms-dark-rgb), 0.72); + --openms-section-title-size: calc(var(--openms-heading-lg-size) * 1.15); + --openms-section-title-weight: var(--openms-heading-lg-weight); + --openms-section-title-color: rgba(var(--openms-dark-rgb), 0.72); + + /* Shared step/overview numbers — same light-blue watermark as /openms-lib/ */ + --openms-step-num-size: clamp(2.5rem, 5vw, 3.5rem); + --openms-step-num-color: rgba(var(--openms-blue-rgb), 0.38); + --openms-step-num-color-hover: rgba(var(--openms-blue-rgb), 0.55); + --openms-num-strip-border: rgba(var(--openms-navy-rgb), 0.1); + --openms-num-strip-hover-bg: rgba(var(--openms-blue-rgb), 0.03); + --openms-num-strip-pad-y: clamp(1.35rem, 3vw, 2rem); + --openms-num-strip-pad-x: clamp(0.85rem, 2vw, 1.35rem); + --openms-card-title-size: clamp(1rem, 1.4vw, 1.1rem); + --openms-card-title-color: rgba(var(--openms-dark-rgb), 0.82); + --openms-card-title-weight: 700; + --openms-card-title-weight-strong: 800; + --pro-card-icon-size: clamp(2.5rem, 4.2vw, 3.15rem); + --openms-card-icon-chip: 2rem; + --openms-card-icon-glyph: 0.85rem; + /* Shared glyph size for TOPP / Explore / Contribute cards */ + --openms-card-icon-size: clamp(2.5rem, 3.8vw, 3rem); + + /* Shared page spacing rhythm (all pages inherit these). + Default 75rem (~1200px) suits laptops; larger desktops step up so + cards/grids aren’t stranded in a narrow column. Cap grows with + viewport but stays off the edges via --openms-page-inline. */ + --pro-max: 75rem; + --hub-wide-max: var(--pro-max); + /* Page side gutter — keep content off the screen edges (incl. notches) */ + --openms-page-gutter: max(1.25rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); + --pro-pad: max(var(--openms-page-gutter), clamp(1.25rem, 5vw, 2.5rem)); + --olib-pad-x: max(var(--openms-page-gutter), clamp(1.25rem, 5vw, 2.5rem)); + --home-pad-x: var(--olib-pad-x); + /* Matches homepage: side gutter, or center within --pro-max (no extra gutter) */ + --openms-page-inline: max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2)); + --pro-section-y: clamp(4rem, 9vw, 6.5rem); + --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); + /* Site-wide title stack — fixed values, use everywhere */ + --openms-stack-eyebrow: 12px; /* top title → title */ + --openms-stack-lead: 20px; /* title → paragraph */ + --openms-stack-paragraph: 16px; /* paragraph → paragraph */ + --pro-stack-eyebrow: var(--openms-stack-eyebrow); + --pro-stack-lead: var(--openms-stack-lead); + --pro-stack-actions: var(--pro-space-5); + --pro-head-to-content: var(--pro-space-6); + --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-col-gap: clamp(2rem, 5vw, 4rem); + --olib-section-y: var(--pro-section-y); + --olib-card-gap: var(--pro-card-gap); + --olib-block-gap: var(--pro-section-y); + /* Hero / cite / clusters share the same shell width as body content */ + --pro-hero-content-max: min(100%, var(--pro-max)); + --pro-cite-promo-max: 26rem; + --pro-cite-intro-max: 22ch; + --pro-cluster-max: min(100%, var(--pro-max)); + + /* Inline text links — gray like body copy; blue is reserved for arrow/icon CTAs */ + --openms-content-link: rgba(var(--openms-dark-rgb), 0.72); + --openms-content-link-hover: rgba(var(--openms-dark-rgb), 0.72); + --openms-content-link-weight: 600; + --openms-content-link-underline-offset: 0.12em; + --pro-link: var(--openms-content-link); + --home-link-color: var(--openms-content-link); + + /* Shared text CTA links (Read more →) — same colour as the blue button */ + --openms-cta-link: var(--openms-blue); + --openms-cta-link-hover: var(--openms-blue); + --openms-cta-link-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-dropdown-width: 18rem; + --openms-navbar-container-pad-inline: clamp(1.25rem, 3.5vw, 2.5rem); + --openms-navbar-container-pad-inline-mobile: 1.15rem; + --openms-navbar-brand-slot-width: 18.5rem; + /* Slightly tighter logo keeps the bar premium without feeling oversized */ + --openms-navbar-logo-height: 76px; + --openms-header-bar-min-height: calc(var(--openms-navbar-logo-height) + 0.9rem); + --openms-navbar-desktop-gap: clamp(0.35rem, 0.9vw, 0.75rem); + --openms-navbar-desktop-pad-x: clamp(0.35rem, 0.7vw, 0.65rem); + --openms-navbar-desktop-font-size: clamp(0.8125rem, 0.95vw, 15px); + --openms-navbar-actions-gap: clamp(0.65rem, 1.1vw, 0.95rem); + /* 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; + --openms-label-weight: 600; + --openms-eyebrow-weight: 700; + --openms-meta-weight: 600; + + /* + Semantic text roles (light surfaces). + Prefer these over one-off rgba(dark/navy, …) so primary / muted / soft + stay consistent across home, product, and content pages. + */ + --openms-text: rgba(var(--openms-dark-rgb), 0.72); + --openms-text-body: rgba(var(--openms-dark-rgb), 0.72); + --openms-text-muted: rgba(var(--openms-dark-rgb), 0.72); + --openms-text-soft: rgba(var(--openms-dark-rgb), 0.55); + --openms-text-faint: rgba(var(--openms-dark-rgb), 0.42); + --openms-text-disabled: rgba(var(--openms-dark-rgb), 0.38); + --openms-text-eyebrow: rgba(var(--openms-dark-rgb), 0.55); + /* Status — reuse brand hues; no separate green in the palette */ + --openms-text-success: var(--openms-blue); + --openms-text-warning: var(--openms-orange); + --openms-text-error: var(--openms-pink); + /* On dark / navy chrome */ + --openms-text-on-dark: rgba(var(--openms-white-rgb), 0.92); + --openms-text-muted-on-dark: rgba(var(--openms-white-rgb), 0.72); + --openms-text-soft-on-dark: rgba(var(--openms-white-rgb), 0.62); + + /* Aliases used by page scopes (home / pro / olib) */ + --pro-text: var(--openms-text); + --pro-text-muted: var(--openms-text-muted); + --pro-text-soft: var(--openms-text-soft); + --pro-text-on-dark: var(--openms-text-muted-on-dark); + --pro-kicker-on-dark: var(--openms-text-soft-on-dark); + --pro-eyebrow: var(--openms-text-eyebrow); + --pro-card-title: var(--openms-card-title-color); + --olib-text-muted: var(--openms-text-muted); + --home-body-color: var(--openms-text-muted); + --home-eyebrow-color: var(--openms-text-eyebrow); + --home-title-color: var(--openms-section-title-color); + --home-card-title-color: var(--openms-card-title-color); + + /* Quotes, callouts & emphasis — JetBrains Mono thin */ + --openms-font-mono: "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.08); + --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-orange); + --openms-chrome-accent-line: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-orange) 100% + ); + /* Announcement bar — same navy as hero / nav chrome */ + --openms-chrome-banner-bg: var(--openms-chrome-bg); + --openms-chrome-banner-label: var(--openms-white); + --openms-chrome-banner-label-bg: rgba(var(--openms-white-rgb), 0.18); + --openms-chrome-banner-label-border: transparent; + --openms-chrome-banner-text: var(--openms-white); + --openms-chrome-banner-border: transparent; + --openms-chrome-nav-surface: var(--openms-navy); + --openms-chrome-nav-border: rgba(var(--openms-white-rgb), 0.08); + --openms-chrome-nav-text: var(--openms-white); + --openms-chrome-nav-text-muted: rgba(var(--openms-white-rgb), 0.62); + --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: 1.125rem; + --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: 1.0625rem; + --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: var(--openms-btn-min-height, 2.75rem); + --openms-mobile-cta-font-size: var(--openms-btn-font-size, var(--openms-text-min)); + --openms-mobile-cta-pad-y: var(--openms-btn-padding-y, 0.7rem); + --openms-mobile-cta-pad-x: var(--openms-btn-padding-x, 1.25rem); + + --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: rgba(var(--openms-dark-rgb), 0.72); + --colorHighlight: var(--openms-yellow); + --colorShadow: rgba(var(--openms-dark-rgb), 0.1); + --colorContentLink: var(--openms-content-link); + --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); +} + +/* Shared step / overview numbers — large pale display (Contribute channels) */ +.contribute-channel__index, +.openms-lib-about__num, +.openms-lib-about__benefit-num, +.openms-lib-about__list-num, +.openms-step__index, +.openms-lib-list__index, +.home-pathways__step-num, +.coc-principle__num, +.coc-summary__num, +.privacy-overview__num, +.webapps-archived__notice-index, +.keyfeatures-modern__topic-index { + display: block; + flex-shrink: 0; + width: auto; + height: auto; + margin: 0 0 0.05rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-family: var(--openms-font-heading); + font-size: var(--openms-step-num-size); + font-weight: 800; + line-height: 1; + letter-spacing: -0.04em; + color: var(--openms-step-num-color); + -webkit-text-fill-color: var(--openms-step-num-color); + box-sizing: border-box; + transition: color 0.22s ease, -webkit-text-fill-color 0.22s ease; +} + +.openms-lib-about__tile:hover .openms-lib-about__num, +.openms-lib-about__tile:focus-within .openms-lib-about__num, +.openms-lib-about__benefit:hover .openms-lib-about__benefit-num, +.openms-lib-about__benefit:focus-within .openms-lib-about__benefit-num, +.contribute-channel:hover .contribute-channel__index, +.contribute-channel:focus-within .contribute-channel__index, +.coc-principle:hover .coc-principle__num, +.coc-principle:focus-within .coc-principle__num, +.privacy-overview__item:hover .privacy-overview__num { + color: var(--openms-step-num-color-hover); + -webkit-text-fill-color: var(--openms-step-num-color-hover); + background: transparent; + border-color: transparent; +} + +/* Titles next to step / overview numbers */ +.openms-lib-about__tile-title, +.openms-lib-about__benefit-title, +.openms-lib-about__list-title, +.home-pathways__step-label { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size); + font-weight: var(--openms-card-title-weight, 700); + line-height: 1.3; + letter-spacing: normal; + color: var(--openms-card-title-color); +} + +/* Canonical inline content links — navy, weight 600, no underline */ +.openms-lib-layout :where(p, li, dd, td, .content) > a:not([class]):not(.openms-lib-btn), +.home-page :where(p, li, dd, td) > a:not([class]):not(.openms-lib-btn):not(.navbar-item), +.contribute-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn), +.news-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn), +.community-calendar-layout :where(p, li) > a:not([class]):not(.openms-lib-btn), +[class$="-page-layout"] :where(p, li) > a:not([class]):not(.openms-lib-btn), +.openms-content-link { + color: var(--openms-content-link); + font-weight: var(--openms-content-link-weight); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset); +} + +.openms-lib-layout :where(p, li, dd, td, .content) > a:not([class]):not(.openms-lib-btn):hover, +.openms-lib-layout :where(p, li, dd, td, .content) > a:not([class]):not(.openms-lib-btn):focus-visible, +.home-page :where(p, li, dd, td) > a:not([class]):not(.openms-lib-btn):not(.navbar-item):hover, +.home-page :where(p, li, dd, td) > a:not([class]):not(.openms-lib-btn):not(.navbar-item):focus-visible, +.contribute-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn):hover, +.contribute-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn):focus-visible, +.news-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn):hover, +.news-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn):focus-visible, +.community-calendar-layout :where(p, li) > a:not([class]):not(.openms-lib-btn):hover, +.community-calendar-layout :where(p, li) > a:not([class]):not(.openms-lib-btn):focus-visible, +[class$="-page-layout"] :where(p, li) > a:not([class]):not(.openms-lib-btn):hover, +[class$="-page-layout"] :where(p, li) > a:not([class]):not(.openms-lib-btn):focus-visible, +.openms-content-link:hover, +.openms-content-link:focus-visible { + color: var(--openms-content-link-hover); + text-decoration: none; + outline: none; +} + +/* Canonical text CTA links (Read more →) */ +.openms-cta-link, +.webapps-project-card__cta, +.news-home__card-cta, +.contact-home__card-cta, +.community-events-home__card-cta, +.events-past-card__cta, +.contribute-channel__link, +.contribute-way__link, +.openms-lib-about__tile-link, +.coc-report__link, +.privacy-overview__note-link, +.contact-page__path-link, +.webapps-featured__extra-link { + color: var(--openms-cta-link); + font-weight: var(--openms-cta-link-weight); + text-decoration: none; +} + +.openms-cta-link:hover, +.openms-cta-link:focus-visible, +.webapps-project-card__surface:hover .webapps-project-card__cta, +.webapps-project-card__surface:focus-visible .webapps-project-card__cta, +.news-home__card-link:hover .news-home__card-cta, +.news-home__card-link:focus-visible .news-home__card-cta, +.contact-home__card:hover .contact-home__card-cta, +.contact-home__card:focus-visible .contact-home__card-cta, +.community-events-home__card-link:hover .community-events-home__card-cta, +.community-events-home__card-link:focus-visible .community-events-home__card-cta, +.contribute-channel:hover .contribute-channel__link, +.contribute-channel:focus-within .contribute-channel__link, +.contribute-channel__link:hover, +.contribute-channel__link:focus-visible, +.contribute-way:hover .contribute-way__link, +.contribute-way:focus-within .contribute-way__link, +.contribute-way__link:hover, +.contribute-way__link:focus-visible, +.openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-about__tile:focus-within .openms-lib-about__tile-link, +.openms-lib-about__tile-link:hover, +.openms-lib-about__tile-link:focus-visible, +.coc-report__link:hover, +.coc-report__link:focus-visible, +.privacy-overview__note-link:hover, +.privacy-overview__note-link:focus-visible, +.contact-page__path-link:hover, +.contact-page__path-link:focus-visible, +.webapps-featured__extra-link:hover, +.webapps-featured__extra-link:focus-visible { + color: var(--openms-cta-link-hover); + outline: none; +} + +/* Mobile — keep a clear side gutter on every page */ +@media (max-width: 720px) { + :root, + .openms-lib-page, + .home-page, + [class$="-page-layout"], + .community-calendar-layout { + --openms-page-gutter: max(1.35rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); + --olib-pad-x: var(--openms-page-gutter); + --pro-pad: var(--openms-page-gutter); + --home-pad-x: var(--openms-page-gutter); + --openms-page-inline: var(--openms-page-gutter); + --pro-cite-promo-max: min(100%, 22rem); + --pro-cite-intro-max: 20ch; + } + + + .openms-lib-page__body > .openms-lib-page__anchor, + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"], + .home-page__block, + .webapps-featured, + .webapps-affiliates, + .webapps-archived { + padding-inline: var(--olib-pad-x); + } + + /* Footer gutters live on #footer; keep the --pro-max rail flush */ + .footer-redesign { + padding-inline: var(--openms-page-inline, var(--olib-pad-x)); + } + + .footer-inner, + .footer-bottom { + padding-inline: 0; + } + + /* Avoid double gutters when the section already insets content */ + .webapps-featured__inner, + .webapps-affiliates__inner, + .webapps-archived__inner { + padding-inline: 0; + } +} + +/* Large desktops — use width without becoming billboard-wide */ +@media (min-width: 1280px) { + :root { + --pro-max: min(88rem, 94vw); + --hub-wide-max: var(--pro-max); + --pro-card-pad: clamp(1.05rem, 1.4vw, 1.35rem); + --pro-card-pad-lg: clamp(1.05rem, 1.4vw, 1.35rem); + --pro-card-gap: clamp(1.1rem, 1.6vw, 1.65rem); + --pro-col-gap: clamp(2.25rem, 4vw, 4.5rem); + --pro-hero-content-max: min(100%, var(--pro-max)); + --pro-cite-promo-max: 28rem; + --pro-cite-intro-max: 26ch; + --pro-cluster-max: min(100%, var(--pro-max)); + } +} + +@media (min-width: 1536px) { + :root { + --pro-max: min(96rem, 92vw); + --hub-wide-max: var(--pro-max); + --pro-hero-content-max: min(100%, var(--pro-max)); + --pro-cite-promo-max: 30rem; + --pro-cite-intro-max: 28ch; + --pro-cluster-max: min(100%, var(--pro-max)); + } +} + +@media (min-width: 1920px) { + :root { + --pro-max: min(104rem, 90vw); + --hub-wide-max: var(--pro-max); + --pro-hero-content-max: min(100%, var(--pro-max)); + --pro-cluster-max: min(100%, var(--pro-max)); + } +} diff --git a/assets/css/casestudies.css b/assets/css/casestudies.css index dc35cace..a2c54f8d 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-content-link, var(--openms-navy)) !important; } .casestudies-box-title { @@ -40,7 +38,7 @@ .casestudies-box-text { margin: 30px 15px; - font-size: 14px; + font-size: var(--openms-body-size-lg); } @media only screen and (max-width: 1300px) { @@ -62,7 +60,7 @@ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /* Black, with 10% opacity */ - box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); + box-shadow: 0px 8px 15px rgba(var(--openms-dark-rgb), 0.1); position: relative; overflow: hidden; } @@ -74,7 +72,7 @@ left: 0; right: 100%; bottom: 0; - background: rgb(1, 50, 67); + background: var(--openms-blue); height: 4px; -webkit-transition-property: right; transition-property: right; diff --git a/assets/css/community-calendar.css b/assets/css/community-calendar.css new file mode 100644 index 00000000..371e058a --- /dev/null +++ b/assets/css/community-calendar.css @@ -0,0 +1,731 @@ +/* Community events page (/calendar/) */ + +.community-calendar-layout, +.openms-lib-page--calendar { + --olib-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --calendar-max: var(--pro-max, 75rem); + --home-card-title-color: rgba(var(--openms-dark-rgb), 0.82); + --home-body-color: var(--openms-text-muted); +} + +.community-calendar-layout { + 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; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: clamp(1.5rem, 3vw, 2.75rem); + align-items: start; +} + +@media (max-width: 900px) { + .community-events-page { + grid-template-columns: minmax(0, 1fr); + gap: var(--pro-section-y, clamp(3rem, 6vw, 4.5rem)); + } +} + +.community-events-page__section { + display: grid; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); +} + +.community-events-page__section--upcoming { + padding-bottom: 0; + margin-bottom: 0; + border-bottom: none; +} + +.community-events-page__header { + margin: 0; +} + +.community-events-page__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + font-weight: var(--openms-section-title-weight, var(--openms-heading-lg-weight)); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-section-title-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: 0; + border-top: none; +} + +/* —— Past events panel —— */ +.events-past-panel { + display: grid; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); + 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: var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + font-weight: var(--openms-section-title-weight, var(--openms-heading-lg-weight)); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-section-title-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: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.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(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.82)); + 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: var(--home-body-color, rgba(var(--openms-dark-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; + max-width: 100%; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + line-height: 1.45; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.events-past-card__location > span:last-child { + min-width: 0; + flex: 1 1 auto; + overflow-wrap: break-word; +} + +.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; + justify-items: stretch; + 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; + align-self: start; + justify-self: start; + width: fit-content; + max-width: 100%; + margin: 0; +} + +.community-events-upcoming-layout .community-events-home__card-main { + grid-column: 2; + grid-row: 1; + display: grid; + gap: 0.35rem; + width: 100%; + min-width: 0; + justify-self: stretch; +} + +.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-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(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.82)); +} + +.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; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.community-events-upcoming-layout .community-events-home__card-footer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 0.65rem 0.85rem; + margin-top: 0.35rem; + padding-top: 0; + border-top: none; +} + +.community-events-upcoming-layout .community-events-home__card-location { + flex: 1 1 auto; + min-width: 0; + font-size: var(--openms-text-min); + line-height: 1.45; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.community-events-upcoming-layout .community-events-home__card-footer .events-past-card__cta { + flex: 0 0 auto; + margin-left: auto; + width: fit-content; + max-width: 100%; +} + +.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) { + /* Keep date | title side-by-side on news + calendar cards */ + .community-events-upcoming-layout .community-events-home__card-link--split { + grid-template-columns: auto minmax(0, 1fr); + align-items: start; + justify-items: stretch; + gap: 0.65rem; + } + + .community-events-upcoming-layout .community-events-home__card-link--split .community-events-home__date-block { + grid-column: 1; + grid-row: 1; + align-self: start; + justify-self: start; + width: fit-content; + } + + .community-events-upcoming-layout .community-events-home__card-main { + grid-column: 2; + grid-row: 1; + width: 100%; + min-width: 0; + justify-self: stretch; + } + + /* Keep location + CTA on one line (e.g. Remote | View details) */ + .community-events-upcoming-layout .community-events-home__card-footer { + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + gap: 0.65rem 0.75rem; + } + + .community-events-upcoming-layout .community-events-home__card-location { + width: auto; + max-width: none; + flex: 1 1 auto; + min-width: 0; + } + + .community-events-upcoming-layout .community-events-home__card-location > span:last-child { + min-width: 0; + flex: 1 1 auto; + overflow-wrap: break-word; + } + + .community-events-upcoming-layout .community-events-home__card-footer .events-past-card__cta, + .community-events-upcoming-layout .community-events-home__card-footer .openms-step__cta, + .community-events-upcoming-layout .community-events-home__card-footer .openms-btn-primary { + width: fit-content !important; + max-width: none; + margin-left: 0; + align-self: center; + flex: 0 0 auto; + 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: auto minmax(0, 1fr); + } + + .events-past-card__date-block { + grid-column: 1; + grid-row: 1; + width: fit-content; + } + + .events-past-card__body { + grid-column: 2; + grid-row: 1; + min-width: 0; + } + + .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..094b278d --- /dev/null +++ b/assets/css/community-events-home.css @@ -0,0 +1,522 @@ +/* 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(--openms-page-inline); + 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(--pro-max, 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 var(--openms-stack-eyebrow, 12px); + 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: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--home-title-color, var(--openms-navy)); + -webkit-text-fill-color: currentColor; +} + +.community-events-home__lead { + margin: var(--openms-stack-lead, 20px) 0 0; + max-width: min(100%, var(--pro-measure-wide, 58ch)); + width: 100%; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: var(--openms-text-muted); + 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(1rem, 1.4vw, 1.1rem); + font-weight: 700; + line-height: 1.3; + letter-spacing: normal; + color: var(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.82)); + text-wrap: pretty; +} + +.community-events-home__card--featured .community-events-home__card-title { + font-size: clamp(1rem, 1.4vw, 1.1rem); +} + +.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: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.community-events-home__card-summary { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--home-body-color, rgba(var(--openms-dark-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; + max-width: 100%; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + line-height: 1.45; + color: var(--openms-text-muted); +} + +.community-events-home__card-location > span:last-child { + min-width: 0; + flex: 1 1 auto; + overflow-wrap: break-word; +} + +.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: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +/* 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: var(--openms-cta-link, var(--home-link-color, var(--openms-navy))); +} + +.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-cta-link-hover, 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: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + } + + .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..41c1ba72 --- /dev/null +++ b/assets/css/community-events-news-home.css @@ -0,0 +1,391 @@ +/* Homepage — Latest news + Upcoming events side-by-side (Alexium press-card layout) */ + +.community-events-home--with-news, +.openms-lib-page--news, +.openms-lib-page--calendar { + --news-events-item-gap: clamp(1.15rem, 2.2vw, 1.5rem); + --events-grid-gap: var(--news-events-item-gap); + --press-card-radius: 1.25rem; + --press-card-pad: clamp(1.6rem, 2.8vw, 1.85rem); + --press-accent: var(--openms-blue); +} + +.community-events-home--with-news { + --news-events-col-gap: clamp(3.5rem, 7vw, 6rem); + --news-events-title-size: clamp(1.35rem, 2.4vw, 1.75rem); + --events-grid-gap: var(--news-events-item-gap); + background: var(--home-bg-soft, #f4f6fa) !important; +} + +.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: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); +} + +.community-news-events__column { + display: grid; + align-content: start; + gap: var(--pro-stack-actions, 1.75rem); + min-width: 0; +} + +.community-news-events__column-header { + display: flex; + align-items: flex-end; + 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: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + color: var(--home-title-color, var(--openms-navy)); + text-transform: uppercase; + text-wrap: balance; +} + +.community-news-events__column-title-accent { + color: var(--home-title-accent-color, var(--openms-navy)); + background: none; + -webkit-background-clip: unset; + background-clip: unset; + -webkit-text-fill-color: currentColor; +} + +/* Homepage — Latest news + Upcoming events: solid dark blue titles */ +.home-page .community-news-events__column--news .community-news-events__column-title, +.home-page .community-news-events__column--events .community-news-events__column-title, +.home-page .community-news-events__column--news .community-news-events__column-title-accent, +.home-page .community-news-events__column--events .community-news-events__column-title-accent { + color: var(--home-title-color, var(--openms-navy)); + background: none; + -webkit-background-clip: unset; + background-clip: unset; + -webkit-text-fill-color: currentColor; +} + +/* Homepage — View all as text links */ +.home-page .community-news-events__view-all, +.home-page .community-events-home__view-all--inline { + display: inline-flex; + align-items: center; + gap: 0.35rem; + flex-shrink: 0; + margin: 0; + padding: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 700; + line-height: 1.3; + color: var(--home-link-color, var(--openms-navy)); + background: none; + border: none; + border-radius: 0; + box-shadow: none; + text-decoration: none; + white-space: nowrap; + transition: color 0.2s ease, gap 0.2s ease; +} + +.home-page .community-news-events__view-all:visited, +.home-page .community-events-home__view-all--inline:visited { + color: var(--home-link-color, var(--openms-navy)); +} + +.home-page .community-news-events__view-all:hover, +.home-page .community-news-events__view-all:focus-visible, +.home-page .community-news-events__view-all:active, +.home-page .community-events-home__view-all--inline:hover, +.home-page .community-events-home__view-all--inline:focus-visible, +.home-page .community-events-home__view-all--inline:active { + color: var(--openms-content-link-hover, var(--openms-blue)); + background: none; + border: none; + box-shadow: none; + transform: none; + outline: none; + gap: 0.5rem; +} + +.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); +} + +/* ── Press cards (Alexium news layout) ── */ +.community-events-home--with-news .community-events-home__grid, +.community-events-home--with-news .news-home__list, +.openms-lib-page--news .community-events-home__grid, +.openms-lib-page--news .news-home__list, +.openms-lib-page--calendar .community-events-home__grid { + display: grid; + gap: var(--news-events-item-gap); + margin: 0; + padding: 0; + list-style: none; +} + +.community-events-home--with-news .community-news-events__press-card, +.community-events-home--with-news .community-events-home__card, +.openms-lib-page--news .community-news-events__press-card, +.openms-lib-page--news .community-events-home__card, +.openms-lib-page--calendar .community-news-events__press-card, +.openms-lib-page--calendar .community-events-home__card { + height: auto; + min-height: 0; + background: transparent; + border: none; + box-shadow: none; + overflow: visible; +} + +.community-news-events__press-link { + display: block; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: var(--press-card-pad); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--press-card-radius); + background: var(--openms-white); + box-shadow: 0 0.25rem 1rem rgba(var(--openms-navy-rgb), 0.06); + color: inherit; + text-decoration: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + transition: + box-shadow 0.25s ease, + border-color 0.25s ease, + background-color 0.25s ease, + transform 0.25s ease; +} + +.community-news-events__press-link--static { + cursor: default; +} + +a.community-news-events__press-link:hover, +a.community-news-events__press-link:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.35); + background: var(--openms-white); + box-shadow: 0 0.55rem 1.5rem rgba(var(--openms-navy-rgb), 0.1); + outline: none; + transform: translateY(-1px); +} + +.community-news-events__press-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem 0.45rem; + margin: 0 0 0.75rem; + font-family: var(--openms-font-body); + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + line-height: 1.3; + color: rgba(var(--openms-navy-rgb), 0.5); +} + +.community-news-events__press-label { + color: var(--press-accent); + font-weight: 700; +} + +.community-news-events__press-sep { + color: rgba(var(--openms-navy-rgb), 0.28); +} + +.community-news-events__press-date { + color: rgba(var(--openms-navy-rgb), 0.5); + font-weight: 600; + letter-spacing: 0.14em; +} + +.community-news-events__press-title, +.home-page .community-news-events__press-title, +.home-page .community-news-events__press-link .news-home__card-title, +.home-page .community-news-events__press-link .community-events-home__card-title, +.openms-lib-page--news .community-news-events__press-title, +.openms-lib-page--news .community-news-events__press-link .news-home__card-title, +.openms-lib-page--calendar .community-news-events__press-title { + margin: 0 0 0.75rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.15rem, 2vw, 1.35rem); + font-weight: 700; + line-height: 1.28; + letter-spacing: -0.015em; + color: rgba(var(--openms-dark-rgb), 0.82) !important; + text-wrap: balance; + transition: color 0.2s ease; +} + +a.community-news-events__press-link:hover .community-news-events__press-title, +a.community-news-events__press-link:focus-visible .community-news-events__press-title, +.home-page a.community-news-events__press-link:hover .news-home__card-title, +.home-page a.community-news-events__press-link:focus-visible .news-home__card-title, +.home-page a.community-news-events__press-link:hover .community-events-home__card-title, +.home-page a.community-news-events__press-link:focus-visible .community-events-home__card-title { + color: var(--openms-navy) !important; + filter: none; +} + +.community-news-events__press-summary { + margin: 0; + font-family: var(--openms-font-body); + font-size: clamp(0.9375rem, 1.3vw, 1rem); + font-weight: 450; + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.72); + text-wrap: pretty; +} + +.home-page .community-news-events__press-summary, +.home-page .community-news-events__press-link .news-home__card-summary, +.openms-lib-page--news .community-news-events__press-summary, +.openms-lib-page--calendar .community-news-events__press-summary { + color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +.community-news-events__press-location { + margin: 0.7rem 0 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.35; + color: rgba(var(--openms-navy-rgb), 0.55); +} + +.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) { + /* Subgrid: each news/events row shares one height (tallest content wins) */ + .community-events-home--with-news .community-news-events__grid { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + grid-template-rows: auto repeat(8, auto); + align-items: stretch; + column-gap: 0; + row-gap: var(--news-events-item-gap); + } + + .community-events-home--with-news .community-news-events__column { + display: grid; + grid-template-rows: subgrid; + grid-row: span 9; + gap: var(--news-events-item-gap); + align-content: stretch; + } + + .community-events-home--with-news .community-news-events__column > .community-events-home__grid, + .community-events-home--with-news .community-news-events__column > .news-home__list { + display: contents; + } + + .community-events-home--with-news .community-events-home__item { + display: flex; + min-width: 0; + height: auto; + align-self: stretch; + } + + .community-events-home--with-news .community-news-events__press-card, + .community-events-home--with-news .community-news-events__press-link { + height: 100%; + min-height: 100%; + } + + .community-news-events__column--news { + padding-right: calc(var(--news-events-col-gap) / 2); + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08); + } + + .community-news-events__column--events { + padding-left: calc(var(--news-events-col-gap) / 2); + } +} + +@media (max-width: 899px) { + .community-events-home--with-news .community-news-events__grid { + gap: clamp(3.5rem, 8vw, 5.5rem); + } + + .community-news-events__column--news { + padding-bottom: clamp(2.5rem, 5vh, 3.5rem); + 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, + .community-news-events__press-link, + .community-news-events__press-title { + transition: none; + } + + a.community-news-events__press-link:hover, + a.community-news-events__press-link:focus-visible { + transform: 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..c773bc6a --- /dev/null +++ b/assets/css/community-home.css @@ -0,0 +1,225 @@ +/* Homepage community — Apache-style photo band with left copy */ + +.community-home { + position: relative; + isolation: isolate; + /* overflow must stay visible — hidden breaks background-attachment: fixed */ + overflow: visible; + background: var(--openms-navy, #0c2171); +} + +.community-home--has-bg { + min-height: clamp(34rem, 72vh, 48rem); +} + +.community-home__media { + position: absolute; + inset: 0; + z-index: 0; + background-color: var(--openms-navy, #0c2171); + background-size: cover; + background-position: center 40%; + background-repeat: no-repeat; + background-attachment: fixed; + pointer-events: none; +} + +.community-home__backdrop { + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + /* Black wash + left-weighted veil — photo stays visible, copy stays legible */ + background: + linear-gradient( + 105deg, + rgba(0, 0, 0, 0.82) 0%, + rgba(0, 0, 0, 0.58) 36%, + rgba(0, 0, 0, 0.28) 66%, + rgba(0, 0, 0, 0.14) 100% + ), + linear-gradient( + 180deg, + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.22) 100% + ); +} + +.community-home__inner { + position: relative; + z-index: 2; + display: flex; + align-items: center; + min-height: clamp(34rem, 72vh, 48rem); + max-width: none; + width: 100%; + margin: 0; + padding-block: clamp(4.25rem, 9vh, 6.5rem); + padding-inline: var(--openms-page-inline); +} + +.community-home__content { + max-width: min(100%, 36rem); + min-width: 0; +} + +.community-home__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 var(--openms-stack-eyebrow, 12px); + 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: rgba(var(--openms-white-rgb), 0.65); + background: transparent; + border: none; + border-radius: 0; +} + +.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: var(--home-section-head-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + font-weight: var(--openms-heading-lg-weight, 700); + line-height: 1.3; + letter-spacing: normal; + color: var(--openms-white); + text-align: left; + text-transform: uppercase; + text-wrap: balance; +} + +.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; +} + +.community-home__lead { + margin: var(--openms-stack-lead, 20px) 0 0; + padding: 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__lead p { + margin: 0; + padding: 0; +} + +.community-home__lead a { + color: var(--openms-white); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.community-home__lead a:hover, +.community-home__lead a:focus-visible { + color: rgba(var(--openms-white-rgb), 0.82); +} + +.community-home__note { + margin: var(--openms-stack-paragraph, 16px) 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: rgba(var(--openms-white-rgb), 0.82); +} + +.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(30rem, 70vh, 42rem); + } + + .community-home__media { + background-attachment: scroll; + background-position: center 30%; + } + + .community-home__backdrop { + background: + linear-gradient( + 180deg, + rgba(0, 0, 0, 0.78) 0%, + rgba(0, 0, 0, 0.58) 55%, + rgba(0, 0, 0, 0.42) 100% + ), + linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.26)); + } + + .community-home__inner { + padding-block: clamp(3rem, 6.5vh, 4.5rem); + padding-inline: var(--home-pad-x); + } + + .community-home__content { + max-width: min(100%, 40rem); + } +} + +@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..d08e623d --- /dev/null +++ b/assets/css/contact-area.css @@ -0,0 +1,515 @@ +/* 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, var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)))) var(--openms-page-inline); +} + +/* Homepage Contact CTA — keep the block dead-center in the section/viewport */ +main.home-page > section.home-page__cta:last-of-type .contact-home { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + min-height: clamp(28rem, calc(100vh - 12rem), 42rem); + margin-bottom: 0; +} + +main.home-page > section.home-page__cta:last-of-type .contact-home__main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1 1 auto; + width: 100%; + box-sizing: border-box; + padding-top: var(--home-section-space-y, var(--pro-section-y, clamp(4rem, 9vw, 6.5rem))); + padding-bottom: var(--home-section-space-y, var(--pro-section-y, clamp(4rem, 9vw, 6.5rem))); +} + +main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redesign { + padding-top: 0; + margin-top: 0; +} + +.contact-home__inner { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + max-width: var(--pro-max, var(--home-max, 75rem)); + margin-inline: auto; + text-align: center; +} + +.contact-home__header { + display: flex; + flex-direction: column; + align-items: center; + max-width: min(100%, 46rem); + margin: 0 auto clamp(1.35rem, 2.8vh, 1.85rem); + text-align: center; +} + +.contact-home__eyebrow { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + margin: 0 0 var(--openms-stack-eyebrow, 12px); + 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: var(--home-section-head-title-size, var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15))); + font-weight: var(--openms-heading-lg-weight, 700); + line-height: 1.3; + letter-spacing: normal; + color: var(--home-title-color, var(--openms-navy)); + text-align: center; + text-transform: uppercase; + text-wrap: balance; +} + +.contact-home__title-accent { + display: inline; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--home-title-color, var(--openms-navy)); + -webkit-text-fill-color: currentColor; +} + +.contact-home__description { + margin: var(--openms-stack-lead, 20px) auto 0; + max-width: min(100%, var(--pro-measure-wide, 58ch)); + width: 100%; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: var(--openms-text-muted); + text-align: center; + text-wrap: pretty; +} + +.contact-home__actions { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.75rem 1rem; + margin-top: 0; + width: 100%; +} + +.contact-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) { + .contact-home__header { + max-width: 100%; + } + + .contact-home__description { + max-width: 100%; + } +} + +.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: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-rows: auto auto auto; + grid-template-areas: + "icon title" + "text text" + "cta cta"; + align-items: start; + column-gap: 0.85rem; + row-gap: 0; + 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, + background 0.2s ease, + color 0.2s ease; +} + +.contact-home__card:hover, +.contact-home__card:focus-visible { + border-color: rgba(var(--openms-navy-rgb), 0.45); + background: var(--openms-navy); + box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.28); + transform: translateY(-2px); + outline: none; + color: var(--openms-white); +} + +.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; + grid-area: icon; + align-self: center; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + color: rgba(var(--openms-blue-rgb), 0.28); + background: none; + background-color: transparent; + box-shadow: none; + transition: color 0.2s ease; +} + +.contact-home__card:hover .contact-home__card-icon, +.contact-home__card:focus-visible .contact-home__card-icon { + color: rgba(var(--openms-white-rgb), 0.55); +} + +.contact-home__card-icon svg { + display: block; + width: var(--pro-card-icon-size, clamp(2.5rem, 4.2vw, 3.15rem)); + height: var(--pro-card-icon-size, clamp(2.5rem, 4.2vw, 3.15rem)); +} + +.contact-home__card-icon svg path { + fill: currentColor; +} + +.contact-home__card-title { + grid-area: title; + align-self: center; + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.4vw, 1.1rem); + font-weight: 700; + line-height: 1.3; + color: var(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.82)); + transition: color 0.2s ease; +} + +.contact-home__card:hover .contact-home__card-title, +.contact-home__card:focus-visible .contact-home__card-title, +.home-page .contact-home__card:hover .contact-home__card-title, +.home-page .contact-home__card:focus-visible .contact-home__card-title { + color: var(--openms-white) !important; +} + +.contact-home__card-text { + grid-area: text; + margin: 0.75rem 0 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--openms-text-muted); + transition: color 0.2s ease; +} + +.contact-home__card:hover .contact-home__card-text, +.contact-home__card:focus-visible .contact-home__card-text, +.home-page .contact-home__card:hover .contact-home__card-text, +.home-page .contact-home__card:focus-visible .contact-home__card-text { + color: rgba(var(--openms-white-rgb), 0.88) !important; +} + +.contact-home__card-cta { + display: inline-flex; + align-items: center; + gap: 0.3rem; + grid-area: cta; + margin-top: 0.85rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--home-link-color, var(--openms-navy)); + transition: color 0.2s ease, gap 0.2s ease; +} + +.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, +.home-page .contact-home__card:hover .contact-home__card-cta, +.home-page .contact-home__card:focus-visible .contact-home__card-cta { + color: var(--openms-white) !important; +} + +.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: var(--openms-text-soft); +} + +@media (max-width: 960px) { + .contact-home__grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { +} + +@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) var(--olib-pad-x); + background: var(--openms-white); +} + +.contact-area__inner { + box-sizing: border-box; + width: 100%; + max-width: var(--pro-max, 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: var(--openms-card-title-color); +} + +.contact-area__meta { + margin: 0; + font-size: var(--openms-text-min); + color: var(--openms-text-soft); +} + +.contact-area__support-note { + margin: 0.8rem 0 0; + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--openms-card-title-color); +} + +.contact-area__support-note a { + color: var(--home-link-color, var(--openms-navy)); + 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), 0.4); + 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(--home-link-color, var(--openms-navy)); + text-decoration: none; +} + +.contact-area__line:hover, +.contact-area__line:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: none; + 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..5f59af42 --- /dev/null +++ b/assets/css/contact-page.css @@ -0,0 +1,51 @@ +/* Contact hub page — page-specific overrides only. + Shell / path cards live in z-openms-lib-pro.css. */ + +.openms-lib-page--contact #contact-paths.openms-lib-page__anchor { + padding-top: 0 !important; + margin-top: 0 !important; +} + +.openms-lib-page--contact #contact-paths .openms-lib-resources.openms-lib-resources--no-feature { + padding-block: var(--pro-section-y, clamp(3.5rem, 7vw, 5.5rem)) !important; + margin-top: 0 !important; +} + +.openms-lib-page--contact #contact-paths .openms-lib-resources__head { + margin-top: 0 !important; +} + +/* Community card: Discord + GitHub as direct icon links + Soft-pill look is shared sitewide in zz-openms-buttons.css */ +.openms-lib-page--contact .contact-path-socials { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.65rem 0.85rem; + margin-top: auto; + padding-top: 0.35rem; +} + +.openms-lib-page--contact .contact-path-social i { + font-size: 1rem; + line-height: 1; +} + +.openms-lib-page--contact .contact-path-card--community.openms-lib-resources__item--static { + cursor: default; +} + +/* Keep other contact path CTAs pinned like Discord/GitHub pills */ +.openms-lib-page--contact .contact-paths-grid > .openms-lib-resources__item > .openms-lib-resources__item-link { + margin-top: auto; +} + +@media (max-width: 720px) { + .openms-lib-page--contact #contact-paths.openms-lib-page__anchor { + padding-top: 0 !important; + } + + .openms-lib-page--contact .contact-path-socials { + width: 100%; + } +} 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..79b1c443 --- /dev/null +++ b/assets/css/developer-retreat-page.css @@ -0,0 +1,497 @@ +.developer-retreat-page-layout { + --olib-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --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-blue); + background: var(--openms-blue); + 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-blue); + border-color: var(--openms-blue); + 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..de242bb0 --- /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: 52rem; + border: 0; + background: transparent; +} + +@media (max-width: 720px) { + .donate-page__zeffy-iframe { + /* Zeffy has no dynamicHeight — keep tall enough that the page scrolls, not the iframe */ + min-height: 72rem; + } +} diff --git a/assets/css/ecosystem-home.css b/assets/css/ecosystem-home.css new file mode 100644 index 00000000..558030e5 --- /dev/null +++ b/assets/css/ecosystem-home.css @@ -0,0 +1,493 @@ +/* Homepage — ecosystem tool cards */ + +.ecosystem-home { + --ecosystem-max: var(--pro-max, var(--home-max, 75rem)); + --ecosystem-card-radius: 1rem; + --ecosystem-ease: cubic-bezier(0.22, 1, 0.36, 1); + --ecosystem-logo-box: 7.5rem; + --ecosystem-logo-box-h: 3rem; + max-width: none; + width: 100%; + margin: 0; + padding: var(--home-section-pad) var(--openms-page-inline); +} + +.ecosystem-home__inner { + display: grid; + grid-template-columns: 1fr; + align-items: start; + row-gap: 0; + width: 100%; + max-width: var(--ecosystem-max); + margin-inline: auto; +} + +.ecosystem-home__header { + margin: 0; + min-width: 0; +} + +.home-page .home-page__block--ecosystem .ecosystem-home__header { + margin: 0 0 var(--home-section-head-gap, clamp(2.25rem, 4.5vw, 3.25rem)) !important; +} + +.home-page .home-page__block--ecosystem .ecosystem-home__header-main { + max-width: var(--home-section-head-max, min(100%, 46rem)); +} + +.ecosystem-home__title { + margin: 0; + font-family: var(--openms-font-heading); + color: var(--home-title-color, var(--openms-navy)); + text-wrap: balance; +} + +.ecosystem-home__title-accent { + color: var(--home-title-color, var(--openms-navy)); + background: none; + -webkit-background-clip: unset; + background-clip: unset; + -webkit-text-fill-color: currentColor; +} + +.ecosystem-home__lead { + margin: var(--home-section-head-lead-gap, 0.75rem) 0 0; + max-width: min(100%, var(--pro-measure-wide, 58ch)) !important; + width: 100%; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)); + text-align: left; + text-wrap: pretty; +} + +.ecosystem-home__grid { + display: grid; + grid-template-columns: minmax(0, 1fr); + grid-auto-rows: auto; + gap: clamp(0.85rem, 1.8vw, 1.35rem); + margin: 0; + padding: 0; + list-style: none; + align-items: stretch; + min-width: 0; +} + +@media (min-width: 721px) { + .ecosystem-home__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 1280px) { + .ecosystem-home { + --ecosystem-logo-box: 6.75rem; + --ecosystem-logo-box-h: 2.75rem; + } + + .ecosystem-home__grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .ecosystem-home__card { + gap: 0.55rem; + padding: clamp(1rem, 1.15vw, 1.25rem); + } + + .ecosystem-home__card-head { + flex-direction: row; + flex-wrap: nowrap; + align-items: flex-start; + min-height: var(--ecosystem-logo-box-h, 2.75rem); + } + + .ecosystem-home__card-title { + font-size: clamp(0.95rem, 0.85vw + 0.7rem, 1.05rem); + } + + .ecosystem-home__card-text { + font-size: clamp(0.8125rem, 0.2vw + 0.78rem, 0.9rem); + line-height: 1.5; + } +} + +.ecosystem-home__item { + display: flex; + min-width: 0; + height: auto; + align-self: stretch; +} + +.ecosystem-home__card { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.7rem; + box-sizing: border-box; + width: 100%; + height: 100%; + min-height: 0; + max-height: none; + min-width: 0; + padding: clamp(1rem, 1.8vw, 1.45rem); + overflow: visible; + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)); + border-radius: var(--ecosystem-card-radius); + background: var(--openms-white); + color: var(--openms-navy); + text-decoration: none; + box-shadow: var(--pro-shadow, 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.06)); + transform: none; + transition: + box-shadow 0.25s ease, + border-color 0.25s ease, + transform 0.25s ease; + -webkit-tap-highlight-color: transparent; +} + +.ecosystem-home__card:hover, +.ecosystem-home__card:focus-visible { + height: 100%; + min-height: 0; + max-height: none; + transform: var(--pro-lift-sm, translateY(-2px)); + border-color: var(--pro-line-strong, rgba(var(--openms-navy-rgb), 0.22)); + background: var(--openms-white); + box-shadow: var(--pro-shadow-hover, 0 0.75rem 1.65rem rgba(var(--openms-navy-rgb), 0.12)); + outline: none; + color: var(--openms-navy) !important; +} + +.ecosystem-home__card:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-white), + 0 0 0 5px var(--openms-navy), + var(--pro-shadow, 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.06)); +} + +.ecosystem-home__card:hover .ecosystem-home__card-tag, +.ecosystem-home__card:focus-visible .ecosystem-home__card-tag { + color: var(--openms-white) !important; + border-color: var(--openms-blue); + background: var(--openms-blue); +} + +.ecosystem-home__card:hover .ecosystem-home__card-title, +.ecosystem-home__card:focus-visible .ecosystem-home__card-title { + color: var(--openms-navy) !important; +} + +.ecosystem-home__card:hover .ecosystem-home__card-link, +.ecosystem-home__card:focus-visible .ecosystem-home__card-link { + color: var(--openms-cta-link-hover, var(--openms-blue)) !important; + gap: 0.35rem; +} + +.ecosystem-home__card:hover .ecosystem-home__card-text, +.ecosystem-home__card:focus-visible .ecosystem-home__card-text { + color: var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)) !important; +} + +.ecosystem-home__card:hover .ecosystem-home__card-icon, +.ecosystem-home__card:focus-visible .ecosystem-home__card-icon { + opacity: 1; +} + +.ecosystem-home__card-head { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 0.65rem 1rem; + width: 100%; + min-width: 0; + min-height: var(--ecosystem-logo-box-h, 3rem); +} + +.ecosystem-home__card-intro { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.45rem; + min-width: 0; + flex: 1 1 auto; +} + +.ecosystem-home__card-tag { + display: inline-flex; + align-items: center; + flex: 0 1 auto; + min-width: 0; + margin: 0; + padding: 0.18rem 0.5rem; + border-radius: 999px; + border: 1px solid var(--openms-blue); + background: var(--openms-blue); + font-family: var(--openms-font-body); + font-size: 0.625rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + line-height: 1.2; + color: var(--openms-white) !important; + white-space: normal; + overflow-wrap: anywhere; +} + +.ecosystem-home__card-icon, +.ecosystem-home__card--openms-lib .ecosystem-home__card-icon, +.ecosystem-home__card--webapps .ecosystem-home__card-icon, +.ecosystem-home__card--pyopenms .ecosystem-home__card-icon, +.ecosystem-home__card--viz .ecosystem-home__card-icon { + display: block; + box-sizing: border-box; + flex: 0 0 auto; + width: var(--ecosystem-logo-box, 7.5rem); + height: var(--ecosystem-logo-box-h, 3rem); + max-width: var(--ecosystem-logo-box, 7.5rem); + max-height: var(--ecosystem-logo-box-h, 3rem); + margin: 0 0 0 auto; + object-fit: contain; + object-position: right center; + filter: none; + opacity: 0.96; +} + +.ecosystem-home__card--webapps .ecosystem-home__card-head { + min-height: 4.5rem; + align-items: center; +} + +.ecosystem-home__card--webapps .ecosystem-home__card-icon { + width: 10rem; + height: 4.5rem; + max-width: 10rem; + max-height: 4.5rem; +} + +.ecosystem-home__card--viz .ecosystem-home__card-head { + min-height: 6.5rem; + align-items: center; +} + +.ecosystem-home__card--viz .ecosystem-home__card-icon { + width: 8rem; + height: 6.5rem; + max-width: 8rem; + max-height: 6.5rem; +} + +.ecosystem-home__card-title { + margin: 0; + width: 100%; + min-width: 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); + overflow-wrap: anywhere; + word-break: break-word; + text-wrap: balance; +} + +.home-page .ecosystem-home__card-title, +.home-page .ecosystem-home__card:hover .ecosystem-home__card-title, +.home-page .ecosystem-home__card:focus-visible .ecosystem-home__card-title { + color: var(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.9)) !important; +} + +.ecosystem-home__card-text { + flex: 1 1 auto; + margin: 0; + width: 100%; + min-width: 0; + max-width: none; + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)); + text-wrap: pretty; + overflow: visible; + overflow-wrap: anywhere; + word-break: break-word; +} + +.home-page .ecosystem-home__card-text, +.home-page .ecosystem-home__card:hover .ecosystem-home__card-text, +.home-page .ecosystem-home__card:focus-visible .ecosystem-home__card-text { + color: var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)) !important; +} + +.ecosystem-home__card-link { + display: inline-flex; + align-items: center; + align-self: flex-start; + gap: 0.2rem; + width: fit-content; + max-width: 100%; + min-height: 0; + margin-top: auto; + padding: 0.2rem 0 0; + border: none; + border-radius: 0; + background: none; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.3; + color: var(--home-link-color, var(--openms-navy)); + text-decoration: none; + transition: gap 0.15s ease, color 0.15s ease; +} + +.home-page .ecosystem-home__card-link { + color: var(--home-link-color, var(--openms-navy)) !important; + background: none !important; + border: none !important; + padding: 0.2rem 0 0 !important; + min-height: 0 !important; +} + +.home-page .ecosystem-home__card:hover .ecosystem-home__card-link, +.home-page .ecosystem-home__card:focus-visible .ecosystem-home__card-link { + color: var(--openms-navy) !important; + background: none !important; + border: none !important; +} + +.ecosystem-home__card-link-icon { + display: inline-block; + font-size: 0.95rem; + line-height: 1; + transition: transform 0.2s ease; +} + +.ecosystem-home__card:hover .ecosystem-home__card-link-icon, +.ecosystem-home__card:focus-visible .ecosystem-home__card-link-icon { + transform: translateX(3px); +} + +.home-page__block--ecosystem { + background: var(--openms-white); + border-bottom: none; +} + +.home-page .home-page__block--ecosystem .ecosystem-home__eyebrow { + font-size: var(--home-eyebrow-size, 0.75rem) !important; + font-weight: var(--home-eyebrow-weight, 650) !important; + letter-spacing: var(--home-eyebrow-tracking, 0.16em) !important; +} + +.ecosystem-home__eyebrow-icon { + display: inline-flex; + line-height: 0; + opacity: 0.9; +} + +.ecosystem-home__eyebrow-icon svg { + display: block; + width: 0.875rem; + height: 0.875rem; +} + +.home-page .home-page__block--ecosystem .ecosystem-home__title, +.home-page .home-page__block--ecosystem .ecosystem-home__title-accent { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.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) { + .home-page .home-page__block--ecosystem .ecosystem-home__header-main { + max-width: min(100%, 42rem); + } +} + +@media (max-width: 768px) { + .home-page .home-page__block--ecosystem .ecosystem-home__header-main { + max-width: 100%; + } + + .home-page .home-page__block--ecosystem .ecosystem-home__title { + max-width: none; + width: 100%; + text-wrap: pretty; + } + + .ecosystem-home__card, + .ecosystem-home__card:hover, + .ecosystem-home__card:focus-visible { + height: auto; + min-height: 0; + max-height: none; + transform: none; + padding: 1.1rem 1.05rem 1.15rem; + } + + .ecosystem-home__card-text { + max-width: none; + } + + .ecosystem-home { + --ecosystem-logo-box: 7rem; + --ecosystem-logo-box-h: 2.85rem; + } +} + +@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; + } + + .home-page--motion .home-page__block--ecosystem .ecosystem-home__header, + .home-page--motion .home-page__block--ecosystem .ecosystem-home__item { + transition: none; + } + + .home-page--motion .home-page__block--ecosystem:not(.is-revealed) .ecosystem-home__header, + .home-page--motion .home-page__block--ecosystem .ecosystem-home__item:not(.is-revealed) { + opacity: 1; + transform: none; + } +} diff --git a/assets/css/fellowship-page.css b/assets/css/fellowship-page.css new file mode 100644 index 00000000..61e3039e --- /dev/null +++ b/assets/css/fellowship-page.css @@ -0,0 +1,287 @@ +.fellowship-page-layout { + --olib-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --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 { + 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-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + font-weight: var(--openms-section-title-weight, var(--openms-heading-lg-weight)); + line-height: 1.3; + color: var(--openms-section-title-color, var(--openms-navy)); + letter-spacing: normal; + text-transform: uppercase; +} + +.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: none; + border-radius: var(--fellowship-card-radius); + background: transparent; + box-shadow: none; +} + +.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 { + min-height: auto; + overflow: visible; + padding: 0; +} + +.fellowship-page__tally-iframe { + display: block; + width: 100%; + min-height: 800px; + border: 0; + background: transparent; +} + +@media (max-width: 720px) { + .fellowship-page__tally-iframe { + min-height: 900px; + } +} + +/* 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-content-link, var(--openms-navy)); + text-decoration: none; + 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: var(--openms-cta-link-weight, 700); + color: var(--openms-cta-link, var(--openms-navy)); + text-decoration: none; +} + +.fellowship-project-card__link:hover, +.fellowship-project-card__link:focus-visible { + color: var(--openms-cta-link-hover, var(--openms-blue)); + text-decoration: none; +} + +.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-blue); + background: var(--openms-blue); + 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-blue); + border-color: var(--openms-blue); + 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..f2ba27a7 --- /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-content-link, var(--openms-navy)); + 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-content-link, var(--openms-navy)); + text-decoration: none; + 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..a38ffb90 --- /dev/null +++ b/assets/css/help-page.css @@ -0,0 +1,31 @@ +.openms-lib-page--help { + --olib-text-muted: var(--openms-text-muted); +} + +.help-page { + margin-top: 0; +} + +.help-page__hint { + margin-top: 0.75rem; + font-size: 0.9rem; + color: var(--openms-text-muted, #5a6474); +} + +.openms-lib-page--help .help-page__resources { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.help-page__card--wide { + grid-column: 1 / -1; +} + +@media (max-width: 860px) { + .openms-lib-page--help .help-page__resources { + grid-template-columns: 1fr; + } + + .help-page__card--wide { + grid-column: auto; + } +} diff --git a/assets/css/hero-saas.css b/assets/css/hero-saas.css new file mode 100644 index 00000000..de9ce4db --- /dev/null +++ b/assets/css/hero-saas.css @@ -0,0 +1,1315 @@ +/* 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: flex-start; + gap: 0.6rem 0.65rem; + margin: 0; + padding: 0; + list-style: none; +} + +.hero-home__highlight { + display: inline-flex; + align-items: center; + gap: 0.45rem; + font-family: var(--openms-font-body); + font-size: clamp(0.8125rem, 1.05vw, 0.875rem); + font-weight: 600; + line-height: 1.35; + letter-spacing: 0.01em; + color: rgba(var(--openms-navy-rgb), 0.72); + padding: 0.5rem 1rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + border-radius: 999px; + background: rgba(var(--openms-navy-rgb), 0.03); + white-space: nowrap; +} + +.hero-home__highlight-dot { + width: 0.4rem; + height: 0.4rem; + border-radius: 50%; + flex-shrink: 0; + background: var(--openms-orange); +} + +.hero-home__highlight--2 .hero-home__highlight-dot { + background: var(--openms-pink); +} + +.hero-home__highlight--3 .hero-home__highlight-dot { + background: var(--openms-blue); +} + +.hero-home__highlight + .hero-home__highlight::before { + content: none; +} + +@media (min-width: 901px) { + .hero-home__hero-grid { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + grid-template-rows: 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: center; + } + + .hero-home__footer { + position: relative; + z-index: 2; + } + + .hero-home__visual { + grid-column: 2; + grid-row: 1; + justify-self: stretch; + align-self: start; + width: 100%; + margin-right: 0; + align-items: stretch; + margin-top: 0; + padding-top: 0; + } + + .hero-home__actions-block { + margin-top: 0; + } + + .hero-home__highlights { + justify-content: flex-start; + } +} + +.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(0.85rem, 1.8vw, 1.25rem) clamp(0.85rem, 1.8vw, 1.35rem) clamp(0.95rem, 1.9vw, 1.35rem); + border-radius: clamp(1rem, 2vw, 1.35rem); + background: + linear-gradient( + 165deg, + rgba(var(--openms-white-rgb), 0.09) 0%, + rgba(var(--openms-white-rgb), 0.035) 48%, + rgba(var(--openms-blue-rgb), 0.08) 100% + ); + border: 1px solid rgba(var(--openms-white-rgb), 0.14); + box-shadow: + inset 0 1px 0 rgba(var(--openms-white-rgb), 0.1), + 0 1.75rem 3.25rem rgba(var(--openms-dark-rgb), 0.28), + 0 0 0 1px rgba(var(--openms-blue-rgb), 0.08); + overflow: hidden; + isolation: isolate; +} + +.hero-home__visual-shell::before { + content: ""; + position: absolute; + inset: -8% 4% 18%; + background: radial-gradient( + ellipse at 50% 42%, + rgba(var(--openms-blue-rgb), 0.34) 0%, + rgba(var(--openms-blue-rgb), 0.12) 40%, + transparent 72% + ); + filter: blur(18px); + pointer-events: none; + z-index: 0; +} + +.hero-home__visual-shell::after { + content: ""; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); + background-size: 180px 180px; + opacity: 0.045; + mix-blend-mode: soft-light; + 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-logo-diagram__chart, +.hero-logo-diagram__chrome { + 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__highlights { + flex-wrap: nowrap; + } + + .hero-home__highlight { + white-space: nowrap; + } +} + +.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); + width: min(100%, 36rem); + max-width: 100%; + margin-inline: 0; + text-align: left; + min-width: 0; +} + +.hero-home__title { + margin: 0; + display: flex; + flex-direction: column; + gap: 0.05em; + font-family: var(--openms-font-heading); + font-size: clamp(2.15rem, 1.25rem + 3.2vw, 3.5rem); + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)); + line-height: 1.06; + letter-spacing: 0.015em; + color: var(--openms-navy); + text-align: left; + text-wrap: balance; + overflow-wrap: break-word; + max-width: min(100%, 34rem); +} + +.hero-home__title-line { + display: block; +} + +@media (min-width: 901px) { + .hero-home__title { + font-size: clamp(2.35rem, 1.35rem + 2vw, 3.5rem); + } +} + +@media (min-width: 1200px) { + .hero-home__title { + font-size: clamp(2.75rem, 1.5rem + 1.7vw, 3.5rem); + } +} + +.hero-home__actions-block { + display: flex; + flex-direction: column; + gap: clamp(1.15rem, 2vh, 1.5rem); + margin-top: 0; + justify-items: start; + width: 100%; +} + +.hero-home__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin: 0; + padding: 0; + font-family: var(--openms-font-body); + font-size: 0.8125rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.62); + background: none; + border: 0; + border-radius: 0; +} + +.hero-home__eyebrow-dot { + width: 0.4rem; + height: 0.4rem; + border-radius: 50%; + background: var(--openms-blue); + flex-shrink: 0; +} + +.hero-home__title-accent { + display: inline; + background: linear-gradient( + 135deg, + var(--openms-blue-secondary) 0%, + var(--openms-blue) 45%, + var(--openms-purple) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-home__description { + margin: 0; + width: min(100%, 42ch); + max-width: 100%; + font-family: var(--openms-font-body); + font-size: clamp(0.88rem, 0.82rem + 0.22vw, 1rem); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.82); + text-align: left; + text-wrap: pretty; +} + +.hero-home__actions { + display: flex; + flex-wrap: wrap; + gap: calc(var(--openms-btn-glow-size, 6px) * 2 + 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.about-cta-btn--donate, +.hero-home__btn--secondary.about-cta-btn--donate:visited { + color: var(--openms-white) !important; + background: transparent !important; + background-color: transparent !important; + border: 2px solid rgba(var(--openms-white-rgb), 0.72); + border-radius: var(--openms-btn-pill-radius, 999px); + box-shadow: 0 0 0 0 var(--openms-btn-glow, rgba(var(--openms-blue-rgb), 0.22)); + 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.about-cta-btn--donate:hover, +.hero-home__btn--secondary.about-cta-btn--donate:focus-visible, +.hero-home__btn--secondary.about-cta-btn--donate:active { + background: rgba(var(--openms-white-rgb), 0.08) !important; + background-color: rgba(var(--openms-white-rgb), 0.08) !important; + border-color: rgba(var(--openms-white-rgb), 0.78); + 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) + rgba(var(--openms-white-rgb), 0.18); + outline: none; + text-decoration: none; +} + +.hero-home__btn--secondary.about-cta-btn--donate:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-navy), + 0 0 0 5px rgba(var(--openms-white-rgb), 0.55), + 0 0 0 calc(5px + var(--openms-btn-glow-size, 6px)) + rgba(var(--openms-white-rgb), 0.18); +} + +.hero-home__note { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 0.65rem 1.75rem; + 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-item { + display: inline-flex; + align-items: center; + gap: 0.45rem; + white-space: nowrap; +} + +.hero-home__note-dot { + width: 0.4rem; + height: 0.4rem; + border-radius: 50%; + flex-shrink: 0; + background: var(--openms-orange); +} + +.hero-home__note-item--2 .hero-home__note-dot { + background: var(--openms-pink); +} + +.hero-home__note-item--3 .hero-home__note-dot { + background: var(--openms-blue); +} + +.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__content { + width: min(100%, 34rem); + align-items: center; + text-align: center; + margin-inline: auto; + } + + .hero-home__title { + font-size: clamp(2rem, 1.3rem + 4vw, 3rem); + text-align: center; + } + + .hero-home__description { + width: min(100%, 40ch); + max-width: 100%; + font-size: clamp(0.86rem, 0.8rem + 0.3vw, 0.95rem); + text-align: center; + margin-inline: auto; + } + + .hero-home__actions { + justify-content: center; + } +} + +@media (max-width: 480px) { + .hero-home__title { + font-size: clamp(1.85rem, 7.5vw, 2.35rem); + line-height: 1.1; + letter-spacing: -0.03em; + } + + .hero-home__description { + width: min(100%, 36ch); + font-size: clamp(0.84rem, 3.2vw, 0.92rem); + line-height: 1.55; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-home__btn--secondary.about-cta-btn--donate:hover, + .hero-home__btn--secondary.about-cta-btn--donate:focus-visible, + .hero-home__btn--secondary.about-cta-btn--donate:active { + transform: none; + } +} + +/* Previous OpenMS bar-spectrum hero diagram */ +.hero-logo-diagram__svg { + aspect-ratio: 680 / 310; + 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: 14px; + font-weight: 600; + letter-spacing: 0.04em; + fill: rgba(var(--openms-white-rgb), 0.78); +} + +.hero-logo-diagram__meta-mark { + font-family: var(--openms-font-mono, ui-monospace, monospace); + font-size: 13px; + font-weight: 600; + letter-spacing: 0.14em; + fill: rgba(var(--openms-white-rgb), 0.88); +} + +.hero-logo-diagram__axes { + font-family: var(--openms-font-mono, ui-monospace, monospace); + font-size: 11px; + font-weight: 500; + letter-spacing: 0.06em; + fill: rgba(var(--openms-white-rgb), 0.48); +} + +.hero-logo-diagram__chrome { + display: flex; + align-items: center; + gap: 0.75rem; + margin: 0 0 clamp(0.55rem, 1.2vh, 0.85rem); + padding: 0 0.15rem; + position: relative; + z-index: 1; +} + +.hero-logo-diagram__chrome-dots { + display: inline-flex; + align-items: center; + gap: 0.35rem; +} + +.hero-logo-diagram__chrome-dots span { + width: 0.55rem; + height: 0.55rem; + border-radius: 50%; + background: rgba(var(--openms-white-rgb), 0.22); +} + +.hero-logo-diagram__chrome-dots span:nth-child(1) { + background: rgba(255, 95, 87, 0.85); +} + +.hero-logo-diagram__chrome-dots span:nth-child(2) { + background: rgba(255, 189, 46, 0.85); +} + +.hero-logo-diagram__chrome-dots span:nth-child(3) { + background: rgba(40, 200, 64, 0.85); +} + +.hero-logo-diagram__chrome-title { + font-family: var(--openms-font-mono, ui-monospace, monospace); + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.04em; + color: rgba(var(--openms-white-rgb), 0.55); +} + +.hero-home__proof { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(0.75rem, 2vw, 1.5rem); + width: 100%; + margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0; + padding: clamp(1rem, 2vh, 1.35rem) 0 0; + list-style: none; + border-top: 1px solid rgba(var(--openms-white-rgb), 0.1); +} + +.hero-home__proof-item { + display: flex; + flex-direction: column; + gap: 0.2rem; + min-width: 0; +} + +.hero-home__proof-value { + font-family: var(--openms-font-mono, ui-monospace, monospace); + font-size: clamp(1.15rem, 2vw, 1.45rem); + font-weight: 700; + letter-spacing: -0.02em; + color: var(--openms-chrome-text, var(--openms-white)); + line-height: 1.2; +} + +.hero-home__proof-label { + font-family: var(--openms-font-body); + font-size: clamp(0.78rem, 1.1vw, 0.875rem); + font-weight: 500; + color: rgba(var(--openms-white-rgb), 0.58); + line-height: 1.35; +} + +.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; + } +} + +/* Workflow mockup panel */ +.hero-mockup { + position: relative; + z-index: 1; + box-sizing: border-box; + width: 100%; + max-width: 100%; + min-width: 0; +} + +/* Frameless stage — labels stay fixed; chart motion is separate */ +.hero-mockup__stage { + display: flex; + flex-direction: column; + gap: 0.65rem; + box-sizing: border-box; + width: 100%; + max-width: 100%; + min-width: 0; + background: transparent; + border: none; + box-shadow: none; + overflow: hidden; +} + +.hero-mockup__labels { + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + gap: 0.4rem 0.5rem; + padding: 0; + min-width: 0; + transform: none; +} + +/* Shared pill chrome for title + brand */ +.hero-mockup__chrome-title, +.hero-mockup__chrome-brand { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.32rem; + min-width: 0; + margin: 0; + padding: 0.28rem 0.65rem; + border-radius: 999px; + border: 1px solid rgba(var(--openms-white-rgb), 0.28); + background: rgba(var(--openms-white-rgb), 0.14); + font-family: var(--openms-font-body); + font-size: 0.75rem !important; + font-weight: 700; + letter-spacing: 0.06em; + line-height: 1.25; + text-transform: uppercase; + color: var(--openms-white); + white-space: nowrap; +} + +.hero-mockup__chrome-title { + overflow: hidden; + text-overflow: ellipsis; +} + +.hero-mockup__chrome-title-arrow { + color: rgba(var(--openms-white-rgb), 0.85); + font-weight: 600; +} + +.hero-mockup__chrome-title-result { + color: var(--openms-white); +} + +.hero-mockup__chrome-brand { + flex-shrink: 0; +} + +.hero-mockup__body { + box-sizing: border-box; + width: 100%; + min-width: 0; + padding: 0; +} + +.hero-mockup__chart { + display: flex; + align-items: flex-end; + gap: clamp(0.2rem, 0.8vw, 0.4rem); + box-sizing: border-box; + width: 100%; + height: clamp(7.5rem, 18vw, 11.5rem); + max-height: 100%; + padding-top: 0.2rem; + border-bottom: 1px solid rgba(var(--openms-white-rgb), 0.09); + animation: hero-mockup-float 9s ease-in-out infinite; +} + +.hero-mockup__bar { + flex: 1 1 0; + height: var(--bar-h, 50%); + min-width: 0; + border-radius: 0.25rem 0.25rem 0 0; + background: var(--bar-color, #3157e9); + opacity: 0.95; + transform-origin: bottom center; + animation: hero-mockup-bar-pulse 4.2s cubic-bezier(0.37, 0, 0.63, 1) infinite; + animation-delay: calc(var(--bar-i, 0) * 0.18s); +} + +/* Match OpenMS logo spectrum: orange → pink → purple → blue */ +.hero-mockup__bar:nth-child(1) { --bar-i: 0; --bar-color: #ffb401; } +.hero-mockup__bar:nth-child(2) { --bar-i: 1; --bar-color: #ff9701; } +.hero-mockup__bar:nth-child(3) { --bar-i: 2; --bar-color: #ff8401; } +.hero-mockup__bar:nth-child(4) { --bar-i: 3; --bar-color: var(--openms-orange); } +.hero-mockup__bar:nth-child(5) { --bar-i: 4; --bar-color: #ff3f66; } +.hero-mockup__bar:nth-child(6) { --bar-i: 5; --bar-color: var(--openms-pink); } +.hero-mockup__bar:nth-child(7) { --bar-i: 6; --bar-color: #d803e5; } +.hero-mockup__bar:nth-child(8) { --bar-i: 7; --bar-color: var(--openms-purple); } +.hero-mockup__bar:nth-child(9) { --bar-i: 8; --bar-color: #7330f4; } +.hero-mockup__bar:nth-child(10) { --bar-i: 9; --bar-color: var(--openms-blue); } + +.hero-mockup__metrics { + display: flex; + gap: 0.85rem; + margin-top: 1.1rem; +} + +.hero-mockup__metric { + flex: 1 1 0; + min-width: 0; + padding: 0.75rem 0.85rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.09); + border-radius: 0.65rem; + background: rgba(var(--openms-white-rgb), 0.04); +} + +.hero-mockup__metric-label { + margin: 0 0 0.35rem; + font-family: var(--openms-font-body); + font-size: 0.6875rem; + font-weight: 500; + color: rgba(var(--openms-white-rgb), 0.5); +} + +.hero-mockup__metric-value { + margin: 0; + font-family: var(--openms-font-heading); + font-size: 1.1rem; + font-weight: 700; + line-height: 1.2; + color: var(--openms-white); +} + +.hero-mockup__metric-delta { + margin-left: 0.3rem; + font-family: var(--openms-font-body); + font-size: 0.75rem; + font-weight: 600; + color: #5dcea0; +} + +@keyframes hero-mockup-float { + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-10px); + } +} + +@keyframes hero-mockup-bar-pulse { + 0%, + 100% { + transform: scaleY(0.62); + opacity: 0.72; + } + + 40% { + transform: scaleY(1.08); + opacity: 1; + } + + 70% { + transform: scaleY(0.85); + opacity: 0.88; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-mockup__chart { + animation: none; + } + + .hero-mockup__bar { + animation: none; + } +} diff --git a/assets/css/hero-sponsors.css b/assets/css/hero-sponsors.css new file mode 100644 index 00000000..fefdf118 --- /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: var(--pro-max, 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..e087648c --- /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%, var(--pro-max, 75rem)); + max-width: var(--pro-max, 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: var(--pro-max, 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..0d783050 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: var(--pro-max, 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: var(--openms-card-title-color); + 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: var(--openms-card-title-color); +} + +.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..cc8b75e4 --- /dev/null +++ b/assets/css/home-metrics.css @@ -0,0 +1,181 @@ +/* Homepage metrics — flat proof strip under the hero */ + +.home-metrics { + position: relative; + z-index: 2; + background: var(--home-bg-soft, #f4f6fa); + padding-block: clamp(3.25rem, 7vw, 5rem); + border-top: none; +} + +.home-metrics__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0; + width: 100%; + align-items: stretch; +} + +.home-metrics__card { + position: relative; + display: grid; + gap: 0.55rem; + align-content: center; + justify-items: center; + padding: 0.75rem clamp(1.25rem, 3vw, 2.25rem); + border-radius: 0; + text-align: center; + background: transparent; + border: none; + box-shadow: none; +} + +.home-metrics__card + .home-metrics__card { + border-left: 1px solid rgba(var(--openms-navy-rgb), 0.16); +} + +.home-metrics__label { + order: 2; + margin: 0; + font-family: var(--openms-font-body); + font-size: clamp(0.7rem, 0.95vw, 0.78rem); + font-weight: 700; + line-height: 1.35; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--openms-navy) !important; + text-align: center; + text-wrap: balance; +} + +.home-metrics__value { + order: 1; + display: flex; + align-items: flex-end; + justify-content: center; + flex-wrap: nowrap; + gap: 0; + 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-blue) !important; + white-space: nowrap; +} + +.home-metrics__prefix, +.home-metrics__suffix { + flex-shrink: 0; + font-size: clamp(2rem, 4.5vw, 3rem); + font-weight: 800; + line-height: 0.9; + letter-spacing: -0.04em; + color: inherit; +} + +.home-metrics__value .hero-modern__stat-number { + font: inherit; + color: inherit !important; + font-size: clamp(2.75rem, 6vw, 4.25rem); + min-width: 0; + flex: 0 1 auto; + order: 0; + white-space: nowrap; +} + +.home-metrics__suffix { + margin-left: -0.02em; +} + +.home-metrics__prefix { + margin-right: -0.02em; +} + +.home-metrics__value[aria-label="Citations"] .home-metrics__suffix { + margin-left: 0.08em; +} + +.home-metrics__value[aria-label="Citations"] .hero-modern__stat-number { + font-size: clamp(2.25rem, 5vw, 3.75rem); +} + +.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 { + order: 3; + margin: 0.15rem auto 0; + max-width: 18rem; + font-family: var(--openms-font-body); + font-size: 0.875rem; + line-height: 1.5; + color: rgba(var(--openms-dark-rgb), 0.72) !important; + text-align: center; + text-wrap: pretty; +} + +.home-metrics__support { + margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; + text-align: center; + color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +@media (max-width: 640px) { + .home-metrics { + padding-block: clamp(2.5rem, 8vw, 3.5rem); + } + + .home-metrics__grid { + grid-template-columns: minmax(0, 1fr); + gap: 0; + } + + .home-metrics__card { + padding: 1.35rem 0; + } + + .home-metrics__card + .home-metrics__card { + border-left: none; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.16); + } + + .home-metrics__description { + max-width: none; + margin-inline: auto; + } +} + +@media (max-width: 768px) { + .home-metrics__value .hero-modern__stat-number, + .home-metrics__prefix, + .home-metrics__suffix { + font-size: clamp(2rem, 9vw, 2.75rem); + } + + .home-metrics__value[aria-label="Citations"] .hero-modern__stat-number { + font-size: clamp(1.85rem, 8vw, 2.5rem); + } + + .home-metrics__value .hero-modern__stat-number { + min-width: 0; + } + + .home-metrics__suffix { + margin-left: 0; + } + + .home-metrics__prefix { + margin-right: 0; + } + + .home-metrics__value[aria-label="Citations"] .home-metrics__suffix { + margin-left: 0.08em; + } +} diff --git a/assets/css/home-section-head.css b/assets/css/home-section-head.css new file mode 100644 index 00000000..0ce917d8 --- /dev/null +++ b/assets/css/home-section-head.css @@ -0,0 +1,428 @@ +/* Homepage — section heads match OpenMS-lib title style */ + +.home-page { + --home-section-head-max: min(100%, 46rem); + --home-section-head-gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); + --home-section-head-title-size: var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + --home-section-head-eyebrow-gap: var(--openms-stack-eyebrow, 12px); + --home-section-head-lead-gap: var(--openms-stack-lead, 20px); + /* One shared top-title (eyebrow) size across the homepage */ + --home-eyebrow-size: 0.75rem; + --home-eyebrow-weight: 650; + --home-eyebrow-tracking: 0.16em; + /* Top titles (eyebrows) = transparent blue; big section titles = dark gray */ + --openms-section-title-color: rgba(var(--openms-dark-rgb), 0.72); + --openms-text-eyebrow: rgba(var(--openms-blue-rgb), 0.72); + --home-eyebrow-color: rgba(var(--openms-blue-rgb), 0.72); + --home-title-color: var(--openms-dark); + --home-title-accent-color: var(--openms-dark); + --home-body-color: var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)); + --home-card-title-color: rgba(var(--openms-dark-rgb), 0.9); + --home-link-color: var(--openms-content-link, var(--openms-navy)); + --pro-card-icon-size: clamp(2.5rem, 4.2vw, 3.15rem); +} + +.home-page .home-page__block--projects .webapps-featured__header-main, +.home-page .community-events-home__header-main, +.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 .contact-home__header { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + max-width: var(--home-section-head-max); + margin-inline: auto; + text-align: center; +} + +.home-page .community-events-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--ecosystem .ecosystem-home__header { + display: block; + margin: 0 0 var(--home-section-head-gap); + text-align: left; +} + +.home-page .home-page__block--projects .webapps-featured__header--home { + margin: 0 0 var(--home-section-head-gap); + text-align: left; +} + +.home-page .hero-home__eyebrow, +.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, +.home-page .community-home__eyebrow, +.home-page .trusted-by__home-eyebrow, +.home-page .home-pathways__eyebrow, +.home-page .hero-sponsors__label, +.home-page .uni-partners__eyebrow, +.home-page .uni-partners__trust-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(--home-eyebrow-size) !important; + font-weight: var(--home-eyebrow-weight) !important; + letter-spacing: var(--home-eyebrow-tracking) !important; + line-height: 1.3 !important; + text-transform: uppercase; + color: var(--home-eyebrow-color); + background: transparent; + border: none; + border-radius: 0; + box-shadow: none; +} + +.home-page .contact-home__eyebrow { + justify-content: center; + margin-inline: auto; + text-align: center; +} + +.home-page .community-home__eyebrow { + color: var(--openms-text-soft-on-dark, rgba(var(--openms-white-rgb), 0.65)); +} + +.home-page .community-home__eyebrow-icon { + display: inline-flex; + line-height: 0; + opacity: 0.9; +} + +.home-page .community-home__eyebrow-icon svg { + display: block; + width: 0.875rem; + height: 0.875rem; +} + +.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 .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__title, +.home-page .community-news-events__column-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.2; + letter-spacing: normal; + color: var(--home-title-color); + text-align: left; + text-transform: uppercase; + text-wrap: balance; +} + +.home-page .contact-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(--home-title-color); + text-align: center; + text-transform: uppercase; + text-wrap: balance; +} + +.home-page .uni-partners__trust-title, +.home-page .uni-partners__trust-title-main { + 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(--home-title-color); + text-align: center; + 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(--home-title-color); + background: none; + -webkit-background-clip: unset; + background-clip: unset; + -webkit-text-fill-color: currentColor; +} + +/* Featured Apps + Ecosystem + Contact — big titles in dark gray */ +.home-page .home-page__block--projects .webapps-featured__title, +.home-page .contact-home__title, +.home-page .home-page__block--projects .webapps-featured__title-accent, +.home-page .contact-home__title-accent { + color: var(--home-title-color, var(--openms-dark)) !important; + -webkit-text-fill-color: var(--home-title-color, var(--openms-dark)); +} + +.home-page .community-news-events__column--news .community-news-events__column-title-accent, +.home-page .community-news-events__column--events .community-news-events__column-title-accent { + display: inline; + color: var(--home-title-color); + 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 .home-page__block--ecosystem .ecosystem-home__lead, +.home-page .contact-home__description, +.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead, +.home-page .webapps-project-card__text, +.home-page .ecosystem-home__card-text, +.home-page .contact-home__card-text, +.home-page .news-home__card-summary, +.home-page .community-events-home__card-summary, +.home-page .community-events-home__card-dates, +.home-page .community-events-home__empty-text, +.home-page .trusted-by__home-lead, +.home-page .trusted-by__minimal-lead, +.home-page .hero-sponsors__description, +.home-page .keyfeatures-modern__topic-text, +.home-page .home-pathways__step-text { + color: var(--home-body-color); +} + +.home-page .news-home__card-title, +.home-page .community-events-home__card-title, +.home-page .contact-home__card-title, +.home-page .ecosystem-home__card-title, +.home-page .keyfeatures-modern__topic-title, +.home-page .webapps-project-card__title, +.home-page .webapps-project-card__name, +.home-page .home-pathways__step-title, +.home-page .home-pathways__step-label { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size, clamp(1rem, 1.4vw, 1.1rem)); + font-weight: var(--openms-card-title-weight, 700); + line-height: 1.3; + letter-spacing: normal; + color: var(--openms-card-title-color, var(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.82))); +} + +.home-page .webapps-project-card__cta, +.home-page .ecosystem-home__card-link, +.home-page .contact-home__card-cta, +.home-page .community-events-home__card-cta, +.home-page .home-pathways__step-go, +.home-page .trusted-by__wall-cta, +.home-page .keyfeatures-modern__note a, +.home-page .contact-area__support-note a, +.home-page .contact-area__line { + color: var(--home-link-color); +} + +.home-page .webapps-project-card__surface:hover .webapps-project-card__cta, +.home-page .webapps-project-card__surface:focus-visible .webapps-project-card__cta, +.home-page .ecosystem-home__card:hover .ecosystem-home__card-link, +.home-page .ecosystem-home__card:focus-visible .ecosystem-home__card-link, +.home-page .contact-home__card:hover .contact-home__card-cta, +.home-page .contact-home__card:focus-visible .contact-home__card-cta, +.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-cta-link-hover, var(--openms-blue)); +} + +.home-page .news-home__card-link:hover .news-home__card-title, +.home-page .news-home__card-link:focus-visible .news-home__card-title, +.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 .home-page__block--projects .webapps-featured__header-main .webapps-featured__lead, +.home-page .community-events-home__lead, +.home-page .home-page__block--ecosystem .ecosystem-home__lead, +.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead { + margin: var(--home-section-head-lead-gap) 0 0; + max-width: min(100%, var(--pro-measure-wide, 58ch)); + width: 100%; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + text-align: left; + text-wrap: pretty; +} + +.home-page .contact-home__description { + margin: var(--home-section-head-lead-gap) auto 0; + max-width: min(100%, var(--pro-measure-wide, 58ch)); + width: 100%; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + text-align: center; + text-wrap: pretty; +} + +/* 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) !important; + -webkit-text-fill-color: var(--openms-white) !important; + text-align: left; + text-transform: uppercase; + text-wrap: balance; +} + +.home-page .community-home__title-accent { + display: inline; + color: var(--openms-white); + background: none; + -webkit-background-clip: unset; + background-clip: unset; + -webkit-text-fill-color: var(--openms-white); +} + +.home-page .community-home__lead { + margin: var(--home-section-head-lead-gap) 0 0; + max-width: min(100%, 58ch); + padding: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + text-align: left; + text-wrap: pretty; + color: rgba(var(--openms-white-rgb), 0.92); +} + +.home-page .community-home__lead p { + margin: 0; + padding: 0; +} + +.home-page .community-home__lead a { + color: var(--openms-white); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.home-page .community-home__lead a:hover, +.home-page .community-home__lead a:focus-visible { + color: rgba(var(--openms-white-rgb), 0.82); +} + +.home-page .community-home__note { + max-width: min(100%, 58ch); + margin-left: 0; + padding-left: 0; +} + +.home-page .contact-home__actions { + justify-content: center; +} + +@media (max-width: 768px) { + .home-page .home-page__block--ecosystem .ecosystem-home__header-main { + max-width: 100%; + } + + .home-page .home-page__block--ecosystem .ecosystem-home__title { + max-width: none; + width: 100%; + text-wrap: pretty; + } + + .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--overview .keyfeatures-modern--home .keyfeatures-modern__header-main { + max-width: 100%; + } + + .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 { + max-width: 100%; + } + + .home-page .community-home__content, + .home-page .community-home__lead, + .home-page .community-home__note, + .home-page .community-home__title { + max-width: 100%; + } + + .home-page .community-home__title { + text-wrap: pretty; + } +} + +/* Homepage title stack — lock the site-wide 12 / 20 / 16 gaps */ +.home-page .hero-home__eyebrow, +.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, +.home-page .community-home__eyebrow, +.home-page .trusted-by__home-eyebrow, +.home-page .home-pathways__eyebrow, +.home-page .hero-sponsors__label, +.home-page .uni-partners__eyebrow, +.home-page .uni-partners__trust-eyebrow { + margin-bottom: var(--openms-stack-eyebrow, 12px) !important; +} + +.home-page .home-page__block--projects .webapps-featured__title { + line-height: 1.2 !important; + letter-spacing: -0.02em !important; +} + +.home-page .home-page__block--projects .webapps-featured__header-main { + gap: 0 !important; +} + +.home-page .hero-home__description, +.home-page .home-page__block--projects .webapps-featured__header-main .webapps-featured__lead, +.home-page .community-events-home__lead, +.home-page .home-page__block--ecosystem .ecosystem-home__lead, +.home-page .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead, +.home-page .contact-home__description, +.home-page .community-home__lead, +.home-page .home-pathways__lead, +.home-page .uni-partners__lead, +.home-page .trusted-by__minimal-lead { + margin-top: var(--openms-stack-lead, 20px) !important; +} + +.home-page .community-home__lead + .community-home__note, +.home-page .community-home__lead p + p, +.home-page .hero-home__description + .hero-home__description, +.home-page [class$="__lead"] p + p { + margin-top: var(--openms-stack-paragraph, 16px) !important; +} diff --git a/assets/css/home.css b/assets/css/home.css new file mode 100644 index 00000000..83b9d500 --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,3058 @@ +/* Homepage — each section has its own layout pattern */ + +.home-page { + --home-max: var(--pro-max, 75rem); + --home-pad-x: var(--olib-pad-x); + --home-pad-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --home-section-space-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --home-projects-pad-y: var(--pro-section-y, clamp(4rem, 9vw, 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: #f8f8f9; + --home-bg-soft: #f3f4f6; + --home-bg-mist: #f6f7f8; + 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); + /* Breathing room between copy and graphic */ + --hero-col-gap: clamp(1.75rem, 3.5vw, 3.25rem); + /* Diagram stays a supporting visual, not a second full-width panel */ + --hero-diagram-max: clamp(20rem, 34vw, 34rem); + --hero-diagram-inset-right: clamp(1.25rem, 3.5vw, 2.75rem); + /* Shared measure for the lead paragraph and everything under it */ + --hero-lead-width: min(100%, 48ch); + /* Hero lead a step above the site body-lg token */ + --openms-body-size-lg: clamp(1.05rem, 0.98rem + 0.28vw, 1.25rem); + margin: 0; + padding: 0; + position: relative; + z-index: 3; + /* Flat navy — same as navbar, no gradient shift */ + background: var(--openms-chrome-bg, var(--openms-navy)); + overflow: hidden; +} + +.home-page__hero .hero-home { + position: relative; + z-index: 1; + isolation: isolate; + font-family: var(--openms-font-body); + background: transparent; + min-height: clamp(34rem, 82vh, 46rem); + overflow: hidden; +} + +.home-page__hero::before, +.home-page__hero::after, +.home-page__hero .hero-home::before, +.home-page__hero .hero-home::after { + content: none; + display: none; +} + +.home-page__hero .hero-home__main { + position: relative; + z-index: 1; + justify-content: center; + overflow: visible; + /* Sit the hero copy lower in the navy band */ + padding: + clamp(4.5rem, 9vh, 7rem) var(--openms-page-inline) + clamp(2.25rem, 4.5vw, 3.5rem); +} + +/* Cap the hero rail so ultra-wide viewports keep a readable composition */ +.home-page__hero .hero-home__inner { + max-width: var(--pro-max, 75rem); + width: 100%; + margin-inline: auto; +} + +.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 { + /* Text always owns 60%, graphic 40% */ + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); + grid-template-rows: auto; + align-items: end; + column-gap: var(--hero-col-gap); + } + + .home-page__hero .hero-home__copy { + grid-column: 1; + grid-row: 1; + align-self: stretch; + padding-top: 0; + min-width: 0; + width: 100%; + } + + .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: stretch; + align-self: end; + box-sizing: border-box; + width: 100%; + max-width: 100%; + min-width: 0; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: stretch; + overflow: hidden; + } + + .home-page__hero .hero-mockup, + .home-page__hero .hero-mockup__stage { + width: 100%; + max-width: 100%; + min-width: 0; + } + + /* Matching pills: Open science → clear results | OPENMS — stay fixed */ + .home-page__hero .hero-mockup__labels { + justify-content: space-between; + flex-wrap: nowrap; + gap: 0.4rem 0.5rem; + transform: none; + } + + .home-page__hero .hero-mockup__chrome-title, + .home-page__hero .hero-mockup__chrome-brand { + font-size: 0.75rem !important; + padding: 0.28rem 0.65rem; + border-radius: 999px; + border: 1px solid rgba(var(--openms-white-rgb), 0.28); + background: rgba(var(--openms-white-rgb), 0.14); + font-family: var(--openms-font-body); + font-weight: 700; + letter-spacing: 0.06em; + color: var(--openms-white); + } + + .home-page__hero .hero-mockup__chrome-title { + flex: 0 1 auto; + min-width: 0; + } + + .home-page__hero .hero-mockup__chrome-brand { + margin-left: auto; + flex-shrink: 0; + } + + .home-page__hero .hero-mockup__chart { + width: 100%; + height: clamp(8rem, 15vw, 11.5rem); + } + + .home-page__hero .hero-home__highlights { + justify-content: flex-start; + } + + .home-page__hero .hero-home__actions-block { + margin-top: clamp(1.35rem, 2.8vh, 2rem); + } +} + +@media (min-width: 901px) and (max-width: 1199px) { + .home-page__hero { + /* Same 60/40 split as lg — slightly tighter gap on mid widths */ + --hero-col-gap: clamp(1.25rem, 2.5vw, 2rem); + --hero-diagram-max: 100%; + } + + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); + column-gap: var(--hero-col-gap); + } + + .home-page__hero .hero-home__main { + padding-inline: clamp(1rem, 2.5vw, 1.75rem); + } + + .home-page__hero .hero-home__title { + line-height: 1.12; + } + + .home-page__hero .hero-home__description { + width: 100%; + max-width: 100%; + line-height: 1.55; + } + + .home-page__hero .hero-home__visual { + justify-self: stretch; + width: 100%; + max-width: 100%; + min-width: 0; + overflow: hidden; + } + + .home-page__hero .hero-mockup__chart { + height: clamp(6.75rem, 16vw, 9.5rem); + } + + .home-page__hero .hero-home__visual-shell { + padding: clamp(0.55rem, 1.2vw, 0.85rem); + } + + .home-page__hero .hero-home__highlights { + gap: 0.4rem 0.45rem; + } + + .home-page__hero .hero-home__highlight { + padding: 0.4rem 0.75rem; + } +} + +/* Narrowest two-column band — keep 60/40, modest gap */ +@media (min-width: 901px) and (max-width: 1024px) { + .home-page__hero { + --hero-col-gap: 1rem; + } +} + +@media (min-width: 1200px) { + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); + } + + .home-page__hero { + --hero-diagram-max: 100%; + } +} + +@media (min-width: 1440px) { + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); + } + + .home-page__hero { + --hero-diagram-max: 100%; + } +} + +.home-page__hero .hero-home__content { + gap: clamp(0.45rem, 1vh, 0.75rem); + width: 100%; + max-width: none; + min-width: 0; +} + +.home-page__hero .hero-home__eyebrow { + margin-bottom: var(--openms-stack-eyebrow, 12px); + padding: 0.4rem 0.9rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.36); + border-radius: 999px; + background: rgba(var(--openms-white-rgb), 0.06); + color: rgba(var(--openms-white-rgb), 0.92); + font-size: var(--home-eyebrow-size, 0.75rem) !important; + font-weight: var(--home-eyebrow-weight, 650) !important; + letter-spacing: var(--home-eyebrow-tracking, 0.14em) !important; + backdrop-filter: blur(6px); +} + +.home-page__hero .hero-home__eyebrow-dot { + background: var(--openms-yellow); + box-shadow: 0 0 0 3px rgba(var(--openms-yellow-rgb), 0.28); +} + +.home-page__hero .hero-home__title, +.home-page__hero .hero-home__title-accent { + color: var(--openms-dark); + font-family: var(--openms-font-heading); + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)); + /* Size follows the copy column (cqi), with a vw fallback when unsupported */ + font-size: var(--hero-home-title-size, + var(--openms-page-hero-title-size, calc(var(--openms-heading-xl-size) * 1.25))); + width: 100%; + max-width: 100%; + min-width: 0; + overflow-wrap: break-word; + word-wrap: break-word; + text-wrap: balance; +} + +.home-page__hero .hero-home__title { + letter-spacing: 0.015em; +} + +.home-page__hero .hero-home__title-line { + display: block; + max-width: 100%; + min-width: 0; + white-space: normal; + overflow-wrap: break-word; +} + +.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 .hero-home__highlights { + justify-content: flex-start; + position: relative; + z-index: 6; + width: 100%; + max-width: 100%; + margin: clamp(1.1rem, 2.2vh, 1.6rem) 0 0; + padding: 0; + /* Keep highlights aligned with the graphic, not the bled right edge padding */ + box-sizing: border-box; +} + +.home-page__hero .hero-home__highlight { + color: rgba(var(--openms-white-rgb), 0.72); + border-color: rgba(var(--openms-white-rgb), 0.12); + background: rgba(var(--openms-white-rgb), 0.04); + white-space: nowrap; + font-size: var(--openms-text-min); + padding: 0.5rem 1rem; +} + +.home-page__hero .hero-home__eyebrow, +.home-page__hero .hero-home__description, +.home-page__hero .hero-home__note, +.home-page__hero .hero-home__highlight, +.home-page__hero .hero-home__btn, +.home-page__hero .hero-mockup__chrome-title, +.home-page__hero .hero-mockup__chrome-brand { + font-family: var(--openms-font-body); +} + +.home-page__hero .hero-home__description { + color: rgba(var(--openms-white-rgb), 0.7); + width: 100%; + max-width: 100%; + margin: var(--openms-stack-lead, 20px) 0 0; + text-align: left; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + text-wrap: pretty; + overflow-wrap: break-word; +} + +@media (min-width: 901px) { + .home-page__hero { + --hero-lead-width: min(100%, 52ch); + } + + .home-page__hero .hero-home__title { + line-height: 1.06; + width: 100%; + max-width: 100%; + } +} + +@media (min-width: 1200px) { + .home-page__hero .hero-home__content { + width: 100%; + max-width: none; + } +} + +@media (min-width: 1440px) { + .home-page__hero .hero-home__content { + width: 100%; + max-width: none; + } +} + +.home-page__hero .hero-home__actions-block { + width: 100%; + max-width: 100%; + align-items: flex-start; + /* Extra air before CTAs — hierarchy: copy → primary action */ + margin-top: clamp(1.35rem, 2.8vh, 2rem); +} + +.home-page__hero .hero-home__actions-block .hero-home__actions { + width: var(--hero-lead-width); + max-width: 100%; +} + +.home-page__hero .hero-home__btn--primary { + min-width: 0; +} + +.home-page__hero .hero-home__copy { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: clamp(0.15rem, 0.4vh, 0.35rem); + width: 100%; + max-width: none; + margin-inline: 0; + min-width: 0; + /* Title/description scale to this column, not the full viewport */ + container-type: inline-size; + container-name: hero-copy; + --openms-page-hero-title-size: clamp(1.65rem, 1.05rem + 2.6vw, 3.25rem); +} + +@supports (font-size: 1cqi) { + .home-page__hero .hero-home__copy { + --openms-page-hero-title-size: clamp(1.65rem, 9.5cqi, 3.25rem); + } +} + +.home-page__hero .hero-home__footer { + /* Full copy column so the trust line can stay on one row */ + width: 100%; + max-width: 100%; + position: relative; + z-index: 6; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0; +} + +.home-page__hero .hero-home__visual .hero-home__highlights { + width: 100%; + max-width: 100%; +} + +.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__inner { + position: relative; + z-index: 1; + justify-items: stretch; + width: 100%; +} + +.home-page__hero .hero-home__actions { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + justify-content: flex-start; + gap: var(--openms-btn-gap, 0.75rem); +} + +.home-page__hero .hero-home__actions .hero-home__btn--primary, +.home-page__hero .hero-home__actions .hero-home__btn--secondary { + width: auto; + min-width: 0; + justify-content: center; + text-align: center; + white-space: nowrap; +} + +.home-page__hero .hero-home__btn--primary { + min-width: 0; +} + +.home-page__hero .hero-home__note { + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + gap: 0.5rem 1rem; + width: max-content; + max-width: 100%; + margin: 0; + color: var(--openms-white); + text-align: left; + white-space: nowrap; +} + +.home-page__hero .hero-home__visual .hero-home__note--under-graphic { + flex-wrap: wrap; + width: 100%; + max-width: 100%; + margin: clamp(1.1rem, 2.2vh, 1.6rem) 0 0; + white-space: normal; +} + +.home-page__hero .hero-home__note-item { + flex: 0 0 auto; + white-space: nowrap; +} + +.home-page__hero .hero-home__title-accent { + background: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--openms-orange); + -webkit-text-fill-color: currentColor; +} + +.home-page__hero .hero-home__actions-block { + gap: clamp(1.15rem, 2vh, 1.5rem); +} + +.home-page__hero .hero-home__actions-block .hero-home__note { + margin-top: 0; +} + +.home-page__hero .hero-home__note-sep { + color: rgba(var(--openms-white-rgb), 0.22); +} + +/* Explore the library — chrome outline comes from openms-buttons.css (same as Partner) */ + +@media (max-width: 900px) { + .home-page__hero .hero-home { + min-height: clamp(30rem, 76vh, 40rem); + } + + .home-page__hero .hero-home__hero-grid { + gap: clamp(1.25rem, 3vh, 1.75rem); + } + + /* Stacked: graphic under the copy; lead copy matches the graphic width */ + .home-page__hero { + --hero-diagram-max: min(100%, 26rem); + /* Paragraph, CTAs, and trust line share the graphic's width */ + --hero-lead-width: var(--hero-diagram-max); + } + + .home-page__hero .hero-home__visual { + justify-content: flex-start; + align-items: stretch; + width: 100%; + max-width: var(--hero-diagram-max); + margin-inline: 0; + margin-top: clamp(0.35rem, 1vh, 0.75rem); + } + + .home-page__hero .hero-home__visual-shell { + padding: clamp(0.55rem, 2.5vw, 0.85rem); + } + + /* Hero copy stays left-aligned at every width — do not re-centre here */ + .home-page__hero .hero-home__footer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0; + margin-top: 0; + } + + .home-page__hero .hero-mockup, + .home-page__hero .hero-mockup__stage { + width: 100%; + max-width: 100%; + min-width: 0; + } + + .home-page__hero .hero-mockup__chrome-title, + .home-page__hero .hero-mockup__chrome-brand { + font-size: 0.6875rem !important; + padding: 0.24rem 0.55rem; + } + + .home-page__hero .hero-mockup__chart { + width: 100%; + height: clamp(6.5rem, 42vw, 9rem); + } + + .home-page__hero .hero-home__visual .hero-home__highlights { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + gap: 0.5rem 0.55rem; + width: 100%; + margin-top: clamp(1rem, 2vh, 1.35rem); + padding: 0; + } + + .home-page__hero .hero-home__highlight { + white-space: nowrap; + flex: 0 0 auto; + text-align: center; + padding: 0.45rem 0.8rem; + } + + .home-page__hero .hero-home__note { + flex-wrap: nowrap; + gap: 0.4rem 0.75rem; + font-size: clamp(0.7rem, 2.6vw, var(--openms-text-min)); + } + + .home-page__hero .hero-home__main { + padding: clamp(3.75rem, 8vh, 5.25rem) var(--home-pad-x) + clamp(2.25rem, 5vh, 3rem); + } + + .home-page__hero .hero-home__inner { + gap: clamp(1.25rem, 3vh, 1.75rem); + } + + /* Stacked: description + CTAs match the graphic width; title keeps its lines */ + .home-page__hero .hero-home__description, + .home-page__hero .hero-home__footer, + .home-page__hero .hero-home__actions-block, + .home-page__hero .hero-home__actions-block .hero-home__actions, + .home-page__hero .hero-home__note { + width: var(--hero-lead-width); + max-width: 100%; + } + + .home-page__hero .hero-home__content { + width: 100%; + max-width: 100%; + } + + .home-page__hero .hero-home__title { + width: 100%; + max-width: 100%; + line-height: 1.08; + } + + .home-page__hero .hero-home__description { + line-height: 1.6; + } + + .home-page__hero .hero-home__copy { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .home-page__hero .hero-home__actions { + justify-content: flex-start; + } + + .home-page__hero .hero-home__actions-block { + align-items: flex-start; + } +} + +@media (max-width: 720px) { + /* Hide mockup chrome labels + trust chips on phones */ + .home-page__hero .hero-mockup__labels, + .home-page__hero .hero-mockup__chrome-title, + .home-page__hero .hero-mockup__chrome-brand, + .home-page__hero .hero-home__note, + .home-page__hero .hero-home__note--under-graphic, + .home-page__hero .hero-home__highlights { + display: none !important; + } +} + +@media (max-width: 640px) { + .home-page__hero .hero-home__main { + padding-top: clamp(3.5rem, 8vh, 5rem); + padding-left: clamp(0.75rem, 3vw, 1.1rem); + padding-right: clamp(0.75rem, 3vw, 1.1rem); + } + + .home-page__hero .hero-home__actions-block { + width: 100%; + align-items: flex-start; + margin-top: 0.85rem; + } + + .home-page__hero .hero-home__actions { + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: stretch; + justify-content: flex-start; + gap: 0.55rem; + width: max-content; + max-width: 100%; + margin-inline: 0; + } + + .home-page__hero .hero-home__actions .hero-home__btn, + .home-page__hero .hero-home__actions .hero-home__btn--primary, + .home-page__hero .hero-home__actions .hero-home__btn--secondary { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 100%; + min-width: 0; + max-width: none; + min-height: var(--openms-btn-min-height, 2.75rem); + height: auto; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + font-weight: 600; + text-align: center; + white-space: nowrap; + line-height: 1.3; + } + + .home-page__hero .hero-home__btn--primary { + min-width: 0; + } +} + +@media (max-width: 480px) { + .home-page__hero .hero-home__title, + .home-page__hero .hero-home__description { + width: 100%; + } + + .home-page__hero .hero-home__actions { + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; + justify-content: flex-start; + align-items: stretch; + gap: 0.45rem; + width: max-content; + max-width: 100%; + margin-inline: 0; + } + + .home-page__hero .hero-home__actions .hero-home__btn, + .home-page__hero .hero-home__actions .hero-home__btn--primary, + .home-page__hero .hero-home__actions .hero-home__btn--secondary { + width: 100%; + min-width: 0; + max-width: none; + min-height: var(--openms-btn-min-height, 2.75rem); + height: auto; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + font-weight: 600; + justify-content: center; + text-align: center; + white-space: nowrap; + line-height: 1.3; + } +} + +@media (min-width: 481px) and (max-width: 900px) { + .home-page__hero { + /* Tablet stack: a bit under full content width */ + --hero-diagram-max: min(100%, 34rem); + } + + .home-page__hero .hero-home__main { + padding-top: clamp(3.75rem, 7vh, 5.5rem); + padding-bottom: clamp(1.5rem, 3.5vh, 2.25rem); + } + + .home-page__hero .hero-home { + min-height: clamp(28rem, 68vh, 36rem); + } + + .home-page__hero .hero-home__content { + width: 100%; + max-width: 100%; + } + + .home-page__hero .hero-home__title { + width: 100%; + max-width: 100%; + } + + .home-page__hero .hero-home__description { + width: 100%; + max-width: 100%; + text-wrap: pretty; + } + + .home-page__hero .hero-home__visual { + margin-top: clamp(0.35rem, 1.2vh, 0.75rem); + } +} + +/* Homepage section bands — slight white / soft contrast between components */ +.home-page__block--metrics, +.home-page .home-metrics { + background: var(--home-bg-soft); +} + +.home-page__block--projects { + background: var(--home-bg-base); +} + +.home-page__block--partners { + background: var(--home-bg-base); +} + +.home-page__block--overview { + background: var(--home-bg-base); +} + +.home-page__block--ecosystem { + background: var(--home-bg-soft); +} + +.home-page__block--events { + background: var(--home-bg-soft); +} + +.home-page__cta { + background: + radial-gradient( + ellipse 80% 70% at 50% 20%, + rgba(var(--openms-blue-rgb), 0.08), + transparent 68% + ), + var(--home-bg-soft); +} + +/* Let section bands show through nested shells */ +.home-page__block--projects .webapps-featured--home, +.home-page__block--projects .webapps-featured, +.home-page__block--partners .uni-partners--home, +.home-page__block--partners .uni-partners, +.home-page__block--overview .keyfeatures-modern--home, +.home-page__block--overview .keyfeatures-modern, +.home-page__block--ecosystem .ecosystem-home, +.home-page__block--events .community-events-home, +.home-page__cta .contact-home, +.home-page__cta .contact-area { + background: transparent !important; +} + +/* ── 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 CTA */ +.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__actions { + opacity: 0; + transform: translate3d(0, 2rem, 0); +} + +.home-page--motion .home-page__cta .contact-home__header, +.home-page--motion .home-page__cta .contact-home__actions { + 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__actions { + 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 { + opacity: 1; + visibility: visible; + transform: none; +} + +.home-page__hero .hero-home__actions .hero-home__btn { + opacity: 1; + visibility: visible; +} + +.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 { + transition: none; +} + +.home-page--motion .home-page__hero .hero-home__actions .hero-home__btn, +.home-page--motion .home-page__hero .hero-home__btn--primary, +.home-page--motion .home-page__hero .hero-home__btn--secondary { + /* Keep Framer CTA hover (scale + glow) working */ + 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)); +} + +/* 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: 100%; + max-width: none; + margin: 0; + padding-inline: var(--openms-page-inline); +} + +.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-block: clamp(3.25rem, 7vw, 5rem); +} + +.home-page__block--metrics + .home-page__block--projects .webapps-featured--home { + padding-top: var(--home-projects-pad-y); +} + +.home-page__block--projects:has(+ .home-page__block--partners) .webapps-featured--home { + padding-bottom: var(--home-projects-pad-y); +} + +.home-page__block--projects + .home-page__block--partners .uni-partners--home { + padding-top: 0; +} + +.home-page__block--partners:has(+ .home-page__block--overview) .uni-partners--home { + padding-bottom: 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%, 92rem); + max-width: 92rem; + 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 var(--home-section-head-eyebrow-gap, 0.25rem); + 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(--home-eyebrow-color, rgba(var(--openms-blue-rgb), 0.72)); + background: transparent; + border: none; + border-radius: 0; +} + +.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: min(100%, 52rem); + 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(--home-title-color, rgba(var(--openms-dark-rgb), 0.92)); + 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: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--home-title-color, var(--openms-navy)); + -webkit-text-fill-color: currentColor; +} + +.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: var(--home-body-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: 100%; + max-width: 100%; + margin: clamp(0.75rem, 2vh, 1.25rem) auto 0; + padding: 0; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + 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(2rem, 3.5vw, 3.5rem); + } + + .home-page__trust .trusted-by__home-header--center { + max-width: 56rem; + } + +} + +@media (max-width: 640px) { + .home-page__trust .trusted-by__home-grid--row { + justify-content: center; + 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: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); + 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(--home-link-color, var(--openms-navy)); + 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 var(--openms-stack-eyebrow, 12px); + padding: 0; + letter-spacing: 0.14em; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead { + text-align: left; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.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(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.82)); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-text { + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.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(--home-link-color, var(--openms-navy)); +} + +/* ═══════════════════════════════════════════ + 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 var(--openms-stack-eyebrow, 12px); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--home-eyebrow-color, rgba(var(--openms-blue-rgb), 0.72)); +} + +.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(--home-title-color, rgba(var(--openms-dark-rgb), 0.92)); +} + +.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 { + margin: 0; +} + +.home-pathways__step-body { + display: flex; + flex-direction: column; + gap: 0.25rem; + min-width: 0; +} + +.home-pathways__step-text { + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.home-pathways__step-go { + font-size: 1.25rem; + font-weight: 700; + color: var(--home-link-color, var(--openms-navy)); +} + +/* ═══════════════════════════════════════════ + 5. PROJECTS — minimalist catalog grid + ═══════════════════════════════════════════ */ +.home-page__block--projects .webapps-featured--home { + max-width: none; + width: 100%; + margin-inline: 0; + padding: var(--home-projects-pad-y) var(--openms-page-inline); + background: transparent; + color: var(--openms-navy); + border: none; + overflow: visible; + --projects-logo-height: clamp(4.75rem, 7.5vw, 6.5rem); + --projects-max: var(--pro-max, var(--home-max)); + --projects-grid-gap: clamp(2rem, 3.6vw, 3rem); +} + + +.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; + padding: 0; + background: transparent; + border-radius: 0; +} + +.home-page__block--projects .webapps-featured__header--home { + display: grid; + grid-template-columns: minmax(0, 1fr); + align-items: end; + gap: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem); + margin: 0 0 var(--home-section-head-gap, var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem))); + text-align: left; +} + +@media (min-width: 900px) { + .home-page__block--projects .webapps-featured__header--home { + grid-template-columns: minmax(0, 1fr) auto; + } +} + +.home-page__block--projects .webapps-featured__header-main { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: none; + margin-inline: 0; + min-width: 0; +} + +.home-page__block--projects .webapps-featured__header-action { + display: flex; + align-items: center; + justify-content: flex-start; +} + +@media (min-width: 900px) { + .home-page__block--projects .webapps-featured__header-action { + justify-content: flex-end; + padding-bottom: 0.15rem; + } +} + +.home-page__block--projects .webapps-featured__show-all { + display: inline-flex !important; + align-items: center; + gap: 0.35rem; + box-sizing: border-box; + width: auto; + max-width: 100%; + min-width: 0 !important; + min-height: 0 !important; + height: auto !important; + margin: 0; + padding: 0 !important; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size) !important; + font-weight: 700 !important; + line-height: 1.3 !important; + color: var(--home-link-color, var(--openms-navy)); + background: none !important; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; + text-decoration: none; + text-align: left; + white-space: nowrap; + transition: color 0.2s ease, gap 0.2s ease; +} + +.home-page__block--projects .webapps-featured__show-all:visited { + color: var(--home-link-color, var(--openms-navy)); +} + +.home-page__block--projects .webapps-featured__show-all:hover, +.home-page__block--projects .webapps-featured__show-all:focus-visible, +.home-page__block--projects .webapps-featured__show-all:active { + color: var(--openms-content-link-hover, var(--openms-blue)); + background: none; + border: none; + box-shadow: none; + transform: none; + outline: none; + gap: 0.5rem; +} + +.home-page__block--projects .webapps-featured__show-all-icon { + display: inline-block; + font-size: 1.05em; + line-height: 1; + transition: transform 0.2s ease; +} + +.home-page__block--projects .webapps-featured__show-all:hover .webapps-featured__show-all-icon, +.home-page__block--projects .webapps-featured__show-all:focus-visible .webapps-featured__show-all-icon { + transform: translateX(2px); +} + +.home-page__block--projects .webapps-featured__explore-icon { + font-size: 1.15em; + line-height: 1; + flex: 0 0 auto; +} + +/* Eyebrow / title / lead type: home-section-head.css */ + +.home-page__block--projects .webapps-featured__title-accent { + color: var(--home-title-color, var(--openms-navy)); + background: none; + -webkit-background-clip: unset; + background-clip: unset; + -webkit-text-fill-color: currentColor; +} + +.home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + --projects-col-gap: clamp(1.75rem, 3.2vw, 2.75rem); + --projects-rule: rgba(var(--openms-navy-rgb), 0.1); + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: stretch; + gap: var(--projects-grid-gap) var(--projects-col-gap); +} + +@media (min-width: 1100px) { + .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .home-page__block--projects .webapps-featured__item:nth-child(2n)::after { + display: block; + } + + .home-page__block--projects .webapps-featured__item:nth-child(3n)::after { + display: none; + } +} + +/* Drop older 2/3-col centering rules — gallery uses a dense 2×4 grid */ +.home-page__block--projects + .webapps-featured + .webapps-featured__grid--catalog + > .webapps-featured__item:last-child:nth-child(odd), +.home-page__block--projects + .webapps-featured + .webapps-featured__grid--catalog + > .webapps-featured__item:last-child:nth-child(3n + 1) { + grid-column: auto; + justify-self: stretch; + width: auto; +} + +.home-page__block--projects .webapps-featured__item { + position: relative; + display: flex; + min-width: 0; + height: auto; + align-self: stretch; + overflow: visible; +} + +.home-page__block--projects .webapps-featured__item::before, +.home-page__block--projects .webapps-featured__item::after { + content: ""; + position: absolute; + background: var(--projects-rule, rgba(var(--openms-navy-rgb), 0.1)); + pointer-events: none; + z-index: 1; +} + +.home-page__block--projects .webapps-featured__item::before { + left: 0.85rem; + right: 0.85rem; + bottom: calc(var(--projects-grid-gap, 2rem) / -2); + height: 1px; +} + +.home-page__block--projects .webapps-featured__item::after { + top: 0.85rem; + bottom: 0.85rem; + right: calc(var(--projects-col-gap, 2rem) / -2); + width: 1px; +} + +.home-page__block--projects .webapps-featured__item:nth-child(2n)::after, +.home-page__block--projects .webapps-featured__item:last-child::before { + display: none; +} + +@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__grid--catalog { + --projects-grid-gap: clamp(2.15rem, 2.4vw, 2.75rem); + --projects-col-gap: clamp(2rem, 2.6vw, 3rem); + gap: var(--projects-grid-gap) var(--projects-col-gap); + } +} + +.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 — Dribbble “what we offer”: icon well + stacked copy */ +.home-page__block--projects .webapps-project-card--catalog { + --webapps-card-radius: 1rem; + --webapps-card-pad: 0; + --projects-card-inset-y: 1.05rem; + --projects-card-inset-x: 1.1rem; + --projects-logo-height: clamp(4.75rem, 7.5vw, 6.5rem); + --projects-logo-slot: clamp(6.25rem, 9.5vw, 8.5rem); + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + min-height: 0; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface { + position: relative; + display: flex !important; + flex-direction: column; + align-items: stretch; + flex: 1 1 auto; + gap: 1.05rem; + box-sizing: border-box; + padding: var(--projects-card-inset-y) var(--projects-card-inset-x); + margin: 0; + width: 100%; + height: 100%; + min-height: 100%; + aspect-ratio: auto; + border: none; + background: transparent; + box-shadow: none; + overflow: hidden; + border-radius: var(--webapps-card-radius); + transition: background 0.2s ease, box-shadow 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, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:active { + height: 100%; + min-height: 100%; + max-height: none; + border-color: transparent; + transform: none; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:active, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible { + background: rgba(var(--openms-navy-rgb), 0.055); +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible { + outline: none; + box-shadow: 0 0 0 3px var(--openms-white), 0 0 0 5px var(--openms-navy); +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo-wrap { + display: flex; + align-items: flex-end; + justify-content: flex-start; + flex: 0 0 auto; + width: 100%; + height: var(--projects-logo-slot); + min-width: 0; + min-height: var(--projects-logo-slot); + max-height: var(--projects-logo-slot); + margin: 0; + padding: 0; + border: none; + background: transparent; + border-radius: 0; + overflow: visible; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__logo-wrap, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__logo-wrap { + background: transparent; + border-color: transparent; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo { + display: block; + width: auto; + height: var(--projects-logo-height); + max-width: min(16rem, 100%); + max-height: var(--projects-logo-height); + margin: 0; + aspect-ratio: auto; + object-fit: contain; + object-position: left center; + transform-origin: left top; + transition: transform 0.22s ease; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="naseweis"] { + height: clamp(3rem, 4.8vw, 4rem); + max-width: min(10rem, 100%); + max-height: clamp(3rem, 4.8vw, 4rem); +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="openDDA"] { + height: clamp(6.25rem, 9.5vw, 8.5rem); + max-width: min(20rem, 100%); + max-height: clamp(6.25rem, 9.5vw, 8.5rem); +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="mhcquant"] { + height: clamp(6.25rem, 9.5vw, 8.5rem); + max-width: min(20rem, 100%); + max-height: clamp(6.25rem, 9.5vw, 8.5rem); +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__logo, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__logo { + transform: none; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo-text { + width: auto; + height: auto; + max-width: 100%; + max-height: none; + margin: 0; + padding: 0; + border-radius: 0; + background: transparent; + color: var(--openms-navy); + display: block; + text-align: center; + font-family: var(--openms-font-heading); + font-size: 0.7rem; + font-weight: 700; + line-height: 1.15; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__body { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + gap: 0.45rem; + flex: 1 1 auto; + width: 100%; + max-width: none; + min-width: 0; + padding: 0; + pointer-events: none; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__name { + margin: 0; + width: 100%; + max-width: none; + min-width: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size, clamp(1rem, 1.4vw, 1.1rem)); + font-weight: var(--openms-card-title-weight, 700); + line-height: 1.3; + letter-spacing: normal; + color: var(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.9)); + overflow-wrap: anywhere; + word-break: break-word; + text-wrap: balance; + text-shadow: none; + text-decoration: none; + text-underline-offset: 0.2em; + text-decoration-thickness: 0.09em; + transition: color 0.2s ease; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__text { + margin: 0; + width: 100%; + max-width: none; + align-self: stretch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 400; + line-height: 1.58; + color: var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)); + text-wrap: wrap; + text-shadow: none; + display: block; + overflow: visible; +} + +.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(--home-link-color, var(--openms-navy)); + text-decoration: none; +} + +@media (hover: hover) and (pointer: fine) { + .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover { + background: rgba(var(--openms-navy-rgb), 0.055); + } + + .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__logo { + transform: scale(1.03); + } +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta { + pointer-events: none; + margin-top: auto; + padding-top: 0.55rem; +} + +.home-page .home-page__block--projects .webapps-featured__header-main, +.home-page .home-page__block--projects .webapps-featured__header-main .webapps-featured__lead { + max-width: none; + width: 100%; +} + +@media (prefers-reduced-motion: reduce) { + .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 { + transform: none; + } + + .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__logo, + .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__logo { + transform: none; + } +} + +.home-page__block--projects .webapps-featured__footer { + margin-top: clamp(2rem, 4vh, 2.75rem); + margin-bottom: clamp(3.5rem, 7vh, 5rem); + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 100%; + text-align: center; +} + +.home-page__block--projects .webapps-featured__footer--home { + margin-top: clamp(1.75rem, 3.5vh, 2.25rem); +} + +@media (max-width: 768px) { + .home-page__block--projects .webapps-featured__header-action { + justify-content: flex-start; + width: 100%; + } + + .home-page__block--projects .webapps-featured__show-all { + width: fit-content; + max-width: 100%; + min-width: 0; + min-height: 0; + height: auto; + margin-inline: 0; + margin-right: auto; + padding: 0; + white-space: nowrap; + } +} + +@media (max-width: 420px) { + .home-page__block--projects .webapps-featured__show-all { + width: fit-content; + max-width: 100%; + min-height: 0; + height: auto; + padding: 0; + } +} + +/* Homepage mobile — shared standard button size */ +@media (max-width: 720px) { + .home-page .hero-home__btn, + .home-page .hero-home__btn--primary, + .home-page .hero-home__btn--secondary, + .home-page__hero .hero-home__btn, + .home-page__hero .hero-home__actions .hero-home__btn, + .home-page__hero .hero-home__actions .hero-home__btn--primary, + .home-page__hero .hero-home__actions .hero-home__btn--secondary, + .home-page .community-home__cta, + .home-page .openms-btn-primary, + .home-page .openms-step__cta, + .home-page .contact-area__cta, + .home-page .contact-area__cta-secondary { + min-height: var(--openms-btn-min-height, 2.75rem); + height: auto; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-family: var(--openms-font-body); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + font-weight: 600; + line-height: 1.3; + box-sizing: border-box; + } +} + +/* ═══════════════════════════════════════════ + 6. PARTNERS — Neurox-style trust line + logo marquee + ═══════════════════════════════════════════ */ +.home-page__block--partners .uni-partners--home { + padding: var(--home-section-space-y) var(--openms-page-inline); + background: transparent; + border: none; +} + +.home-page__block--partners .uni-partners--home .uni-partners__inner { + width: 100%; + max-width: var(--pro-max, var(--home-max)); + margin-inline: auto; + padding-inline: 0; +} + +.home-page__block--partners .uni-partners--home .uni-partners__header--trust { + display: block; + max-width: none; + width: 100%; + margin: 0 0 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: none; + margin-inline: 0; + text-align: center; +} + +.home-page__block--partners .uni-partners--home .uni-partners__trust-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--home-section-head-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + color: var(--home-title-color, var(--openms-navy)); + text-align: center; + text-transform: uppercase; + 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__marquees { + display: flex; + flex-direction: column; + gap: 1.15rem; + width: 100%; + margin-top: clamp(1.25rem, 2.5vh, 1.75rem); +} + +.home-page__block--partners .uni-partners--home .uni-partners__marquee { + display: block; + margin: 0; + width: 100%; + max-width: none; + background: transparent; + border: none; +} + +.home-page__block--partners .uni-partners--home .uni-partners__static { + display: 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: 36s; +} + +.home-page__block--partners .uni-partners--home .uni-partners__marquee--reverse .uni-partners__track { + animation: uni-partners-marquee-reverse 42s linear infinite; +} + +.home-page__block--partners .uni-partners--home .uni-partners__row { + gap: clamp(2rem, 4vw, 3rem); + padding: 0; +} + +.home-page__block--partners .uni-partners--home { + /* Equal visual height; width follows each logo’s aspect ratio (capped). */ + --uni-home-logo-h: 3.75rem; + --uni-home-logo-max-w: 16rem; +} + +.home-page__block--partners .uni-partners--home .uni-partners__item { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: auto; + height: var(--uni-home-logo-h); + min-width: 0; + max-width: var(--uni-home-logo-max-w); + min-height: var(--uni-home-logo-h); + max-height: var(--uni-home-logo-h); + 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; + box-sizing: border-box; + width: auto; + height: var(--uni-home-logo-h); + max-width: var(--uni-home-logo-max-w); + max-height: var(--uni-home-logo-h); + 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 (prefers-reduced-motion: reduce) { + .home-page__block--partners .uni-partners--home .uni-partners__marquees, + .home-page__block--partners .uni-partners--home .uni-partners__marquee { + display: none; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.75rem); + width: 100%; + margin: clamp(1.25rem, 2.5vh, 1.75rem) 0 0; + padding-inline: 0; + } +} + +@media (max-width: 768px) { + .home-page__block--partners .uni-partners--home .uni-partners__inner { + width: 100%; + max-width: none; + padding-inline: 0; + } + + .home-page__block--partners .uni-partners--home .uni-partners__header--trust { + width: 100%; + max-width: none; + padding-inline: 0; + } + + .home-page__block--partners .uni-partners--home .uni-partners__header-main { + max-width: none; + width: 100%; + } + + .home-page__block--partners .uni-partners--home { + --uni-home-logo-h: 3.25rem; + --uni-home-logo-max-w: 14rem; + } + + .home-page__block--partners .uni-partners--home .uni-partners__row { + gap: 1.35rem; + padding-inline: 0.5rem; + } + + .home-page__block--partners .uni-partners--home .uni-partners__trust-title { + font-size: clamp(1.3rem, 5.2vw, 1.7rem); + max-width: none; + } + + .home-page__block--partners .uni-partners--home .uni-partners__marquees, + .home-page__block--partners .uni-partners--home .uni-partners__marquee { + display: none; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: center; + justify-items: center; + gap: 0.85rem 1rem; + width: 100%; + margin: clamp(1.15rem, 2.5vh, 1.6rem) 0 0; + padding-inline: 0; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static > [role="listitem"] { + display: flex; + align-items: center; + justify-content: center; + min-width: 0; + width: 100%; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static .uni-partners__item { + display: flex; + width: 100%; + max-width: none; + height: 3.75rem; + min-height: 3.75rem; + max-height: 3.75rem; + flex: none; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static .uni-partners__item img { + display: block; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + margin-inline: auto; + object-fit: contain; + opacity: 1; + filter: none; + } +} + +/* ═══════════════════════════════════════════ + 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; + padding: 0; + color: var(--home-eyebrow-color, rgba(var(--openms-blue-rgb), 0.72)); + background: transparent; + border: none; + border-radius: 0; +} + +.home-page__block--sponsors .hero-sponsors__description { + margin: 0; + max-width: 32ch; + text-align: left; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); + 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; + background: + radial-gradient( + ellipse 80% 70% at 50% 20%, + rgba(var(--openms-blue-rgb), 0.08), + transparent 68% + ), + var(--home-bg-soft); +} + +/* ─── 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--projects .webapps-featured__header-main { + max-width: 100%; + } + + .home-page .home-page__block--projects .webapps-featured__header-main .webapps-featured__lead { + max-width: 100%; + } + + .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + grid-template-columns: 1fr; + } + + .home-page__block--projects .webapps-featured__item::after { + display: none; + } + + .home-page__block--projects .webapps-project-card--catalog, + .home-page__block--projects .webapps-featured__item .webapps-project-card--catalog { + width: 100% !important; + max-width: 100% !important; + } + + .home-page__block--projects .webapps-featured__inner { + padding: 0; + border-radius: 0; + } + + .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface, + .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 { + height: 100%; + min-height: 100%; + max-height: none; + transform: none; + } + + .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: 480px) { + .home-page .home-page__block--projects .webapps-featured__header-main .webapps-featured__lead { + max-width: 100%; + } + + .home-page__block--projects .webapps-project-card--catalog { + --webapps-card-pad: 0; + --projects-logo-height: clamp(4rem, 18vw, 5.5rem); + } +} + +@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__actions, + .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, + .home-page__hero .hero-home__btn--primary:hover, + .home-page__hero .hero-home__btn--primary:focus-visible, + .home-page__hero .hero-home__btn--secondary:hover, + .home-page__hero .hero-home__btn--secondary:focus-visible { + transform: none; + } + + .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 / 310; +} + +.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 — brand chrome colors */ +.home-page__hero .hero-home { + min-height: clamp(34rem, 76svh, 44rem); + background: transparent; + z-index: 1; +} + +.home-page__hero .hero-home__title { + color: var(--openms-dark); +} + +.home-page__hero .hero-home__title-accent { + display: inline; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--openms-dark); + -webkit-text-fill-color: currentColor; +} + +.home-page__hero .hero-home__description { + color: rgba(var(--openms-white-rgb), 0.7); +} + +.home-page__hero .hero-home__highlight { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.5rem 1rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.12); + border-radius: 999px; + color: rgba(var(--openms-white-rgb), 0.72); + background: rgba(var(--openms-white-rgb), 0.04); + font-weight: 600; + letter-spacing: 0.01em; + white-space: nowrap; + flex: 0 0 auto; +} + +.home-page__hero .hero-home__highlight::before, +.home-page__hero .hero-home__highlight + .hero-home__highlight::before { + content: none; +} + +.home-page__hero .hero-home__highlights { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 0.6rem 0.65rem; + width: 100%; +} + +@media (min-width: 721px) { + .home-page__hero .hero-home__btn { + min-height: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + } +} + +.home-page__hero .hero-home__btn--primary { + border-color: var(--openms-blue) !important; + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + box-shadow: 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)); +} + +.home-page__hero .hero-home__btn--primary:hover, +.home-page__hero .hero-home__btn--primary:focus-visible, +.home-page__hero .hero-home__btn--primary: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)); + outline: none; + text-decoration: none; +} + +.home-page__hero .hero-home__btn--primary:visited { + color: var(--openms-white) !important; +} + +.home-page__hero .hero-home__btn--primary:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-navy), + 0 0 0 5px var(--openms-blue); +} + +/* Explore the library — shared with navbar Partner in openms-buttons.css */ + +@media (max-width: 900px) { + .home-page__hero .hero-home { + min-height: auto; + } + + .home-page__hero .hero-home__highlights { + justify-content: flex-start; + } + + .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..5f990af3 --- /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: var(--openms-page-inline); + color: var(--openms-white); + background: var(--openms-navy); +} + +.keyfeatures-modern__inner { + width: 100%; + max-width: var(--pro-max, 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 var(--openms-stack-eyebrow, 12px); + 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: var(--openms-page-inline); + } + + .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..8bd6307d 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-content-link, var(--openms-navy)) !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/mailchimp.css b/assets/css/mailchimp.css deleted file mode 100644 index 00894e70..00000000 --- a/assets/css/mailchimp.css +++ /dev/null @@ -1,94 +0,0 @@ -:root { - --openmsSlateGray: rgb(108, 122, 137); -} - -.sign-up-container { - display: flex; - flex-direction: row; - align-items: center; - position: relative; - height: 75px; -} - -.sign-up-image { - padding: 5px 10px 6px 10px; - border-right: 1px solid var(--colorSecondary); - background-color: var(--colorSecondary); - border-radius: 5px 0 0 5px; -} - -#footer .sign-up-image svg.icon { - fill: var(--colorPrimaryDark); - width: 1.25rem; - height: 1.25rem; - padding-bottom: 2px; -} - -.sign-up-input { - background-color: var(--colorSecondary); - border-radius: 0 5px 5px 0; - border: none; - width: 75%; - height: 35px; - padding-left: 5px; - font-size: 14px; - color: var(--colorPrimaryDark); -} - -.submission-instructions { - position: absolute; - right: 18%; - font-size: 10px; - color: var(--openmsSlateGray); -} - -.signup-button { - display: none; -} - -#footer .signup-button svg.icon { - fill: var(--colorPrimaryDark); - width: 1.6rem; - height: 1.6rem; - padding-bottom: 2px; - padding-left: 8px; -} - -.thank-you { - display: none; - height: 75px; - color: var(--colorSecondary); - align-items: center; - color: var(--colorSecondary); -} - -@media only screen and (max-width: 1150px) { - .sign-up-input { - font-size: 12px; - } -} - -@media only screen and (max-width: 850px) { - .sign-up-input { - width: 100%; - } - - .thank-you { - justify-content: center; - } - - .submission-instructions { - display: none; - } - - .signup-button { - display: block; - height: 35px; - border-radius: 5px; - margin-left: 5px; - width: 60px; - color: black; - border:none; - outline:none; - } -} diff --git a/assets/css/members.css b/assets/css/members.css index 0ddb3e8d..32137e62 100644 --- a/assets/css/members.css +++ b/assets/css/members.css @@ -1,17 +1,146 @@ +/* ── 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(3, minmax(0, 1fr)); + gap: clamp(1rem, 2.5vw, 1.75rem); + margin-top: 1.25rem; +} + +.leadership-card { + display: flex; + flex-direction: column; + gap: 1rem; + 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__identity { + display: flex; + align-items: center; + gap: 0.95rem; + padding-bottom: 0.95rem; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.leadership-card__photo { + flex: 0 0 auto; + width: 4.75rem; + height: 4.75rem; + border-radius: 50%; + object-fit: cover; + object-position: center top; + border: 3px solid rgba(var(--openms-blue-rgb), 0.14); +} + +.leadership-card__photo--joshua { + object-position: center 18%; +} + +.leadership-card__who { + min-width: 0; + display: grid; + gap: 0.4rem; +} + +.leadership-card__name { + margin: 0; + font-size: 1.1rem; + line-height: 1.3; + color: var(--openms-navy); +} + +.leadership-card__role { + display: inline-flex; + width: fit-content; + margin: 0; + padding: 0.22rem 0.55rem; + border-radius: 999px; + background: rgba(var(--openms-navy-rgb), 0.06); + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.leadership-card__bio { + display: grid; + gap: 0.65rem; + margin: 0; + font-size: 0.95rem; + line-height: 1.6; +} + +.leadership-card__bio p { + margin: 0; +} + +.leadership-exec { + margin: 0 0 1.5rem; +} + +@media (max-width: 1100px) { + .leadership-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 860px) { + .leadership-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .leadership-card__identity { + flex-direction: column; + align-items: center; + text-align: center; + } + + .leadership-card__who { + justify-items: center; + } + + .leadership-card__bio { + 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..e3fb187b --- /dev/null +++ b/assets/css/navbar-collision-layout.css @@ -0,0 +1,1442 @@ +/* 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; + 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-left: -0.35rem; + 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: 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 0 auto; + min-width: auto; + max-width: 100%; + } + + 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.discord-icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.discord-icon *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.discord-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.discord-icon * { + fill: #5865f2 !important; + stroke: none !important; + color: #5865f2 !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon * { + fill: #0a66c2 !important; + stroke: none !important; + color: #0a66c2 !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon * { + fill: #181717 !important; + stroke: none !important; + color: #181717 !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon, +html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon *, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon * { + stroke: none !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(1), +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(1) { + fill: #4285f4 !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(2), +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(2) { + fill: #356ac3 !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon circle, +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon circle { + fill: #a0c3ff !important; + } + + html[data-navbar-layout="mobile"] .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(3), +html[data-navbar-layout="mobile"] #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(3) { + fill: #76a7fa !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; + 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-burger { + margin-left: -0.35rem; + } + + 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; + } + + /* 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; + } + + 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..99de1535 --- /dev/null +++ b/assets/css/navbar-responsive.css @@ -0,0 +1,1663 @@ +/* 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 minmax(0, 1fr) auto; + 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.85rem, 2vw, 1.75rem); + 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 minmax(0, 1fr) auto; + } + } + + .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: var(--openms-navbar-dropdown-width, 18rem); + min-width: var(--openms-navbar-dropdown-width, 18rem); + max-width: var(--openms-navbar-dropdown-width, 18rem); + } + + .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-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary { + 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); + } + + /* Sponsor Us — match hero “Explore the library” ghost layout */ + .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 { + min-height: var(--openms-btn-min-height, 2.75rem) !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + } +} + +/* 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; + 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-left: -0.35rem; + 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: 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 0 auto; + min-width: auto; + max-width: 100%; + } + + .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.discord-icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.discord-icon *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.discord-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.discord-icon * { + fill: #5865f2 !important; + stroke: none !important; + color: #5865f2 !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.linkedin-icon * { + fill: #0a66c2 !important; + stroke: none !important; + color: #0a66c2 !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.github-icon * { + fill: #181717 !important; + stroke: none !important; + color: #181717 !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon *, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon * { + stroke: none !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(1), + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(1) { + fill: #4285f4 !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(2), + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(2) { + fill: #356ac3 !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon circle, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon circle { + fill: #a0c3ff !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(3), + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a svg.google-scholar-icon path:nth-of-type(3) { + fill: #76a7fa !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; + 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-burger { + margin-left: -0.35rem; + } + + .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; + } + + /* 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; + } + + .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..6ece7848 --- /dev/null +++ b/assets/css/navbar-surface.css @@ -0,0 +1,287 @@ +/* Site chrome navbar — light gray bar on all pages (same as homepage scrolled state) */ + +: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; + --openms-nav-bar-height: 4.25rem; +} + +.site-header { + background: transparent; + padding: 0; +} + +/* Always light gray chrome — kill Bulma / Fresh white defaults */ +.navbar.is-fresh, +.navbar.is-fresh.is-fixed, +.site-header #nav.navbar.is-fresh, +.site-header #nav.navbar.is-fresh.is-fixed, +#navbar-clone.navbar.is-fresh, +#navbar-clone.navbar.is-fresh.is-fixed, +#navbar-clone { + --openms-chrome-bg: var(--openms-content-soft, #f4f6f9); + --openms-chrome-border: rgba(var(--openms-navy-rgb), 0.1); + --openms-chrome-nav-surface: var(--openms-content-soft, #f4f6f9); + --openms-chrome-nav-border: rgba(var(--openms-navy-rgb), 0.1); + --openms-chrome-nav-text: var(--openms-navy); + --openms-chrome-nav-text-muted: rgba(var(--openms-navy-rgb), 0.62); + --openms-navbar-link-color: var(--openms-navy); + --openms-navbar-link-hover-color: var(--openms-navy); + --openms-navbar-link-hover-bg: rgba(var(--openms-navy-rgb), 0.06); + background: var(--openms-content-soft, #f4f6f9) !important; + background-color: var(--openms-content-soft, #f4f6f9) !important; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08) !important; + box-shadow: 0 1px 0 rgba(var(--openms-navy-rgb), 0.04) !important; + transition: + background-color 0.25s ease, + border-color 0.25s ease, + box-shadow 0.25s ease; +} + +.site-header #nav.navbar.is-fresh { + padding: 0; + border: none !important; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08) !important; + backdrop-filter: none; +} + +/* Dark logo on light bar; white logo unused */ +.navbar-logo--on-dark { + display: none; +} + +.navbar-logo--on-light { + display: block; +} + +.site-header #nav.navbar.is-fresh .navbar-burger span, +#navbar-clone.navbar.is-fresh .navbar-burger span { + background-color: var(--openms-navy) !important; +} + +@media (min-width: 1024px) { + /* Sponsor Us — same ghost layout as hero “Explore the library” (navy on light chrome) */ + .site-header #nav.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 { + display: inline-flex !important; + align-items: center; + justify-content: center; + width: fit-content; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + font-family: var(--openms-font-body); + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: nowrap; + color: var(--openms-navy) !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + border-color: rgba(var(--openms-navy-rgb), 0.72) !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; + transition: var(--openms-btn-motion); + } + + .site-header #nav.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, + .site-header #nav.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, + .site-header #nav.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 { + color: var(--openms-navy) !important; + background: rgba(var(--openms-navy-rgb), 0.08) !important; + background-color: rgba(var(--openms-navy-rgb), 0.08) !important; + border-color: rgba(var(--openms-navy-rgb), 0.78) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb), 0.18) !important; + outline: none; + text-decoration: none; + } + + .site-header #nav.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 { + outline: 2px solid rgba(var(--openms-navy-rgb), 0.35); + outline-offset: 2px; + } + + .site-header #nav.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:focus-visible { + outline: 2px solid rgba(var(--openms-navy-rgb), 0.35); + outline-offset: 2px; + } +} + +@media (prefers-reduced-motion: reduce) { + .navbar.is-fresh, + .navbar.is-fresh.is-fixed, + .site-header #nav.navbar.is-fresh, + .site-header #nav.navbar.is-fresh.is-fixed, + #navbar-clone.navbar.is-fresh, + #navbar-clone.navbar.is-fresh.is-fixed, + #navbar-clone { + transition: none; + } +} + +/* Seamless banner → nav join when announcement is present */ +.site-header:has(.news-banner) #nav.navbar.is-fresh { + border-top: none !important; +} + +.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; +} + +/* Desktop CTA cluster — match hero primary + ghost pair */ +@media (min-width: 1024px) { + .navbar.is-fresh .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-end { + align-items: center; + gap: var(--openms-btn-gap, 0.75rem); + } + + .navbar.is-fresh .navbar-cta-item, + #navbar-clone.navbar.is-fresh .navbar-cta-item { + margin: 0 !important; + } + + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:hover, + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:focus-visible, + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown.is-hoverable:hover > .navbar-link, + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown.is-hoverable:focus-within > .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 > .navbar-link:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown.is-hoverable:hover > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown.is-hoverable:focus-within > .navbar-link { + color: var(--openms-navbar-link-hover-color); + background-color: var(--openms-navbar-link-hover-bg); + } + + .navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link:focus-visible { + outline: 2px solid rgba(var(--openms-navy-rgb), 0.35); + outline-offset: 2px; + } + + .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 { + background: rgba(var(--openms-navy-rgb), 0.08) !important; + border-color: rgba(var(--openms-navy-rgb), 0.78) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb), 0.18) !important; + } + + .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 { + outline: 2px solid rgba(var(--openms-navy-rgb), 0.35); + outline-offset: 2px; + } +} + +.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..e322c225 --- /dev/null +++ b/assets/css/news-banner.css @@ -0,0 +1,205 @@ +/* Site announcement — chrome stack: banner → nav → hero */ + +.news-banner { + --news-banner-max: var(--pro-max, 75rem); + --news-banner-pad-x: var(--openms-navbar-container-pad-inline, clamp(1.25rem, 3.5vw, 2.5rem)); + --news-banner-bg: var(--openms-chrome-banner-bg, var(--openms-blue)); + --news-banner-border: var(--openms-chrome-banner-border, transparent); + --news-banner-label-color: var(--openms-chrome-banner-label, var(--openms-white)); + --news-banner-label-bg: var(--openms-chrome-banner-label-bg, rgba(var(--openms-white-rgb), 0.18)); + --news-banner-label-border: var(--openms-chrome-banner-label-border, transparent); + --news-banner-text-color: var(--openms-chrome-banner-text, var(--openms-white)); + --news-banner-focus-ring: rgba(var(--openms-white-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; + box-sizing: border-box; + width: 100%; + max-width: none; + margin: 0; + padding: 0.55rem var(--news-banner-pad-x); +} + +.news-banner__link, +.news-banner__message { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; + gap: 0.55rem 0.85rem; + margin: 0; + min-height: 1.75rem; + text-align: center; +} + +.news-banner__link { + width: 100%; + color: inherit; + text-decoration: none; + border-radius: 0.35rem; + transition: background-color 0.2s ease, opacity 0.2s ease; +} + +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(--news-banner-text-color); + text-decoration: none; + text-underline-offset: 0.18em; + text-decoration-thickness: 1.5px; +} + +.news-banner__label { + flex-shrink: 0; + display: inline-flex; + align-items: center; + padding: 0.22rem 0.65rem; + font-family: var(--openms-font-body); + font-size: 0.6875rem; + font-weight: 800; + line-height: 1.15; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--news-banner-label-color); + background: var(--news-banner-label-bg); + border: 1px solid var(--news-banner-label-border); + border-radius: 999px; +} + +.news-banner__text { + flex: 0 1 auto; + min-width: 0; + max-width: min(72ch, 100%); + font-family: var(--openms-font-body); + font-size: clamp(0.875rem, 1.05vw, 0.975rem); + font-weight: 650; + line-height: 1.35; + letter-spacing: 0.01em; + color: var(--news-banner-text-color); + text-wrap: pretty; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + transition: color 0.2s ease; +} + +@media (min-width: 768px) { + .news-banner__inner { + padding-block: 0.6rem; + } + + .news-banner__label { + padding: 0.24rem 0.7rem; + font-size: 0.72rem; + } + + .news-banner__text { + font-size: clamp(0.9rem, 1.1vw, 1rem); + } +} + +@media (max-width: 767px) { + .news-banner { + --news-banner-pad-x: var(--openms-navbar-container-pad-inline-mobile, 1.15rem); + } + + .news-banner__inner { + width: 100%; + max-width: 100%; + padding-block: 0.55rem; + } + + .news-banner__link, + .news-banner__message { + flex-wrap: nowrap; + justify-content: center; + align-items: center; + gap: 0.4rem; + min-height: 1.65rem; + } + + .news-banner__label { + flex: 0 0 auto; + padding: 0.2rem 0.55rem; + font-size: 0.625rem; + letter-spacing: 0.08em; + } + + .news-banner__text { + flex: 0 1 auto; + width: auto; + max-width: min(72ch, 100%); + min-width: 0; + font-size: clamp(0.8125rem, 3vw, 0.9375rem); + line-height: 1.35; + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } +} + +@media (max-width: 430px) { + .news-banner__inner { + --news-banner-pad-x: var(--openms-page-gutter, 0.75rem); + } + + .news-banner__link, + .news-banner__message { + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + gap: 0.3rem; + } + + .news-banner__label { + padding: 0.18rem 0.48rem; + font-size: 0.625rem; + } + + .news-banner__text { + font-size: clamp(0.8125rem, 3.4vw, 0.9rem); + letter-spacing: 0; + } +} + +@media (max-width: 360px) { + .news-banner__label { + display: none; + } + + .news-banner__text { + font-size: clamp(0.8125rem, 3.6vw, 0.9rem); + } +} + +@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..e466557e --- /dev/null +++ b/assets/css/news-section.css @@ -0,0 +1,635 @@ +/* News — listing & single articles */ + +.news-page-layout, +.openms-lib-page--news { + --olib-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --home-card-title-color: rgba(var(--openms-dark-rgb), 0.82); + --home-body-color: var(--openms-text-muted); + --news-max: 56rem; + --news-gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); + --news-card-radius: 0.85rem; + --news-card-border: rgba(var(--openms-navy-rgb), 0.12); + --news-card-pad: clamp(1rem, 2vw, 1.25rem); + --openms-page-hero-title-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.35rem); +} + +.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: var(--olib-pad-x); +} + +.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: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); + margin: 0; + padding-top: 0; +} + +.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; +} + +.news-pager[hidden] { + display: none; +} + +.news-pager__btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + min-height: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-family: var(--openms-font-body); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + 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], +.news-archive .news-list .news-entry[hidden], +.news-bibliography--undated .news-list .news-entry[hidden], +.news-list .news-entry.community-events-home__item[hidden], +.news-list .news-entry.news-home__item[hidden] { + display: none !important; +} + +/* News archive cards — match homepage Latest news / Upcoming events */ +.news-archive .news-list, +.news-bibliography--undated .news-list { + list-style: none; + margin: 0; + padding: 0; +} + +.news-archive .news-list .news-entry, +.news-bibliography--undated .news-list .news-entry { + display: flex; + min-width: 0; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + transition: none; +} + +.news-archive .news-list .news-entry:hover, +.news-bibliography--undated .news-list .news-entry:hover { + border: none; + box-shadow: none; +} + +.news-archive .news-home__card-link:hover .news-home__card-title, +.news-archive .news-home__card-link:focus-visible .news-home__card-title, +.news-bibliography--undated .news-home__card-link:hover .news-home__card-title, +.news-bibliography--undated .news-home__card-link:focus-visible .news-home__card-title { + color: var(--openms-content-link, var(--openms-navy)); +} + +.news-archive .news-home__card-authors, +.news-bibliography--undated .news-home__card-authors { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.45; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); +} + +.news-archive .news-home__card-cta, +.news-bibliography--undated .news-home__card-cta { + display: inline-flex; + align-items: center; + gap: 0.25rem; + margin-top: 0.35rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--home-link-color, var(--openms-navy)); + transition: gap 0.2s ease; +} + +.news-archive .news-home__card-link:hover .news-home__card-cta, +.news-archive .news-home__card-link:focus-visible .news-home__card-cta, +.news-bibliography--undated .news-home__card-link:hover .news-home__card-cta, +.news-bibliography--undated .news-home__card-link:focus-visible .news-home__card-cta { + gap: 0.45rem; + color: var(--openms-content-link, var(--openms-navy)); +} + +.news-entry__summary { + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)); + 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: var(--openms-body-size); + font-weight: 700; + color: var(--openms-navy); + text-decoration: none; + transition: color 0.15s ease; +} + +.news-entry__action:hover, +.news-entry__action:focus-visible { + color: var(--openms-content-link, var(--openms-navy)); + text-decoration: none; + 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-blue); + background: var(--openms-blue); + 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-content-link, var(--openms-navy)); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); + transition: color 0.2s ease; +} + +.news-article__content a:hover, +.news-article__content a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: none; +} + +.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-content-link, var(--openms-navy)); + text-decoration: none; + 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..297298a5 --- /dev/null +++ b/assets/css/openms-buttons.css @@ -0,0 +1,524 @@ +/* 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; + /* Pack closer; still clear 3% hover growth on ~14rem pills (+ small buffer) */ + --openms-btn-gap: calc((var(--openms-btn-hover-scale) - 1) * 14rem + 0.35rem); + --openms-btn-min-height: 2.75rem; + --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-font-size: var(--openms-text-min); + --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: var(--openms-btn-min-height); + 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-btn-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-btn-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: var(--openms-btn-min-height); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + line-height: 1.3; +} + +.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: var(--openms-btn-min-height); + 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-btn-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: var(--openms-btn-min-height); + 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, +.home-page__hero .hero-home__btn--secondary, +.home-page__hero .hero-home__btn--secondary.about-cta-btn--donate { + display: inline-flex; + align-items: center; + justify-content: center; + width: fit-content; + min-height: var(--openms-btn-min-height); + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + font-weight: 600 !important; + line-height: 1.3; + white-space: nowrap; + background: transparent !important; + background-color: transparent !important; + border: 2px solid rgba(var(--openms-white-rgb), 0.72) !important; + border-color: rgba(var(--openms-white-rgb), 0.72) !important; + color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; + transition: var(--openms-btn-motion); +} + +.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, +.home-page__hero .hero-home__btn--secondary:hover, +.home-page__hero .hero-home__btn--secondary:focus-visible, +.home-page__hero .hero-home__btn--secondary:active, +.home-page__hero .hero-home__btn--secondary.about-cta-btn--donate:hover, +.home-page__hero .hero-home__btn--secondary.about-cta-btn--donate:focus-visible, +.home-page__hero .hero-home__btn--secondary.about-cta-btn--donate:active { + background: rgba(var(--openms-white-rgb), 0.08) !important; + background-color: rgba(var(--openms-white-rgb), 0.08) !important; + border-color: rgba(var(--openms-white-rgb), 0.78) !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-white-rgb), 0.18) !important; + outline: none; + text-decoration: none; +} + +@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; + } +} + +/* ── Shared page buttons (.openms-lib-btn) — same Framer pill layout ── */ + +.openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + box-sizing: border-box; + width: fit-content; + min-height: var(--openms-btn-min-height); + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + border: 2px solid transparent; + font-family: var(--openms-font-body); + font-size: var(--openms-btn-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-btn--primary { + border-color: var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-btn--primary::after { + display: none; +} + +.openms-lib-btn--ghost, +.openms-lib-btn--outline { + border-color: var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; + text-decoration: none; +} + +.openms-lib-btn--navy { + border-color: var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.openms-lib-btn--primary:hover, +.openms-lib-btn--primary:focus-visible, +.openms-lib-btn--primary:active, +.openms-lib-btn--navy:hover, +.openms-lib-btn--navy:focus-visible, +.openms-lib-btn--navy: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-btn--primary:hover, +.openms-lib-btn--primary:focus-visible, +.openms-lib-btn--primary:active { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-lib-btn--navy:hover, +.openms-lib-btn--navy:focus-visible, +.openms-lib-btn--navy:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.openms-lib-btn--ghost:hover, +.openms-lib-btn--ghost:focus-visible, +.openms-lib-btn--ghost:active, +.openms-lib-btn--outline:hover, +.openms-lib-btn--outline:focus-visible, +.openms-lib-btn--outline: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-btn--primary:focus-visible, +.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); +} + +.openms-lib-btn--ghost:focus-visible, +.openms-lib-btn--outline:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-btn--primary:hover, + .openms-lib-btn--primary:focus-visible, + .openms-lib-btn--navy:hover, + .openms-lib-btn--navy:focus-visible, + .openms-lib-btn--ghost:hover, + .openms-lib-btn--ghost:focus-visible, + .openms-lib-btn--outline:hover, + .openms-lib-btn--outline:focus-visible { + transform: none; + } +} + +/* Responsive layout lives in zz-openms-buttons.css (loads last). */ diff --git a/assets/css/openms-lib.css b/assets/css/openms-lib.css new file mode 100644 index 00000000..f8b2b7fc --- /dev/null +++ b/assets/css/openms-lib.css @@ -0,0 +1,4234 @@ +/* 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-content-link, var(--openms-navy)); + 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: none; +} + +/* ── 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-content-link, var(--openms-navy)); + font-weight: 600; + text-decoration: none; +} + +.openms-lib-list__bullets a:hover, +.openms-lib-list__bullets a:focus-visible { + text-decoration: none; +} + +.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-content-link, var(--openms-navy)) !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-content-link, var(--openms-navy)); + 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: none; +} + +/* ── 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; +} + +.openms-lib-hero__actions .openms-lib-btn--ghost .openms-lib-btn__brand-icon { + display: block; + flex: 0 0 auto; + width: 1.05em; + height: 1.05em; + margin-right: 0.35rem; + object-fit: contain; +} + +/* 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: none; +} + +.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: none; + 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: none; + 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: none; +} + +@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/privacy-page.css b/assets/css/privacy-page.css new file mode 100644 index 00000000..4b28a018 --- /dev/null +++ b/assets/css/privacy-page.css @@ -0,0 +1,408 @@ +/* Privacy Policy — hub layout (match Code of Conduct / standard pages) */ + +.openms-lib-page--privacy .openms-lib-hero--pro { + padding-bottom: 0; +} + +.openms-lib-page--privacy .openms-lib-hero__title { + max-width: 18ch; +} + +.openms-lib-page--privacy .openms-lib-hero__lead { + max-width: 42ch; +} + +.openms-lib-page--privacy.openms-lib-page--openms-lib .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--privacy .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--privacy .openms-lib-page__outro { + padding-inline: 0; +} + +.openms-lib-page--privacy .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)) 0; +} + +.openms-lib-page--privacy #who-we-are { + background: var(--pro-band-soft, #f4f6f9) !important; +} + +.openms-lib-page--privacy #privacy-topics { + background: var(--openms-white) !important; +} + +.openms-lib-page--privacy .privacy-overview .openms-lib-resources__inner, +.openms-lib-page--privacy .privacy-details__inner { + display: grid; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.openms-lib-page--privacy .privacy-overview .openms-lib-resources__head { + display: grid; + justify-items: center; + text-align: center; + max-width: min(100%, 42rem); + margin-inline: auto; +} + +.openms-lib-page--privacy .privacy-overview .openms-lib-resources__eyebrow { + justify-content: center; +} + +.openms-lib-page--privacy .privacy-overview .openms-lib-resources__title, +.openms-lib-page--privacy .privacy-overview .openms-lib-resources__lead { + text-align: center; + margin-inline: auto; +} + +.openms-lib-page--privacy .privacy-overview .openms-lib-resources__lead { + max-width: min(100%, 46rem); +} + +.openms-lib-page--privacy .privacy-overview .openms-lib-resources__lead strong { + color: var(--openms-navy); + font-weight: 700; +} + +/* Overview key points — match CoC numbered list */ +.openms-lib-page--privacy .privacy-overview__list { + display: grid; + gap: 0.85rem; + width: 100%; + max-width: min(100%, 46rem); + margin: 0 auto; + padding: 0; + list-style: none; +} + +.openms-lib-page--privacy .privacy-overview__item { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 0.75rem; + align-items: start; + margin: 0; +} + +.openms-lib-page--privacy .privacy-overview__num { + margin: 0; +} + +.openms-lib-page--privacy .privacy-overview__text { + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.86); +} + +.openms-lib-page--privacy .privacy-overview__note { + display: grid; + gap: 0.35rem; + width: 100%; + max-width: min(100%, 46rem); + margin: 0 auto; + padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.1rem, 2.5vw, 1.4rem); + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--pro-radius, 0.85rem); + background: var(--openms-white); + box-shadow: var(--pro-shadow, 0 0.15rem 0.65rem rgba(var(--openms-navy-rgb), 0.04)); +} + +.openms-lib-page--privacy .privacy-overview__note-kicker { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--pro-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); +} + +.openms-lib-page--privacy .privacy-overview__note-text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.78); +} + +.openms-lib-page--privacy .privacy-overview__note-text strong { + color: var(--openms-navy); + font-weight: 700; +} + +/* Topics accordion — match CoC details */ +.openms-lib-page--privacy .privacy-details { + padding-bottom: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); +} + +.openms-lib-page--privacy .privacy-details__head { + display: grid; + grid-template-columns: 1fr; + gap: 0; + align-items: start; +} + +.openms-lib-page--privacy .privacy-details__head-copy { + display: grid; + justify-items: start; + text-align: left; + max-width: min(100%, 46rem); +} + +.openms-lib-page--privacy .privacy-details__head-copy .openms-lib-resources__lead { + max-width: min(100%, 46rem); + margin-inline: 0; + text-align: left; +} + +.openms-lib-page--privacy .privacy-details__list { + display: grid; + gap: 0.65rem; + width: 100%; + max-width: none; + margin: 0; +} + +.openms-lib-page--privacy .privacy-details__item { + margin: 0; + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--pro-radius, 0.85rem); + background: var(--openms-white); + box-shadow: var(--pro-shadow, 0 0.15rem 0.65rem rgba(var(--openms-navy-rgb), 0.04)); + overflow: hidden; + scroll-margin-top: 6rem; +} + +.openms-lib-page--privacy .privacy-details__question { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.15rem; + cursor: pointer; + list-style: none; +} + +.openms-lib-page--privacy .privacy-details__question::-webkit-details-marker { + display: none; +} + +.openms-lib-page--privacy .privacy-details__question::after { + content: "+"; + flex-shrink: 0; + margin-top: 0.1rem; + font-size: 1.35rem; + font-weight: 600; + line-height: 1; + color: var(--openms-blue); +} + +.openms-lib-page--privacy .privacy-details__item[open] .privacy-details__question::after { + content: "−"; +} + +.openms-lib-page--privacy .privacy-details__question:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: -2px; +} + +.openms-lib-page--privacy .privacy-details__question-copy { + display: grid; + gap: 0.3rem; + min-width: 0; +} + +.openms-lib-page--privacy .privacy-details__question-title { + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.6vw, 1.1rem); + font-weight: 700; + line-height: 1.35; + color: var(--openms-navy); +} + +.openms-lib-page--privacy .privacy-details__question-summary { + font-size: var(--openms-body-size); + line-height: 1.45; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)); +} + +.openms-lib-page--privacy .privacy-details__answer { + display: grid; + gap: 0.85rem; + padding: 0 1.15rem 1.15rem; +} + +.openms-lib-page--privacy .privacy-details__rich { + color: rgba(var(--openms-dark-rgb), 0.86); + font-size: var(--openms-body-size); + line-height: 1.65; +} + +.openms-lib-page--privacy .privacy-details__rich p, +.openms-lib-page--privacy .privacy-details__rich li { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.86); +} + +.openms-lib-page--privacy .privacy-details__rich p + p { + margin-top: 0.85rem; +} + +.openms-lib-page--privacy .privacy-details__rich ul, +.openms-lib-page--privacy .privacy-details__rich ol { + margin: 0; + padding-left: 1.2rem; + display: grid; + gap: 0.4rem; +} + +.openms-lib-page--privacy .privacy-details__rich a { + color: var(--openms-content-link, var(--openms-navy)); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); + overflow-wrap: anywhere; +} + +.openms-lib-page--privacy .privacy-details__rich a:hover, +.openms-lib-page--privacy .privacy-details__rich a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: none; +} + +.openms-lib-page--privacy .privacy-details__rich strong { + font-weight: 700; + color: var(--openms-navy); +} + +/* Outro CTA band */ +.openms-lib-page--privacy .openms-lib-page__outro { + background: var(--pro-band-soft, #f4f6f9); +} + +.openms-lib-page--privacy #privacy-help.openms-lib-page__anchor { + background: transparent; + padding-inline: var(--openms-page-inline); + padding-block: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)) clamp(1.75rem, 4vw, 3rem); +} + +.openms-lib-page--privacy .contribute-coc-band { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; + box-sizing: border-box; +} + +.openms-lib-page--privacy .contribute-coc-band__panel { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--pro-stack-actions, 1.25rem); + margin: 0; + padding: clamp(2.5rem, 5vw, 3.5rem) var(--pro-card-pad-lg, clamp(1rem, 2vw, 1.2rem)); + border: none; + border-radius: var(--pro-radius, 0.85rem); + 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--privacy .contribute-coc-band__copy { + flex: initial; + max-width: 46ch; +} + +.openms-lib-page--privacy .contribute-coc-band__kicker { + margin: 0 0 var(--pro-stack-eyebrow, 0.45rem); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--pro-kicker-on-dark, rgba(var(--openms-white-rgb), 0.72)); +} + +.openms-lib-page--privacy .contribute-coc-band__text { + margin: 0; + color: var(--openms-white); +} + +.openms-lib-page--privacy .contribute-coc-band__text strong { + display: block; + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + font-weight: var(--openms-section-title-weight, var(--openms-heading-lg-weight)); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-white); +} + +.openms-lib-page--privacy .contribute-coc-band__note { + display: block; + margin-top: var(--pro-stack-lead, 0.75rem); + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-white-rgb), 0.88); +} + +.openms-lib-page--privacy .contribute-coc-band__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--openms-btn-gap, 0.75rem); +} + +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn { + min-width: clamp(10rem, 22vw, 14rem); +} + +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--primary { + border: 2px solid var(--openms-white); + background: var(--openms-white); + color: var(--openms-navy) !important; +} + +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible { + transform: scale(var(--openms-btn-hover-scale, 1.02)); + box-shadow: 0 0 0 var(--openms-btn-glow-size, 0.35rem) rgba(255, 255, 255, 0.22); + outline: none; +} + +@media (max-width: 900px) { + .openms-lib-page--privacy .privacy-details__head { + grid-template-columns: 1fr; + align-items: start; + } +} + +@media (max-width: 720px) { + .openms-lib-page--privacy .openms-lib-hero__actions { + width: 100%; + } + + .openms-lib-page--privacy .openms-lib-hero__actions .openms-lib-btn { + width: 100%; + justify-content: center; + } + + .openms-lib-page--privacy .privacy-details__question { + padding: 0.9rem 0.95rem; + } + + .openms-lib-page--privacy .privacy-details__answer { + padding-inline: 0.95rem; + } + + .openms-lib-page--privacy .privacy-details__question-summary { + font-size: var(--openms-text-min); + } +} diff --git a/assets/css/publications.css b/assets/css/publications.css new file mode 100644 index 00000000..6c975ab5 --- /dev/null +++ b/assets/css/publications.css @@ -0,0 +1,545 @@ +/* Publications page — unified layout and bibliography UX + Shell width / gutters live on .openms-lib-page--publications + (see zz-publications-layout.css) via --pro-max + --openms-page-inline. */ + +.publications-page { + --pub-gap: var(--pro-head-to-content, clamp(2rem, 4vw, 3rem)); + --pub-line: var(--pro-line, rgba(var(--openms-navy-rgb), 0.1)); + --pub-card-radius: var(--pro-radius, 0.85rem); + --pub-card-border: var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)); + --pub-card-pad: var(--pro-card-pad-lg, clamp(1rem, 2vw, 1.25rem)); + width: 100%; + max-width: none; + min-width: 0; + box-sizing: border-box; +} + +.publications-body { + display: contents; +} + +/* —— 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.4rem; + 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, + background-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; +} + +.publications-featured .publications-cite-card { + border: none; + box-shadow: none; + background: rgba(var(--openms-blue-rgb), 0.08); +} + +.publications-cite-card:hover { + border-color: rgba(var(--openms-navy-rgb), 0.2); + box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); +} + +.publications-featured .publications-cite-card:hover, +.publications-featured .publications-cite-card:focus-within { + border: none; +} + +.publications-cite-card--primary, +.publications-cite-card--secondary { + border-left: 1px solid var(--pub-card-border); +} + +.publications-featured .publications-cite-card--primary, +.publications-featured .publications-cite-card--secondary { + border-left: none; +} + +.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; + transition: color 0.2s ease, background-color 0.2s ease; +} + +.publications-cite-card--secondary .publications-cite-card__badge { + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.08); +} + +.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); + transition: color 0.2s ease; +} + +.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); + transition: color 0.2s ease; +} + +.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: inherit; + 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); + transition: color 0.2s ease; +} + +.publications-cite-card__journal { + color: var(--openms-navy); + transition: color 0.2s ease; +} + +.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); + transition: color 0.2s ease; +} + +.publications-cite-card__authors-more { + display: inline; + margin: 0 0.1em; + padding: 0; + border: 0; + border-radius: 0; + background: none; + font-size: 0.92em; + font-weight: 700; + letter-spacing: 0.02em; + line-height: inherit; + white-space: nowrap; + vertical-align: baseline; + color: rgba(var(--openms-navy-rgb), 0.62); + transition: color 0.2s ease; +} + +.publications-cite-card__action { + justify-self: start; + margin-top: 0; + font-size: var(--openms-text-min); + font-weight: var(--openms-cta-link-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: none; + outline: none; +} + +/* Key publications — blue fill on hover, light text */ +.publications-featured .publications-cite-card:hover, +.publications-featured .publications-cite-card:focus-within { + border: none; + background: var(--openms-blue); + box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-blue-rgb), 0.28); + color: var(--openms-white); +} + +.publications-featured .publications-cite-card:hover .publications-cite-card__badge, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__badge, +.publications-featured .publications-cite-card:hover .publications-cite-card__topic, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__topic, +.publications-featured .publications-cite-card:hover .publications-cite-card__title, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__title, +.publications-featured .publications-cite-card:hover .publications-cite-card__title a, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__title a, +.publications-featured .publications-cite-card:hover .publications-cite-card__meta, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__meta, +.publications-featured .publications-cite-card:hover .publications-cite-card__journal, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__journal, +.publications-featured .publications-cite-card:hover .publications-cite-card__year, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__year, +.publications-featured .publications-cite-card:hover .publications-cite-card__authors, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__authors, +.publications-featured .publications-cite-card:hover .publications-cite-card__authors-more, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__authors-more { + color: #ffffff; +} + +.publications-featured .publications-cite-card:hover .publications-cite-card__action, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__action { + color: #ffffff; +} + +.publications-featured .publications-cite-card:hover .publications-cite-card__action:hover, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__action:hover, +.publications-featured .publications-cite-card:hover .publications-cite-card__action:focus-visible, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__action:focus-visible { + color: #ffffff; +} + +.publications-featured .publications-cite-card:hover .publications-cite-card__badge, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__badge { + border-color: rgba(255, 255, 255, 0.35); + background: rgba(255, 255, 255, 0.14); +} + +.publications-featured .publications-cite-card:hover .publications-cite-card__authors-more, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__authors-more { + border: 0; + background: none; + color: rgba(255, 255, 255, 0.86); +} + +.publications-featured .publications-cite-card:hover .publications-cite-card__year::before, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__year::before { + color: rgba(255, 255, 255, 0.55); +} + +.publications-featured .publications-cite-card:hover .publications-cite-card__topic, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__topic, +.publications-featured .publications-cite-card:hover .publications-cite-card__authors, +.publications-featured .publications-cite-card:focus-within .publications-cite-card__authors { + color: rgba(255, 255, 255, 0.86); +} + +@media (min-width: 900px) { + .publications-featured__list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: auto auto auto 1fr auto; + align-items: stretch; + column-gap: 0.85rem; + row-gap: 0.4rem; + } + + .publications-featured__list > .publications-cite-card { + grid-row: span 5; + grid-template-rows: subgrid; + /* Parent row-gap sets shared line spacing across both cards */ + gap: 0; + } + + .publications-featured__list > .publications-cite-card .publications-cite-card__authors { + align-self: start; + } + + .publications-featured__list > .publications-cite-card .publications-cite-card__action { + align-self: start; + } +} + +@supports not (grid-template-rows: subgrid) { + @media (min-width: 900px) { + .publications-featured__list > .publications-cite-card { + grid-row: auto; + grid-template-rows: none; + gap: 0.4rem; + } + } +} + +/* —— Bibliography —— */ +.publications-bibliography { + display: grid; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); + margin: 0; + padding-top: 0; +} + +.publications-bibliography > .openms-lib-resources__head { + margin-bottom: 0; +} + +.publications-toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: 0.65rem 1rem; + padding: 0; + margin: 0 0 0.45rem; +} + +.publications-toolbar__filter { + display: flex; + flex-direction: column; + gap: 0.3rem; + width: fit-content; + max-width: 100%; + min-width: 0; + margin-left: auto; +} + +.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; +} + +.publications-more { + display: flex; + justify-content: flex-start; + margin: 0.35rem 0 0; + padding-top: 0.35rem; +} + +.publications-more[hidden] { + display: none; +} + +.publications-more__btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + min-width: 0; + min-height: 0; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + color: var(--openms-blue); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: var(--openms-cta-link-weight, 700); + line-height: 1.3; + cursor: pointer; +} + +.publications-more__btn:hover, +.publications-more__btn:focus-visible { + color: var(--openms-blue); + background: transparent; + box-shadow: none; + transform: none; + outline: none; +} + +.publication-entry[hidden] { + display: none; +} + +/* Year blocks */ +.publications-year { + margin: 0; + padding: 0; + display: grid; + gap: 0.75rem; +} + +.publications-year__title { + display: none; +} + +.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-content-link, var(--openms-navy)); + text-decoration: none; + 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: var(--openms-text-muted); +} + +.publication-year { + font-weight: 600; +} + +.publication-year::before { + content: "·"; + margin-right: 0.45rem; + margin-left: 0.45rem; + color: rgba(var(--openms-navy-rgb), 0.35); + font-weight: 500; +} + +.publications-page[data-active-year]:not([data-active-year="all"]) .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..1267da97 --- /dev/null +++ b/assets/css/research-partnerships-page.css @@ -0,0 +1,108 @@ +/* Research partnerships — section rhythm matches Contributors */ + +.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: 0; +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about, +.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, clamp(4rem, 9vw, 6.5rem)); +} + +/* Collaborate — full-bleed gray band; content uses page gutters */ +.openms-lib-page--research-partnerships #partnerships-include.openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--research-partnerships #partnerships-include.openms-lib-page__anchor { + padding-inline: 0; +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about { + width: 100%; + max-width: none; + margin-inline: 0; + background: var(--pro-band-soft, #f4f6f9); + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +/* Drop extra floor under the short Tally form */ +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources { + padding-bottom: clamp(1.5rem, 4vw, 2.5rem); +} + +/* Collaborate — full-width section rail (no half-width 2-col head) */ +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__inner { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__head, +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__head-copy { + display: grid; + grid-template-columns: 1fr; + justify-items: start; + text-align: left; + width: 100%; + max-width: min(100%, 42rem); + margin: 0; +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__eyebrow { + justify-content: flex-start; +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__title, +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__lead { + width: 100% !important; + max-width: none !important; + margin-inline: 0; + text-align: left; +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__lead { + max-width: min(100%, 46rem) !important; + margin-top: var(--pro-stack-lead, 0.75rem); +} + +.openms-lib-page--research-partnerships #partnerships-include .rp-include__mosaic { + width: 100%; + max-width: none; +} + +/* Research partnerships — section intros centered */ + +.openms-lib-page--research-partnerships #our-partners .openms-lib-resources__head, +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources__head { + display: grid; + justify-items: center; + text-align: center; + width: 100%; + max-width: 42rem; + margin: 0 auto; +} + +.openms-lib-page--research-partnerships #our-partners .openms-lib-resources__eyebrow, +.openms-lib-page--research-partnerships #our-partners .openms-lib-resources__title, +.openms-lib-page--research-partnerships #our-partners .openms-lib-resources__lead, +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources__eyebrow, +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources__title, +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources__lead { + width: 100%; + max-width: none; + margin-inline: auto; + text-align: center; + justify-self: center; +} + +.openms-lib-page--research-partnerships #our-partners .openms-lib-resources__eyebrow, +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources__eyebrow { + justify-content: center; +} + +.openms-lib-page--research-partnerships #our-partners .openms-lib-resources__lead, +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources__lead { + margin-top: var(--pro-stack-lead, 0.75rem); +} diff --git a/assets/css/services-page.css b/assets/css/services-page.css new file mode 100644 index 00000000..ca8a80c4 --- /dev/null +++ b/assets/css/services-page.css @@ -0,0 +1,116 @@ +.services-page-layout { + --olib-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --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: 0; + border: 0; + background: transparent; +} + +/* Scientific & technical support — centered Contact us intro + form */ +.openms-lib-page--services-support .services-support-application { + padding-block: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); +} + +.openms-lib-page--services-support .services-support-application__inner { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--pro-head-to-content, clamp(1.25rem, 3vw, 1.75rem)); + width: 100%; + max-width: var(--pro-max, 72rem); + margin-inline: auto; + padding-inline: var(--openms-page-inline, clamp(1.25rem, 4vw, 2.5rem)); + box-sizing: border-box; +} + +.openms-lib-page--services-support .services-support-application__head { + display: grid; + justify-items: center; + text-align: center; + width: 100%; + max-width: 42rem; + margin: 0 auto; + gap: 0; +} + +.openms-lib-page--services-support .services-support-application__head .openms-lib-resources__eyebrow, +.openms-lib-page--services-support .services-support-application__head .openms-lib-resources__title, +.openms-lib-page--services-support .services-support-application__head .openms-lib-resources__lead { + width: 100%; + max-width: none; + margin-inline: auto; + text-align: center; + justify-self: center; +} + +.openms-lib-page--services-support .services-support-application__head .openms-lib-resources__eyebrow { + justify-content: center; +} + +.openms-lib-page--services-support .services-support-application__head .openms-lib-resources__lead { + margin-top: var(--pro-stack-lead, 0.75rem); + color: var(--openms-text-muted, rgba(var(--openms-navy-rgb), 0.72)); +} + +.openms-lib-page--services-support .services-support-application__form { + width: 100%; + max-width: 48rem; + margin-inline: auto; +} + +@media (max-width: 720px) { + .openms-lib-page--services-support .services-support-application__inner { + padding-inline: var(--openms-page-inline, var(--openms-page-gutter, 0.9rem)); + } +} 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..e0076272 --- /dev/null +++ b/assets/css/site-header.css @@ -0,0 +1,122 @@ +/* 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; + background-color: transparent !important; + border: 2px solid rgba(var(--openms-white-rgb), 0.72) !important; + border-color: rgba(var(--openms-white-rgb), 0.72) !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + } + + .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, + .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, + .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:active, + #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, + #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, + #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:active { + color: var(--openms-white) !important; + background: rgba(var(--openms-white-rgb), 0.08) !important; + background-color: rgba(var(--openms-white-rgb), 0.08) !important; + border-color: rgba(var(--openms-white-rgb), 0.78) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-white-rgb), 0.18) !important; + } +} diff --git a/assets/css/sponsor-us-page.css b/assets/css/sponsor-us-page.css new file mode 100644 index 00000000..9f403377 --- /dev/null +++ b/assets/css/sponsor-us-page.css @@ -0,0 +1,539 @@ +.sponsor-us-page-layout { + --olib-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --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; + min-height: var(--openms-btn-min-height, 2.75rem); + height: auto; + 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: var(--openms-btn-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-btn-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 { + 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: var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + font-weight: var(--openms-section-title-weight, var(--openms-heading-lg-weight)); + line-height: 1.3; + color: var(--openms-section-title-color, var(--openms-navy)); + letter-spacing: normal; + text-transform: uppercase; +} + +.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: min(100%, var(--pro-measure-wide, 58ch)); + width: 100%; + 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: var(--openms-cta-link-weight, 700); + color: var(--openms-cta-link, var(--openms-navy)); + text-decoration: none; +} + +.sponsor-why__link:hover, +.sponsor-why__link:focus-visible { + color: var(--openms-cta-link-hover, var(--openms-blue)); + text-decoration: none; +} + +/* ── Sponsorship tiers ── */ +.sponsor-us-page .sponsor-tiers__grid, +.openms-lib-page--sponsor-us .sponsor-tiers__grid { + margin-top: 0; +} + +.sponsor-us-page .sponsor-tier, +.openms-lib-page--sponsor-us .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: box-shadow 0.2s ease, border-color 0.2s ease; +} + +/* Hover only on the Learn more CTA — not the whole card */ +.sponsor-us-page .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tier__cta { + display: inline-flex; + align-items: center; + justify-content: center; + align-self: flex-start; + margin-top: 0.35rem; + padding: 0.55rem 1.1rem; + border-radius: 999px; + border: 1px solid rgba(var(--openms-navy-rgb), 0.28); + background: rgba(var(--openms-navy-rgb), 0.06); + color: var(--openms-navy); + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.2; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; +} + +@media (hover: hover) and (pointer: fine) { + .sponsor-us-page .sponsor-tier__cta:hover, + .openms-lib-page--sponsor-us .sponsor-tier__cta:hover { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white); + transform: translateY(-1px); + box-shadow: 0 0.35rem 0.9rem rgba(var(--openms-navy-rgb), 0.28); + } +} + +.sponsor-us-page .sponsor-tier__toggle:focus-visible .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tier__toggle:focus-visible .sponsor-tier__cta { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white); + transform: translateY(-1px); + box-shadow: 0 0.35rem 0.9rem rgba(var(--openms-navy-rgb), 0.28); +} + +.sponsor-us-page .sponsor-tier__toggle:active .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tier__toggle:active .sponsor-tier__cta { + transform: translateY(0); + box-shadow: none; +} + +.sponsor-us-page .sponsor-tiers__intro, +.openms-lib-page--sponsor-us .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__cta:hover, + .sponsor-us-page .sponsor-tier__toggle:focus-visible .sponsor-tier__cta, + .sponsor-us-page .sponsor-tier__toggle:active .sponsor-tier__cta, + .openms-lib-page--sponsor-us .sponsor-tier__cta:hover, + .openms-lib-page--sponsor-us .sponsor-tier__toggle:focus-visible .sponsor-tier__cta, + .openms-lib-page--sponsor-us .sponsor-tier__toggle:active .sponsor-tier__cta { + transform: none; + } +} diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index ef8a8b82..67a6edad 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -1,52 +1,690 @@ -/* 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: var(--openms-navbar-dropdown-width, 18rem); + min-width: var(--openms-navbar-dropdown-width, 18rem); + max-width: var(--openms-navbar-dropdown-width, 18rem); + 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: normal; + 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: 1 1 auto; + min-width: 0; + max-width: 100%; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__ext, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__ext { + display: inline; + white-space: nowrap; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label svg.icon, +.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label svg.launch-icon, +.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label svg.external-link-icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label svg.icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label svg.launch-icon, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.has-external-icon .navbar-item__label svg.external-link-icon { + display: inline-block !important; + margin-left: 0.28em; + vertical-align: -0.12em; +} + +.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 (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%; } } -@media only screen and (max-width: 600px) { - .hero-logo { - max-height: 150px; +.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 +692,175 @@ 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) var(--openms-page-inline) 0; + box-sizing: border-box; + font-family: var(--openms-font-body); } -/* ---- Inner wrapper (brand + link grid) ---- */ .footer-inner { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem 2.5rem; + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} + +/* ---- 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-brand { display: flex; - gap: 3rem; + flex-direction: column; align-items: flex-start; + gap: 1rem; + min-width: 0; + max-width: 100%; + overflow: visible; } -/* ---- Brand block ---- */ -.footer-brand { - flex: 0 0 200px; +.footer-brand__intro { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0; + min-width: 0; + max-width: 100%; } -.footer-title { - font-size: 1.75rem; - font-weight: 800; - color: #ffffff; - margin-bottom: 1.5rem; - letter-spacing: -0.3px; +.footer-tagline { + margin: -0.35rem 0 0; + max-width: min(100%, 22rem); + 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); + white-space: normal; +} + +.footer-logo { + display: inline-flex; + align-items: center; +} + +.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); } -/* ---- Partner logo row ---- */ -.footer-partners { +.footer-logo:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 4px; + border-radius: 4px; +} + +.footer-brand__actions { display: flex; flex-wrap: wrap; - gap: 1.25rem; align-items: center; - /* Removed container-level opacity */ + gap: 0.75rem; + max-width: 100%; } -.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-brand__actions .footer-brand-btn { + max-width: 100%; + width: fit-content; + white-space: nowrap; + text-align: center; } -.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-brand-btn.signup-button { + display: inline-flex !important; } -.footer-partners img { - max-height: 36px; - width: auto; - object-fit: contain; - filter: brightness(0) invert(1); - opacity: 0.7; - /* Individual logo is dimmed */ - transition: opacity 0.2s ease; +/* 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; } -.footer-partners a:hover img, -.footer-partners a:focus-visible img { - opacity: 1; - /* Lights up to full brightness on hover/focus */ +.footer-title { + color: var(--openms-white); + margin: 0; } -/* ---- Link columns grid ---- */ -.footer-links { - flex: 1; +.footer-nav { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; + grid-template-columns: repeat(4, minmax(0, max-content)); + justify-content: end; + column-gap: clamp(1.5rem, 3vw, 2.75rem); + row-gap: clamp(0.75rem, 2.5vw, 2rem); + padding-top: clamp(1.25rem, 2.5vw, 2rem); + padding-right: clamp(1.25rem, 4vw, 3rem); + width: 100%; + box-sizing: border-box; + min-width: 0; +} + +.footer-links-area { + display: flex; + flex-direction: column; + gap: clamp(1.25rem, 3vw, 2rem); + min-width: 0; + width: 100%; +} + +.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); + white-space: normal; + overflow-wrap: anywhere; +} + +.footer-link-group { + min-width: 0; } -/* ---- Link list ---- */ .footer-link-group ul { list-style: none; margin: 0; @@ -152,101 +868,484 @@ } .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-text-min); + line-height: 1.35; + 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-sponsors__logos a:hover img, +.footer-sponsors__logos a:focus-visible img { + opacity: 1; +} + +/* ---- Brand social icons (under logo) ---- */ +.footer-brand .footer-socials { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.25rem; + margin-top: 0.25rem; + /* Room for hover lift + icon scale so glyphs are not clipped */ + overflow: visible; + padding-block: 0.35rem; + margin-block: -0.1rem 0; +} + +/* ---- Bottom bar ---- */ +.footer-bottom { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding: 1.25rem 0 1.5rem; + box-sizing: border-box; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem 1.5rem; + text-align: left; +} + +.footer-copyright { + margin: 0; + max-width: 100%; + order: 1; + color: rgba(var(--openms-white-rgb), 0.55); + font-size: var(--openms-text-min); + line-height: 1.5; + white-space: nowrap; +} + +.footer-deploy { + display: inline-flex; + align-items: center; + justify-content: flex-end; + flex-shrink: 0; + order: 2; + margin-left: auto; + margin-right: clamp(1.25rem, 4vw, 3rem); + 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; + overflow: visible; +} + +.footer-socials a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.875rem; + height: 2.875rem; + min-width: 2.875rem; + min-height: 2.875rem; + padding: 0; + color: rgba(var(--openms-white-rgb), 0.72); + border-radius: 0.5rem; + overflow: visible; + transform-origin: center center; + transition: + color 0.2s ease, + background 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; +} + +.footer-socials a:hover, +.footer-socials a:focus-visible { + color: var(--openms-white); + background: rgba(var(--openms-white-rgb), 0.12); + transform: translateY(-2px) scale(1.08); + box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.22); + outline: none; +} + +.footer-socials svg.icon { + display: block; + width: 1.5rem; + height: 1.5rem; + margin: 0 !important; + overflow: visible; + fill: currentColor; + flex-shrink: 0; + transform-origin: center center; + transition: fill 0.2s ease, opacity 0.2s ease; +} + +.footer-socials a svg.icon, +.footer-socials a svg.icon *, +.footer-socials a svg.discord-icon, +.footer-socials a svg.discord-icon *, +.footer-socials a svg.linkedin-icon, +.footer-socials a svg.linkedin-icon *, +.footer-socials a svg.github-icon, +.footer-socials a svg.github-icon *, +.footer-socials a svg.google-scholar-icon, +.footer-socials a svg.google-scholar-icon *, +.footer-socials a svg.google-scholar-icon path, +.footer-socials a svg.google-scholar-icon circle { + fill: rgba(var(--openms-white-rgb), 0.72) !important; + stroke: none !important; + color: rgba(var(--openms-white-rgb), 0.72) !important; + opacity: 1 !important; + transition: fill 0.2s ease, color 0.2s ease; +} + +.footer-socials a:hover svg.icon, +.footer-socials a:focus-visible svg.icon, +.footer-socials a:hover svg.icon *, +.footer-socials a:focus-visible svg.icon *, +.footer-socials a:hover svg.discord-icon, +.footer-socials a:focus-visible svg.discord-icon, +.footer-socials a:hover svg.discord-icon *, +.footer-socials a:focus-visible svg.discord-icon *, +.footer-socials a:hover svg.linkedin-icon, +.footer-socials a:focus-visible svg.linkedin-icon, +.footer-socials a:hover svg.linkedin-icon *, +.footer-socials a:focus-visible svg.linkedin-icon *, +.footer-socials a:hover svg.github-icon, +.footer-socials a:focus-visible svg.github-icon, +.footer-socials a:hover svg.github-icon *, +.footer-socials a:focus-visible svg.github-icon *, +.footer-socials a:hover svg.google-scholar-icon, +.footer-socials a:focus-visible svg.google-scholar-icon, +.footer-socials a:hover svg.google-scholar-icon *, +.footer-socials a:focus-visible svg.google-scholar-icon *, +.footer-socials a:hover svg.google-scholar-icon path, +.footer-socials a:focus-visible svg.google-scholar-icon path, +.footer-socials a:hover svg.google-scholar-icon circle, +.footer-socials a:focus-visible svg.google-scholar-icon circle { + fill: var(--openms-white) !important; + color: var(--openms-white) !important; + opacity: 1 !important; +} + +.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, + bottom 0.2s ease; + z-index: 35; +} + +.back-to-top.is-visible { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.back-to-top.is-raised { + bottom: clamp(4.75rem, 12vw, 5.75rem); +} + +.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: 1100px) { + .footer-nav { + grid-template-columns: repeat(4, minmax(0, 1fr)); + justify-content: stretch; + column-gap: clamp(1rem, 2.5vw, 1.75rem); + padding-right: 0; } - .footer-brand { - flex: unset; + .footer-link-group ul li a { + white-space: normal; + overflow-wrap: anywhere; + } +} + +@media (max-width: 1024px) { + .footer-top { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-brand, + .footer-links-area, + .footer-nav, + .footer-link-group { + min-width: 0; + max-width: 100%; + } + + .footer-tagline { + max-width: none; + white-space: normal; + } + + .footer-nav { + grid-template-columns: repeat(4, minmax(0, 1fr)); + justify-content: stretch; + column-gap: clamp(0.85rem, 2vw, 1.35rem); + row-gap: 1.25rem; + padding-top: clamp(1rem, 2vw, 1.5rem); + padding-right: 0; + } + + .footer-links-area { + gap: 1.25rem; + padding-top: 0; + } +} + +@media (max-width: 768px) { + .footer-redesign { + padding-top: 2.5rem; + padding-inline: var(--openms-page-inline, var(--openms-page-gutter, var(--olib-pad-x, 1.35rem))); + overflow-x: clip; + } + + .footer-inner { + max-width: var(--pro-max); + padding-inline: 0; + } + + .footer-logo img { + max-height: 96px; + max-width: min(100%, 280px); + } + + .footer-tagline { + margin-top: -0.2rem; + font-size: clamp(0.8125rem, 2.8vw, var(--openms-body-size)); + white-space: normal; + } + + .footer-nav { + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-content: stretch; + column-gap: clamp(1rem, 4vw, 1.75rem); + row-gap: clamp(1.25rem, 4vw, 1.75rem); + padding-top: 0.25rem; + padding-right: 0; + } + + .footer-group-heading { + margin-bottom: 0.55rem; + font-size: var(--openms-text-min); + letter-spacing: 0.08em; + } + + .footer-link-group ul li a { + display: flex; + align-items: center; + width: fit-content; + max-width: 100%; + min-height: 2rem; + padding: 0.25rem 0; + margin: 0; + font-size: var(--openms-body-size); + white-space: normal; + overflow-wrap: anywhere; + line-height: 1.35; + } + + .footer-copyright { + font-size: clamp(0.75rem, 2.6vw, var(--openms-text-min)); + white-space: normal; width: 100%; + text-align: center; + order: 2; } - .footer-partners { - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; + .footer-sponsors__logos { + gap: 0.5rem 1rem; + } + + .footer-bottom { + max-width: var(--pro-max); + padding-inline: 0; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.85rem; + text-align: center; + } + + .footer-deploy { + margin-inline: auto; + justify-content: center; + flex-shrink: 0; + order: 1; + } + + .back-to-top.is-raised { + bottom: clamp(5rem, 14vw, 6rem); + } +} + +@media (max-width: 480px) { + .footer-nav { + grid-template-columns: repeat(2, minmax(0, 1fr)); + column-gap: 0.85rem; + row-gap: 1.35rem; } - .footer-links { + .footer-group-heading { + letter-spacing: 0.06em; + } + + .footer-brand__actions { width: 100%; - grid-template-columns: repeat(2, 1fr); - gap: 1.25rem 1rem; } - .footer-link-group ul li a { - text-align: left; + .footer-brand__actions .footer-brand-btn { + width: auto; + } + + .footer-sponsors__logos { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-items: start; } .footer-bottom { - padding: 1.25rem; flex-direction: column; - align-items: flex-start; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; } } @@ -255,4 +1354,700 @@ ============================================= */ .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; + + + 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-page-hero-title-color, var(--openms-navy)); + -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-page-hero-title-color, var(--openms-navy)); + -webkit-text-fill-color: var(--openms-page-hero-title-color, var(--openms-navy)); +} + +[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: 1 1 auto; + min-width: min(100%, 11rem); + justify-content: center; + min-height: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + } +} + +/* 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-family: var(--openms-font-heading); + font-size: var(--openms-page-hero-title-size, calc(var(--openms-heading-xl-size) * 1.25)); + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)); + line-height: 1.25; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-page-hero-title-color, var(--openms-navy)); + 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: calc(var(--openms-heading-xl-size) * 1.18); + } + + [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: calc(var(--openms-heading-xl-size) * 1.05); + line-height: 1.2; + letter-spacing: normal; + } + + [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..f9b5442a --- /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: var(--pro-max, 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..4fa6d3d4 --- /dev/null +++ b/assets/css/typography.css @@ -0,0 +1,172 @@ +/* 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-text-body, 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; +} + +/* Consecutive body paragraphs — 16px between them */ +.content-container p + p, +.markdown p + p, +article p + p, +.openms-lib-page [class$="__lead"] + p, +.openms-lib-page [class$="__lead"] + [class$="__lead"], +.home-page [class$="__lead"] + p, +.home-page [class$="__description"] + p { + margin-top: var(--openms-stack-paragraph, 16px); +} + +/* 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..e663f0f5 --- /dev/null +++ b/assets/css/university-partners.css @@ -0,0 +1,298 @@ +/* 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: var(--pro-max, 75rem); + margin: 0 auto clamp(1.75rem, 3.5vh, 2.5rem); + padding-inline: var(--olib-pad-x); + 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 var(--openms-stack-eyebrow, 12px); + 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: var(--openms-stack-lead, 20px) 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__marquees { + display: flex; + flex-direction: column; + gap: 0.85rem; + width: 100%; +} + +.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__marquee--reverse .uni-partners__track { + animation: uni-partners-marquee-reverse 34s linear infinite; +} + +.uni-partners__row { + display: flex; + align-items: center; + gap: clamp(1.25rem, 3vw, 2.25rem); + padding: 0 var(--olib-pad-x); +} + +.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 { + display: block; + width: auto; + height: 3.25rem; + max-height: 3.25rem; + max-width: 10.5rem; + object-fit: contain; + object-position: center; +} + +.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(-33.333%); + } +} + +@keyframes uni-partners-marquee-reverse { + 0% { + transform: translateX(-33.333%); + } + 100% { + transform: translateX(0); + } +} + +/* Fallback / non-animated layout */ +.uni-partners__static { + display: none; + flex-wrap: wrap; + gap: 0.75rem; + max-width: var(--pro-max, 75rem); + margin: 0 auto; + padding-inline: var(--olib-pad-x); +} + +.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: var(--pro-max, 75rem); + margin: 0 auto; + padding-inline: var(--olib-pad-x); +} + +.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: auto; + max-width: 100%; + height: 3.25rem; + max-height: 3.25rem; + margin-inline: auto; + object-fit: contain; + object-position: center; +} + +@media (prefers-reduced-motion: reduce) { + .uni-partners__track { + animation: none; + transform: none; + } + .uni-partners__marquees, + .uni-partners__marquee { + display: none; + } + .uni-partners__static { + display: flex; + } +} + +@media (max-width: 768px) { + .uni-partners__item { + height: 2.85rem; + min-width: 0; + } + + .uni-partners__item img { + height: 2.65rem; + max-height: 2.65rem; + 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..fa5e2c80 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -1,144 +1,1732 @@ -.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: var(--pro-radius, 1rem); + --webapps-logo-size: 6.75rem; /* brand-mark panel width */ + --webapps-logo-mark: 5.15rem; /* logo artwork inside the panel */ + --webapps-logo-radius: var(--pro-radius, 1rem); + --webapps-logo-bg: + linear-gradient( + 160deg, + rgba(var(--openms-blue-rgb), 0.28) 0%, + rgba(var(--openms-blue-rgb), 0.08) 55%, + transparent 78% + ), + linear-gradient( + 210deg, + rgba(var(--openms-blue-rgb), 0.12) 0%, + transparent 58% + ), + color-mix(in srgb, var(--openms-blue) 10%, var(--openms-white)); + --webapps-logo-bg-hover: + linear-gradient( + 160deg, + rgba(var(--openms-blue-rgb), 0.36) 0%, + rgba(var(--openms-blue-rgb), 0.12) 55%, + transparent 78% + ), + linear-gradient( + 210deg, + rgba(var(--openms-blue-rgb), 0.18) 0%, + transparent 58% + ), + color-mix(in srgb, var(--openms-blue) 14%, var(--openms-white)); + --webapps-card-text-lines: 3; + --webapps-card-pad: clamp(1rem, 2vw, 1.25rem); + --webapps-card-gap: 0; + --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) var(--olib-pad-x); + 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: var(--pro-max, 75rem); + 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-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 var(--openms-stack-eyebrow, 12px); + 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__eyebrow-icon { + display: inline-flex; + line-height: 0; + opacity: 0.9; +} + +.webapps-featured__eyebrow-icon svg { + display: block; + width: 0.875rem; + height: 0.875rem; +} + +.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(--home-title-color, var(--openms-navy)); +} + +.webapps-featured__lead { + margin: var(--openms-stack-lead, 20px) auto 0; + max-width: min(100%, var(--pro-measure-wide, 58ch)); + width: 100%; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--openms-text-muted); + 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 — brand-mark panel + white copy rail */ +.webapps-project-card { + display: flex; + width: 100%; + max-width: 100%; + margin: 0; + height: 100%; +} + +.webapps-project-card__surface { + position: relative; + display: grid; + grid-template-columns: var(--webapps-logo-size) minmax(0, 1fr); + align-items: stretch; + width: 100%; + height: 100%; + padding: 0; + gap: 0; + overflow: hidden; + border-radius: var(--webapps-card-radius); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + background: var(--openms-white); + text-decoration: none; + color: inherit; + box-shadow: none; + transition: border-color 0.22s ease, transform 0.22s ease; +} + +.webapps-project-card__accent { + display: none; +} + +.webapps-project-card__surface:hover, +.webapps-project-card__surface:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.3); + box-shadow: none; + transform: none; +} + +.webapps-project-card__surface:focus-visible { + outline: none; + box-shadow: var(--openms-webapps-focus-ring); +} + +.webapps-project-card__logo-wrap { + display: flex; + align-items: center; + justify-content: center; + align-self: stretch; + box-sizing: border-box; + width: 100%; + min-width: 0; + min-height: 100%; + flex-shrink: 0; + padding: 1rem 0.85rem; + border: none; + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: 0; + background: var(--webapps-logo-bg); + overflow: hidden; + transition: background 0.22s ease, border-color 0.22s ease; +} + +.webapps-project-card__surface:hover .webapps-project-card__logo-wrap, +.webapps-project-card__surface:focus-visible .webapps-project-card__logo-wrap { + background: var(--webapps-logo-bg-hover); + border-right-color: rgba(var(--openms-blue-rgb), 0.16); +} + +.webapps-project-card__logo { + display: block; + width: min(100%, var(--webapps-logo-mark)); + height: min(100%, var(--webapps-logo-mark)); + max-width: var(--webapps-logo-mark); + max-height: var(--webapps-logo-mark); + aspect-ratio: 1; + object-fit: contain; + object-position: center; + transition: transform 0.22s ease; +} + +.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__logo-text { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: min(100%, var(--webapps-logo-mark)); + height: min(100%, var(--webapps-logo-mark)); + max-width: var(--webapps-logo-mark); + max-height: var(--webapps-logo-mark); + padding: 0.35rem; + border-radius: 0.65rem; + background: rgba(var(--openms-white-rgb), 0.72); + text-align: center; + font-family: var(--openms-font-heading); + font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.82rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--openms-navy); + word-break: break-word; + hyphens: auto; +} + +.webapps-project-card__body { + display: flex; + flex-direction: column; + flex: 1 1 auto; + gap: 0.4rem; + min-width: 0; + min-height: 0; + height: 100%; + padding: var(--webapps-card-pad); + text-align: left; + background: var(--openms-white); +} + +.webapps-project-card__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: 0.9375rem; /* 15px */ + font-weight: 500; + line-height: 1.3; + letter-spacing: -0.01em; + color: var(--openms-navy); + transition: color 0.2s ease; } -.swiper-slide img { - width: 95%; +.webapps-project-card__surface:hover .webapps-project-card__name, +.webapps-project-card__surface:focus-visible .webapps-project-card__name { + color: var(--home-link-color, var(--openms-navy)); } -.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-project-card__text { + margin: 0; + flex: 1; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.52; + color: var(--openms-text-muted); + display: -webkit-box; + -webkit-line-clamp: var(--webapps-card-text-lines); + -webkit-box-orient: vertical; + overflow: hidden; } -/* slide-0: FLASHApp */ -.swiper-slide.slide-0 img { - height: 230px; - margin-top: 10px; +.webapps-project-card__text:empty { + display: none; } -.swiper-slide.slide-0 p { - margin-top: 20px; + +.webapps-project-card__cta { + display: inline-flex; + align-items: center; + gap: 0.35rem; + margin-top: auto; + width: fit-content; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.3; + color: var(--home-link-color, var(--openms-navy)); + 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-cta-link-hover, var(--openms-blue)); +} + +.webapps-project-card__surface:hover .webapps-project-card__cta-icon, +.webapps-project-card__surface:focus-visible .webapps-project-card__cta-icon { + transform: translateX(3px); +} + +.webapps-featured__footer { + margin-top: clamp(2rem, 4vh, 2.75rem); + display: flex; + flex-direction: column; + align-items: center; + gap: clamp(1.25rem, 2.5vw, 1.75rem); +} + +.webapps-featured__extras { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(1rem, 2.5vw, 1.5rem); + width: 100%; + max-width: 42rem; +} + +.webapps-featured__extra { + display: grid; + gap: 0.35rem; + text-align: center; +} + +.webapps-featured__extra-link { + display: inline-block; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: var(--openms-cta-link-weight, 700); + color: var(--openms-cta-link, var(--openms-navy)); + text-decoration: none; + transition: color 0.2s ease; +} + +.webapps-featured__extra-desc { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--openms-text-muted); +} + +.webapps-featured__extra-link:hover, +.webapps-featured__extra-link:focus-visible { + color: var(--openms-cta-link-hover, var(--openms-blue)); + outline: none; +} + +.webapps-featured__extra-link:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 3px; + border-radius: 0.125rem; } -/* slide-1: umetaflow */ -.swiper-slide.slide-1 img { +.webapps-featured__show-all { + width: fit-content; + min-width: 0; + max-width: 100%; +} + +.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: fit-content; + max-width: 100%; + min-width: 0; + margin-inline: auto; + } +} + +@media (max-width: 520px) { + .webapps-featured .webapps-featured__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.85rem; + } + + section.webapps-featured { + --webapps-logo-size: 5rem; + --webapps-logo-mark: 3.5rem; + --webapps-card-pad: 0.8rem 0.85rem; + } + + .webapps-project-card__surface { + padding: 0; + gap: 0; + } +} + +@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 .webapps-featured__grid--detail { + grid-template-columns: 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: auto minmax(0, 1fr); + justify-items: stretch; + align-items: start; + gap: clamp(1rem, 2.5vw, 1.35rem); +} + +.webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "links links"; + align-items: start; + column-gap: clamp(1rem, 2.5vw, 1.35rem); + row-gap: 0.55rem; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + display: contents; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + grid-area: logo; + align-self: start; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__name { + grid-area: name; + align-self: start; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__text { + grid-area: text; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__maintainers { + grid-area: maintainers; + margin-top: 0.15rem; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-links { + grid-area: links; + margin-top: 0; +} + +/* Featured Apps — logo left, copy/links right */ +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__main { + display: grid; + grid-template-columns: var(--webapps-logo-size, 6.5rem) minmax(0, 1fr); + align-items: stretch; + column-gap: clamp(0.85rem, 2vw, 1.15rem); + row-gap: 0.4rem; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo-wrap, +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo-wrap--large, +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo-wrap--xlarge { + width: var(--webapps-logo-size, 6.5rem); + height: var(--webapps-logo-size, 6.5rem); + min-width: var(--webapps-logo-size, 6.5rem); + min-height: var(--webapps-logo-size, 6.5rem); + padding: 0.4rem; + margin-inline: 0; + border: none; + border-radius: var(--webapps-logo-radius, var(--pro-radius, 1rem)); + background: var(--webapps-logo-bg, rgba(var(--openms-navy-rgb), 0.04)); + align-self: start; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo, +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo--large, +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__logo--xlarge { + width: 100%; + height: 100%; + max-height: none; + object-fit: contain; +} + +.webapps-featured__grid--detail .webapps-project-detail-card--logo-title .webapps-project-detail-card__body { + gap: 0.4rem; + min-width: 0; + align-self: stretch; +} + +@media (min-width: 900px) { + .webapps-featured .webapps-featured__grid--detail { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .webapps-featured .webapps-featured__grid--detail { + grid-template-columns: 1fr; + } + + /* Match Affiliated Apps: title beside logo; maintainers + buttons below */ + .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "links links"; + justify-content: start; + justify-items: start; + align-items: start; width: 100%; - height: 250px; + max-width: 100%; + margin-inline: 0; + text-align: left; + column-gap: clamp(0.85rem, 2.5vw, 1.15rem); + row-gap: 0.55rem; + } + + .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + display: contents; + } + + .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-links { + justify-content: flex-start; + } + + .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + width: 5.5rem; + height: 5.5rem; + min-width: 5.5rem; + min-height: 5.5rem; + margin-inline: 0; + aspect-ratio: 1; + } + + .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo { + width: 100%; + height: 100%; + max-height: none; + } } -.swiper-slide.slide-1 p { - margin-top: 10px; + +.webapps-project-detail-card { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--webapps-card-radius, var(--pro-radius, 1rem)); + background: var(--openms-white); + box-shadow: none; } -/* slide-2: NuXL */ -.swiper-slide.slide-2 img { - height: 150px; - margin-top: 60px; +.webapps-project-detail-card__main { + display: grid; + grid-template-columns: var(--webapps-logo-size, 6.5rem) minmax(0, 1fr); + gap: var(--webapps-card-gap, 0.75rem) clamp(0.85rem, 2vw, 1.15rem); + padding: var(--webapps-card-pad, clamp(1.1rem, 2.2vw, 1.45rem)); + align-items: start; + flex: 1 1 auto; + min-height: 100%; + box-sizing: border-box; } -.swiper-slide.slide-2 p { - margin-top: 50px; + +.webapps-project-detail-card__logo-wrap, +.webapps-project-detail-card__logo-wrap--text, +.webapps-project-detail-card__logo-wrap--large, +.webapps-project-detail-card__logo-wrap--xlarge, +.webapps-project-detail-card__logo-wrap--wide { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: var(--webapps-logo-size, 6.5rem); + height: var(--webapps-logo-size, 6.5rem); + min-width: var(--webapps-logo-size, 6.5rem); + min-height: var(--webapps-logo-size, 6.5rem); + padding: 0.4rem; + border: none; + border-radius: var(--webapps-logo-radius, var(--pro-radius, 1rem)); + background: var(--webapps-logo-bg, rgba(var(--openms-navy-rgb), 0.04)); + overflow: hidden; } -/* slide-3: MHCQuant */ -.swiper-slide.slide-3 img { - height: 180px; - margin-top: 40px; +.webapps-project-detail-card__logo, +.webapps-project-detail-card__logo--large, +.webapps-project-detail-card__logo--xlarge, +.webapps-project-detail-card__logo--wide { + display: block; + width: 100%; + height: 100%; + max-height: none; + object-fit: contain; + object-position: center; } -.swiper-slide.slide-3 p { - margin-top: 40px; + +.webapps-project-detail-card__logo-text { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 0.35rem; + border-radius: calc(var(--webapps-logo-radius, var(--pro-radius, 1rem)) - 0.15rem); + background: + linear-gradient(160deg, rgba(var(--openms-blue-rgb), 0.12) 0%, transparent 55%), + rgba(var(--openms-navy-rgb), 0.04); + text-align: center; + font-family: var(--openms-font-heading); + font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.82rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--openms-navy); + word-break: break-word; + hyphens: auto; } -/* slide-4: TOPPView-lite */ -.swiper-slide.slide-4 img { - height: 180px; - margin-top: 40px; +.webapps-project-detail-card__body { + display: flex; + flex-direction: column; + gap: 0.4rem; + min-width: 0; + min-height: 0; + height: 100%; } -.swiper-slide.slide-4 p { - margin-top: 40px; + +.webapps-project-detail-card__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: 0.9375rem; /* 15px */ + font-weight: 500; + 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: var(--openms-text-muted); +} + +.webapps-project-detail-card__maintainers { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: var(--openms-text-muted); } -/* slide-5: NASEWEIS */ -.swiper-slide.slide-5 img { - height: 100px; - margin-top: 80px; +.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); } -.swiper-slide.slide-5 p { - margin-top: 80px; + +.webapps-project-detail-card__body > .webapps-project-links { + margin-top: auto; +} + +.webapps-project-links { + display: flex; + flex-wrap: wrap; + gap: var(--openms-btn-gap, 0.75rem); + 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: var(--openms-text-muted); +} + +.webapps-catalog__contact a { + font-weight: var(--openms-content-link-weight, 600); + color: var(--openms-content-link, var(--openms-navy)); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); +} + +.webapps-catalog__contact a:hover, +.webapps-catalog__contact a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: none; +} + +/* 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); +} + +.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: var(--openms-text-muted); +} + +.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: var(--webapps-logo-size, 6.5rem) minmax(0, 1fr); + align-items: stretch; + gap: var(--webapps-card-gap, 0.75rem) clamp(0.85rem, 2vw, 1.15rem); +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap, +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide, +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--large { + width: var(--webapps-logo-size, 6.5rem); + height: var(--webapps-logo-size, 6.5rem); + min-width: var(--webapps-logo-size, 6.5rem); + min-height: var(--webapps-logo-size, 6.5rem); + padding: 0.4rem; + margin-inline: 0; + flex-shrink: 0; + border: none; + border-radius: var(--webapps-logo-radius, var(--pro-radius, 1rem)); + background: var(--webapps-logo-bg, rgba(var(--openms-navy-rgb), 0.04)); +} + +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo, +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide .webapps-project-detail-card__logo, +.webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--large .webapps-project-detail-card__logo { + width: 100%; + height: 100%; + max-width: none; + max-height: none; + object-fit: contain; +} + +/* Affiliated Apps: title + description beside logo; maintainers + buttons below logo */ +.webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "links links"; + align-items: start; + column-gap: clamp(1rem, 2.5vw, 1.35rem); + row-gap: 0.55rem; +} + +.webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + display: contents; +} + +.webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + grid-area: logo; + align-self: start; +} + +.webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__name { + grid-area: name; + align-self: start; +} + +.webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__text { + grid-area: text; } -/* slide-6: StreamSage */ -.swiper-slide.slide-6 img { +.webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__maintainers { + grid-area: maintainers; + margin-top: 0.15rem; +} + +.webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-links { + grid-area: links; + margin-top: 0; +} + +.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: 5.5rem; + height: 5.5rem; + } + + /* Affiliate cards: logo left, title/body right on mobile */ + .webapps-project-detail-card--affiliate .webapps-project-detail-card__main, + .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + justify-items: start; + align-items: start; + text-align: left; + } + + .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "links links"; + column-gap: clamp(0.85rem, 2.5vw, 1.15rem); + row-gap: 0.55rem; + } + + .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + display: contents; + } + + .webapps-project-detail-card--affiliate .webapps-project-detail-card__body, + .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + justify-items: start; + text-align: left; + width: 100%; + } + + .webapps-project-detail-card--affiliate .webapps-project-links, + .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-links { + justify-content: flex-start; + } + + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap, + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide, + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--large, + .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + width: 5.5rem; + height: 5.5rem; + min-width: 5.5rem; + min-height: 5.5rem; + margin-inline: 0; + aspect-ratio: 1; + } + + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo, + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide .webapps-project-detail-card__logo, + .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--large .webapps-project-detail-card__logo { + width: 100%; + height: 100%; + max-height: none; + } +} + +@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); +} + +.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: var(--openms-text-muted); +} + +.webapps-archived__stack { + display: grid; + gap: clamp(1.35rem, 3vw, 2rem); + max-width: min(100%, 44rem); + margin-inline: auto; +} + +.webapps-archived__notice { + padding: 0; + border: none; + border-radius: 0; + background: transparent; +} + +.webapps-archived__notice-title { + margin: 0; + 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: var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)); + 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; + grid-template-columns: auto minmax(0, 1fr); + align-items: start; + column-gap: clamp(1rem, 2.5vw, 1.45rem); + row-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__media { + display: grid; + place-items: center; + align-self: start; + min-width: clamp(5.5rem, 12vw, 8.5rem); + max-width: 9.5rem; +} + +.webapps-archived-entry__main { + display: flex; + flex-direction: column; + gap: 0.65rem; + min-width: 0; +} + +.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); +} + +.webapps-archived-entry__text { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: var(--openms-text-muted); +} + +.webapps-archived-entry__maintainers { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.66); +} + +.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); +} + +.webapps-archived-entry .webapps-project-links { + margin: 0.15rem 0 0; +} + +/* NF-Core archived cards use the same blue app-link pills as Featured Apps */ + +.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); +} + +.webapps-archived__revival-copy { + flex: 1 1 16rem; + min-width: 0; +} + +.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: var(--openms-text-muted); +} + +.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); +} + +.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: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); +} + +@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 { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + flex-direction: row; width: 100%; - height: 250px; + gap: 0.55rem; + } + + .webapps-archived__revival-actions .openms-lib-btn { + width: 100%; + min-width: 0; + 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: var(--pro-max, 75rem); + 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; } -.swiper-slide.slide-6 p { - margin-top: 10px; + +.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; } -.swiper-button-prev, -.swiper-button-next { - color: #000080; - position: absolute; - top: 40%; +.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; } -@media (max-width: 1349px) { - .swiper { - width: 1000px; - } +.webapps-archived--editorial .webapps-archived__content { + display: grid; + gap: clamp(1.25rem, 3vw, 1.75rem); + min-width: 0; } -@media (max-width: 999px) { - .swiper { - width: 700px; - } +.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); } -@media (max-width: 699px) { - .swiper { - width: 350px; - } - - .swiper-slide p { - font-size: 15px; - } +.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; +} + +.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; + } -} \ No newline at end of file + .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); +} + +.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: var(--openms-text-muted); +} + +.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; +} + +.webapps-contribute__action-item { + display: flex; + min-width: 0; +} + +.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; +} + +.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; +} + +.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; +} + +.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..cd92fb2f --- /dev/null +++ b/assets/css/z-contribute-page.css @@ -0,0 +1,889 @@ +/* Contribute — layout aligned with /openms-lib/ (section rhythm, toolkit, resource cards) */ + +.contribute-page-layout { + --olib-bg-soft: #f4f6f9; + --olib-text-muted: var(--openms-text-muted); + --contribute-max: var(--pro-max, 75rem); + --contribute-pad: var(--pro-pad); + --contribute-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.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: + var(--contribute-section-y) + var(--openms-page-inline) + calc(var(--openms-btn-glow-size, 6px) + 0.5rem); + 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: var(--openms-page-hero-title-size, calc(var(--openms-heading-xl-size) * 1.25)); + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)); + line-height: 1.25; + letter-spacing: normal; + text-align: center; + text-transform: uppercase; + color: var(--openms-page-hero-title-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-page-hero-title-color, var(--openms-navy)); + -webkit-text-fill-color: var(--openms-page-hero-title-color, var(--openms-navy)); + 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: var(--openms-text-muted); +} + +.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) + var(--openms-page-inline); + 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: var(--openms-text-muted) !important; +} + +.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: var(--openms-card-icon-chip, 2rem); + height: var(--openms-card-icon-chip, 2rem); + border-radius: 0.6rem; + font-size: var(--openms-card-icon-glyph, 0.85rem); + 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: var(--openms-text-muted); +} + +.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: var(--openms-cta-link-weight, 700); + line-height: 1.4; + color: var(--openms-cta-link, var(--openms-navy)); + text-decoration: none !important; + transition: gap 0.2s ease, color 0.2s ease; +} + +.contribute-channel__link { + color: var(--openms-cta-link, 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: var(--openms-cta-link-hover, var(--openms-blue)) !important; + outline: none; +} + +/* ── Ways (toolkit + polished contribution cards) ── */ +.contribute-ways { + padding: + var(--contribute-section-y) + var(--openms-page-inline); + 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.65rem; + margin: auto 0 0; + padding: 0.5rem 0 0; + list-style: none; +} + +.contribute-project-links li { + margin: 0; +} + +.contribute-project-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.45rem; + width: 100%; + box-sizing: border-box; + padding: 0.7rem 0.55rem 0.65rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.22); + border-radius: 0.85rem; + background: rgba(var(--openms-white-rgb), 0.08); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-white) !important; + text-decoration: none !important; + text-align: center; + line-height: 1.25; + transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; +} + +.contribute-project-link__icon { + display: grid; + place-items: center; + width: 100%; + max-width: 7.5rem; + height: 2.75rem; +} + +.contribute-project-link__icon img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.contribute-project-link:hover, +.contribute-project-link:focus-visible { + border-color: rgba(var(--openms-white-rgb), 0.5); + background: rgba(var(--openms-white-rgb), 0.14); + color: var(--openms-white) !important; + transform: translateY(-2px); + outline: none; +} + +.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-content-link, var(--openms-navy)); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); +} + +.contribute-way__text a:hover, +.contribute-way__text a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: none; +} + +.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: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); +} + +.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: var(--openms-btn-gap, 0.75rem); + 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: var(--openms-cta-link-weight, 700); + line-height: 1.4; + color: var(--openms-cta-link, var(--openms-navy)) !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-cta-link-hover, var(--openms-blue)) !important; + outline: none; +} + +/* ── Code of Conduct (full-bleed CTA band like openms-lib) ── */ +.contribute-conduct { + padding: + clamp(2.5rem, 5vw, 3.5rem) + var(--openms-page-inline); + 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: calc(var(--openms-heading-xl-size) * 1.18); + } +} + +@media (max-width: 720px) { + .contribute-channels__grid, + .contribute-ways__grid, + .contribute-ways__more { + grid-template-columns: 1fr; + } + + .contribute-project-links { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__actions { + flex-direction: row; + flex-wrap: wrap; + gap: 0.65rem; + } + + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__actions .openms-lib-btn { + flex: 1 1 auto; + min-width: min(100%, 11rem); + white-space: nowrap; + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + min-height: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding); + } +} + +@media (max-width: 480px) { + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title { + font-size: calc(var(--openms-heading-xl-size) * 1.05); + line-height: 1.2; + letter-spacing: normal; + } + + .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-link:hover, + .contribute-project-link: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..834e8eda --- /dev/null +++ b/assets/css/z-openms-lib-hub.css @@ -0,0 +1,2552 @@ +/* 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: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + /* Mirror :root --pro-max. Never redefine --pro-max on this element to + var(--hub-wide-max) — that creates a circular custom property. */ + --hub-wide-max: var(--pro-max, 75rem); + --olib-max: var(--pro-max, 75rem); + --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) var(--openms-page-inline) + 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-family: var(--openms-font-heading); + font-size: var(--openms-page-hero-title-size, calc(var(--openms-heading-xl-size) * 1.25)); + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)); + line-height: 1.25; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-page-hero-title-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: var(--openms-page-hero-title-color, var(--openms-navy)); +} + +.openms-lib-page--hub .openms-lib-hero__accent--warm { + color: var(--openms-page-hero-title-color, var(--openms-navy)); +} + +.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); + /* Clip decorative reveal motion by default — form pages override to visible */ + overflow: hidden; +} + +.openms-lib-page--hub.openms-lib-page--contact .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--fellowship .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--services-support .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--donate .openms-lib-page__body > .openms-lib-page__anchor { + overflow: visible; +} + +.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) var(--openms-page-inline); + 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 — soft band between white Overview / Get started ── + Anchors force transparent !important; paint the section inside instead. */ +.openms-lib-page--hub.openms-lib-page--openms-lib #topp-tools > .openms-lib-topp-split { + background: + radial-gradient(ellipse 70% 60% at 0% 50%, rgba(var(--openms-blue-rgb), 0.08), transparent 62%), + #f4f7fb; +} + +.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) var(--openms-page-inline); + 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: var(--openms-btn-gap, 0.75rem); + 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: calc(var(--openms-heading-xl-size) * 1.05); + line-height: 1.2; + } + + .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: wrap; + align-items: center; + justify-content: center; + gap: 0.65rem; + } + + .openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn { + width: auto; + flex: 1 1 auto; + min-width: min(100%, 11rem); + justify-content: center; + white-space: nowrap; + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + min-height: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding); + } + + /* openms-lib only: save horizontal space so all three buttons fit on one row. + Keep the Python glyph on pyOpenMS / pyopenms_viz (single Install CTA). */ + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-hero__actions + .openms-lib-btn__platforms { + display: none; + } + + .openms-lib-page--hub.openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn__platforms, + .openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn__platforms { + display: inline-flex !important; + align-items: center; + visibility: visible; + } + + .openms-lib-page--hub.openms-lib-page--pyopenms-viz .openms-lib-hero__actions .openms-lib-btn { + min-height: var(--openms-btn-min-height, 2.75rem); + padding: var(--openms-btn-padding); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + } +} + +@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) var(--openms-page-inline); + 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; +} + +@media (max-width: 720px) { + .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 { + padding-inline: 0; + } + + .openms-lib-page--hub.openms-lib-page--webapps .webapps-featured, + .openms-lib-page--hub.openms-lib-page--webapps .webapps-affiliates, + .openms-lib-page--hub.openms-lib-page--webapps .webapps-archived, + .openms-lib-page--hub.openms-lib-page--featured-pro .webapps-featured, + .openms-lib-page--hub.openms-lib-page--featured-pro .webapps-affiliates, + .openms-lib-page--hub.openms-lib-page--featured-pro .webapps-archived { + padding-inline: var(--olib-pad-x); + } +} + +.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: none; + background: transparent; +} + +.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: var(--pro-max, 75rem); +} + +.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) var(--openms-page-inline); + 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 inherit hub width (same as homepage --home-max) */ + +/* ── 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-family: var(--openms-font-heading); + font-size: var(--openms-page-hero-title-size, calc(var(--openms-heading-xl-size) * 1.25)); + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)); + line-height: 1.25; + letter-spacing: normal; + text-align: center; + text-transform: uppercase; + color: var(--openms-page-hero-title-color, var(--openms-navy)); + 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: calc(var(--openms-heading-xl-size) * 1.18); + } + + .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: calc(var(--openms-heading-xl-size) * 1.05); + line-height: 1.2; + letter-spacing: normal; + } + + .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..730be13e --- /dev/null +++ b/assets/css/z-openms-lib-pro.css @@ -0,0 +1,17848 @@ +.openms-lib-page--hub.openms-lib-page--openms-lib { + /* Width tokens inherit from :root (brand-palette responsive --pro-max) */ + --pro-pad:var(--olib-pad-x, clamp(1.25rem, 5vw, 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:var(--olib-bg-soft, #f4f7fb); + --pro-check:0.55rem; + --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:58ch; + --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-text, var(--openms-navy)); + --pro-text-muted:var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)); + --pro-text-soft:var(--openms-text-soft, rgba(var(--openms-dark-rgb), 0.55)); + --olib-text-muted:var(--openms-text-muted, var(--pro-text-muted)); + --pro-eyebrow:var(--openms-text-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); + --pro-link:var(--openms-content-link, var(--openms-navy)); + --pro-card-title:var(--openms-card-title-color, rgba(var(--openms-dark-rgb), 0.82)); + --pro-text-on-dark:var(--openms-text-muted-on-dark, rgba(255, 255, 255, 0.72)); + --pro-kicker-on-dark:var(--openms-text-soft-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 +} +.openms-lib-page--openms-lib { + /* Keep page tokens in sync with :root shell; don’t rebind --pro-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:var(--olib-bg-soft, #f4f7fb); + --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:58ch; + --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-text, var(--openms-navy)); + --pro-text-muted:var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)); + --pro-text-soft:var(--openms-text-soft, rgba(var(--openms-dark-rgb), 0.55)); + --olib-text-muted:var(--openms-text-muted, var(--pro-text-muted)); + --pro-eyebrow:var(--openms-text-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); + --pro-link:var(--openms-content-link, var(--openms-navy)); + --pro-card-title:var(--openms-card-title-color, rgba(var(--openms-dark-rgb), 0.82)); + --pro-text-on-dark:var(--openms-text-muted-on-dark, rgba(255, 255, 255, 0.72)); + --pro-kicker-on-dark:var(--openms-text-soft-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 +} +.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(2rem,4.5vw,3rem); + background:radial-gradient(ellipse 70% 55% at 50% -10%,rgba(var(--openms-blue-rgb),.12),transparent 60%),radial-gradient(ellipse 45% 40% at 100% 20%,rgba(var(--openms-navy-rgb),.05),transparent 55%),radial-gradient(ellipse 40% 35% at 0% 80%,rgba(var(--openms-blue-rgb),.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:var(--pro-hero-content-max, 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:.4rem; + margin:0 auto var(--pro-stack-eyebrow); + padding:0; + border:none; + border-radius:0; + background:0 0; + font-size:clamp(.72rem,.58rem + .55vw,.82rem); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--pro-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); + 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.2; + letter-spacing:-.02em; + text-align:center; + text-transform:none; + text-wrap:balance; + color:var(--pro-text, var(--openms-navy)) +} +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__accent--warm, +.openms-lib-page--openms-lib .openms-lib-hero__accent--warm { + color:var(--openms-orange) +} +.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) +} +.openms-lib-page--openms-lib .openms-lib-hero__code-chip { + display:inline-flex; + align-items:center; + margin-left:.35rem; + padding:.12rem .55rem; + vertical-align:baseline; + border:1px solid rgba(var(--openms-navy-rgb),.14); + border-radius:.55rem; + background:rgba(var(--openms-navy-rgb),.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; + background:0 0; + font-family:var(--openms-font-mono); + font-size:.95em; + font-weight:600; + color:var(--openms-blue); + animation:olib-viz-typing 1.6s steps(9,end).5s backwards,olib-viz-caret .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:initial + } + +} +@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) +} +.openms-lib-page--openms-lib .openms-lib-btn { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.35rem; + width:fit-content; + min-height:var(--openms-btn-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-btn-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-lib-page--openms-lib .openms-lib-developers__platform-btn { + min-height:2.35rem; + padding:.45rem .85rem; + font-size:.82rem; + gap:.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:0 0; + background-color:initial; + 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-developers__cite-actions .openms-lib-btn--outline:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-actions .openms-lib-btn--outline:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite-actions .openms-lib-btn--outline:active, +.openms-lib-page--openms-lib .openms-lib-developers__cite-actions .openms-lib-btn--outline:hover, +.openms-lib-page--openms-lib .openms-lib-developers__cite-actions .openms-lib-btn--outline:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__cite-actions .openms-lib-btn--outline:active, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-btn--outline:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-btn--outline:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-btn--outline:active, +.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-btn--outline:hover, +.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-btn--outline:focus-visible, +.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-btn--outline: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--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:0 0; + background-color:initial; + 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) +} +.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--install .openms-lib-btn__platforms .fa-windows, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-apple, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-linux, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fab, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-windows, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-apple, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-linux, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fab, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa { + color:#fff!important +} +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa path, +.openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa path { + fill:currentColor!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 +} +.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:0 0; + background-color:initial; + 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:0 0; + background-color:initial; + 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) +} +.openms-lib-page--openms-lib .openms-lib-cta-band__doc-btn { + border-color:rgba(var(--openms-white-rgb),.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:0 0!important; + background-color:initial!important; + border-color:rgba(var(--openms-white-rgb),.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 +} +.openms-lib-page--openms-lib .openms-lib-page__body>.openms-lib-page__anchor { + padding-inline:var(--openms-page-inline) +} +.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:.4rem; + margin:0 0 var(--pro-stack-eyebrow); + padding:0; + border:none; + border-radius:0; + background:0 0; + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--pro-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); + 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) +} +.openms-lib-page--openms-lib .openms-lib-about__lead a, +.openms-lib-page--openms-lib .openms-lib-topp-split__lead a, +.openms-lib-page--openms-lib .openms-lib-resources__lead a, +.openms-lib-page--openms-lib .openms-lib-block__lead a, +.openms-lib-page--openms-lib .openms-lib-developers__lead a, +.openms-lib-page--openms-lib .openms-lib-hero__lead a, +.openms-lib-page--openms-lib .openms-lib-about__tile-text a, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-text a, +.openms-lib-page--openms-lib .openms-lib-resources__item-text a, +.openms-lib-page--openms-lib .openms-lib-list__text a { + color:var(--openms-content-link, var(--pro-link, var(--openms-navy))); + font-weight:var(--openms-content-link-weight, 600); + text-decoration:none; + text-underline-offset:var(--openms-content-link-underline-offset, 0.12em) +} +.openms-lib-page--openms-lib .openms-lib-about__lead a:hover, +.openms-lib-page--openms-lib .openms-lib-topp-split__lead a:hover, +.openms-lib-page--openms-lib .openms-lib-resources__lead a:hover, +.openms-lib-page--openms-lib .openms-lib-block__lead a:hover, +.openms-lib-page--openms-lib .openms-lib-developers__lead a:hover, +.openms-lib-page--openms-lib .openms-lib-hero__lead a:hover, +.openms-lib-page--openms-lib .openms-lib-about__tile-text a:hover, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-text a:hover, +.openms-lib-page--openms-lib .openms-lib-resources__item-text a:hover, +.openms-lib-page--openms-lib .openms-lib-list__text a:hover, +.openms-lib-page--openms-lib .openms-lib-about__lead a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-topp-split__lead a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-resources__lead a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-block__lead a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__lead a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-hero__lead a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-about__tile-text a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-text a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-resources__item-text a:focus-visible, +.openms-lib-page--openms-lib .openms-lib-list__text a:focus-visible { + color:var(--openms-content-link-hover, var(--openms-blue)); + text-decoration:underline; + outline:none +} +.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) +} +.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 +} +.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-resources__feature-title, +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-name, +.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, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-title { + margin:0; + font-family:var(--openms-font-heading); + font-size:var(--openms-card-title-size, clamp(1rem,1.4vw,1.1rem)); + font-weight:700; + line-height:1.3; + letter-spacing:normal; + color:var(--openms-card-title-color, var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82))) +} +.openms-lib-page--openms-lib .openms-lib-resources__feature-title, +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-name { + color:var(--openms-white) +} +.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),.72) +} +.openms-lib-page--openms-lib .openms-lib-developers__lead { + color:var(--pro-text-muted) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--webapps-pro):not(.openms-lib-page--research-partnerships):not(.openms-lib-page--developer-retreat):not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro) .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) +} +.openms-lib-page--openms-lib .fa-python { + color:#3776ab!important +} +.openms-lib-page--openms-lib .fa-discord { + color:#5865f2!important +} +.openms-lib-page--openms-lib .fa-github { + color:#181717!important +} +.openms-lib-page--openms-lib .fa-windows { + color:#0078d4!important +} +.openms-lib-page--openms-lib .fa-apple { + color:#555!important +} +.openms-lib-page--openms-lib .fa-linux { + color:#fcc624!important +} +.openms-lib-page--openms-lib .fa-docker { + color:#2496ed!important +} +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-icon .fa-discord, +.openms-lib-page .openms-lib-resources__help-action-icon .fa-discord, +.openms-lib-page .openms-lib-resources__assist-icon .fa-discord { + color:#5865f2!important +} +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-icon .fa-github, +.openms-lib-page .openms-lib-resources__help-action-icon .fa-github, +.openms-lib-page .openms-lib-resources__assist-icon .fa-github { + color:#181717!important +} +.openms-lib-page .openms-lib-resources__assist-btn.openms-lib-btn--primary .fa-discord, +.openms-lib-page .openms-lib-resources__assist-btn.openms-lib-btn--primary .fa-github { + color:#fff!important +} +.openms-lib-page .openms-lib-resources__assist-btn.openms-lib-btn--ghost .fa-github { + color:var(--openms-blue)!important +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-developers__route-icon .fa-github, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-developers__platforms .openms-lib-btn--ghost .fa-github { + color:var(--openms-blue)!important +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-developers__platforms .openms-lib-btn--primary .fa-github { + color:#fff!important +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-developers__platforms .fa-windows { + color:#0078d4!important +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-developers__platforms .fa-apple { + color:#181717!important +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-developers__platforms .fa-linux { + color:#fcc624!important +} +.openms-lib-page--openms-lib .openms-lib-btn--primary .fa-windows, +.openms-lib-page--openms-lib .openms-lib-btn--install .fa-windows, +.openms-lib-page--openms-lib .openms-lib-btn--primary .fa-apple, +.openms-lib-page--openms-lib .openms-lib-btn--install .fa-apple, +.openms-lib-page--openms-lib .openms-lib-btn--primary .fa-linux, +.openms-lib-page--openms-lib .openms-lib-btn--install .fa-linux, +.openms-lib-page--openms-lib .openms-lib-btn--install .openms-lib-btn__platforms .fab, +.openms-lib-page--openms-lib .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa { + color:#fff!important +} +.openms-lib-page--openms-lib .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa path { + fill:currentColor!important +} +.openms-lib-page--openms-lib .openms-lib-btn--primary .fa-docker, +.openms-lib-page--openms-lib .openms-lib-btn--install .fa-docker { + color:#2496ed!important +} +.openms-lib-page--openms-lib .openms-lib-developers__route--build .fa-github, +.openms-lib-page--openms-lib .openms-lib-developers__platforms .fa-github { + color:#181717!important +} +.openms-lib-page--openms-lib .openms-lib-developers__platforms .fa-book-open { + color:var(--openms-navy)!important +} +.openms-lib-page--openms-lib .openms-lib-developers__platform-btn .fa-windows { + color:#0078d4!important +} +.openms-lib-page--openms-lib .openms-lib-developers__platform-btn .fa-apple { + color:#555!important +} +.openms-lib-page--openms-lib .openms-lib-developers__platform-btn .fa-linux { + color:#fcc624!important +} +.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:var(--openms-card-icon-chip, 2rem); + height:var(--openms-card-icon-chip, 2rem); + border-radius:.6rem; + font-size:var(--openms-card-icon-glyph, 0.85rem) +} +.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) +} +.openms-lib-page--openms-lib #what-is-openms { + background:var(--openms-white) +} +.openms-lib-page--openms-lib #topp-tools { + background:var(--pro-band-soft); + color:inherit +} +.openms-lib-page--openms-lib #getting-started { + background:var(--openms-white) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-block--developers { + background:var(--pro-band-soft); + color:var(--openms-navy) +} +.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:clamp(2rem,4.5vw,3.25rem) +} +.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,.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:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--research-partnerships):not(.openms-lib-page--developer-retreat) .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--benefits .openms-lib-about__head { + grid-template-columns:1fr; + justify-items:start; + text-align:left; + max-width:min(100%,42rem); + margin-inline:0 +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__inner { + gap:var(--pro-head-to-content) +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__head-copy { + justify-items:start +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__title, +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__lead { + text-align:left +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__lead { + margin-top:var(--pro-stack-lead); + max-width:36rem +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__eyebrow { + justify-content:flex-start +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits { + list-style:none; + margin:0; + padding:0; + display:grid; + grid-template-columns:repeat(4,minmax(0,1fr)); + column-gap:0; + row-gap:0; + width:100%; + border:none; + border-radius:0; + background:transparent; + box-sizing:border-box +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit { + display:flex; + flex-direction:column; + align-items:flex-start; + gap:.65rem; + margin:0; + padding:0; + border:none; + min-width:0 +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit-title { + text-wrap:balance +} +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit-text { + margin:0; + font-family:var(--openms-font-body); + font-size:var(--openms-body-size); + line-height:1.6; + color:rgba(var(--openms-dark-rgb),.72); + text-wrap:pretty +} +@media(max-width:960px) { + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits { + grid-template-columns:repeat(2,minmax(0,1fr)); + padding:0 + } + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit { + align-items:flex-start; + text-align:left + } + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:first-child { + padding-left:var(--openms-num-strip-pad-x, 0.85rem) + } + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit-num, + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit-title, + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit-text { + text-align:left; + width:100% + } + +} +@media(max-width:560px) { + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits { + grid-template-columns:repeat(2,minmax(0,1fr)); + column-gap:0; + row-gap:0; + padding:0 + } + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit { + align-items:flex-start; + text-align:left; + gap:0.45rem + } + +} +.openms-lib-page--openms-lib .openms-lib-about--list .openms-lib-about__head { + grid-template-columns:1fr; + gap:0; + align-items:start; + max-width:min(100%,40rem) +} +.openms-lib-page--openms-lib .openms-lib-about--list .openms-lib-about__lead { + margin-top:var(--pro-stack-lead); + max-width:var(--pro-measure) +} +.openms-lib-page--openms-lib .openms-lib-about--list .openms-lib-about__list { + list-style:none; + margin:0; + padding:0; + display:flex; + flex-direction:column; + width:100%; + max-width:min(100%,44rem); + border-top:1px solid var(--pro-line) +} +.openms-lib-page--openms-lib .openms-lib-about--list .openms-lib-about__list-item { + display:grid; + grid-template-columns:auto minmax(0,1fr); + gap:.85rem 1.15rem; + align-items:baseline; + margin:0; + padding:1.05rem 0 1.05rem .15rem; + border-bottom:1px solid var(--pro-line) +} +.openms-lib-page--openms-lib .openms-lib-about--list .openms-lib-about__list-num { + margin:0 +} +.openms-lib-page--openms-lib .openms-lib-about--list .openms-lib-about__list-copy { + margin:0; + font-size:var(--openms-body-size-lg); + line-height:1.55; + color:rgba(var(--openms-dark-rgb),.78) +} +.openms-lib-page--openms-lib .openms-lib-about__tile { + position:relative; + display:flex; + flex-direction:column; + align-items:flex-start; + gap:.2rem; + min-height:100%; + padding:var(--pro-card-pad); + text-align:left; + transition:border-color .2s ease,box-shadow .2s ease,transform .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 { + margin-bottom:.2rem +} +.openms-lib-page--openms-lib .openms-lib-about__tile-text { + max-width:none; + margin-top:0 +} +.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:grid; + grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr); + gap:clamp(1.5rem,3.5vw,2.75rem); + align-items:center; + width:100%; + max-width:var(--pro-max); + margin-inline:auto; + padding-inline:0; + box-sizing:border-box +} +.openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__intro { + display:grid; + justify-items:start; + gap:0; + width:100%; + max-width:min(100%,28rem); + min-width:0; + text-align:left +} +.openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__title { + max-width:none; + font-size:clamp(1.7rem, 4.2vw, 2.65rem); + line-height:1.18; + text-align:left; + text-wrap:balance +} +.openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__lead { + margin-top:var(--pro-stack-lead); + max-width:38ch; + text-align:left; + color:var(--pro-text-muted); + text-wrap:pretty +} +.openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__cta { + margin-top:var(--pro-stack-actions); + justify-self:start +} +.openms-lib-page--openms-lib .openms-lib-topp-split__cards { + list-style:none; + margin:0; + padding:0; + display:grid; + grid-template-columns:repeat(3,minmax(0,1fr)); + gap:clamp(.75rem,1.6vw,1rem); + width:100%; + min-width:0; + align-items:stretch +} +.openms-lib-page--openms-lib .openms-lib-topp-split__card { + display:flex; + flex-direction:column; + align-items:flex-start; + gap:.85rem; + margin:0; + padding:clamp(1.25rem, 3vw, 1.85rem) clamp(1.15rem, 2.5vw, 1.55rem); + min-width:0; + width:100%; + min-height:100%; + height:100%; + border:1px solid var(--pro-line); + border-radius:var(--pro-radius); + background:var(--openms-white); + box-shadow:var(--pro-shadow); + transition:border-color .2s ease,box-shadow .2s ease,transform .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 { + border-color:var(--pro-line-strong); + box-shadow:var(--pro-shadow-hover) +} +.openms-lib-page--openms-lib .openms-lib-topp-split__card.is-revealed:hover, +.openms-lib-page--openms-lib .openms-lib-topp-split__card.is-revealed:focus-within { + /* Keep reveal end-state; do not lift or reflow height */ + transform:translate(0,0) scale(1) +} +.openms-lib-page--openms-lib .openms-lib-topp-split__card-icon { + display:grid; + place-items:center; + width:1em; + height:1em; + border-radius:0; + background:0 0; + color:rgba(var(--openms-blue-rgb),.42); + font-size:var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + line-height:1 +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card-icon .fab, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-icon .fas, +.openms-lib-page--openms-lib .openms-lib-topp-split__card-icon .svg-inline--fa { + color:rgba(var(--openms-blue-rgb),.42)!important; + font-size:1em; + width:1em; + height:1em +} + +.openms-lib-page--openms-lib .openms-lib-topp-split__card-icon .svg-inline--fa path { + fill:currentColor!important +} +.openms-lib-page--openms-lib .openms-lib-topp-split__card-title { + text-wrap:balance +} +.openms-lib-page--openms-lib .openms-lib-topp-split__card-text { + margin:0; + flex:auto; + font-size:clamp(0.95rem, 1.8vw, 1.05rem); + line-height:1.55; + color:rgba(var(--openms-dark-rgb),.72); + text-wrap:pretty +} +.openms-lib-page--openms-lib .openms-lib-topp-split__card-link { + display:inline-flex; + align-items:center; + gap:.3rem; + margin-top:auto; + font-size:var(--openms-text-min); + font-weight:700; + color:var(--pro-link, var(--openms-navy))!important; + text-decoration:none; + transition:gap .2s ease,color .2s ease +} +.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 { + color:var(--pro-link, var(--openms-navy))!important; + outline:none +} + +/* Tablet: stack intro above cards, keep 3-up if space allows */ +@media(max-width:1100px) { + .openms-lib-page--openms-lib .openms-lib-topp-split__inner { + grid-template-columns:1fr; + gap:var(--pro-head-to-content); + align-items:stretch + } + .openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__intro { + max-width:min(100%,40rem); + margin-inline:auto; + justify-items:center; + text-align:center + } + .openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__title, + .openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__lead { + max-width:min(100%,36rem); + text-align:center; + margin-inline:auto + } + .openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__cta { + justify-self:center + } + .openms-lib-page--openms-lib .openms-lib-topp-split__cards { + grid-template-columns:repeat(3,minmax(0,1fr)); + width:100%; + max-width:100% + } +} + +/* Narrow tablet / large phone: one card per row, full width */ +@media(max-width:900px) { + .openms-lib-page--openms-lib .openms-lib-topp-split__cards { + grid-template-columns:1fr; + width:100%; + max-width:100%; + gap:0.85rem + } + .openms-lib-page--openms-lib .openms-lib-topp-split__card { + width:100%; + max-width:none + } +} + +@media(max-width:560px) { + .openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__title { + font-size:clamp(1.55rem, 7.5vw, 2rem); + max-width:100% + } + .openms-lib-page--openms-lib .openms-lib-topp-split--cards .openms-lib-topp-split__lead { + max-width:100% + } + .openms-lib-page--openms-lib .openms-lib-topp-split__card { + padding:1.25rem 1.15rem + } +} +.openms-lib-page .openms-lib-resources--explore { + padding-block:var(--pro-section-y) +} +.openms-lib-page .openms-lib-resources--explore .openms-lib-resources__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-resources--explore .openms-lib-resources__head { + display:grid; + justify-items:center; + max-width:min(100%,40rem); + margin-inline:auto; + text-align:center +} +.openms-lib-page .openms-lib-resources--explore .openms-lib-resources__eyebrow { + justify-content:center +} +.openms-lib-page .openms-lib-resources--explore .openms-lib-resources__title, +.openms-lib-page .openms-lib-resources--explore .openms-lib-resources__lead { + text-align:center +} +.openms-lib-page .openms-lib-resources--explore .openms-lib-resources__lead { + margin-top:var(--pro-stack-lead); + max-width:36rem +} +.openms-lib-page .openms-lib-resources__explore-grid { + list-style:none; + margin:0; + padding:0; + display:grid; + grid-template-columns:repeat(3,minmax(0,1fr)); + gap:clamp(.85rem,2vw,1.25rem); + align-items:stretch +} +.openms-lib-page .openms-lib-resources__explore-item { + margin:0; + min-width:0; + display:flex +} +.openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child) { + grid-template-columns:repeat(6,minmax(0,1fr)) +} +.openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item { + grid-column:span 2 +} +.openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item:nth-child(4) { + grid-column:2/span 2 +} +.openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item:nth-child(5) { + grid-column:4/span 2 +} +.openms-lib-page .openms-lib-resources__explore-card { + display:flex; + flex-direction:column; + align-items:flex-start; + gap:.65rem; + width:100%; + height:100%; + padding:1.55rem 1.35rem; + border:1px solid var(--pro-line); + border-radius:var(--pro-radius); + background:var(--openms-white); + box-shadow:var(--pro-shadow); + color:inherit; + text-decoration:none; + transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease +} +.openms-lib-page .openms-lib-resources__explore-card:hover, +.openms-lib-page .openms-lib-resources__explore-card:focus-visible { + border-color:var(--pro-line-strong); + box-shadow:var(--pro-shadow-hover); + transform:none; + min-height:0; + height:100%; + max-height:none; + outline:none +} +.openms-lib-page .openms-lib-resources__explore-icon { + display:grid; + place-items:center; + width:1em; + height:1em; + color:var(--openms-blue); + font-size:var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + line-height:1 +} +.openms-lib-page .openms-lib-resources__explore-icon .fab, +.openms-lib-page .openms-lib-resources__explore-icon .fas, +.openms-lib-page .openms-lib-resources__explore-icon .svg-inline--fa { + font-size:1em; + width:1em; + height:1em +} +.openms-lib-page .openms-lib-resources__explore-tag { + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.06em; + text-transform:uppercase; + color:var(--pro-text-soft) +} +.openms-lib-page--openms-lib .openms-lib-resources__explore-title, +.openms-lib-page .openms-lib-resources__explore-title { + margin:0; + font-family:var(--openms-font-heading); + font-size:1.2rem; + font-weight:700; + line-height:1.25; + color:var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.openms-lib-page .openms-lib-resources__explore-text { + margin:0; + flex:auto; + font-size:.98rem; + line-height:1.55; + color:rgba(var(--openms-dark-rgb),.72) +} +.openms-lib-page .openms-lib-resources__explore-link { + display:inline-flex; + align-items:center; + gap:.3rem; + margin-top:auto; + font-size:var(--openms-text-min); + font-weight:700; + color:var(--pro-link, var(--openms-navy)); + transition:gap .2s ease +} +.openms-lib-page .openms-lib-resources__explore-card:hover .openms-lib-resources__explore-link, +.openms-lib-page .openms-lib-resources__explore-card:focus-visible .openms-lib-resources__explore-link { + color:var(--pro-link, var(--openms-navy)) +} +.openms-lib-page .openms-lib-resources__assist { + display:flex; + flex-direction:column; + align-items:center; + gap:clamp(1rem,2vw,1.35rem); + margin-top:clamp(1.5rem,4vw,2.75rem); + padding:0; + padding-bottom:calc(var(--openms-btn-glow-size,6px) + 1.25rem); + border:none; + background:0 0; + text-align:center; + overflow:visible +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore { + padding-bottom:0 +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started { + padding-bottom:0 +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources__assist { + box-sizing:border-box; + width:auto; + margin-top:clamp(1.75rem,3.5vw,2.5rem); + margin-inline:calc(-1 * var(--openms-page-inline)); + padding:clamp(2.25rem,4.5vw,3.25rem) var(--openms-page-inline); + padding-bottom:calc(clamp(2.25rem,4.5vw,3.25rem) + var(--openms-btn-glow-size,6px)); + background:var(--pro-band-soft) +} +.openms-lib-page .openms-lib-resources__assist-copy { + display:grid; + gap:.4rem; + justify-items:center; + max-width:36rem +} +.openms-lib-page--openms-lib .openms-lib-resources__assist-title, +.openms-lib-page .openms-lib-resources__assist-title { + margin:0; + font-family:var(--openms-font-heading); + font-size:clamp(1.2rem,2vw,1.45rem); + font-weight:700; + color:var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.openms-lib-page .openms-lib-resources__assist-text { + margin:0; + font-size:var(--openms-body-size); + line-height:1.55; + color:var(--pro-text-muted) +} +.openms-lib-page .openms-lib-resources__assist-actions { + display:flex; + flex-wrap:nowrap; + align-items:center; + justify-content:center; + gap:.75rem; + width:max-content; + max-width:100%; + margin-inline:auto; + padding:calc(var(--openms-btn-glow-size,6px) + 0.35rem); + margin-bottom:0.35rem; + overflow:visible +} +.openms-lib-page .openms-lib-resources__assist-btn { + flex:0 1 auto; + width:auto; + max-width:100%; + text-decoration:none; + white-space:nowrap +} +@media(max-width:900px) { + .openms-lib-page .openms-lib-resources__explore-grid,.openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child) { + grid-template-columns:repeat(2,minmax(0,1fr)) + } + .openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item, + .openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item:nth-child(4), + .openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item:nth-child(5) { + grid-column:auto + } + +} +@media(max-width:720px) { + .openms-lib-page .openms-lib-resources__explore-grid, + .openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child), + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-resources__explore-grid, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child) { + grid-template-columns:1fr; + max-width:100%; + margin-inline:auto + } + .openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item, + .openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item:nth-child(4), + .openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child)>.openms-lib-resources__explore-item:nth-child(5) { + grid-column:1 / -1; + width:100% + } + +} +@media(max-width:560px) { + .openms-lib-page .openms-lib-resources__explore-grid,.openms-lib-page .openms-lib-resources__explore-grid:has(>:nth-child(5):last-child) { + grid-template-columns:1fr; + max-width:100%; + margin-inline:auto + } + .openms-lib-page .openms-lib-resources__assist-actions { + width:max-content; + max-width:100%; + flex-wrap:nowrap; + gap:clamp(0.45rem, 2vw, 0.75rem) + } + .openms-lib-page .openms-lib-resources__assist-btn { + width:auto; + flex:0 1 auto; + justify-content:center; + padding-inline:clamp(0.7rem, 3vw, 1.25rem) + } + +} +.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:start; + max-width:min(100%,40rem); + margin:0; + text-align:left +} +.openms-lib-page--openms-lib .openms-lib-resources__title, +.openms-lib-page--openms-lib .openms-lib-resources__lead { + text-align:left +} +.openms-lib-page--openms-lib .openms-lib-resources__lead { + margin-inline:0 +} +.openms-lib-page--openms-lib .openms-lib-resources__toolkit { + display:grid; + grid-template-columns:minmax(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),.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:.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,.14); + box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) +} +.openms-lib-page--openms-lib .openms-lib-resources__feature-title { + 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,.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:.45rem; + min-height:100%; + padding:var(--pro-card-pad); + text-decoration:none; + color:inherit; + transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease +} +.openms-lib-page--openms-lib:not(.openms-lib-page--webapps-pro) .openms-lib-resources__item:hover, +.openms-lib-page--openms-lib:not(.openms-lib-page--webapps-pro) .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:.55rem; + margin-bottom:.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),.06); + border:1px solid rgba(var(--openms-navy-rgb),.1); + box-shadow:none +} +.openms-lib-page--openms-lib .openms-lib-resources__item-tag { + font-size:.66rem; + font-weight:700; + letter-spacing:.1em; + text-transform:uppercase; + color:var(--pro-text-soft) +} +.openms-lib-page--openms-lib .openms-lib-resources__item-text { + flex:auto +} +.openms-lib-page--openms-lib .openms-lib-resources__item-link { + display:inline-flex; + align-items:center; + align-self:flex-start; + gap:.3rem; + margin-top:auto; + padding-top:1rem; + font-size:var(--openms-text-min); + font-weight:700; + line-height:1.4; + color:var(--pro-link, var(--openms-navy))!important; + text-decoration:none; + transition:gap .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:.5rem; + color:var(--pro-link, var(--openms-navy))!important +} +.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),.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,.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:.85rem; + align-items:center; + min-height:100%; + padding:clamp(1rem,2vw,1.25rem); + border:1px solid rgba(255,255,255,.18); + border-radius:var(--pro-radius-sm); + background:rgba(255,255,255,6%); + color:var(--openms-white); + text-decoration:none; + transition:var(--pro-motion),background-color .25s ease,border-color .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,.45); + background:rgba(255,255,255,.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,.12); + box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) +} +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-body { + display:grid; + gap:.2rem; + min-width:0 +} +.openms-lib-page--openms-lib .openms-lib-resources__support-channel-name { + 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,.7); + transition:transform .2s ease,color .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(.2rem); + color:var(--openms-white) +} +.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:.4rem; + margin:0 0 var(--pro-stack-eyebrow); + padding:0; + border:none; + border-radius:0; + background:0 0; + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.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:none; + margin-top:var(--pro-stack-actions) +} +.openms-lib-page--openms-lib .openms-lib-page__outro .openms-lib-block--developers { + padding:var(--pro-section-y) var(--openms-page-inline) +} +/* Anchor target clears sticky site header (news banner + navbar) */ +#for-developers, +.openms-lib-page--hub #for-developers { + scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 0.75rem); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards { + display:flex; + flex-direction:column; + gap:clamp(2rem,4vw,2.75rem); + max-width:var(--pro-max); + margin-inline:auto +} + +/* OpenMS-lib Contribute — head→cards spacing */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards { + gap:var(--pro-head-to-content); +} + +/* pyopenms_viz Contribute — no flex gap (cite uses margin-top alone) */ +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards { + gap: 0; +} + +/* pyopenms_viz Contribute — more air after lead before cards */ +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) { + gap:clamp(7.5rem, 13vw, 10rem); +} +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards.openms-lib-developers--split { + gap: 0; + display: block; +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cards-head { + display:grid; + justify-items:start; + gap:0; + max-width:min(100%,40rem); + margin:0; + text-align:left +} +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__cards-head { + display:grid; + justify-items:center; + gap:0; + max-width:min(100%,38rem); + margin-inline:auto; + margin-bottom: var(--pro-head-to-content); + text-align:center +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-block__eyebrow , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-block__eyebrow { + margin-bottom:var(--pro-stack-eyebrow); + color:var(--openms-blue) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-block__eyebrow { + justify-content:flex-start +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__title , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__title { + margin:0; + font-size:clamp(2rem,4vw,2.85rem); + line-height:1.1; + text-transform:none; + letter-spacing:-.02em; + color:var(--openms-navy) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__title { + text-align:left +} +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__title { + text-align:center +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__lead , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__lead { + margin:var(--pro-stack-lead)0 0; + max-width:34rem; + font-size:var(--openms-body-size-lg); + line-height:1.6; + color:var(--pro-text-muted) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__lead { + justify-self: start; + margin: var(--pro-stack-lead) 0 0; + text-align: left; +} +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__lead { + text-align:center +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cards-grid , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cards-grid { + align-items:stretch; + overflow:visible; + padding-bottom:0.5rem; + position:relative; + z-index:1; + display:grid; + grid-template-columns:repeat(3,minmax(0,1fr)); + gap:clamp(0.65rem,1.5vw,0.9rem) +} +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cards-grid { + padding-bottom: 0; +} +/* OpenMS-lib Contribute: equal-size cards (stable on hover + responsive) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__outro .openms-lib-block--developers.openms-lib-developers--cards { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: var(--openms-page-inline); +} +/* Contribute: 3-column grid */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cards-grid { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: none; + grid-auto-rows: minmax(14.5rem, auto); + grid-auto-flow: row; + align-items: stretch; + gap: clamp(0.9rem, 2vw, 1.35rem); +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid + > * { + grid-column: auto; +} + +/* 7 cards → 2 rows (4 + 3), Reviewing PRs stays rightmost on row 2 */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) { + grid-template-columns: repeat(12, minmax(0, 1fr)); +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(-n + 4) { + grid-column: span 3; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(n + 5) { + grid-column: span 4; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--box, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--review, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--build-src { + grid-row: auto; + width: 100%; + height: 100%; + min-height: 14.5rem; + max-height: none; + box-sizing: border-box; + overflow: visible; + align-self: stretch; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within { + height: 100%; + min-height: 14.5rem; + max-height: none; + width: 100%; + overflow: visible; + z-index: 2; +} +/* Niche contribute item — lighter treatment for Reviewing PRs only; link cards match Explore */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > .openms-lib-developers__card--review { + min-height: 14.5rem; + padding: clamp(1rem, 2vw, 1.25rem) clamp(0.95rem, 2vw, 1.2rem); + background: var(--openms-white); + box-shadow: var(--pro-shadow); +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > .openms-lib-developers__card--review + .openms-lib-developers__card-icon { + font-size: var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + color: rgba(var(--openms-blue-rgb), 0.42); +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > .openms-lib-developers__card--review + .openms-lib-developers__card-title { + font-size: var(--openms-secondary-heading-size, 1.05rem); + color: var(--openms-navy, rgba(var(--openms-dark-rgb), 0.88)); +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > .openms-lib-developers__card--review + .openms-lib-developers__card-subtitle { + font-size: 0.9rem; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)); +} +@media (max-width: 1100px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cards-grid, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(-n + 4), + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(n + 5) { + grid-column: auto / span 1; + } +} + +@media (max-width: 640px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cards-grid { + grid-template-columns: 1fr; + grid-auto-rows: auto; + } + + /* Content-sized cards on phones so multi-CTA rows are not clipped */ + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--box, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(6), + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(7), + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within { + min-height: 16rem; + height: auto; + max-height: none; + overflow: visible; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card-subtitle { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + min-height: 0; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--box + .openms-lib-developers__platform-btn { + min-height: 2.1rem; + padding: 0.35rem 0.7rem; + font-size: 0.78rem; + } +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--box , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--box { + display:flex; + flex-direction:column; + align-items:flex-start; + justify-content:flex-start; + gap:.85rem; + height:auto; + min-height:16.5rem; + max-height:none; + width:100%; + box-sizing:border-box; + margin:0; + padding:clamp(1.2rem,2.2vw,1.5rem) clamp(1.05rem,2vw,1.35rem); + border:1px solid var(--pro-line); + border-radius:var(--pro-radius); + background:var(--openms-white); + box-shadow:var(--pro-shadow); + color:inherit; + text-decoration:none; + overflow:visible; + transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease,transform .25s ease +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-rest , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-rest { + display:flex; + flex-direction:column; + align-items:flex-start; + gap:.7rem +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-icon , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-icon { + display:inline-flex; + align-items:center; + justify-content:center; + flex:0 0 auto; + align-self:flex-start; + width:1em; + height:1em; + margin:0; + padding:0; + border:none; + border-radius:0; + background:none; + box-shadow:none; + font-size:var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + line-height:1; + color:rgba(var(--openms-blue-rgb),.42); + transition:color .25s ease +} +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-icon { + font-size:var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)) +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .fab, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .fas, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .svg-inline--fa, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-icon .fab, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-icon .fas, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-icon .svg-inline--fa { + color:inherit; + font-size:1em; + width:1em; + height:1em +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .svg-inline--fa + path, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-icon .svg-inline--fa path { + fill:currentColor +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-title , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-title { + text-wrap:balance; + transition:color .25s ease +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-subtitle , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-subtitle { + margin:0; + font-size:.95rem; + line-height:1.5; + color:var(--pro-text-muted); + transition:opacity .2s ease,color .25s ease +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-hover , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-hover { + display:flex; + flex-direction:column; + align-items:flex-start; + gap:.75rem; + margin-top:auto; + max-height:0; + opacity:0; + overflow:hidden; + pointer-events:none; + transform:translateY(.4rem); + transition:max-height .28s ease,opacity .22s ease,transform .22s ease +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-hover-text , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-hover-text { + margin:0; + font-size:.92rem; + line-height:1.5; + color:rgba(var(--openms-white-rgb),.9) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-link, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-link, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-link, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-link { + display:inline-flex; + align-items:center; + gap:.35rem; + font-size:var(--openms-text-min); + font-weight:700; + color:var(--openms-cta-link, var(--openms-navy)); + background:transparent; + border:none; + padding:0; + min-height:0 +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__badge , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__badge { + display:inline-flex +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__badge img , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__badge img { + display:block; + height:1.35rem; + width:auto +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review { + height:auto; + min-height:16.5rem; + max-height:none +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platforms { + opacity:1; + visibility:visible; + pointer-events:auto; + display:flex; + flex-wrap:nowrap; + align-items:center; + justify-content:flex-start; + gap:0.3rem !important; + row-gap:0.3rem !important; + column-gap:0.3rem !important; + width:100%; + min-width:0 +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platform-btn { + flex:0 1 auto; + width:fit-content; + min-width:0; + max-width:none; + justify-content:center; + white-space:nowrap; + padding:0.35rem 0.5rem; + font-size:0.78rem +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platform-btn + .fa-github, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platform-btn + .svg-inline--fa.fa-github { + opacity:0; + width:1em; + margin:0; + overflow:hidden; + transform:scale(0.85); + transition:opacity .2s ease, transform .2s ease +} +@media(hover:hover) and (pointer:fine) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review:hover + .openms-lib-developers__platform-btn + .fa-github, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review:focus-within + .openms-lib-developers__platform-btn + .fa-github, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review:hover + .openms-lib-developers__platform-btn + .svg-inline--fa.fa-github, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review:focus-within + .openms-lib-developers__platform-btn + .svg-inline--fa.fa-github { + opacity:1; + overflow:visible; + transform:scale(1) + } +} +@media(hover:none), (pointer:coarse) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platform-btn + .fa-github, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platform-btn + .svg-inline--fa.fa-github { + opacity:1; + width:1em; + overflow:visible; + transform:none + } +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__badge { + align-self:flex-start; + margin-top:0.15rem +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-body , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-body { + display:flex; + flex-direction:column; + flex:1 1 auto; + gap:.7rem; + width:100%; + min-width:0 +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platforms , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platforms { + display:flex; + flex-wrap:wrap; + align-items:center; + justify-content:flex-start; + gap:.45rem; + width:100%; + min-width:0; + margin-top:auto +} +/* Building from Source — keep OS buttons compact on one row */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src { + height:auto; + min-height:16.5rem; + max-height:none +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn { + flex: 0 0 auto; + width: fit-content; + max-width: 100%; + min-width: 0; + box-sizing: border-box; + min-height: 2.35rem; + height: auto; + padding: 0.45rem 0.85rem; + font-size: 0.82rem; + white-space: nowrap; + overflow: visible; +} + +/* build-src platform btn hover handled with shared developers pill hover above */ + +/* Building from Source — hide platform btns until hover (desktop only; skip Review card) */ +@media (hover: hover) and (pointer: fine) and (min-width: 981px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:not(.openms-lib-developers__card--review) + .openms-lib-developers__platforms, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:not(.openms-lib-developers__card--review) + .openms-lib-developers__platforms { + opacity: 0; + visibility: hidden; + pointer-events: none; + transform: translateY(0.35rem); + transition: + opacity 0.22s ease, + visibility 0.22s ease, + transform 0.22s ease; + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:not(.openms-lib-developers__card--review):hover + .openms-lib-developers__platforms, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:not(.openms-lib-developers__card--review):focus-within + .openms-lib-developers__platforms, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:not(.openms-lib-developers__card--review):hover + .openms-lib-developers__platforms, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:not(.openms-lib-developers__card--review):focus-within + .openms-lib-developers__platforms { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translateY(0); + } +} + +/* Reviewing PRs — keep CTA buttons on one row, snug together */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platforms { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: none; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + gap: 0.3rem !important; + row-gap: 0.3rem !important; + column-gap: 0.3rem !important; + width: 100%; + min-width: 0; +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review + .openms-lib-developers__platform-btn { + flex: 0 1 auto; + width: fit-content; + min-width: 0; + max-width: none; + justify-content: center; + white-space: nowrap; + padding: 0.35rem 0.5rem; + font-size: 0.78rem; +} + +/* Building from Source — always show btns when responsive; avoid clipping */ +@media (max-width: 980px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platforms, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platforms { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: none; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src { + height: 100%; + min-height: 14.5rem; + max-height: none; + overflow: hidden; + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn { + flex: 0 0 auto; + width: fit-content; + min-width: 0; + max-width: 100%; + white-space: nowrap; + overflow: visible; + border-color: rgba(var(--openms-navy-rgb), 0.18) !important; + background: transparent !important; + color: var(--openms-navy) !important; + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn + .fa-linux, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn + .fa-linux { + color: #fcc624 !important; + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn + .fa-apple, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn + .fa-apple { + color: #181717 !important; + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn + .fa-windows, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn + .fa-windows { + color: #0078d4 !important; + } + + /* Keep contrast when the card itself is hovered/navy */ + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn { + border-color: rgba(var(--openms-white-rgb), 0.45) !important; + color: var(--openms-white) !important; + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn + .fa-linux, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn + .fa-linux, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn + .fa-apple, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn + .fa-apple, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn + .fa-windows, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn + .fa-windows, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn + .fa-linux, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn + .fa-linux, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn + .fa-apple, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn + .fa-apple, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover + .openms-lib-developers__platform-btn + .fa-windows, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within + .openms-lib-developers__platform-btn + .fa-windows { + color: var(--openms-white) !important; + } +} + +@media (max-width: 640px) { + /* After ≤980 build-src overrides — lock equal Contribute heights at rest + hover */ + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--box, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--review, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(6), + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(7), + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:hover, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src:focus-within { + min-height: 16rem !important; + height: 16rem !important; + max-height: 16rem !important; + overflow: hidden !important; + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platforms, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platforms { + flex-wrap: nowrap; + gap: 0.35rem; + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn { + flex: 1 1 0; + min-width: 0; + max-width: none; + width: auto; + justify-content: center; + font-size: 0.74rem; + padding: 0.35rem 0.45rem; + min-height: 2.15rem; + } +} +/* Platform pills — blue at rest on white cards */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn { + border:2px solid var(--openms-blue)!important; + background:var(--openms-blue)!important; + color:var(--openms-white)!important; + box-shadow:0 0 0 0 var(--openms-btn-glow); + transition:var(--openms-btn-motion, transform .35s cubic-bezier(.44,0,.56,1), box-shadow .35s cubic-bezier(.44,0,.56,1), background .2s ease, border-color .2s ease) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn:focus-visible , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn:focus-visible { + border-color:var(--openms-blue)!important; + background: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, .55rem) var(--openms-btn-glow); + outline:none +} +/* On navy card hover, flip pills to white ghost */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + border-color:rgba(var(--openms-white-rgb),.55)!important; + background:transparent!important; + color:var(--openms-white)!important; + box-shadow:none; + transform:none +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:focus-visible { + border-color:var(--openms-white)!important; + background:rgba(var(--openms-white-rgb),.16)!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, .45rem) rgba(255,255,255,.22) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-linux, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-linux, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-apple, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-apple, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-windows, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-windows, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-github, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-github, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-book-open, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-book-open, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-icon .fa-github , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-icon .fa-github { + color:inherit!important +} +@media(hover:hover) and (pointer:fine) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy); + border-color:transparent; + box-shadow:0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32); + color:var(--openms-white); + outline:none; + transform:translateY(-3px) + } + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy); + border-color:transparent; + box-shadow:0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32); + color:var(--openms-white); + outline:none; + transform:none + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-icon, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-icon,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-icon, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-icon,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-icon, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-icon,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-title,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-title,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-title , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-title { + color:var(--openms-white) + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-subtitle, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-subtitle, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-subtitle { + opacity:1; + height:auto; + margin:0; + overflow:visible; + color:rgba(var(--openms-white-rgb),.9) + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-hover,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-hover,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-hover , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-hover { + max-height:12rem; + opacity:1; + pointer-events:auto; + transform:translateY(0) + } + +} +@media(hover:none), +(pointer:coarse) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card--box , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--box { + height:auto; + min-height:16.5rem; + max-height:none + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-hover , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-hover { + max-height:none; + opacity:1; + pointer-events:auto; + transform:none + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-hover-text , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-hover-text { + color:var(--pro-text-muted) + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-subtitle , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-subtitle { + display:none + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__card-link , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card-link { + color:var(--openms-blue) + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn { + border-color:rgba(var(--openms-navy-rgb),.18)!important; + color:var(--openms-navy)!important + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn:hover,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn:focus-visible , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn:focus-visible { + border-color:var(--openms-blue)!important; + background:rgba(var(--openms-blue-rgb),.06)!important; + color:var(--openms-blue)!important + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-linux , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-linux { + color:#fcc624!important + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-apple , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-apple { + color:#181717!important + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-windows , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-windows { + color:#0078d4!important + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-github, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-github,.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-book-open , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__platform-btn .fa-book-open { + color:var(--openms-blue)!important + } + +} +@media(max-width:980px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cards-grid , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cards-grid { + grid-template-columns:repeat(2,minmax(0,1fr)) + } + +} +@media(max-width:640px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cards-grid , +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cards-grid { + grid-template-columns:1fr + } + +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__cite { + margin-top:0; + margin-bottom:0; + padding-bottom:0; + padding-inline:var(--openms-page-inline); + background:var(--openms-white); + color:var(--openms-navy); + box-sizing:border-box +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite { + display:flex; + flex-direction:column; + align-items:stretch; + gap:clamp(1.75rem,3.5vw,2.5rem); + max-width:var(--pro-max); + margin-inline:auto; + padding:var(--pro-section-y) 0 clamp(1.75rem,3.5vw,2.5rem) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__inner { + display:grid; + grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr); + gap:var(--pro-col-gap); + align-items:start; + width:100%; + max-width:none +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__head { + display:grid; + justify-items:start; + gap:0; + max-width:var(--pro-cite-promo-max, 26rem); + text-align:left +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__eyebrow { + margin:0 0 var(--pro-stack-eyebrow); + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--pro-eyebrow, rgba(var(--openms-blue-rgb), 0.72)) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__title { + margin:0; + max-width:var(--pro-cite-intro-max, 28ch); + font-family:var(--openms-font-heading); + font-size:clamp(1.65rem,3.2vw,2.25rem); + font-weight:var(--openms-heading-lg-weight); + line-height:1.2; + letter-spacing:-.02em; + text-transform:none; + text-align:left; + color:var(--openms-navy) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card { + display:flex; + flex-direction:column; + align-items:flex-start; + gap:.75rem; + width:100%; + 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); + text-align:left +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__top { + display:flex; + flex-wrap:wrap; + gap:.5rem; + margin:0 +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__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; + text-transform:none; + color:var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__title a { + color:inherit; + text-decoration:none +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__title a:hover, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__title a:focus-visible { + color:var(--openms-blue); + outline:none +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__meta { + display:inline-flex; + flex-wrap:wrap; + align-items:center; + gap:.45rem .75rem; + margin:0; + font-size:var(--openms-text-min); + color:var(--pro-text-muted) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__journal { + font-weight:700; + color:var(--openms-navy) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__year { + display:inline-flex; + align-items:center; + padding:.15rem .55rem; + border-radius:999px; + background:rgba(var(--openms-dark-rgb),.06); + font-weight:700; + color:var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__card .publications-cite-card__authors { + display:block; + margin:0; + padding-top:.35rem; + border-top:1px solid var(--pro-line); + font-size:var(--openms-text-min); + line-height:1.55; + color:var(--pro-text-muted) +} +.openms-lib-page--openms-lib .publications-cite-card__authors-more, +.publications-cite-card__authors-more { + display:inline; + margin:0 .1em; + padding:0; + border:0; + border-radius:0; + background:none; + font-size:.92em; + font-weight:700; + letter-spacing:.02em; + line-height:inherit; + white-space:nowrap; + vertical-align:baseline; + color:rgba(var(--openms-navy-rgb),.62) +} +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__actions { + display:flex; + flex-wrap:wrap; + gap:var(--pro-space-2); + margin-top:.35rem; + padding-top:var(--pro-space-2); + border-top:1px solid var(--pro-line) +} +@media(max-width:860px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__inner { + grid-template-columns:1fr; + gap:clamp(1.5rem,3vw,2rem) + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__head { + max-width:none + } +} +@media(max-width:860px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__inner { + grid-template-columns:1fr; + gap:clamp(1.5rem,3vw,2rem) + } + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-cite__head { + max-width:none + } +} +.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:.4rem; + margin:0 0 var(--pro-stack-eyebrow); + padding:0; + border:none; + border-radius:0; + background:0 0; + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.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:0 0; + 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:.45rem; + align-items:stretch; + min-height:100%; + padding:var(--pro-card-pad); + text-decoration:none; + color:inherit; + transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease +} +.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 +} +.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:.45rem; + align-items:start; + margin-top:.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:.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),.06); + border:1px solid rgba(var(--openms-navy-rgb),.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),.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),.06); + box-shadow:none; + border:1px solid rgba(var(--openms-navy-rgb),.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:.25rem; + flex: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:0 0; + font-size:.58rem; + font-weight:700; + letter-spacing:.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(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.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(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.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: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),.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),.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:.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 .2s ease +} +.openms-lib-page--openms-lib .openms-lib-developers__route .openms-lib-developers__card-link::after { + content:none +} +.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(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.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(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.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 { + color:var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.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(--pro-link, var(--openms-navy)) +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers--cards + .openms-lib-developers__card--link:focus-visible + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-link { + gap: 0.5rem; + color: var(--openms-white) !important; +} +.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:.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:.4rem; + width:100% +} +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__platforms { + display:flex; + flex-wrap:wrap; + gap:.65rem; + margin-top:.55rem +} +.openms-lib-page--openms-lib .openms-lib-developers__route--build .openms-lib-developers__platform-btn { + min-height:2.35rem; + padding:.45rem .85rem; + font-size:.82rem; + border:1px solid rgba(var(--openms-navy-rgb),.18); + background:0 0; + background-color:initial; + color:var(--openms-navy)!important; + box-shadow:none; + transition:border-color .2s ease,background-color .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),.05)!important; + background-color:rgba(var(--openms-navy-rgb),.05)!important; + border-color:rgba(var(--openms-navy-rgb),.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:not(.openms-lib-page--pyopenms-pro) .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 + } + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-developers__grid--routes, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-developers__grid--routes { + grid-template-columns:repeat(2,minmax(0,1fr)) + } + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-developers__grid--routes>.openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n), + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.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-page--pyopenms-viz-pro .openms-lib-developers__grid--routes:not(.openms-lib-developers__grid--count-2) { + grid-template-columns:1fr + } + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__grid--routes:not(.openms-lib-developers__grid--count-2)>.openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n) { + grid-column:auto + } + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 { + grid-template-columns:repeat(2,minmax(0,1fr)); + max-width:100% + } + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2>.openms-lib-developers__route, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2>.openms-lib-developers__route { + grid-column:span 1; + width:100%; + min-width:0 + } + +} +@media(max-width:700px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-developers__grid--routes, + .openms-lib-page--openms-lib:not(.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-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 + } + +} +.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) +} +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__cite--panel, +.openms-lib-page--openms-lib .openms-lib-developers__cite--panel { + display:grid; + grid-template-columns:minmax(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 +} + +/* Research impact (separate) — same content edge as Explore cards */ +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-developers__cite--separate, +.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-developers__cite--separate, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-developers__cite--panel, +.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-developers__cite--panel { + box-sizing:border-box; + width:100%; + max-width:var(--pro-max); + margin:0 auto; + padding:var(--pro-section-y) 0; + background:transparent; + color:inherit +} +.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; + grid-template-columns:minmax(0,1fr); + justify-content:start; + justify-items:start; + align-content:start; + align-items:start; + gap:0; + max-width:var(--pro-cite-promo-max, 26rem); + margin:0; + padding:0; + overflow:visible; + text-align:left; + background:0 0; + 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:.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; + margin-inline:0; + max-width:var(--pro-cite-intro-max, 22ch); + width:auto; + justify-self:start; + 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:.75rem; + width:100%; + margin:0; + padding:0; + border:none; + border-radius:0; + background:0 0; + 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:.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(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) +} +.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:.45rem .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:.15rem .55rem; + border-radius:999px; + background:rgba(var(--openms-dark-rgb),.06); + font-weight:700; + color:var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)) +} +.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:.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:.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:min(40rem, 100%); + width:100%; + margin:0; + justify-content:start; + justify-items:start; + align-content:start; + align-items:start; + text-align:left + } + .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:var(--pro-cite-intro-max, 28ch); + margin-inline:0; + justify-self:start; + text-align:left + } + +} +.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:0 0; + color:var(--pro-kicker-on-dark); + font-size:clamp(.72rem,.58rem + .55vw,.82rem); + font-weight:700; + letter-spacing:.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:.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,.28) +} +.openms-lib-developers__badge { + display:inline-flex; + align-self:flex-start; + margin:.15rem 0 0; + line-height:0; + border-radius:.3rem; + transition:transform .2s ease,opacity .2s ease +} +.openms-lib-developers__badge:hover, +.openms-lib-developers__badge:focus-visible { + transform:translateY(-1px); + opacity:.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 + } + +} +@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 + } + .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: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:wrap; + align-items:center; + justify-content:center; + gap:.65rem + } + .openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn { + flex:1 1 auto; + min-width:min(100%,11rem); + justify-content:center; + white-space:nowrap; + font-size:var(--openms-btn-font-size, var(--openms-text-min)); + min-height:var(--openms-btn-min-height, 2.75rem); + padding:var(--openms-btn-padding) + } + .openms-lib-page--openms-lib .openms-lib-cta-band__actions { + flex-direction:row; + flex-wrap:wrap; + justify-content:center + } + +} +.openms-lib-page--hub.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) { + --pro-pad:var(--olib-pad-x, clamp(1.25rem, 5vw, 2.5rem)) +} +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero--pro { + margin-bottom:0; + padding:var(--pro-section-y) max(var(--olib-pad-x),calc((100% - var(--pro-max))/2 + var(--olib-pad-x))) calc(var(--openms-btn-glow-size, 6px) + 0.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:.45rem; + margin:0 auto .85rem; + padding:0; + border:none; + border-radius:0; + background:0 0; + font-size:var(--openms-text-min); + font-weight:600; + letter-spacing:.02em; + text-transform:none; + color:var(--olib-text-muted,rgba(var(--openms-navy-rgb),.68)); + box-shadow:none +} +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__eyebrow::before { + display:block; + content:""; + width:.45rem; + height:.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:.98; + letter-spacing:-.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:.75rem; + margin-top:1.75rem +} +.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:.4rem; + min-height:2.85rem; + padding:.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:0 0; + background-color:initial; + 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:0 0; + background-color:initial; + 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) +} +.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:.4rem; + padding:.35rem .75rem; + border:1px solid rgba(var(--openms-blue-rgb),.18); + border-radius:999px; + background:rgba(var(--openms-blue-rgb),.1); + font-size:inherit; + font-weight:600; + letter-spacing:.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:-.03em +} +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-block__lead { + max-width:46ch; + margin-top:.65rem; + font-size:var(--openms-body-size-lg); + line-height:1.65; + color:rgba(var(--openms-navy-rgb),.7) +} +.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:wrap; + align-items:center; + justify-content:center; + gap:.65rem + } + .openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__actions .openms-lib-btn { + flex:1 1 auto; + min-width:min(100%,11rem); + justify-content:center; + white-space:nowrap; + font-size:var(--openms-btn-font-size, var(--openms-text-min)); + min-height:var(--openms-btn-min-height, 2.75rem); + padding:var(--openms-btn-padding) + } + +} +.openms-lib-page--webapps-pro #using-the-template, +.openms-lib-page--webapps-pro #what-is-openms { + background:0 0 +} + +/* WebApps — hero → first section rhythm comes from zz-page-shell */ +.openms-lib-page--webapps-pro .openms-lib-hero__actions { + margin-bottom: 0.35rem; +} + +@media (min-width: 1280px) { + .openms-lib-page--openms-lib.openms-lib-page--webapps-pro .openms-lib-hero__content { + max-width: var(--pro-hero-content-max, min(100%, 68rem)); + } + + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro .openms-lib-hero__title, + .openms-lib-page--openms-lib.openms-lib-page--webapps-pro .openms-lib-hero__title { + max-width: 38ch; + } +} + +/* Standard section rhythm: one --pro-section-y between major blocks */ +.openms-lib-page--webapps-pro .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: var(--pro-section-y) 0; +} + +.openms-lib-page--webapps-pro #what-is-openms .openms-lib-about, +.openms-lib-page--webapps-pro #using-the-template .openms-lib-resources, +.openms-lib-page--webapps-pro #examples .openms-lib-resources--examples, +.openms-lib-page--webapps-pro .openms-lib-about, +.openms-lib-page--webapps-pro .openms-lib-resources { + padding-block: 0; + padding-top: 0; + padding-bottom: 0; +} + +.openms-lib-page--webapps-pro #examples .openms-lib-resources__inner, +.openms-lib-page--webapps-pro .openms-lib-resources__inner { + padding-bottom: 0; +} + +/* Using the template — extra space under cards before Examples */ +.openms-lib-page--webapps-pro .openms-lib-page__body > #using-the-template.openms-lib-page__anchor { + padding-bottom: calc(var(--pro-section-y) * 0.7); +} + +.openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__inner { + padding-bottom: clamp(0.75rem, 2vw, 1.5rem); +} + +/* Examples band: full-bleed bg; extra air before For Developers / Contribute */ +.openms-lib-page--webapps-pro .openms-lib-page__body > #examples.openms-lib-page__anchor { + padding-inline: 0; + padding-bottom: clamp(3rem, 7vw, 5.5rem); +} + +.openms-lib-page--webapps-pro .openms-lib-page__outro { + margin: 0; + padding: 0; +} + +.openms-lib-layout:has(.openms-lib-page--webapps-pro), +.content-padding:has(.openms-lib-page--webapps-pro) { + padding-bottom: 0; + margin-bottom: 0; +} + +.openms-lib-layout:has(.openms-lib-page--webapps-pro) + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--webapps-pro) + #footer.footer-redesign { + margin-top: 0; + padding-top: 0; +} + +/* WebApps hero — blue GitHub icon in ghost btn */ +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .fa-github, +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .fab, +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .svg-inline--fa { + color: var(--openms-blue) !important; +} + +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .svg-inline--fa path { + fill: currentColor !important; +} + +/* WebApps hero — blue GitHub icon in ghost btn */ +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .fa-github, +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .fab, +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .svg-inline--fa { + color: var(--openms-blue) !important; +} + +.openms-lib-page--webapps-pro .openms-lib-hero__actions .openms-lib-btn--github .svg-inline--fa path { + fill: currentColor !important; +} + +/* WebApps Features — intentional watermark nums + soft strip tint */ +.openms-lib-page--webapps-pro { + --openms-step-num-color: rgba(var(--openms-navy-rgb), 0.18); + --openms-step-num-color-hover: rgba(var(--openms-navy-rgb), 0.3); +} + +.openms-lib-page--webapps-pro .openms-lib-about__num { + display: block; + width: auto; + height: auto; + margin: 0 0 0.35rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-family: var(--openms-font-heading); + font-size: var(--openms-step-num-size); + font-weight: 800; + line-height: 1; + letter-spacing: -0.04em; + color: var(--openms-step-num-color) !important; + transition: color 0.22s ease; +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile:hover .openms-lib-about__num, +.openms-lib-page--webapps-pro .openms-lib-about__tile:focus-within .openms-lib-about__num { + color: var(--openms-step-num-color-hover) !important; +} + +/* WebApps Features — same content width as other sections; hover fills each column */ +.openms-lib-page--webapps-pro #what-is-openms .openms-lib-about__inner { + display: grid; + gap: var(--pro-head-to-content); + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; +} + +/* Features — keep all 5 cards in one row */ +.openms-lib-page--webapps-pro .openms-lib-about__mosaic { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 0; + align-items: stretch; + width: 100%; + max-width: 100%; + margin-inline: 0; + border-top: 1px solid var(--openms-num-strip-border); + border-bottom: 1px solid var(--openms-num-strip-border); + background: color-mix(in srgb, var(--pro-band-soft, #f4f7fb) 88%, var(--openms-white)); + box-sizing: border-box; + overflow: hidden; +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile { + position: relative; + flex: none; + align-self: stretch; + justify-self: stretch; + width: 100%; + max-width: none; + min-width: 0; + min-height: 100%; + height: 100%; + margin: 0; + box-sizing: border-box; + border: none; + border-right: 1px solid var(--openms-num-strip-border); + border-radius: 0; + background: transparent; + box-shadow: none; + padding: clamp(1.15rem, 2.4vw, 1.55rem) clamp(0.85rem, 1.8vw, 1.2rem); + align-items: start; + align-content: start; + text-align: left; + color: var(--openms-navy); + transition: background-color 0.22s ease; + /* Kill reveal transforms that leave a left gap on hover */ + transform: none !important; +} + +.openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:first-child { + padding-left: clamp(1.15rem, 2.4vw, 1.55rem); +} + +.openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child { + border-right: none; + padding-right: clamp(1.15rem, 2.4vw, 1.55rem); +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile-title { + color: var(--openms-navy); +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile-text { + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile-title, +.openms-lib-page--webapps-pro .openms-lib-about__tile-text { + text-align: left; + max-width: none; +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile:hover, +.openms-lib-page--webapps-pro .openms-lib-about__tile:focus-within { + background: var(--openms-num-strip-hover-bg); + border-color: transparent; + border-right-color: var(--openms-num-strip-border); + box-shadow: none; + transform: none !important; + margin: 0; +} + +.openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child:hover, +.openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child:focus-within { + border-right-color: transparent; +} + +/* WebApps Features — centered Overview / Features head */ +.openms-lib-page--webapps-pro .openms-lib-about__head { + display: grid; + grid-template-columns: 1fr; + justify-items: center; + text-align: center; + width: 100%; + max-width: min(100%, 40rem); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} + +.openms-lib-page--webapps-pro .openms-lib-about__head-copy { + justify-items: center; + text-align: center; +} + +.openms-lib-page--webapps-pro .openms-lib-about__eyebrow { + justify-content: center; +} + +.openms-lib-page--webapps-pro .openms-lib-about__title, +.openms-lib-page--webapps-pro .openms-lib-about__lead { + text-align: center; + margin-inline: auto; +} + +.openms-lib-page--webapps-pro .openms-lib-about__lead { + max-width: 36rem; +} + +/* Features cards — wrap on tablet, stack on phones */ +@media (max-width: 900px) { + .openms-lib-page--webapps-pro .openms-lib-about__mosaic { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .openms-lib-page--webapps-pro .openms-lib-about__tile { + max-width: none; + align-items: start; + text-align: left; + padding: clamp(1rem, 2.5vw, 1.35rem) clamp(0.85rem, 2.2vw, 1.15rem); + } + + .openms-lib-page--webapps-pro .openms-lib-about__num { + width: auto; + margin-inline: 0; + font-size: clamp(1.55rem, 4.2vw, 2.25rem); + } + + .openms-lib-page--webapps-pro .openms-lib-about__tile-title, + .openms-lib-page--webapps-pro .openms-lib-about__tile-text { + text-align: left; + width: 100%; + max-width: none; + } +} + +@media (max-width: 720px) { + .openms-lib-page--webapps-pro .openms-lib-about__mosaic { + grid-template-columns: 1fr; + } + + .openms-lib-page--webapps-pro .openms-lib-about__tile { + height: auto; + min-height: 0; + max-height: none; + padding: 0.7rem clamp(0.85rem, 3.4vw, 1.1rem); + gap: 0.35rem; + } +} + +/* Features lead — always two lines */ +.openms-lib-page--webapps-pro .openms-lib-about__lead-line { + display: block; +} + +/* Using the template — always navy + white; shell height locked on hover */ +.openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item, +.openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item:hover, +.openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item:focus-visible, +.openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item:focus-within, +.openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item, +.openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item:hover, +.openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item:focus-visible, +.openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item:focus-within { + box-sizing: border-box !important; + height: var(--openms-equal-card-min-h, 14.5rem) !important; + min-height: var(--openms-equal-card-min-h, 14.5rem) !important; + max-height: var(--openms-equal-card-min-h, 14.5rem) !important; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy) !important; + border-color: transparent !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32) !important; + color: var(--openms-white) !important; + transform: none !important; + transition: none; + outline: none; + overflow: hidden; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item:focus-visible { + outline: 2px solid var(--openms-yellow, #f5c518); + outline-offset: -3px; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item-icon { + display: grid; + place-items: center; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + color: rgba(255, 255, 255, 0.72); + font-size: 2rem; + line-height: 1; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item-icon .fab, +.openms-lib-page--webapps-pro .openms-lib-resources__item-icon .fas, +.openms-lib-page--webapps-pro .openms-lib-resources__item-icon .svg-inline--fa { + color: rgba(255, 255, 255, 0.72) !important; + font-size: 1em; + width: 1em; + height: 1em; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item-icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item-title, +.openms-lib-page--webapps-pro .openms-lib-resources__item-text, +.openms-lib-page--webapps-pro .openms-lib-resources__item-tag { + color: var(--openms-white) !important; +} + +/* Match Contribute route-card link nudge on hover */ +.openms-lib-page--webapps-pro .openms-lib-resources__item-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + color: var(--openms-white) !important; + transition: gap 0.2s ease; +} + +.openms-lib-page--webapps-pro + .openms-lib-resources__grid + > .openms-lib-resources__item:hover + .openms-lib-resources__item-link, +.openms-lib-page--webapps-pro + .openms-lib-resources__grid + > .openms-lib-resources__item:focus-visible + .openms-lib-resources__item-link, +.openms-lib-page--webapps-pro + .openms-lib-resources__grid + > .openms-lib-resources__item:focus-within + .openms-lib-resources__item-link { + gap: 0.5rem; + color: var(--openms-white) !important; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__item--static { + cursor: default; +} + +@media (max-width: 720px) { + .openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item, + .openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item:hover, + .openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item:focus-visible, + .openms-lib-page--webapps-pro #using-the-template .openms-lib-resources__grid > .openms-lib-resources__item:focus-within, + .openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item, + .openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item:hover, + .openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item:focus-visible, + .openms-lib-page--webapps-pro .openms-lib-resources__grid > .openms-lib-resources__item:focus-within { + height: var(--openms-equal-card-min-h-mobile, 16rem) !important; + min-height: var(--openms-equal-card-min-h-mobile, 16rem) !important; + max-height: var(--openms-equal-card-min-h-mobile, 16rem) !important; + } +} + +/* Examples / Featured WebApps — split: copy + CTA | logo rail */ +.openms-lib-page--webapps-pro .openms-lib-resources--examples { + display: block; + padding: 0 var(--openms-page-inline); + box-sizing: border-box; + background: + radial-gradient(ellipse 55% 70% at 100% 40%, rgba(var(--openms-blue-rgb), 0.06), transparent 65%), + var(--openms-white); +} + +.openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__inner, +.openms-lib-page--webapps-pro .openms-lib-resources__examples-layout { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); + gap: clamp(1.75rem, 4vw, 3.25rem); + align-items: center; + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; +} + +.openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__head { + display: grid; + grid-template-columns: 1fr; + justify-items: start; + max-width: min(100%, 28rem); + margin: 0; + text-align: left; +} + +.openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__eyebrow { + justify-content: flex-start; +} + +.openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__title, +.openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__lead { + text-align: left; + margin-inline: 0; +} + +.openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__lead { + max-width: 28rem; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-actions { + display: flex; + justify-content: flex-start; + width: 100%; + margin-top: var(--pro-stack-actions, 1.35rem); +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(0.75rem, 1.5vw, 1rem); + margin: 0; + padding: 0; + list-style: none; + width: 100%; + border: none; + border-radius: 0; + background: transparent; + overflow: visible; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-item { + min-width: 0; + border-right: none; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-item:last-child { + border-right: none; +} + +/* Featured logo tiles — uniform card chrome; logo always centered */ +.openms-lib-page--webapps-pro .openms-lib-resources__examples-card { + display: flex; + align-items: center; + justify-content: center; + min-height: 11.5rem; + padding: 1.5rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--pro-radius, 1rem); + background: var(--openms-white); + box-shadow: 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.05); + color: var(--openms-navy); + text-decoration: none; + text-align: center; + transition: background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-logo, +.openms-lib-page--webapps-pro .openms-lib-resources__examples-logo--large { + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 auto; + width: min(7.5rem, 100%); + height: auto; + aspect-ratio: 1; + max-width: 100%; + max-height: 100%; + margin: 0 auto; + padding: 0.7rem; + border-radius: 0.85rem; + background: color-mix(in srgb, var(--pro-band-soft, #f4f7fb) 70%, var(--openms-white)); + box-sizing: border-box; + overflow: hidden; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-logo img, +.openms-lib-page--webapps-pro .openms-lib-resources__examples-logo--large img, +.openms-lib-page--webapps-pro + .openms-lib-resources__examples-logo + img[src*="umetaflow"] { + display: block; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + margin: 0 auto; + object-fit: contain; + object-position: center center; + border-radius: 0.45rem; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-card:hover, +.openms-lib-page--webapps-pro .openms-lib-resources__examples-card:focus-visible { + background: var(--openms-white); + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 0.55rem 1.35rem rgba(var(--openms-navy-rgb), 0.1); + transform: none; + outline: none; +} + +.openms-lib-page--webapps-pro .openms-lib-resources__examples-card:focus-visible { + outline: 2px solid var(--openms-yellow, #f5c518); + outline-offset: -3px; +} + +@media (max-width: 900px) { + .openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__inner, + .openms-lib-page--webapps-pro .openms-lib-resources__examples-layout { + grid-template-columns: 1fr; + gap: var(--pro-head-to-content); + } + + .openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__head { + justify-items: center; + max-width: min(100%, 36rem); + margin-inline: auto; + text-align: center; + } + + .openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__eyebrow { + justify-content: center; + } + + .openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__title, + .openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__lead { + text-align: center; + margin-inline: auto; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__examples-actions { + justify-content: center; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__examples-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.65rem; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__examples-card { + min-height: 0; + aspect-ratio: 1; + padding: 0.4rem; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__examples-logo, + .openms-lib-page--webapps-pro .openms-lib-resources__examples-logo--large { + width: 100%; + max-width: none; + padding: 0.35rem; + } +} + +@media (max-width: 720px) { + .openms-lib-page--webapps-pro .openms-lib-resources__examples-grid { + gap: 0.5rem; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__examples-card { + padding: 0.3rem; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__examples-logo, + .openms-lib-page--webapps-pro .openms-lib-resources__examples-logo--large { + width: 100%; + padding: 0.25rem; + border-radius: 0.7rem; + } +} + +/* WebApps Contribute — centered navy CTA band */ +/* WebApps Contribute — match pyOpenMS / product route-card layout */ +.openms-lib-page--webapps-pro .openms-lib-page__outro .openms-lib-block--developers { + box-sizing: border-box; + width: 100%; + max-width: none; + margin: 0; + padding-block: var(--pro-section-y); + padding-inline: var(--openms-page-inline); + background: var(--openms-white); + color: var(--openms-navy); +} + +.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: 1fr; + justify-items: stretch; + gap: var(--pro-head-to-content, clamp(1.5rem, 3vw, 2.25rem)); + align-items: start; + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + text-align: left; +} + +.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: center; + max-width: min(100%, 42rem); + margin: 0 auto; + text-align: center; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-page__outro + .openms-lib-developers__head + .openms-lib-block__eyebrow, +.openms-lib-page--webapps-pro + .openms-lib-page__outro + .openms-lib-developers__head + .openms-lib-block__eyebrow { + justify-content: center; + color: var(--openms-blue) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-page__outro + .openms-lib-developers__head + .openms-lib-developers__title, +.openms-lib-page--webapps-pro + .openms-lib-page__outro + .openms-lib-developers__head + .openms-lib-developers__title { + text-align: center; + margin-inline: auto; + color: var(--openms-navy) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-page__outro + .openms-lib-developers__head + .openms-lib-developers__lead, +.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-page__outro + .openms-lib-developers__head + .openms-lib-developers__lead, +.openms-lib-page--webapps-pro + .openms-lib-page__outro + .openms-lib-developers__lead { + justify-self: center; + width: 100%; + max-width: 40rem; + margin: var(--pro-stack-lead) 0 0; + margin-inline: auto; + text-align: center; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)) !important; +} + +.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: repeat(3, 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(n) { + grid-column: span 1; + min-height: 0; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__route { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0.45rem; + width: 100%; + min-height: 100%; + padding: var(--pro-card-pad); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + color: inherit; + text-decoration: none; + transition: + background 0.22s ease, + border-color 0.22s ease, + box-shadow 0.22s ease, + transform 0.22s ease, + color 0.22s ease; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__route-top { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 0.55rem; + margin: 0; +} + +/* Match pyOpenMS Contribute — large soft-blue glyphs, no chip */ +.openms-lib-page--webapps-pro .openms-lib-developers__route-icon, +.openms-lib-page--webapps-pro .openms-lib-developers__route-icon .fab, +.openms-lib-page--webapps-pro .openms-lib-developers__route-icon .fas, +.openms-lib-page--webapps-pro .openms-lib-developers__route .fa-github, +.openms-lib-page--webapps-pro .openms-lib-developers__route .fa-code-branch, +.openms-lib-page--webapps-pro .openms-lib-developers__route .fa-server, +.openms-lib-page--webapps-pro .openms-lib-developers__route-icon .svg-inline--fa { + color: rgba(var(--openms-blue-rgb), 0.28) !important; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__route-icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__route-icon, +.openms-lib-page--webapps-pro .openms-lib-developers__route-icon, +.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1) + .openms-lib-developers__route-icon { + display: grid; + place-items: center; + width: auto; + height: auto; + margin-bottom: 0.15rem; + padding: 0; + border: none !important; + border-radius: 0; + background: transparent !important; + box-shadow: none !important; + font-size: clamp(2.5rem, 3.8vw, 3rem); + line-height: 1; + color: rgba(var(--openms-blue-rgb), 0.28) !important; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__route .openms-lib-developers__card-tag { + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: nowrap; + border: 0; + border-radius: 0; + background: transparent; + color: var(--pro-text-soft, rgba(var(--openms-dark-rgb), 0.55)); + font-size: var(--openms-text-min, 0.8rem); + font-weight: 600; + letter-spacing: 0.02em; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + flex: 1 1 auto; + gap: 0.35rem; + min-width: 0; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__card-title { + margin: 0; + color: var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)); + font-size: var(--openms-body-size-lg, 1.05rem); + font-weight: 800; + line-height: 1.25; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__card-text { + display: block; + margin: 0; + color: rgba(var(--openms-dark-rgb), 0.72); + font-size: var(--openms-body-size, 1rem); + line-height: 1.55; +} + +.openms-lib-page--webapps-pro .openms-lib-developers__card-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 1rem; + min-height: 0; + padding-inline: 0; + border-radius: 0; + background: transparent; + color: var(--openms-navy) !important; + font-size: var(--openms-text-min); + font-weight: 700; + white-space: nowrap; + text-decoration: none !important; + transition: gap 0.2s ease; +} + +/* Beat hub/openms-lib white hover so text stays readable */ +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n):hover, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n):focus-visible, +.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n):hover, +.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n):focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro .openms-lib-developers__route:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible, +.openms-lib-page--openms-lib.openms-lib-page--webapps-pro .openms-lib-developers__route:hover, +.openms-lib-page--openms-lib.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy) !important; + border-color: transparent !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32) !important; + transform: translateY(-4px); + color: #fff !important; + outline: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__card-title, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__card-title, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__card-title + span, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__card-title + span, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__card-text, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__card-text, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__card-tag, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__card-tag, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__card-link, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__card-title, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-title, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__card-title span, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-title span, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__card-text, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-text, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__card-tag, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-tag, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__card-link, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-link { + gap: 0.5rem; + color: #fff !important; + background: transparent !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__route-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__route-icon + .fab, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__route-icon + .fas, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:hover + .openms-lib-developers__route-icon + .svg-inline--fa, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__route-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__route-icon + .fab, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__route-icon + .fas, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--webapps-pro + .openms-lib-developers__route:focus-visible + .openms-lib-developers__route-icon + .svg-inline--fa, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon .fab, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon .fas, +.openms-lib-page--webapps-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon .svg-inline--fa, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon .fab, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon .fas, +.openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon .svg-inline--fa { + color: #fff !important; + background: transparent !important; +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--webapps-pro .openms-lib-developers__grid--routes, + .openms-lib-page--webapps-pro .openms-lib-developers__grid--routes { + grid-template-columns: 1fr; + } +} + +.openms-lib-page--webapps-pro .openms-lib-block--developers > .openms-lib-developers__cite--separate, +.openms-lib-page--webapps-pro .webapps-contribute__research-impact .openms-lib-developers__cite--separate { + margin-top: 0; +} + +/* WebApps Research impact — full-width soft band (match OpenMS-lib / pyOpenMS) */ +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__research-impact, +.openms-lib-page--webapps-pro .webapps-contribute__research-impact, +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__cite, +.openms-lib-page--webapps-pro .openms-lib-page__cite { + box-sizing: border-box; + width: 100%; + max-width: none; + margin: 0; + padding: 0; + padding-inline: var(--openms-page-inline); + background: var(--pro-band-soft, #f4f7fb) !important; + color: var(--openms-navy); +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-contribute__research-impact .openms-lib-developers__cite--separate, +.openms-lib-page--webapps-pro .webapps-contribute__research-impact .openms-lib-developers__cite--separate, +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-page__cite .openms-lib-developers__cite--separate, +.openms-lib-page--webapps-pro .openms-lib-page__cite .openms-lib-developers__cite--separate { + width: 100%; + max-width: var(--pro-max); + margin: 0 auto; + padding: var(--pro-section-y) 0; + background: transparent; +} +.openms-lib-page--hub.openms-lib-page--webapps.openms-lib-page--featured-pro + .webapps-modern-wrap--page + .webapps-featured--page, +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-modern-wrap--page + .webapps-featured--page { + background: color-mix(in srgb, var(--olib-bg-soft, #eef2f7) 82%, var(--openms-navy) 6%); + border-bottom: 1px solid var(--pro-line); +} +.openms-lib-page--featured-pro #affiliated-apps, +.openms-lib-page--affiliated .webapps-affiliates, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates { + background: color-mix(in srgb, var(--olib-bg-soft, #eef2f7) 82%, var(--openms-navy) 6%); + border-bottom: 1px solid var(--pro-line); +} +.openms-lib-page--featured-pro #archived-apps, +.openms-lib-page--archived #archived-apps { + background: color-mix(in srgb, var(--olib-bg-soft, #eef2f7) 82%, var(--openms-navy) 6%); +} +.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-bottom: calc(var(--pro-section-y) * 0.55); + padding-inline: var(--olib-pad-x); +} +.openms-lib-page--hub.openms-lib-page--featured-pro .webapps-affiliates, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); + padding-bottom: calc(var(--pro-section-y) * 0.55); + padding-inline: var(--olib-pad-x); +} +.openms-lib-page--hub.openms-lib-page--featured-pro .webapps-archived, +.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived { + padding-block: var(--pro-section-y); + padding-top: 0; + padding-bottom: var(--pro-section-y); + padding-inline: var(--olib-pad-x); +} +.openms-lib-page--hub.openms-lib-page--featured-pro .openms-lib-page__anchor:has(.webapps-archived)::before, +.openms-lib-page--archived .openms-lib-page__anchor:has(.webapps-archived)::before { + display:none +} + +/* Archived Apps — standard section rhythm (same tokens as sibling hub pages) */ +.openms-lib-page--archived.openms-lib-page--featured-pro + .openms-lib-page__body + > .openms-lib-page__anchor:first-child { + padding-top: var(--pro-section-y); +} +.openms-lib-layout:has(.openms-lib-page--archived) { + padding-bottom: var(--pro-section-y); +} +.openms-lib-page--featured-pro .webapps-featured__grid--detail, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid { + gap: clamp(1rem, 2vw, 1.25rem); + justify-content: stretch; + align-items: stretch; +} +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item { + min-width: 0; + width: 100%; + max-width: 100%; + display: flex; +} +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item > .webapps-project-detail-card, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item > .webapps-project-detail-card { + width: 100%; + height: 100%; +} +@media (min-width: 720px) { + .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail, + .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + /* Center the lone card in a 2-column last row (e.g. 7 apps). */ + .openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-featured__grid--detail + > .webapps-featured__item:last-child:nth-child(odd), + .openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-affiliates__grid + > .webapps-affiliates__item:last-child:nth-child(odd) { + grid-column: 1 / -1; + max-width: calc((100% - clamp(1rem, 2vw, 1.25rem)) / 2); + justify-self: center; + } +} +@media (min-width: 1080px) { + .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail, + .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + /* Reset 2-col centering, then center the lone card in a 3-column last row. */ + .openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-featured__grid--detail + > .webapps-featured__item:last-child:nth-child(odd), + .openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-affiliates__grid + > .webapps-affiliates__item:last-child:nth-child(odd) { + grid-column: auto; + max-width: none; + justify-self: stretch; + } + .openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-featured__grid--detail + > .webapps-featured__item:last-child:nth-child(3n + 1), + .openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-affiliates__grid + > .webapps-affiliates__item:last-child:nth-child(3n + 1) { + grid-column: 2; + } +} +.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 .2s ease,box-shadow .2s ease,transform .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, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + align-items: stretch; + gap: var(--pro-space-2); + column-gap: clamp(1rem, 2.5vw, 1.45rem); + padding: var(--pro-card-pad); + height: 100%; + box-sizing: border-box; +} + +/* Featured + Affiliated Apps catalogs — uniform logo tiles, names, and action rows */ +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__main, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__main { + flex: 1 1 auto; + align-items: start; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap, +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap--large, +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap--xlarge, +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap--wide, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap--large, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap--xlarge, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-wrap--wide { + width: var(--webapps-logo-size, 6.5rem); + height: var(--webapps-logo-size, 6.5rem); + min-width: var(--webapps-logo-size, 6.5rem); + min-height: var(--webapps-logo-size, 6.5rem); + padding: 0.5rem; + margin: 0; + border: none; + border-radius: var(--pro-radius, 1rem); + background: var(--webapps-logo-bg); + box-shadow: none; + aspect-ratio: 1; + align-self: start; + overflow: hidden; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo, +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo--large, +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo--xlarge, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo--large, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo--xlarge { + width: 100%; + height: 100%; + max-height: none; + object-fit: contain; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-text, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__logo-text { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 0.15rem; + text-align: center; + font-family: var(--openms-font-heading); + font-size: 0.72rem; + font-weight: 800; + line-height: 1.15; + letter-spacing: 0.02em; + color: var(--openms-navy); + word-break: break-word; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__body, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__body { + display: flex; + flex-direction: column; + gap: 0.55rem; + min-width: 0; + min-height: 100%; + height: 100%; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__name, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__name { + margin: 0; + font-size: 0.9375rem; + font-weight: 500; + line-height: 1.3; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__text, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__text { + flex: 0 1 auto; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__maintainers, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-detail-card__maintainers { + margin-top: 0.1rem; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-links, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-links { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + align-items: stretch; + gap: 0.5rem; + margin-top: auto; + padding-top: 0.35rem; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-links__item, +.openms-lib-page--affiliated.openms-lib-page--featured-pro + .webapps-project-detail-card--featured + .webapps-project-links__item { + flex: 0 1 auto; +} + +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-catalog__contact, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-catalog__contact { + margin-top: clamp(0.85rem, 1.6vw, 1.15rem); + margin-bottom: 0; +} + +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__logo-wrap { + width: var(--webapps-logo-size, 6.5rem); + height: var(--webapps-logo-size, 6.5rem); + min-width: var(--webapps-logo-size, 6.5rem); + min-height: var(--webapps-logo-size, 6.5rem); + padding: 0.5rem; + border: none; + border-radius: var(--pro-radius, 1rem); + background: var(--webapps-logo-bg); + overflow: hidden; +} + +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__logo-wrap--large, +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__logo-wrap--xlarge { + width: var(--webapps-logo-size, 6.5rem); + height: var(--webapps-logo-size, 6.5rem); + min-width: var(--webapps-logo-size, 6.5rem); + min-height: var(--webapps-logo-size, 6.5rem); +} + +.openms-lib-page--featured-pro + .webapps-featured__grid--detail + .webapps-project-detail-card--logo-title + .webapps-project-detail-card__body { + min-width: 0; + align-self: stretch; +} +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "links links"; + align-items: start; + column-gap: clamp(1rem, 2.5vw, 1.35rem); + row-gap: 0.55rem; +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + display: contents; +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + grid-area: logo; + align-self: start; +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__name { + grid-area: name; + align-self: start; +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__text { + grid-area: text; +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__maintainers { + grid-area: maintainers; + margin-top: 0.15rem; +} + +.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-links { + grid-area: links; + margin-top: 0; +} + +@media (max-width: 720px) { + /* Featured apps: title beside logo; maintainers + buttons below logo */ + .openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card--affiliate .webapps-project-detail-card__main, + .openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "links links"; + justify-content: start; + justify-items: start; + align-items: start; + width: 100%; + max-width: 100%; + margin-inline: 0; + text-align: left; + column-gap: clamp(0.85rem, 2.5vw, 1.15rem); + row-gap: 0.55rem; + } + + .openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + display: contents; + } + + .openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-links { + justify-content: flex-start; + } + + .openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + width: 5.5rem; + height: 5.5rem; + min-height: 0; + margin-inline: 0; + aspect-ratio: 1; + } + + .openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo { + width: 100%; + height: auto; + max-height: 4.25rem; + } +} +/* Featured + Affiliated Apps — no frame around logos */ +.openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap, +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap, +.openms-lib-page--affiliated .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap, +.openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + border: none !important; + background: transparent !important; + padding: 0 !important; + box-shadow: none !important; +} + +@media (max-width: 720px) { + /* Affiliated apps: title beside logo; maintainers + buttons below logo */ + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__main, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-detail-card__main { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "links links"; + justify-items: start; + align-items: start; + text-align: left; + column-gap: clamp(0.85rem, 2.5vw, 1.15rem); + row-gap: 0.55rem; + } + + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__body, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-detail-card__body { + display: contents; + } + + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-links, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-links { + justify-content: flex-start; + } + + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap { + width: 5.5rem; + height: 5.5rem; + min-height: 0; + margin-inline: 0; + aspect-ratio: 1; + } + + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo-wrap--wide { + width: 5.75rem; + height: 3.75rem; + min-height: 0; + aspect-ratio: auto; + } + + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-detail-card__logo { + width: 100%; + height: auto; + max-height: 3.5rem; + } +} + +.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),.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:.2rem; + font-family:var(--openms-font-heading); + font-size:.72rem; + font-weight:700; + letter-spacing:.08em; + text-transform:uppercase; + color:var(--openms-navy) +} +.openms-lib-page--featured-pro .webapps-project-links__btn, +.openms-lib-page--featured-pro .webapps-project-links__btn--demo, +.openms-lib-page--featured-pro .webapps-project-links__btn--install, +.openms-lib-page--featured-pro .webapps-project-links__btn--github, +.openms-lib-page--featured-pro .webapps-project-links__btn--homepage, +.openms-lib-page--featured-pro .webapps-project-links__btn--pypi, +.openms-lib-page--featured-pro .webapps-project-links__btn--nfcore, +.openms-lib-page--featured-pro .webapps-project-links__btn--link, +.openms-lib-page--affiliated .webapps-project-links__btn, +.openms-lib-page--affiliated .webapps-project-links__btn--demo, +.openms-lib-page--affiliated .webapps-project-links__btn--install, +.openms-lib-page--affiliated .webapps-project-links__btn--github, +.openms-lib-page--affiliated .webapps-project-links__btn--homepage, +.openms-lib-page--affiliated .webapps-project-links__btn--pypi, +.openms-lib-page--affiliated .webapps-project-links__btn--nfcore, +.openms-lib-page--affiliated .webapps-project-links__btn--link, +.openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-links__btn { + border:2px solid var(--openms-blue)!important; + border-radius:var(--openms-btn-pill-radius); + background:var(--openms-blue)!important; + color:var(--openms-white)!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, +.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, +.openms-lib-page--featured-pro .webapps-project-links__btn--github:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn--github:focus-visible, +.openms-lib-page--featured-pro .webapps-project-links__btn--homepage:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn--homepage:focus-visible, +.openms-lib-page--featured-pro .webapps-project-links__btn--pypi:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn--pypi:focus-visible, +.openms-lib-page--featured-pro .webapps-project-links__btn--nfcore:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn--nfcore:focus-visible, +.openms-lib-page--featured-pro .webapps-project-links__btn--link:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn--link:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn:hover, +.openms-lib-page--affiliated .webapps-project-links__btn:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn--demo:hover, +.openms-lib-page--affiliated .webapps-project-links__btn--demo:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn--install:hover, +.openms-lib-page--affiliated .webapps-project-links__btn--install:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn--github:hover, +.openms-lib-page--affiliated .webapps-project-links__btn--github:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn--homepage:hover, +.openms-lib-page--affiliated .webapps-project-links__btn--homepage:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn--pypi:hover, +.openms-lib-page--affiliated .webapps-project-links__btn--pypi:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn--nfcore:hover, +.openms-lib-page--affiliated .webapps-project-links__btn--nfcore:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn--link:hover, +.openms-lib-page--affiliated .webapps-project-links__btn--link:focus-visible, +.openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-links__btn:hover, +.openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-links__btn:focus-visible { + /* Same hover as navbar Sponsor Us: keep fill, scale + glow only */ + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; +} +.openms-lib-page--affiliated .webapps-project-links__btn .fab, +.openms-lib-page--affiliated .webapps-project-links__btn .fas, +.openms-lib-page--affiliated .webapps-project-links__btn .fa-github, +.openms-lib-page--affiliated .webapps-project-links__btn .fa-python, +.openms-lib-page--affiliated .webapps-project-links__btn .fa-home, +.openms-lib-page--affiliated .webapps-project-links__btn .fa-external-link-alt, +.openms-lib-page--featured-pro .webapps-project-links__btn .fab, +.openms-lib-page--featured-pro .webapps-project-links__btn .fas, +.openms-lib-page--featured-pro .webapps-project-links__btn .fa-github, +.openms-lib-page--featured-pro .webapps-project-links__btn .fa-python, +.openms-lib-page--featured-pro .webapps-project-links__btn .fa-home, +.openms-lib-page--featured-pro .webapps-project-links__btn .fa-windows, +.openms-lib-page--featured-pro .webapps-project-links__btn .fa-play-circle, +.openms-lib-page--featured-pro .webapps-project-links__btn .fa-external-link-alt, +.openms-lib-page--featured .webapps-project-links__btn .fab, +.openms-lib-page--featured .webapps-project-links__btn .fas, +.openms-lib-page--featured .webapps-project-links__btn .fa-github, +.openms-lib-page--featured .webapps-project-links__btn .fa-windows, +.openms-lib-page--featured .webapps-project-links__btn .fa-play-circle, +.openms-lib-page--webapps.openms-lib-page--affiliated .webapps-project-links__btn i[class*=fa-], +.openms-lib-page--webapps.openms-lib-page--featured .webapps-project-links__btn i[class*=fa-], +.openms-lib-page--webapps.openms-lib-page--featured-pro .webapps-project-links__btn i[class*=fa-], +.openms-lib-page--openms-lib.openms-lib-page--affiliated .webapps-project-links__btn .fa-github, +.openms-lib-page--openms-lib.openms-lib-page--affiliated .webapps-project-links__btn .fa-python, +.openms-lib-page--openms-lib.openms-lib-page--affiliated .webapps-project-links__btn .fa-home, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__btn .fa-github, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__btn .fa-python, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__btn .fa-home, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__btn .fa-windows, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__btn .fa-play-circle, +.openms-lib-page--openms-lib.openms-lib-page--featured .webapps-project-links__btn .fa-github, +.openms-lib-page--openms-lib.openms-lib-page--featured .webapps-project-links__btn .fa-windows, +.openms-lib-page--openms-lib.openms-lib-page--featured .webapps-project-links__btn .fa-play-circle, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__btn .fab, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__btn .fas, +.openms-lib-page--openms-lib.openms-lib-page--featured .webapps-project-links__btn .fab, +.openms-lib-page--openms-lib.openms-lib-page--featured .webapps-project-links__btn .fas { + color:var(--openms-white)!important +} +.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) +} +.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:.4rem; + margin:0; + padding:0; + border:none; + border-radius:0; + background:0 0; + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.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:var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)) !important; + font-weight:var(--openms-heading-lg-weight); + line-height:1.3; + letter-spacing:.015em; + text-transform:uppercase; + color:var(--openms-navy) +} +.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) +} +.openms-lib-page--archived .webapps-archived--editorial .webapps-archived__projects { + display:grid; + gap:var(--pro-space-5); + padding:0; + border-radius:0; + background:0 0; + 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; + grid-template-columns: 1fr; + gap: var(--pro-card-gap); + width: 100%; + margin: 0; + padding: 0; + list-style: none; + justify-content: stretch; +} +.openms-lib-page--featured-pro .webapps-archived__item { + display: flex; + margin: 0; + padding: 0; + min-width: 0; + max-width: none; +} +.openms-lib-page--featured-pro .webapps-archived__item .webapps-project-detail-card, +.openms-lib-page--archived .webapps-archived__item .webapps-archived-entry { + width: 100%; + height: 100%; +} +/* Centered content rail — matches hero width so the sparse page reads symmetric */ +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived__inner { + display: grid; + gap: var(--pro-section-y); + width: 100%; + max-width: min(100%, 48rem); + margin-inline: auto; + justify-items: stretch; +} +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival { + margin-top: 0; + width: 100%; +} + +/* Stacked sections — notice, then projects (never side-by-side) */ +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects { + display: grid; + gap: var(--pro-head-to-content); + width: 100%; + justify-items: stretch; +} +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects-head { + display: grid; + gap: var(--pro-stack-lead); + width: 100%; + max-width: none; + margin: 0; + text-align: center; + justify-items: center; +} +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15)) !important; + font-weight: var(--openms-heading-lg-weight); + line-height: 1.25; + letter-spacing: 0.015em; + text-transform: uppercase; + color: var(--openms-navy); + text-align: center; +} +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects-lead { + margin: 0; + max-width: 40ch; + font-size: var(--openms-body-size); + line-height: 1.55; + text-align: center; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)); +} + +/* Solo card: narrower centered width; multi cards use the full rail */ +.openms-lib-page--archived .webapps-archived__grid, +.openms-lib-page--archived .webapps-archived__grid--solo { + grid-template-columns: 1fr; + width: 100%; + justify-items: center; +} +.openms-lib-page--archived .webapps-archived__grid--solo > .webapps-archived__item { + width: 100%; + max-width: min(100%, 32rem); +} +.openms-lib-page--archived .webapps-archived__grid:not(.webapps-archived__grid--solo) { + justify-items: stretch; +} +.openms-lib-page--archived .webapps-archived__grid:not(.webapps-archived__grid--solo) > .webapps-archived__item { + width: 100%; + max-width: none; +} +@media (min-width: 900px) { + .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__grid:not(.webapps-archived__grid--solo) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +/* Catalog entries — logo left; type/badge/title right; description below */ +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--catalog + .webapps-archived-entry, +.openms-lib-page--archived.openms-lib-page--featured-pro + .webapps-archived--catalog + .webapps-archived-entry, +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry { + position: relative; + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo meta" + "logo name" + "text text" + "maintainers maintainers" + "actions actions"; + align-items: start; + column-gap: clamp(1rem, 2.5vw, 1.45rem); + row-gap: 0.35rem; + padding: var(--pro-card-pad, clamp(1.15rem, 2.4vw, 1.5rem)); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__main, +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__body { + display: contents; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__media { + grid-area: logo; + display: flex; + align-items: center; + justify-content: center; + width: 5rem; + min-width: 5rem; + max-width: 5rem; + height: 5rem; + min-height: 5rem; + padding: 0.55rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: 0.85rem; + background: color-mix(in srgb, var(--pro-band-soft, #f4f7fb) 55%, var(--openms-white)); + place-items: center; + align-self: start; + box-sizing: border-box; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__meta { + grid-area: meta; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.45rem 0.65rem; + align-self: center; + padding-right: 0; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__name { + grid-area: name; + align-self: start; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__text { + grid-area: text; + margin-top: 0.45rem; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__maintainers { + grid-area: maintainers; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__actions { + grid-area: actions; + margin-top: 0.35rem; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__logo { + width: 100%; + max-width: none; + max-height: none; + height: 100%; + object-fit: contain; + object-position: center; +} + +.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:0 0; + 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:0 0; + 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:0 0 +} +.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:0 0; + 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:.45rem .65rem; +} +.openms-lib-page--archived .webapps-archived-entry__type { + margin:0; + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:rgba(var(--openms-navy-rgb),.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, +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__badge { + position: static; + top: auto; + right: auto; + z-index: auto; + display:inline-flex; + align-items:center; + padding:.16rem .55rem; + border:1px solid rgba(var(--openms-navy-rgb),.14); + border-radius:999px; + background: color-mix(in srgb, var(--pro-band-soft, #f4f7fb) 55%, var(--openms-white)); + font-size:.64rem; + font-weight:700; + letter-spacing:.03em; + text-transform:none; + color:var(--pro-text-muted); + white-space: nowrap; +} +.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),.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:.2rem; + font-family:var(--openms-font-heading); + font-size:.72rem; + font-weight:700; + letter-spacing:.08em; + text-transform:uppercase; + color:var(--openms-navy) +} +.openms-lib-page--archived .webapps-archived-entry__actions { + margin-top:0.35rem; + padding:0.35rem 0 0; + border-top:none +} +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links { + display:flex; + flex-direction:row; + flex-wrap:wrap; + align-items:center; + align-content:flex-start; + gap:var(--openms-btn-gap, 0.75rem); + margin:0; + padding:0; + border:none; + list-style:none +} +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__item { + flex:0 0 auto; + width:auto; + max-width:100% +} +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--github, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--install, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--homepage, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--pypi, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--link, +.openms-lib-page--featured-pro .webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore, +.openms-lib-page--archived .webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore { + display:inline-flex; + align-items:center; + gap:.4rem; + min-height:2.25rem; + padding:.4rem .9rem; + border:2px solid var(--openms-blue)!important; + border-radius:var(--openms-btn-pill-radius); + background:var(--openms-blue)!important; + font-size:.8rem; + font-weight:600; + color:var(--openms-white)!important; + text-decoration:none; + box-shadow:0 0 0 0 var(--openms-btn-glow); + transition:var(--openms-btn-motion); + 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--archived .webapps-archived-entry .webapps-project-links__btn:hover, +.openms-lib-page--archived .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, +.openms-lib-page--archived .webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore:hover, +.openms-lib-page--archived .webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore:focus-visible { + /* Same hover as Featured / Affiliated app pills */ + background:var(--openms-blue)!important; + border-color:var(--openms-blue)!important; + color:var(--openms-white)!important; + transform:scale(var(--openms-btn-hover-scale)); + box-shadow:0 0 0 var(--openms-btn-glow-size)var(--openms-btn-glow); + outline:none; + text-decoration:none +} +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fab, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fas, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fa-github, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fa-project-diagram, +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fab, +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fas, +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fa-github, +.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fa-project-diagram, +.openms-lib-page--webapps.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn i[class*=fa-], +.openms-lib-page--openms-lib.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fa-github, +.openms-lib-page--openms-lib.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fa-project-diagram, +.openms-lib-page--openms-lib.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fab, +.openms-lib-page--openms-lib.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn .fas, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fa-github, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fa-project-diagram, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fab, +.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__btn .fas { + color:var(--openms-white)!important +} +.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice, +.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice { + display: grid; + gap: clamp(1rem, 2vw, 1.35rem); + width: 100%; + max-width: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + align-content: start; + justify-items: stretch; + box-sizing: border-box; +} +.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:0 0; + box-shadow:none +} +.openms-lib-page--featured-pro .webapps-archived__notice-title, +.openms-lib-page--archived .webapps-archived__notice-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-eyebrow-size, 0.78rem); + font-weight: 700; + line-height: 1.2; + letter-spacing: 0.08em; + text-transform: uppercase; + text-align: left; + color: var(--openms-blue); +} +/* Good to know — open numbered strip (not a card) */ +.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-list, +.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0; + width: 100%; + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid var(--pro-line); + border-bottom: 1px solid var(--pro-line); + border-radius: 0; + background: transparent; + overflow: visible; +} +.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item, +.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item { + position: relative; + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 0.85rem 1.1rem; + align-items: start; + align-content: start; + justify-items: start; + text-align: left; + min-height: 100%; + margin: 0; + padding: clamp(1.25rem, 2.8vw, 1.75rem) clamp(1rem, 2.4vw, 1.5rem); + border-right: 1px solid var(--pro-line); + background: transparent; + transition: background-color 0.2s ease; +} +.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item:hover, +.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item:hover { + background: rgba(var(--openms-blue-rgb), 0.03); +} +.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item:last-child, +.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item:last-child { + border-right: none; +} +.openms-lib-page--featured-pro .webapps-archived__notice-item::before, +.openms-lib-page--archived .webapps-archived__notice-item::before { + content: none; +} +.openms-lib-page--featured-pro .webapps-archived__notice-index, +.openms-lib-page--archived .webapps-archived__notice-index { + grid-row: 1 / span 2; + margin: 0; + /* Size/color from brand-palette shared step numbers */ +} +.openms-lib-page--featured-pro .webapps-archived__notice-copy { + margin: 0; + padding: 0.35rem 0 0; + min-width: 0; +} +.openms-lib-page--featured-pro .webapps-archived__notice-text, +.openms-lib-page--archived .webapps-archived__notice-text { + min-width: 0; + max-width: 34ch; + margin: 0; + padding: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 400; + line-height: 1.55; + text-align: left; + color: rgba(var(--openms-navy-rgb), 0.72); +} +.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item:hover .webapps-archived__notice-index, +.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item:hover .webapps-archived__notice-index { + color: var(--openms-step-num-color-hover); +} +@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--editorial .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--editorial .webapps-archived-entry__main { + padding:0 + } + .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry { + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "logo meta" + "logo name" + "text text" + "maintainers maintainers" + "actions actions"; + } + .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__media { + width: 4.75rem; + min-width: 4.75rem; + max-width: 4.75rem; + height: 4.75rem; + min-height: 4.75rem; + padding: 0.45rem; + } + .openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__logo { + max-width: 100%; + max-height: 3.5rem; + } + .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-list, + .openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-list { + grid-template-columns: 1fr; + } + .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item, + .openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item { + border-right: none; + border-bottom: 1px solid var(--pro-line); + } + .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item:last-child, + .openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item:last-child { + border-bottom: none; + } + +} +.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__revival, +.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),.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:initial; + max-width:46ch +} +.openms-lib-page--featured-pro .webapps-archived__revival-kicker { + 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(--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-family: var(--openms-font-body); + 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:.35rem; + min-height:2.85rem; + padding:.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),.34); + background:0 0; + background-color:initial; + 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),.34); + background:0 0; + background-color:initial; + 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:auto; + justify-content:center + } + +} + +@media (max-width: 640px) { + .openms-lib-page--featured-pro .webapps-archived__revival-actions, + .openms-lib-page--archived .webapps-archived__revival-actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + width: 100%; + max-width: 22rem; + margin-inline: auto; + gap: 0.55rem; + } + + .openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn, + .openms-lib-page--archived .webapps-archived__revival-actions .openms-lib-btn { + width: 100%; + min-width: 0; + justify-content: center; + white-space: nowrap; + } +} +@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 + } + +} +.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%) + } + +} +.openms-lib-page--calendar .openms-lib-page__body > .openms-lib-page__anchor { + padding-block:var(--pro-section-y) 0 +} +.openms-lib-page--calendar .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block, +.openms-lib-page--calendar .community-calendar-block { + padding-block:0; + width:100%; + max-width:var(--calendar-max, 56rem); + margin-inline:auto +} +.openms-lib-page--calendar .community-events-page { + gap:var(--pro-section-y); + width:100%; + max-width:var(--calendar-max, 56rem); + margin-inline:auto +} +.openms-lib-page--calendar .community-events-page__section, +.openms-lib-page--calendar .events-past-panel { + gap:var(--pro-head-to-content) +} +.openms-lib-page--calendar .community-events-page__section--upcoming { + padding-bottom:0; + margin-bottom:0; + border-bottom:none +} +.openms-lib-page--calendar .community-events-page__section--past { + padding-top:0 +} +.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 .openms-lib-page__body > .openms-lib-page__anchor { + padding-block:var(--pro-section-y) 0 +} +.openms-lib-page--news { + --news-max: 56rem; +} +.openms-lib-page--news .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block, +.openms-lib-page--news .news-page-block { + padding-block:0; + width:100%; + max-width:var(--news-max, 56rem); + margin-inline:auto +} +.openms-lib-page--news .news-body, +.openms-lib-page--news .news-bibliography { + gap:var(--pro-head-to-content); + width:100%; + max-width:var(--news-max, 56rem); + margin-inline:auto +} +.openms-lib-page--news .news-bibliography { + padding-top:0 +} +.openms-lib-page--news .news-pager { + margin-top:0; + padding-top:0 +} + +/* Contribute hero — white icons on primary CTAs (override brand colors) */ +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .fa-discord, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .fa-github, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .fab, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .svg-inline--fa { + color: var(--openms-white) !important; +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .fa-discord, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .fa-github, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .fab, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .svg-inline--fa { + color: var(--openms-blue) !important; +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .svg-inline--fa path { + fill: currentColor !important; +} + +/* Contribute hero — white icons on primary CTAs (override brand colors) */ +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .fa-discord, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .fa-github, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .fab, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .svg-inline--fa { + color: var(--openms-white) !important; +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .svg-inline--fa path { + fill: currentColor !important; +} + +.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) +} + +/* Contribute — match OpenMS-lib equal section rhythm */ +.openms-lib-page--contribute .openms-lib-hero--pro { + padding-bottom: calc(var(--openms-btn-glow-size, 6px) + 0.5rem); + overflow: visible; +} + +.openms-lib-page--contribute .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: var(--pro-section-y) 0; +} + +.openms-lib-page--contribute .openms-lib-about, +.openms-lib-page--contribute .openms-lib-resources { + padding-block: 0; + padding-top: 0; +} + +.openms-lib-page--contribute .openms-lib-resources__inner { + padding-bottom: 0; + gap: var(--pro-head-to-content); +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about__inner { + display:grid; + grid-template-columns:1fr; + gap:var(--pro-head-to-content); + align-items:start +} +.openms-lib-page--contribute #communication-channels .openms-lib-about__head { + display: grid; + justify-items: center; + text-align: center; + grid-template-columns: 1fr; + align-items: start; + margin: 0 auto; + max-width: min(40rem, 100%); +} +.openms-lib-page--contribute #communication-channels .openms-lib-about__head-copy { + display: grid; + justify-items: center; + text-align: center; +} +.openms-lib-page--contribute #communication-channels .openms-lib-about__eyebrow { + margin-bottom: 0.15rem; + justify-content: center; +} +.openms-lib-page--contribute #communication-channels .openms-lib-about__title, +.openms-lib-page--contribute #communication-channels .openms-lib-about__lead { + text-align: center; + margin-inline: auto; +} +.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:repeat(3,minmax(0,1fr)); + gap:var(--pro-card-gap); + align-items:stretch +} +.openms-lib-page--contribute #communication-channels .openms-lib-about__tile { + min-height:100%; + height:auto; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + padding: 0.15rem 0.1rem; +} + +/* Contribute — soft transparent blue numbers & icons */ +.openms-lib-page--contribute .openms-lib-about__num { + display: block; + width: auto; + height: auto; + margin: 0 0 0.2rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-family: var(--openms-font-heading); + font-size: clamp(2.5rem, 4.8vw, 3.4rem); + font-weight: 800; + line-height: 0.88; + letter-spacing: -0.045em; + color: rgba(var(--openms-blue-rgb), 0.28); + transition: color 0.22s ease; +} + +.openms-lib-page--contribute .openms-lib-about__tile:hover .openms-lib-about__num, +.openms-lib-page--contribute .openms-lib-about__tile:focus-within .openms-lib-about__num { + color: var(--openms-blue); +} + +.openms-lib-page--contribute .openms-lib-resources__item-icon { + display: grid; + place-items: center; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + color: rgba(var(--openms-blue-rgb), 0.28); + font-size: clamp(3rem, 5vw, 3.75rem); + line-height: 1; +} + +.openms-lib-page--contribute .openms-lib-resources__item-icon .fab, +.openms-lib-page--contribute .openms-lib-resources__item-icon .fas, +.openms-lib-page--contribute .openms-lib-resources__item-icon .svg-inline--fa { + color: rgba(var(--openms-blue-rgb), 0.28) !important; + font-size: 1em; + width: 1em; + height: 1em; +} + +.openms-lib-page--contribute .openms-lib-resources__item-icon .svg-inline--fa path { + fill: currentColor !important; +} + +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .fab, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .fab, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .fas, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .fas, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .svg-inline--fa, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .svg-inline--fa { + color: var(--openms-white) !important; + } + + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .svg-inline--fa + path, + .openms-lib-page--contribute + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .svg-inline--fa + path { + fill: currentColor !important; + } +} + +.openms-lib-page--contribute #communication-channels .openms-lib-about__tile-link { + margin-top:auto +} +@media(max-width:900px) { + .openms-lib-page--contribute #communication-channels .openms-lib-about__mosaic { + 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-page__outro .openms-lib-block--developers { + gap: 0; + padding-block: var(--pro-section-y) clamp(1.75rem, 4vw, 3rem); +} + +/* Shared navy outro CTA panels (Contribute / Publications / Contributors / Contact) */ +.openms-lib-page--contribute #code-of-conduct.openms-lib-page__anchor, +.openms-lib-page--publications #cite-openms.openms-lib-page__anchor, +.openms-lib-page--contact #get-help.openms-lib-page__anchor { + background: var(--openms-white); + padding-inline: max(var(--olib-pad-x, clamp(1.25rem, 4vw, 2rem)), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x, clamp(1.25rem, 4vw, 2rem)))); + padding-block: var(--pro-section-y); +} + +.openms-lib-page--contribute .contribute-coc-band, +.openms-lib-page--publications .contribute-coc-band, +.openms-lib-page--contributors .contribute-coc-band, +.openms-lib-page--contact .contribute-coc-band { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; + box-sizing: border-box; +} + +.openms-lib-page--contribute .contribute-coc-band__panel, +.openms-lib-page--publications .contribute-coc-band__panel, +.openms-lib-page--contributors .contribute-coc-band__panel, +.openms-lib-page--contact .contribute-coc-band__panel { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--pro-stack-actions, 1.25rem); + margin: 0; + padding: clamp(2.5rem, 5vw, 3.5rem) var(--pro-card-pad-lg, clamp(1.25rem, 3vw, 2rem)); + border: none; + border-radius: var(--pro-radius, 0.85rem); + 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--contribute .contribute-coc-band__copy, +.openms-lib-page--publications .contribute-coc-band__copy, +.openms-lib-page--contributors .contribute-coc-band__copy, +.openms-lib-page--contact .contribute-coc-band__copy { + flex: initial; + max-width: 46ch; +} + +.openms-lib-page--contribute .contribute-coc-band__kicker, +.openms-lib-page--publications .contribute-coc-band__kicker, +.openms-lib-page--contributors .contribute-coc-band__kicker, +.openms-lib-page--contact .contribute-coc-band__kicker { + margin: 0 0 var(--pro-stack-eyebrow, 0.45rem); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--pro-kicker-on-dark, rgba(var(--openms-white-rgb), 0.72)); +} + +.openms-lib-page--contribute .contribute-coc-band__text, +.openms-lib-page--publications .contribute-coc-band__text, +.openms-lib-page--contributors .contribute-coc-band__text, +.openms-lib-page--contact .contribute-coc-band__text { + margin: 0; + color: var(--openms-white); +} + +.openms-lib-page--contribute .contribute-coc-band__text strong, +.openms-lib-page--publications .contribute-coc-band__text strong, +.openms-lib-page--contributors .contribute-coc-band__text strong, +.openms-lib-page--contact .contribute-coc-band__text strong { + display: block; + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size, 1.65rem) * 1.15); + font-weight: var(--openms-heading-lg-weight, 800); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-white); +} + +.openms-lib-page--contribute .contribute-coc-band__note, +.openms-lib-page--publications .contribute-coc-band__note, +.openms-lib-page--contributors .contribute-coc-band__note, +.openms-lib-page--contact .contribute-coc-band__note { + display: block; + margin-top: var(--pro-stack-lead, 0.75rem); + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-white-rgb), 0.88); +} + +.openms-lib-page--contribute .contribute-coc-band__actions, +.openms-lib-page--publications .contribute-coc-band__actions, +.openms-lib-page--contributors .contribute-coc-band__actions, +.openms-lib-page--contact .contribute-coc-band__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; +} + +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn { + min-width: clamp(10rem, 22vw, 14rem); +} + +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn { + min-width: clamp(8.5rem, 16vw, 11.5rem); + padding-inline: 1.15rem; +} + +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--primary { + border: 2px solid var(--openms-white); + background: var(--openms-white); + color: var(--openms-navy) !important; +} + +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible { + 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; +} + +@media (max-width: 640px) { + .openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn { + width: 100%; + min-width: 0; + } +} +.openms-lib-page--contribute .openms-lib-about__tile-link { + display:inline-flex; + align-items:center; + gap:.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 .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:.5rem +} + +/* Ways to Contribute — title left, development card right, other cards below */ +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__inner { + display: grid; + grid-template-columns: minmax(18rem, 1.05fr) minmax(0, 1.35fr); + gap: var(--pro-card-gap) clamp(1.5rem, 3vw, 2.5rem); + align-items: start; +} + +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__head { + display: grid; + justify-items: start; + text-align: left; + max-width: min(100%, 34rem); + margin: 0; + grid-column: 1; + grid-row: 1; + align-self: center; +} + +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__eyebrow { + justify-content: flex-start; +} + +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__title, +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__lead { + text-align: left; + margin-inline: 0; +} + +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__lead { + max-width: 36rem; +} + +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__feature { + grid-column: 2; + grid-row: 1; + min-height: 100%; +} + +.openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__grid { + grid-column: 1 / -1; + grid-row: 2; +} + +@media (max-width: 900px) { + .openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__inner { + grid-template-columns: 1fr; + gap: var(--pro-head-to-content); + } + + .openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__head, + .openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__feature, + .openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__grid { + grid-column: 1; + grid-row: auto; + max-width: none; + } + + .openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__head { + max-width: min(100%, 40rem); + align-self: start; + } +} + +.openms-lib-page--contribute .openms-lib-resources__feature { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--pro-space-2); + min-height: 0; + padding: var(--pro-card-pad-lg); +} + +.openms-lib-page--contribute .openms-lib-resources__feature-icon { + display: grid; + place-items: center; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + color: rgba(var(--openms-white-rgb), 0.92); + font-size: clamp(2rem, 3.5vw, 2.5rem); + line-height: 1; +} + +.openms-lib-page--contribute .openms-lib-resources__feature-icon .fas, +.openms-lib-page--contribute .openms-lib-resources__feature-icon .svg-inline--fa { + color: inherit !important; + font-size: 1em; + width: 1em; + height: 1em; +} + +.openms-lib-page--contribute .openms-lib-resources__feature-icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--contribute .openms-lib-resources__feature-text { + max-width: 42rem; +} + +.openms-lib-page--contribute .openms-lib-resources__feature-text + .openms-lib-resources__feature-text { + margin-top: 0.75rem; +} + +.openms-lib-page--contribute .contribute-project-links { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.65rem; + margin: 0.55rem 0 0; + padding: 0; + list-style: none; + width: 100%; +} + +.openms-lib-page--contribute .contribute-project-links li { + min-width: 0; +} + +.openms-lib-page--contribute .contribute-project-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.45rem; + width: 100%; + box-sizing: border-box; + min-height: 0; + padding: 0.7rem 0.55rem 0.65rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.22); + border-radius: 0.85rem; + background: rgba(var(--openms-white-rgb), 0.08); + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-white) !important; + text-decoration: none !important; + text-align: center; + white-space: normal; + line-height: 1.25; + transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; +} + +.openms-lib-page--contribute .contribute-project-link__icon { + display: grid; + place-items: center; + width: 100%; + max-width: 7.5rem; + height: 2.75rem; +} + +.openms-lib-page--contribute .contribute-project-link__icon img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; +} + +.openms-lib-page--contribute .contribute-project-link__name { + display: block; + max-width: 100%; +} + +.openms-lib-page--contribute .contribute-project-link:hover, +.openms-lib-page--contribute .contribute-project-link:focus-visible { + border-color: rgba(var(--openms-white-rgb), 0.5); + background: rgba(var(--openms-white-rgb), 0.14); + transform: translateY(-2px); + box-shadow: none; + outline: none; +} + +.openms-lib-page--contribute .openms-lib-resources__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--pro-card-gap); +} + +/* Cards — match WebApps interactive treatment */ +.openms-lib-page--contribute .openms-lib-resources__item { + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + padding: var(--pro-card-pad); + transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, transform 0.22s ease; +} + +.openms-lib-page--contribute .openms-lib-resources__item--static { + cursor: default; +} + +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy) !important; + border-color: transparent !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32) !important; + color: var(--openms-white) !important; + outline: none; + transform: translateY(-3px); + } + + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-title, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-title, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-text, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-text, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-tag, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-tag, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-link, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-link { + color: var(--openms-white) !important; + } +} + +.openms-lib-page--contribute .openms-lib-resources__item--static:hover, +.openms-lib-page--contribute .openms-lib-resources__item--static:focus-within, +.openms-lib-page--contribute .openms-lib-resources__item--static:focus-visible { + transform: none; + border-color: var(--pro-line); + box-shadow: var(--pro-shadow); + background: var(--openms-white); + color: inherit; +} + +.openms-lib-page--contribute .openms-lib-resources__item-text a { + color: var(--openms-content-link, var(--openms-navy)); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); +} + +.openms-lib-page--contribute .openms-lib-resources__item-text a:hover, +.openms-lib-page--contribute .openms-lib-resources__item-text a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: underline; +} + +.openms-lib-page--contribute .openms-lib-resources__item-text a:hover, +.openms-lib-page--contribute .openms-lib-resources__item-text a:focus-visible { + color: var(--openms-navy); + outline: none; +} + +@media(max-width:960px) { + .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: repeat(2, minmax(0, 1fr)); + gap: 0.5rem; + } + .openms-lib-page--contribute .contribute-project-link { + padding: 0.6rem 0.45rem 0.55rem; + } + .openms-lib-page--contribute .contribute-project-link__icon { + height: 2.35rem; + max-width: 6.5rem; + } +} + +.openms-lib-page--contribute .contribute-os-buttons { + display:flex; + flex-wrap:wrap; + gap:var(--openms-btn-gap, 1.1rem); + margin-top:auto; + padding-top:1rem +} +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn { + flex:auto; + min-width:0 +} +.openms-lib-page--contribute .openms-lib-developers__card--build .openms-lib-developers__card-text { + white-space:normal; + max-width:42ch +} +.openms-lib-page--fellowship .openms-lib-hero__title { + max-width:22ch +} + +/* Fellowship at-a-glance — 3-column fact rail (not pill chips) */ +.openms-lib-page--fellowship .openms-lib-page__intro { + display: grid; + gap: clamp(1.75rem, 4vw, 2.75rem); + padding-bottom: clamp(1.5rem, 3vw, 2.25rem); + box-sizing: border-box; +} + +.openms-lib-page--fellowship .fellowship-facts { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0; + width: auto; + max-width: none; + margin: 0 max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))); + padding: 0; + list-style: none; + border-top: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + border-bottom: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + box-sizing: border-box; +} + +.openms-lib-page--fellowship .fellowship-facts__item { + display: grid; + justify-items: center; + align-content: center; + gap: 0.55rem; + margin: 0; + padding: clamp(1.15rem, 2.5vw, 1.55rem) clamp(0.75rem, 2vw, 1.25rem); + border-right: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + text-align: center; +} + +.openms-lib-page--fellowship .fellowship-facts__item:last-child { + border-right: none; +} + +.openms-lib-page--fellowship .fellowship-facts__icon { + display: grid; + place-items: center; + color: rgba(var(--openms-blue-rgb), 0.32); + font-size: clamp(1.65rem, 2.8vw, 2.1rem); + line-height: 1; +} + +.openms-lib-page--fellowship .fellowship-facts__icon .fab, +.openms-lib-page--fellowship .fellowship-facts__icon .fas, +.openms-lib-page--fellowship .fellowship-facts__icon .svg-inline--fa { + color: inherit !important; + font-size: 1em; + width: 1em; + height: 1em; +} + +.openms-lib-page--fellowship .fellowship-facts__icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--fellowship .fellowship-facts__text { + margin: 0; + max-width: 16ch; + font-family: var(--openms-font-heading); + font-size: clamp(0.92rem, 1.35vw, 1.05rem); + font-weight: 700; + line-height: 1.3; + letter-spacing: -0.01em; + color: var(--openms-navy); +} + +@media (max-width: 720px) { + .openms-lib-page--fellowship .fellowship-facts { + grid-template-columns: 1fr; + } + + .openms-lib-page--fellowship .fellowship-facts__item { + border-right: none; + border-bottom: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + padding-block: 1.1rem; + } + + .openms-lib-page--fellowship .fellowship-facts__item:last-child { + border-bottom: none; + } + + .openms-lib-page--fellowship .fellowship-facts__text { + max-width: none; + } +} +.openms-lib-page--fellowship #fellowship-application { + background:var(--pro-band-soft) +} +.openms-lib-page--fellowship .fellowship-application { + padding-top: calc(var(--pro-section-y) * 0.5); + padding-bottom: 0; +} + +.openms-lib-layout:has(.openms-lib-page--fellowship), +.content-padding:has(.openms-lib-page--fellowship) { + padding-bottom: 0; +} + +.openms-lib-layout:has(.openms-lib-page--fellowship) + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--fellowship) + #footer.footer-redesign { + margin-top: 0; + padding-top: 0; +} +.openms-lib-page--fellowship .fellowship-application__inner { + display:flex; + flex-direction:column; + gap:clamp(0.5rem, 1.25vw, 0.85rem); + max-width:var(--pro-max); + margin-inline:auto +} +.openms-lib-page--fellowship .fellowship-application__head { + position:relative; + z-index:1; + 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:transparent; + box-shadow:none; + /* Clip Tally’s extra top/bottom chrome so the form hugs the lead + footer */ + overflow:hidden; +} + +/* Tally keeps empty padding above the first fields — pull iframe up without covering the lead */ +.openms-lib-page--fellowship .fellowship-page__form-body, +.openms-lib-page--fellowship .fellowship-page__tally-iframe { + background:transparent; +} + +.openms-lib-page--fellowship .fellowship-page__tally-iframe { + margin-top:-3.25rem; + margin-bottom:-1.25rem; +} +.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 #about-the-retreat .openms-lib-about__head { + display:grid; + grid-template-columns:1fr; + gap:0; + align-items:start; + max-width:min(100%,42rem); + margin:0 0 var(--pro-head-to-content); + text-align:left +} +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__head-copy { + display:grid; + gap:0; + justify-items:start; + width:100%; + max-width:100% +} +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__eyebrow { + margin:0; + flex:none +} +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__title { + margin:0 +} +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__mosaic.retreat-highlights__mosaic, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic { + grid-template-columns:repeat(3,minmax(0,1fr)) +} +.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) * .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,.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:.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:.65rem; + margin:0; + font-size:var(--openms-body-size-lg); + line-height:1.45; + color:rgba(var(--openms-dark-rgb),.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:.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),.82) +} +.openms-lib-page--developer-retreat .retreat-upcoming__list li::before { + content:""; + position:absolute; + left:0; + top:.6em; + width:.32rem; + height:.32rem; + border-radius:50%; + background:rgba(var(--openms-navy-rgb),.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:.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)) +} + +/* About the retreat — match soft blue numbers on other hub pages */ +.openms-lib-page--developer-retreat .openms-lib-about__tile { + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + padding: 0.15rem 0.1rem; +} + +.openms-lib-page--developer-retreat .openms-lib-about__tile:hover, +.openms-lib-page--developer-retreat .openms-lib-about__tile:focus-within { + transform: none; + border: none; + box-shadow: none; + background: transparent; +} + +.openms-lib-page--developer-retreat .openms-lib-about__num { + display: block; + width: auto; + height: auto; + margin: 0 0 0.2rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-family: var(--openms-font-heading); + font-size: clamp(2.5rem, 4.8vw, 3.4rem); + font-weight: 800; + line-height: 0.88; + letter-spacing: -0.045em; + color: rgba(var(--openms-blue-rgb), 0.28); + transition: color 0.22s ease; +} + +.openms-lib-page--developer-retreat .openms-lib-about__tile:hover .openms-lib-about__num, +.openms-lib-page--developer-retreat .openms-lib-about__tile:focus-within .openms-lib-about__num { + color: var(--openms-blue); +} + +.openms-lib-page--developer-retreat .retreat-photo { + display:grid; + gap:.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:.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% + .55rem); + transform:translateX(-50%)translateY(.2rem); + width:max-content; + max-width:16rem; + padding:.45rem .7rem; + border-radius:.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 .15s ease,transform .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-upcoming__head, + .openms-lib-page--developer-retreat .retreat-upcoming__head .openms-lib-about__title, + .openms-lib-page--developer-retreat .retreat-upcoming__head .openms-lib-about__lead { + text-align:left; + margin-inline:0; + justify-items:start + } + .openms-lib-page--developer-retreat .retreat-upcoming__head-copy, + .openms-lib-page--developer-retreat .retreat-upcoming__head .openms-lib-about__head-copy { + justify-items:start; + text-align:left + } + .openms-lib-page--developer-retreat .retreat-upcoming__head .openms-lib-about__eyebrow { + justify-content:flex-start + } + .openms-lib-page--developer-retreat .retreat-upcoming__facts, + .openms-lib-page--developer-retreat .retreat-upcoming__list, + .openms-lib-page--developer-retreat .retreat-upcoming__actions, + .openms-lib-page--developer-retreat .retreat-upcoming__sponsor { + text-align:left; + justify-items:start; + margin-inline:0 + } + .openms-lib-page--developer-retreat .retreat-upcoming__actions { + display:flex; + justify-content:flex-start + } + .openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__mosaic.retreat-highlights__mosaic, + .openms-lib-page--developer-retreat .retreat-highlights__mosaic { + grid-template-columns:minmax(0,1fr) !important + } + +} +@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-page-hero-title-size: clamp(2.15rem, 1.55rem + 2.65vw, 3.25rem); + font-size: var(--openms-page-hero-title-size) !important; +} +.openms-lib-page--developer-retreat .openms-lib-hero__title-line { + display:block; + white-space:nowrap; + margin-left:-1.25em +} +@media(max-width:720px) { + .openms-lib-page--developer-retreat .openms-lib-hero__title { + max-width:100%; + width:100%; + margin-inline:0; + --openms-page-hero-title-size: clamp(1.4rem, 0.85rem + 3.4vw, 1.85rem); + font-size: var(--openms-page-hero-title-size) !important; + line-height:1.12; + text-align:center; + text-wrap:unset; + overflow-wrap:normal; + white-space:normal + } + .openms-lib-page--developer-retreat .openms-lib-hero__title br { + display:none + } + .openms-lib-page--developer-retreat .openms-lib-hero__title-line { + display:block; + white-space:normal; + margin-left:0; + max-width:100%; + text-wrap:balance + } +} +.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) * .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%; + overflow:visible; + max-height:none +} +.openms-lib-page--services-support .services-page__tally-iframe { + min-height:48rem +} +/* Alternating chapter bands — beat hub anchor transparent !important */ +.openms-lib-page--governance #governance-bodies.openms-lib-page__anchor, +.openms-lib-page--governance #core-developers.openms-lib-page__anchor { + background: var(--pro-band-soft, #f4f6f9) !important; +} +.openms-lib-page--governance #responsibilities.openms-lib-page__anchor { + background: var(--openms-white) !important; +} +.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--our-sponsors #our-sponsors { + background:var(--openms-white) +} +.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) * .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:var(--pro-max) +} +.openms-lib-page--publications .openms-lib-btn--scholar .openms-lib-btn__icon, +.openms-lib-btn--scholar .openms-lib-btn__icon { + display:inline-flex; + align-items:center; + justify-content:center; + flex:none; + width:1.2em; + height:1.2em; + line-height:0 +} +.openms-lib-page--publications .openms-lib-btn--scholar .openms-lib-btn__icon svg, +.openms-lib-btn--scholar .openms-lib-btn__icon svg { + display:block; + width:100%; + height:100% +} +/* Publications — match Contribute equal section rhythm */ +.openms-lib-page--publications.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero--pro { + /* Room for Scholar CTA hover scale + glow (overflow:hidden clips otherwise) */ + padding-bottom:calc(var(--openms-btn-glow-size,6px) + 0.5rem); + overflow:visible +} +.openms-lib-page--publications .openms-lib-page__body > .openms-lib-page__anchor { + padding-block:var(--pro-section-y) 0 +} +.openms-lib-page--publications #key-publications, +.openms-lib-page--publications #publications-list { + padding-bottom:0 +} +.openms-lib-page--publications .openms-lib-resources { + padding-block:0; + padding-top:0 +} +.openms-lib-page--publications .openms-lib-resources__inner { + max-width:var(--pro-max); + width:100%; + padding-bottom:0; + gap:var(--pro-head-to-content) +} +.openms-lib-page--publications #cite-openms.openms-lib-page__anchor { + padding-block:var(--pro-section-y) clamp(1.75rem,4vw,3rem) +} +.openms-lib-page--publications .publications-body { + display:contents +} +.openms-lib-page--publications .publications-featured, +.openms-lib-page--publications .publications-bibliography { + display:grid; + gap:var(--pro-head-to-content); + padding:0; + width:100% +} +.openms-lib-page--publications .publications-bibliography > .openms-lib-resources__head { + margin-bottom: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) +} +@media (min-width:900px) { + .openms-lib-page--publications .publications-featured__list { + grid-template-columns:repeat(2,minmax(0,1fr)); + grid-template-rows:auto auto auto 1fr auto; + column-gap:var(--pro-card-gap); + row-gap:.4rem + } + .openms-lib-page--publications .publications-featured__list > .publications-cite-card { + grid-row:span 5; + grid-template-rows:subgrid; + gap:0 + } +} +@supports not (grid-template-rows:subgrid) { + @media (min-width:900px) { + .openms-lib-page--publications .publications-featured__list > .publications-cite-card { + grid-row:auto; + grid-template-rows:none; + gap:.4rem + } + } +} +.openms-lib-page--publications .publications-cite-card, +.openms-lib-page--publications .publications-year .publication-entry { + gap:.4rem; + 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 .2s ease,box-shadow .2s ease,transform .2s ease,background-color .2s ease,color .2s ease +} +.openms-lib-page--publications .publications-featured .publications-cite-card { + gap:.4rem; + border:none; + box-shadow:none; + background:rgba(var(--openms-blue-rgb),.08) +} +.openms-lib-page--publications .publications-featured .publications-cite-card__title { + font-size:clamp(1.05rem,1.9vw,1.25rem) +} +.openms-lib-page--publications .publications-featured .publications-cite-card__meta, +.openms-lib-page--publications .publications-featured .publications-cite-card__authors { + margin:0 +} +.openms-lib-page--publications .publications-featured .publications-cite-card:hover, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within { + transform:var(--pro-lift-sm); + border:none; + background:var(--openms-blue); + box-shadow:0 .65rem 1.5rem rgba(var(--openms-blue-rgb),.28); + color:var(--openms-white) +} +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__badge, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__badge, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__title, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__title, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__title a, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__title a, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__meta, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__meta, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__journal, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__journal, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__year, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__year, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__authors-more, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__authors-more { + color:#fff +} +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__topic, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__topic, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__authors, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__authors { + color:rgba(255,255,255,.86) +} +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__badge, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__badge { + border-color:rgba(255,255,255,.35); + background:rgba(255,255,255,.14) +} +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__authors-more, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__authors-more { + border:0; + background:none; + color:rgba(255,255,255,.86) +} +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__year::before, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__year::before { + color:rgba(255,255,255,.55) +} +.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, +.openms-lib-page--publications .publications-cite-card--secondary { + border-left:1px solid var(--pro-line) +} +.openms-lib-page--publications .publications-featured .publications-cite-card--primary, +.openms-lib-page--publications .publications-featured .publications-cite-card--secondary { + border-left:none +} +.openms-lib-page--publications .publications-featured .publications-cite-card__action { + margin-top:0; + min-height:0; + padding:0; + border:0; + border-radius:0; + background:transparent; + color:var(--openms-navy); + font-size:var(--openms-body-size); + font-weight:700; + line-height:1.35; + text-decoration:none; + box-shadow:none; + transform:none; + white-space:normal +} +.openms-lib-page--publications .publications-featured .publications-cite-card__action:hover, +.openms-lib-page--publications .publications-featured .publications-cite-card__action:focus-visible, +.openms-lib-page--publications .publications-featured .publications-cite-card__action:active { + background:transparent; + border:0; + color:var(--openms-navy); + transform:none; + box-shadow:none; + text-decoration:none +} +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__action, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__action, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__action:hover, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__action:hover, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__action:focus-visible, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__action:focus-visible { + border:0; + color:#fff; + box-shadow:none; + transform:none +} +.openms-lib-page--publications .publications-featured .publications-cite-card__authors-more { + border:0; + background:none; + color:rgba(var(--openms-navy-rgb),.62) +} +.openms-lib-page--publications .publications-featured .publications-cite-card--secondary .publications-cite-card__badge { + border-color:rgba(var(--openms-navy-rgb),.16); + background:rgba(var(--openms-navy-rgb),.06) +} +.openms-lib-page--publications .publications-toolbar { + display:flex; + flex-wrap:wrap; + align-items:center; + justify-content:flex-end; + gap:.6rem .85rem; + padding:0; + margin:0; + width:100% +} +.openms-lib-page--publications .publications-toolbar__filter { + display:flex; + flex-direction:row; + align-items:center; + gap:.6rem; + margin-left:auto; + width:fit-content; + max-width:100%; + 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:.14em; + text-transform:uppercase; + color:rgba(var(--openms-navy-rgb),.6) +} +.openms-lib-page--publications .publications-toolbar__select { + width:auto; + min-width:7.5rem; + max-width:100%; + margin-left:0; + border-color:var(--pro-line-strong); + border-radius:var(--pro-radius-sm,.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; + margin-left:auto; + width:fit-content; + min-width:0 + } + .openms-lib-page--publications .publications-toolbar__select { + width:auto; + min-width:6.75rem + } +} +/* Navy-band ghost CTA — match navbar Partner (shared with zz-openms-buttons) */ +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.35rem; + min-height:2.85rem; + padding:.75rem 1.35rem; + border:2px solid rgba(var(--openms-white-rgb),.34)!important; + border-radius:var(--openms-btn-pill-radius); + background:transparent!important; + color:var(--openms-white)!important; + font-size:var(--openms-body-size); + font-weight:600; + line-height:1.3; + text-decoration:none!important; + white-space:nowrap; + box-shadow:0 0 0 0 var(--openms-btn-glow); + transition:var(--openms-btn-motion) +} +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:hover, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:active, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:hover, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:active, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:hover, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:active { + border-color:rgba(var(--openms-white-rgb),.34)!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) var(--openms-btn-glow)!important; + outline:none; + text-decoration:none!important +} +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contributors .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-navy), + 0 0 0 5px rgba(var(--openms-white-rgb), 0.45), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow)!important +} +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost .openms-lib-btn__icon, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost .openms-lib-btn__icon { + display:inline-flex; + width:1.1rem; + height:1.1rem; + flex:none +} +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost .openms-lib-btn__icon svg, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost .openms-lib-btn__icon svg { + display:block; + width:100%; + height:100%; + fill:currentColor +} +.openms-lib-layout:has(.openms-lib-page--publications #cite-openms), +.content-padding:has(.openms-lib-page--publications #cite-openms), +.openms-lib-layout:has(.openms-lib-page--contributors #join-community), +.content-padding:has(.openms-lib-page--contributors #join-community) { + padding-bottom:0; + margin-bottom:0 +} +.openms-lib-layout:has(.openms-lib-page--publications #cite-openms) + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--publications #cite-openms) + #footer.footer-redesign, +.openms-lib-layout:has(.openms-lib-page--contributors #join-community) + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--contributors #join-community) + #footer.footer-redesign { + margin-top:0; + padding-top:0 +} +.openms-lib-page--contributors .openms-lib-resources__inner { + max-width:var(--pro-max); + width:100%; + gap:var(--pro-head-to-content); + padding-bottom:0 +} +.openms-lib-page--contributors .openms-lib-page__body > .openms-lib-page__anchor { + padding-block:0 +} +.openms-lib-page--contributors #leadership .openms-lib-resources, +.openms-lib-page--contributors #executive-committee .openms-lib-resources { + padding-block:var(--pro-section-y) +} +.openms-lib-page--contributors .contributors-body { + display:contents +} +.openms-lib-page--contributors .contributors-section { + display:contents; + margin:0; + padding:0 +} +.openms-lib-page--contributors #leadership .openms-lib-resources__head, +.openms-lib-page--contributors #executive-committee .openms-lib-resources__head { + display:grid; + justify-items:center; + max-width:min(100%,42rem); + margin-inline:auto; + text-align:center +} +.openms-lib-page--contributors #leadership .openms-lib-resources__eyebrow, +.openms-lib-page--contributors #executive-committee .openms-lib-resources__eyebrow { + justify-content:center +} +.openms-lib-page--contributors #leadership .openms-lib-resources__title, +.openms-lib-page--contributors #leadership .openms-lib-resources__lead, +.openms-lib-page--contributors #executive-committee .openms-lib-resources__title, +.openms-lib-page--contributors #executive-committee .openms-lib-resources__lead { + text-align:center; + margin-inline:auto +} +.openms-lib-page--contributors .contributors-exec-gallery { + width:100%; + margin-top:clamp(1.25rem,3vw,2rem) +} +.openms-lib-page--contributors .leadership-grid { + display:grid; + grid-template-columns:repeat(3,minmax(0,1fr)); + gap:var(--pro-card-gap); + margin:0; + align-items:stretch +} +.openms-lib-page--contributors .leadership-card { + display:flex; + flex-direction:column; + align-items:stretch; + gap:1rem; + min-height:100%; + 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 .2s ease,box-shadow .2s ease,transform .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__identity { + display:flex; + align-items:center; + gap:.95rem; + padding-bottom:.95rem; + border-bottom:1px solid var(--pro-line) +} +.openms-lib-page--contributors .leadership-card__photo { + flex:none; + width:4.75rem; + height:4.75rem; + border-radius:50%; + object-fit:cover; + object-position:center top; + border:3px solid rgba(var(--openms-blue-rgb),.14); + background:rgba(var(--openms-navy-rgb),.04); + box-shadow:0 0 0 4px rgba(var(--openms-navy-rgb),.04) +} +.openms-lib-page--contributors .leadership-card__who { + min-width:0; + display:grid; + gap:.4rem +} +.openms-lib-page--contributors .leadership-card__name { + margin:0; + font-family:var(--openms-font-heading); + font-size:clamp(1.08rem,1.9vw,1.28rem); + font-weight:800; + line-height:1.25; + letter-spacing:-.01em; + color:var(--openms-navy); + text-wrap:balance +} +.openms-lib-page--contributors .leadership-card__role { + display:inline-flex; + align-items:center; + width:fit-content; + margin:0; + padding:.22rem .55rem; + border-radius:999px; + background:rgba(var(--openms-navy-rgb),.06); + font-size:.68rem; + font-weight:700; + letter-spacing:.06em; + text-transform:uppercase; + line-height:1.3; + color:rgba(var(--openms-navy-rgb),.72) +} +.openms-lib-page--contributors .leadership-card__bio { + display:grid; + gap:.65rem; + margin:0; + flex:1 1 auto; + font-size:var(--openms-body-size); + line-height:1.65; + color:var(--pro-text-muted); + text-wrap:pretty +} +.openms-lib-page--contributors .leadership-card__bio p { + margin:0 +} +.openms-lib-page--contributors .contributors-section--exec { + gap:0 +} +.openms-lib-page--contributors .openms-lib-page__outro { + background:transparent; + border-top:none; + margin-top:0; + padding-inline:max(var(--olib-pad-x),calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))) +} +.openms-lib-page--contributors #join-community.openms-lib-page__anchor { + width:100%; + max-width:none; + margin-inline:0; + padding-block:var(--pro-section-y); + box-sizing:border-box +} +.openms-lib-page--contributors #join-community .webapps-archived__revival { + display:flex; + flex-direction:column; + align-items:center; + gap:var(--pro-stack-actions); + width:100%; + max-width:none; + 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),.28),transparent 42%),var(--openms-navy); + box-shadow:none; + color:var(--openms-white); + text-align:center; + box-sizing:border-box +} +.openms-lib-page--contributors #join-community .webapps-archived__revival-copy { + flex:initial; + max-width:46ch +} +.openms-lib-page--contributors #join-community .webapps-archived__revival-kicker { + margin:0 0 var(--pro-stack-eyebrow); + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--pro-kicker-on-dark) +} +.openms-lib-page--contributors #join-community .webapps-archived__revival-text { + margin:0; + color:var(--openms-white) +} +.openms-lib-page--contributors #join-community .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--contributors #join-community .webapps-archived__revival-note { + display:block; + margin-top:var(--pro-stack-lead); + font-family:var(--openms-font-body); + font-size:var(--openms-body-size-lg); + font-weight:400; + line-height:1.65; + color:var(--pro-text-on-dark) +} +.openms-lib-page--contributors #join-community .webapps-archived__revival-actions { + display:flex; + flex-direction:row; + flex-wrap:nowrap; + justify-content:center; + align-items:center; + gap:1.25rem; + width:100% +} +.openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn { + display:inline-flex; + align-items:center; + justify-content:center; + flex:0 0 auto; + gap:.35rem; + min-width:11.5rem; + width:11.5rem; + min-height:var(--openms-btn-min-height, 2.75rem); + padding:var(--openms-btn-padding, 0.7rem 1.25rem); + border-radius:var(--openms-btn-pill-radius); + font-size:var(--openms-btn-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-lib-page--contributors #join-community .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--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--ghost { + border:2px solid rgba(var(--openms-white-rgb),.34); + background:transparent; + background-color:transparent; + color:var(--openms-white)!important +} +.openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--primary:hover, +.openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--contributors #join-community .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) rgba(255,255,255,.22); + outline:none +} +.openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--ghost:hover, +.openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--ghost:active { + /* Match navbar “Sponsor Us”: outline stays, scale + glow only */ + border-color:rgba(var(--openms-white-rgb),.34) !important; + background:transparent !important; + background-color:transparent !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 +} +@media(max-width:720px) { + .openms-lib-page--contributors #join-community .webapps-archived__revival-actions { + display:flex !important; + flex-direction:column !important; + flex-wrap:nowrap; + align-items:stretch; + justify-content:center; + gap:.75rem; + width:100%; + max-width:24rem; + margin-inline:auto; + grid-template-columns:none + } + .openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn { + flex:0 0 auto; + width:100% !important; + min-width:0; + white-space:normal + } +} +.openms-lib-page--contributors .contributors-exec-panel { + display:grid; + grid-template-columns:minmax(0,1.35fr) minmax(14rem,.85fr); + gap:clamp(1.25rem,3vw,2.25rem); + align-items:center; + margin:0; + padding:0; + border:none; + border-radius:0; + background:transparent; + box-shadow:none +} +.openms-lib-page--contributors .contributors-exec-panel__copy { + display:grid; + justify-items:start; + gap:0; + min-width:0; + text-align:left +} +.openms-lib-page--contributors .contributors-exec-panel__kicker { + margin:0 0 var(--pro-stack-eyebrow,.45rem); + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--openms-blue) +} +.openms-lib-page--contributors .contributors-exec-panel__title { + margin:0; + font-family:var(--openms-font-heading); + font-size:calc(var(--openms-heading-lg-size,1.65rem) * 1.05); + font-weight:var(--openms-heading-lg-weight,800); + line-height:1.25; + letter-spacing:normal; + text-transform:uppercase; + color:var(--openms-navy) +} +.openms-lib-page--contributors .contributors-exec-panel__lead { + margin:var(--pro-stack-lead,.75rem) 0 0; + max-width:42ch; + font-size:var(--openms-body-size-lg); + line-height:1.6; + color:var(--pro-text-muted) +} +.openms-lib-page--contributors .contributors-exec-panel__links { + display:grid; + gap:.55rem; + min-width:0 +} +.openms-lib-page--contributors .contributors-exec-panel__link { + display:flex; + align-items:center; + justify-content:space-between; + gap:.75rem; + margin:0; + padding:.85rem 1rem; + border:1px solid var(--pro-line); + border-radius:var(--pro-radius-sm,.85rem); + background:rgba(var(--openms-navy-rgb),.03); + color:var(--openms-navy)!important; + font-size:var(--openms-body-size); + font-weight:700; + line-height:1.35; + text-decoration:none!important; + transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,gap .2s ease,background-color .2s ease +} +.openms-lib-page--contributors .contributors-exec-panel__link:hover, +.openms-lib-page--contributors .contributors-exec-panel__link:focus-visible { + border-color:var(--pro-line-strong); + background:var(--openms-white); + box-shadow:var(--pro-shadow-hover); + transform:var(--pro-lift-sm); + outline:none; + color:var(--openms-navy)!important; + text-decoration:none!important +} +.openms-lib-page--contributors .contributors-exec-panel__link span:last-child { + flex:none; + transition:transform .2s ease +} +.openms-lib-page--contributors .contributors-exec-panel__link:hover span:last-child, +.openms-lib-page--contributors .contributors-exec-panel__link:focus-visible span:last-child { + transform:translateX(.2rem) +} +@media(max-width:720px) { + .openms-lib-page--contributors .contributors-exec-panel { + grid-template-columns:1fr; + gap:1.15rem; + text-align:left + } +} +.openms-lib-page--contributors .team { + margin:0; + padding:0 +} +.openms-lib-page--contributors .team>.name.title { + display:none +} +.openms-lib-page--contributors .members { + display:contents +} +.openms-lib-page--contributors .member { + display:grid; + justify-items:center; + align-content:center; + gap:.55rem; + margin:0; + padding:1rem .85rem; + 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 .2s ease,box-shadow .2s ease,transform .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:.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),.14); + background:rgba(var(--openms-navy-rgb),.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:none +} +@media(max-width:1100px) { + .openms-lib-page--contributors .leadership-grid { + 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 .leadership-card__identity { + flex-direction:column; + align-items:center; + text-align:center + } + .openms-lib-page--contributors .leadership-card__who { + justify-items:center + } + .openms-lib-page--contributors .leadership-card__bio { + text-align:center + } + +} + +.openms-lib-page--research-partnerships .openms-lib-resources__inner { + max-width:var(--pro-max) +} +.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor { + padding-block:0 +} +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about, +.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) +} +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources { + padding-bottom:clamp(1.5rem,4vw,2.5rem) +} +.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:.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 .2s ease,box-shadow .2s ease,transform .2s ease +} +.openms-lib-page--research-partnerships .rp-include__card::before { + content:""; + width:2.4rem; + height:2.4rem; + border-radius:.65rem; + background-color:rgba(var(--openms-navy-rgb),.06); + background-repeat:no-repeat; + background-position:50%; + background-size:1.2rem; + box-shadow:none; + transition:transform .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:.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:var(--pro-cluster-max, min(100%, 68rem)); + 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:.85rem; + border:none; + background:0 0; + 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:0 0; + box-shadow:none +} +.openms-lib-page--research-partnerships .rp-application__tally-iframe { + display:block; + width:100%; + min-height:0 !important; + border:0; + overflow:visible; + background:transparent +} +@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 + } + +} +.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) * .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:.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 .2s ease,box-shadow .2s ease,transform .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:.35rem; + border-radius:.65rem; + color:var(--openms-navy); + background:rgba(var(--openms-navy-rgb),.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),.72) +} +.openms-lib-page--donate .donate-application { + padding-block:var(--pro-section-y); + padding-top:calc(var(--pro-section-y) * .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:.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),.62) +} +.openms-lib-page--donate .donate-application__note a { + color:var(--openms-blue); + font-weight:600; + text-decoration:underline; + text-underline-offset:.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:0 0; + box-shadow:none; + overflow:visible +} +.openms-lib-page--donate .donate-page__zeffy-iframe { + display:block; + width:100%; + min-height:52rem; + border:0; + overflow:visible; + background:0 0 +} +.openms-lib-page--donate .donate-application__actions { + display:flex; + flex-wrap:wrap; + justify-content:center; + gap:.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:720px) { + .openms-lib-page--donate .donate-page__zeffy-iframe { + min-height:72rem + } + .openms-lib-page--donate .donate-application__actions { + flex-direction:column; + align-items:stretch + } + +} + +/* Form embeds: page scrolls — never nest a scrollbar in the iframe */ +@media (max-width: 720px) { + .contact-page__tally-iframe, + .fellowship-page__tally-iframe, + .services-page__tally-iframe, + .rp-application__tally-iframe, + .donate-page__zeffy-iframe, + .openms-lib-page--contact .contact-page__tally-iframe, + .openms-lib-page--fellowship .fellowship-page__tally-iframe, + .openms-lib-page--services-support .services-page__tally-iframe, + .openms-lib-page--research-partnerships .rp-application__tally-iframe, + .openms-lib-page--donate .donate-page__zeffy-iframe { + overflow: visible !important; + max-height: none; + } + + .contact-page__form-body, + .fellowship-page__form-body, + .services-page__form-body, + .rp-application__form, + .donate-application__form, + .donate-page__embed, + .contact-application__form, + .fellowship-application__form-card, + .services-support-application__form { + overflow: visible; + max-height: none; + } +} +.openms-lib-page--governance #related-pages.openms-lib-page__anchor, +.openms-lib-page--our-sponsors #sponsor-cta.openms-lib-page__anchor, +.openms-lib-page--sponsor-us #become-a-sponsor.openms-lib-page__anchor { + background: var(--pro-band-soft, var(--olib-bg-soft, #f4f6f9)); + padding-inline: max(var(--olib-pad-x, clamp(1.25rem, 4vw, 2rem)), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x, clamp(1.25rem, 4vw, 2rem)))); + padding-block: var(--pro-section-y); +} + +.openms-lib-page--governance .governance-cta-band, +.openms-lib-page--our-sponsors .governance-cta-band, +.openms-lib-page--sponsor-us .governance-cta-band { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; + box-sizing: border-box; +} + +.openms-lib-page--governance .governance-cta-band__panel, +.openms-lib-page--our-sponsors .governance-cta-band__panel, +.openms-lib-page--sponsor-us .governance-cta-band__panel { + 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--governance .governance-cta-band__copy, +.openms-lib-page--our-sponsors .governance-cta-band__copy, +.openms-lib-page--sponsor-us .governance-cta-band__copy { + flex: initial; + max-width: 46ch; +} + +.openms-lib-page--sponsor-us .governance-cta-band__copy { + max-width: min(62ch, 100%); +} + +.openms-lib-page--governance .governance-cta-band__kicker, +.openms-lib-page--our-sponsors .governance-cta-band__kicker, +.openms-lib-page--sponsor-us .governance-cta-band__kicker { + 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(--pro-kicker-on-dark); +} + +.openms-lib-page--governance .governance-cta-band__text, +.openms-lib-page--our-sponsors .governance-cta-band__text, +.openms-lib-page--sponsor-us .governance-cta-band__text { + margin: 0; + color: var(--openms-white); +} + +.openms-lib-page--governance .governance-cta-band__text strong, +.openms-lib-page--our-sponsors .governance-cta-band__text strong, +.openms-lib-page--sponsor-us .governance-cta-band__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--governance .governance-cta-band__note, +.openms-lib-page--our-sponsors .governance-cta-band__note, +.openms-lib-page--sponsor-us .governance-cta-band__note { + display: block; + margin-top: var(--pro-stack-lead); + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 400; + line-height: 1.65; + color: var(--pro-text-on-dark); +} + +.openms-lib-page--governance .governance-cta-band__actions, +.openms-lib-page--our-sponsors .governance-cta-band__actions, +.openms-lib-page--sponsor-us .governance-cta-band__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--pro-space-4); +} + +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + min-width: clamp(10rem, 22vw, 14rem); + 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; + transition: var(--openms-btn-motion); +} + +/* Become a sponsor / View program — content-sized like navbar Sponsor Us */ +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn, +.openms-lib-page--our-sponsors #sponsor-cta .governance-cta-band__actions .openms-lib-btn { + width: fit-content; + min-width: 0; +} + +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--primary, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--primary { + border: 2px solid var(--openms-white); + background: var(--openms-white); + color: var(--openms-navy) !important; +} + +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--primary:focus-visible { + 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) rgba(255, 255, 255, 0.22); + outline: none; + text-decoration: none; +} + +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost { + border: 2px solid rgba(var(--openms-white-rgb), 0.34); + background: transparent; + color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow); +} + +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost:active { + /* Match navbar “Sponsor Us”: outline stays, scale + glow only */ + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + background: transparent !important; + background-color: transparent !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; +} + +@media (max-width: 640px) { + .openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn, + .openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn, + .openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn { + width: 100%; + min-width: 0; + } + + .openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn, + .openms-lib-page--our-sponsors #sponsor-cta .governance-cta-band__actions .openms-lib-btn { + width: fit-content; + } +} + +/* Governance — match Contribute equal section rhythm */ +.openms-lib-page--governance .openms-lib-hero--pro { + padding-bottom: calc(clamp(2.75rem, 5.5vw, 4.25rem) + var(--openms-btn-glow-size, 6px)); + overflow: visible; +} + +.openms-lib-page--governance .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: var(--pro-section-y) !important; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08); +} + +.openms-lib-page--governance .openms-lib-page__body > .openms-lib-page__anchor:last-child { + border-bottom: none; +} + +.openms-lib-page--governance .openms-lib-about, +.openms-lib-page--governance .openms-lib-resources { + padding-block: 0; + padding-top: 0; +} + +.openms-lib-page--governance .openms-lib-about__inner, +.openms-lib-page--governance .openms-lib-resources__inner { + gap: var(--pro-head-to-content); + padding-bottom: 0; +} + +.openms-lib-page--governance .openms-lib-about__head { + grid-template-columns: 1fr; + align-items: start; +} + +.openms-lib-page--governance #governance-bodies .openms-lib-about__head { + display: grid; + justify-items: center; + text-align: center; + max-width: min(100%, 42rem); + margin-inline: auto; +} + +.openms-lib-page--governance #governance-bodies .openms-lib-about__head-copy { + justify-items: center; + text-align: center; +} + +.openms-lib-page--governance #governance-bodies .openms-lib-about__eyebrow { + justify-content: center; +} + +.openms-lib-page--governance #governance-bodies .openms-lib-about__title, +.openms-lib-page--governance #governance-bodies .openms-lib-about__lead { + text-align: center; + margin-inline: auto; +} + +/* Structure overview — lightweight hierarchy above the 01/02 cards */ +.openms-lib-page--governance .governance-structure { + display: block; + width: 100%; + max-width: min(100%, 36rem); + margin: 0 auto; + padding: 0; +} +.openms-lib-page--governance .governance-structure__stack { + display: grid; + justify-items: center; + gap: 0; + margin: 0; + padding: 0; + list-style: none; +} +.openms-lib-page--governance .governance-structure__node { + display: grid; + gap: 0.2rem; + width: 100%; + max-width: 22rem; + margin: 0; + padding: 0.85rem 1.15rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.14); + border-radius: var(--pro-radius, 0.75rem); + background: color-mix(in srgb, var(--pro-band-soft, #f4f6f9) 55%, var(--openms-white)); + box-shadow: none; + text-align: center; +} +.openms-lib-page--governance .governance-structure__node--legal { + border-color: rgba(var(--openms-navy-rgb), 0.22); + background: color-mix(in srgb, var(--openms-navy) 6%, var(--openms-white)); +} +.openms-lib-page--governance .governance-structure__node--tech { + border-color: rgba(var(--openms-blue-rgb), 0.28); + background: color-mix(in srgb, var(--openms-blue) 7%, var(--openms-white)); +} +.openms-lib-page--governance .governance-structure__node--core { + border-color: rgba(var(--openms-navy-rgb), 0.12); + background: var(--openms-white); +} +.openms-lib-page--governance .governance-structure__role { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--pro-text-soft, rgba(var(--openms-dark-rgb), 0.55)); +} +.openms-lib-page--governance .governance-structure__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size, 1.05rem); + font-weight: 700; + line-height: 1.25; + color: var(--openms-navy); +} +.openms-lib-page--governance .governance-structure__connector { + display: flex; + justify-content: center; + align-items: stretch; + width: 100%; + height: 1.35rem; + margin: 0; + padding: 0; + list-style: none; +} +.openms-lib-page--governance .governance-structure__line { + display: block; + width: 2px; + height: 100%; + background: linear-gradient( + 180deg, + rgba(var(--openms-blue-rgb), 0.15), + rgba(var(--openms-blue-rgb), 0.5), + rgba(var(--openms-blue-rgb), 0.15) + ); + border-radius: 999px; +} +@media (min-width: 900px) { + .openms-lib-page--governance .governance-structure { + max-width: min(100%, 42rem); + } +} + +.openms-lib-page--governance .openms-lib-about__eyebrow { + margin-bottom: var(--pro-stack-eyebrow); +} + +.openms-lib-page--governance .openms-lib-about__lead { + margin-top: var(--pro-stack-lead); + max-width: none; +} + +/* Separation of Responsibilities — copy above, cards side by side */ +.openms-lib-page--governance #responsibilities .openms-lib-about__inner { + display: grid; + grid-template-columns: 1fr; + gap: var(--pro-head-to-content); + align-items: start; +} + +.openms-lib-page--governance #responsibilities .openms-lib-about__head { + grid-template-columns: 1fr; + align-items: start; + max-width: min(100%, 28rem); + margin: 0; +} + +.openms-lib-page--governance #responsibilities .openms-lib-about__head-copy { + max-width: min(100%, 28rem); +} + +.openms-lib-page--governance #responsibilities .openms-lib-about__lead { + max-width: 36ch; +} + +.openms-lib-page--governance #responsibilities .governance-compare-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: stretch; + gap: var(--pro-card-gap, 1rem); + width: 100%; + margin: 0; +} + +.openms-lib-page--governance #responsibilities .governance-compare-grid .openms-lib-resources__item { + height: 100%; + min-height: 0; + max-height: none; +} + +.openms-lib-page--governance #responsibilities .governance-compare-grid .openms-lib-resources__item-text { + display: block; + -webkit-line-clamp: unset; + overflow: visible; +} + +@media (max-width: 900px) { + .openms-lib-page--governance #responsibilities .openms-lib-about__head, + .openms-lib-page--governance #responsibilities .openms-lib-about__head-copy { + max-width: min(100%, 36rem); + } + + .openms-lib-page--governance #responsibilities .openms-lib-about__lead { + max-width: none; + } +} + +@media (max-width: 640px) { + .openms-lib-page--governance #responsibilities .governance-compare-grid { + grid-template-columns: 1fr; + } +} + +.openms-lib-page--governance #governance-bodies .governance-lead-line { + display:block; + white-space:nowrap +} + +.openms-lib-page--governance #core-developers .governance-lead-line { + display: block; + white-space: normal; +} + +.openms-lib-page--governance #responsibilities .governance-lead-line { + display: block; + white-space: normal; +} + +@media(max-width:900px) { + .openms-lib-page--governance #governance-bodies .governance-lead-line { + white-space:normal + } + +} +.openms-lib-page--governance .governance-tile__tag { + 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--governance #governance-bodies .openms-lib-about__tile-title { + margin: 0.35rem 0 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(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)); +} + +.openms-lib-page--governance #governance-bodies .openms-lib-about__tile-text { + margin: 0.45rem 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); +} +.openms-lib-page--governance .governance-tile__top { + display: grid; + gap: 0.35rem; + 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; +} + +/* Large watermark numbers — shared step-num tokens (site-wide contrast) */ +.openms-lib-page--governance .openms-lib-about__num { + display: block; + width: auto; + height: auto; + margin: 0 0 0.2rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + font-family: var(--openms-font-heading); + font-size: var(--openms-step-num-size); + font-weight: 800; + line-height: 1; + letter-spacing: -0.04em; + color: var(--openms-step-num-color); + transition: color 0.22s ease; +} +.openms-lib-page--governance .openms-lib-about__tile:hover .openms-lib-about__num, +.openms-lib-page--governance .openms-lib-about__tile:focus-within .openms-lib-about__num { + color: var(--openms-step-num-color-hover); +} + +/* Soft blue icons — same size as OpenMS-lib / hub card icons */ +.openms-lib-page--governance .openms-lib-resources__item-icon { + display: grid; + place-items: center; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + color: rgba(var(--openms-blue-rgb), 0.28); + font-size: var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + line-height: 1; + transition: color 0.22s ease; +} +.openms-lib-page--governance .openms-lib-resources__item-icon .fab, +.openms-lib-page--governance .openms-lib-resources__item-icon .fas, +.openms-lib-page--governance .openms-lib-resources__item-icon .svg-inline--fa { + color: rgba(var(--openms-blue-rgb), 0.28) !important; + font-size: 1em; + width: 1em; + height: 1em; + transition: color 0.22s ease; +} +.openms-lib-page--governance .openms-lib-resources__item-icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--governance .governance-tile__list { + display: grid; + gap: 0.45rem; + margin: 0.35rem 0 0; + padding: 0; + list-style: none; + flex: 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); +} +/* Keep 01/02 CTAs aligned at the card foot despite unequal list lengths */ +.openms-lib-page--governance #governance-bodies .openms-lib-about__tile { + display: flex !important; + flex-direction: column; + align-items: flex-start; + align-content: stretch; +} +.openms-lib-page--governance #governance-bodies .governance-tile__list { + flex: 1 1 auto; + width: 100%; +} +.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)); +} + +/* Cards — same white bg / border / hover lift as OpenMS-lib */ +.openms-lib-page--governance .openms-lib-about__tile, +.openms-lib-page--governance .openms-lib-resources__item, +.openms-lib-page--governance .openms-lib-resources__item--static { + border: 1px solid var(--pro-line) !important; + border-radius: var(--pro-radius) !important; + background: var(--openms-white) !important; + box-shadow: var(--pro-shadow) !important; + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; +} + +/* Core developers pillars — compact title cards (no forced equal height) */ +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item, +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item--static, +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item:hover, +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item:focus-visible, +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item:focus-within, +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item--static:hover, +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item--static:focus-within { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + padding: clamp(0.85rem, 1.6vw, 1.1rem) clamp(0.9rem, 1.8vw, 1.15rem) !important; + gap: 0.55rem; + border-color: transparent !important; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%), + var(--openms-navy) !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.28) !important; + color: var(--openms-white) !important; +} + +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item--static:hover, +.openms-lib-page--governance #core-developers .governance-pillars-grid > .openms-lib-resources__item--static:focus-within { + transform: translateY(-3px); + box-shadow: 0 0.95rem 2rem rgba(var(--openms-navy-rgb), 0.34) !important; +} + +.openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item-tag, +.openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item-title { + color: var(--openms-white) !important; +} + +.openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item-icon, +.openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item-icon .fas, +.openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item-icon .svg-inline--fa { + color: rgba(var(--openms-white-rgb), 0.9) !important; +} + +.openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item-icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--governance .openms-lib-resources__item--static { + cursor: default; +} + +.openms-lib-page--governance .openms-lib-about__tile:hover, +.openms-lib-page--governance .openms-lib-about__tile:focus-within, +.openms-lib-page--governance .openms-lib-resources__item--static:hover, +.openms-lib-page--governance .openms-lib-resources__item--static:focus-within { + transform: var(--pro-lift-sm); + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); +} + +/* Separation of Responsibilities — navy hover fill */ +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static { + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease, + background 0.22s ease, + color 0.22s ease; +} + +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within { + /* Beat the governance white card `background: … !important` so hover isn’t white-on-white */ + border-color: transparent !important; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%), + var(--openms-navy) !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32) !important; + color: var(--openms-white); + transform: translateY(-3px); +} + +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover .openms-lib-resources__item-tag, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-tag { + color: var(--openms-white) !important; +} + +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover .openms-lib-resources__item-title, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-title { + color: var(--openms-white) !important; +} + +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover .openms-lib-resources__item-text, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-text { + color: rgba(var(--openms-white-rgb), 0.88) !important; +} + +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon .fas, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon .fas, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon .svg-inline--fa, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon .svg-inline--fa { + color: rgba(var(--openms-white-rgb), 0.88) !important; +} +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon .svg-inline--fa path, +.openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon .svg-inline--fa path { + fill: currentColor !important; +} +.openms-lib-page--governance .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon, +.openms-lib-page--governance .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon, +.openms-lib-page--governance .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon .fab, +.openms-lib-page--governance .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon .fab, +.openms-lib-page--governance .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon .fas, +.openms-lib-page--governance .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon .fas, +.openms-lib-page--governance .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon .svg-inline--fa, +.openms-lib-page--governance .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon .svg-inline--fa { + color: var(--openms-blue) !important; +} +.openms-lib-page--governance .openms-lib-resources__item--static:hover .openms-lib-resources__item-icon .svg-inline--fa path, +.openms-lib-page--governance .openms-lib-resources__item--static:focus-within .openms-lib-resources__item-icon .svg-inline--fa path { + fill: currentColor !important; +} +.openms-lib-page--governance .openms-lib-resources__item--static .openms-lib-resources__item-title { + font-size: clamp(1rem, 1.4vw, 1.1rem); + font-weight: 700; + line-height: 1.3; + color: var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)); +} +.openms-lib-page--governance .governance-note { + display: grid; + gap: var(--pro-space-4); + width: 100%; + max-width: none; + margin: var(--pro-space-5) 0 0; + padding: var(--pro-space-5) 0 0; + border: none; + border-top: 1px solid var(--pro-line); + background: transparent; +} +.openms-lib-page--governance .governance-note__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size) * 1.05); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-navy); +} +.openms-lib-page--governance .governance-note__list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-space-4) var(--pro-space-5); + margin: 0; + padding: 0; + list-style: none; +} +.openms-lib-page--governance .governance-note__item { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 0.85rem; + align-items: start; + margin: 0; + padding: 0; +} +.openms-lib-page--governance .governance-note__index { + display: block; + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-step-num-size); + font-weight: 800; + line-height: 1; + letter-spacing: -0.04em; + color: var(--openms-step-num-color); +} +.openms-lib-page--governance .governance-note__body { + min-width: 0; + padding-top: 0.35em; +} +.openms-lib-page--governance .governance-note__label { + margin: 0 0 0.35rem; + font-family: var(--openms-font-heading); + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-blue); +} +.openms-lib-page--governance .governance-note__text { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 400; + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.72); +} +@media (max-width: 700px) { + .openms-lib-page--governance .governance-note__list { + grid-template-columns: 1fr; + gap: var(--pro-space-3); + } +} +.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__inner { + display:grid; + grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); + align-items:start; + column-gap:var(--pro-col-gap,clamp(2rem,5vw,4rem)); + row-gap:var(--pro-head-to-content) +} +.openms-lib-page--governance #core-developers .openms-lib-resources__head { + max-width:min(100%,28rem); + margin:0 +} +.openms-lib-page--governance #core-developers .openms-lib-resources__lead { + max-width:none +} +.openms-lib-page--governance #core-developers .openms-lib-resources__toolkit { + min-width:0; + margin:0 +} +.openms-lib-page--governance #core-developers .governance-membership { + grid-column:1 / -1; + margin-top:calc(var(--pro-section-y) * 0.45); + padding-top:var(--pro-section-y) +} +.openms-lib-page--governance #core-developers .governance-pillars-grid { + grid-template-columns:repeat(2,minmax(0,1fr)) +} +@media(max-width:992px) { + .openms-lib-page--governance #core-developers .openms-lib-resources__inner { + grid-template-columns:1fr + } + .openms-lib-page--governance #core-developers .openms-lib-resources__head { + 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 + } + +} +.openms-lib-page--our-sponsors #our-sponsors { + background:var(--openms-white)!important +} +.openms-lib-page--our-sponsors .openms-lib-page__outro .openms-lib-block--developers { + background:transparent; + padding-inline:0 +} +/* Become a sponsor — full-bleed navy CTA band */ +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--our-sponsors .openms-lib-developers__card--build, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--our-sponsors .openms-lib-developers__review, +.openms-lib-page--openms-lib.openms-lib-page--our-sponsors .openms-lib-developers__card--build, +.openms-lib-page--openms-lib.openms-lib-page--our-sponsors .openms-lib-developers__review { + box-sizing: border-box; + background: var(--openms-navy) !important; + color: var(--openms-white) !important; + box-shadow: none !important; +} +.openms-lib-page--our-sponsors #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 { + display:grid; + grid-template-columns:repeat(3,minmax(0,1fr)); + gap:.5rem .75rem; + max-width:36rem; + margin:0 auto; + width:100% +} +.openms-lib-page--our-sponsors .about-sponsors-logos__item { + display:flex; + align-items:center; + justify-content:center; + min-height:6.5rem; + padding:.35rem; + border:none; + border-radius:0; + background:0 0; + box-shadow:none; + text-decoration:none; + transition:transform .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:0 0; + 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:hover, +.openms-lib-page--sponsor-us .about-sponsors-logos__item--dark:focus-visible { + background:0 0; + 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] { + 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.55) !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: var(--openms-white) !important; + background: rgba(var(--openms-white-rgb), 0.12) !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.28); +} +@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:.25rem + } + +} +.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) * .5) +} +.openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__inner { + gap:var(--pro-head-to-content, clamp(1.5rem,3vw,2.25rem)) +} +.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:.1rem +} +.openms-lib-page--sponsor-us .openms-lib-about__lead { + margin-top:.2rem; + 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)); + gap:clamp(.75rem,1.5vw,1.1rem); + width:100%; + max-width:100%; + min-width:0; + align-items:start +} +.openms-lib-page--sponsor-us .openms-lib-about__tile { + box-sizing:border-box; + gap:.3rem; + min-height:0; + min-width:0; + max-width:100%; + padding:clamp(.85rem,1.6vw,1.05rem); + 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:.75rem; + width:100%; + min-width:0 +} +.openms-lib-page--sponsor-us .sponsor-tile__top .openms-lib-about__num { + flex:none; + margin-bottom:0 +} +.openms-lib-page--sponsor-us .sponsor-tile__top .openms-lib-about__tile-title { + flex:auto; + min-width:0; + margin:0; + overflow-wrap:break-word +} +.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:.3rem; + box-sizing:border-box; + width:100%; + min-width:0; + margin:.2rem 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),.72) +} +.openms-lib-page--sponsor-us .sponsor-tile__list li::before { + content:""; + position:absolute; + left:0; + top:.55em; + width:.32rem; + height:.32rem; + border-radius:50%; + background:rgba(var(--openms-navy-rgb),.35) +} +.openms-lib-page--sponsor-us .openms-lib-about__tile-link { + display:inline-flex; + align-items:center; + gap:.3rem; + margin-top:.55rem; + padding-top:0; + font-size:var(--openms-text-min); + font-weight:700; + color:var(--openms-navy)!important; + text-decoration:none!important; + transition:gap .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:.5rem +} +.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:flex; + flex-direction:column; + align-items:flex-start; + justify-items:start; + gap:0; + max-width:100%; + margin-inline:0; + margin-bottom:var(--pro-head-to-content,clamp(2.25rem, 4.5vw, 3.25rem)); + text-align:left +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-eyebrow { + justify-self:start; + margin-inline:0 +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head h2 { + width:100% +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + width:100%; + align-self:stretch +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-eyebrow { + display:inline-flex; + align-items:center; + gap:.4rem; + margin:0 0 var(--pro-stack-eyebrow); + padding:0; + border:none; + border-radius:0; + background:0 0; + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.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; + grid-template-columns:repeat(2,minmax(0,1fr)); + column-gap:var(--pro-col-gap,clamp(2rem,5vw,4rem)); + row-gap:.85rem; + margin:var(--pro-stack-lead, .75rem) 0 0; + max-width:100% !important; + width:100% !important; + 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; + min-width: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, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:focus-within { + --tier-accent:var(--openms-blue); + --tier-accent-rgb:var(--openms-blue-rgb); + position:relative; + display:flex; + flex-direction:column; + min-width:0; + /* Content-driven; equal height via grid stretch */ + height:100%!important; + min-height:0!important; + max-height:none!important; + padding:0; + border:1px solid var(--pro-line); + border-radius:1rem; + background:var(--openms-white); + box-shadow:var(--pro-shadow); + overflow:visible!important; + transition:border-color .2s ease,box-shadow .2s ease,transform .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 +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--silver { + --tier-accent:#65727e; + --tier-accent-rgb:101, 114, 126 +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--gold { + --tier-accent:#a97808; + --tier-accent-rgb:169, 120, 8 +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--platinum { + --tier-accent:#5d5d70; + --tier-accent-rgb:93, 93, 112 +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:focus-within { + transform:none; + border-color:var(--pro-line); + background:var(--openms-white); + box-shadow:var(--pro-shadow) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured:focus-within { + 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--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:.28rem .7rem; + border-radius:999px; + background:var(--openms-blue); + color:var(--openms-white); + font-size:.68rem; + font-weight:700; + letter-spacing:.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:.75rem; + flex:auto; + width:100%; + min-height:100%; + height:100%; + padding:1.35rem 1.15rem 1.2rem; + margin:0; + text-align:left; + cursor:pointer; + color:inherit; + appearance:none; + background:0 0; + border:0; + font:inherit +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__header { + display:grid; + gap:.25rem +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__name { + margin:0; + font-family:var(--openms-font-heading); + font-size:.78rem; + font-weight:700; + line-height:1.2; + letter-spacing:.08em; + text-transform:uppercase; + color:var(--openms-card-title-color, var(--openms-navy)) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__contribution { + display:flex; + flex-wrap:wrap; + align-items:baseline; + gap:.35rem; + margin:.15rem 0 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:-.04em; + color:var(--openms-card-title-color, var(--openms-navy)) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__period { + font-size:.8rem; + font-weight:600; + color:var(--openms-card-title-color, var(--openms-navy)) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__motto { + margin:0; + font-size:.68rem; + font-weight:600; + letter-spacing:.06em; + text-transform:uppercase; + color:var(--openms-card-title-color, var(--openms-navy)); + opacity:.85 +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__summary { + margin:0; + font-size:var(--openms-text-min); + line-height:1.4; + color:var(--pro-text-muted) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__benefits { + display:grid; + gap:.4rem; + margin:0; + padding:0; + list-style:none; + flex:auto +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__benefits li { + display:grid; + grid-template-columns:auto 1fr; + gap:.4rem; + align-items:start; + margin:0; + font-size:var(--openms-text-min); + line-height:1.35; + color:rgba(var(--openms-dark-rgb),.82) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__check { + display:inline-flex; + align-items:center; + justify-content:center; + width:1.25rem; + height:1.25rem; + margin-top:.05rem; + color:#1f9d63 +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__check svg { + width:1.125rem; + height:1.125rem +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.35rem; + width:100%; + min-height:2.85rem; + margin-top:auto; + padding:.75rem 1.35rem; + border:2px solid var(--openms-navy); + border-radius:var(--openms-btn-pill-radius); + background:transparent; + font-size:var(--openms-body-size); + font-weight:600; + line-height:1.3; + color:var(--openms-navy)!important; + text-decoration:none; + box-shadow:0 0 0 0 rgba(var(--openms-navy-rgb),.16); + transition:var(--openms-btn-motion); + pointer-events:auto +} +/* Hover only on Learn more — not the whole card */ +@media (hover:hover) and (pointer:fine) { + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:hover { + border-color:var(--openms-navy); + background: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) rgba(var(--openms-navy-rgb),.22) + } +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:focus-visible .sponsor-tier__cta { + border-color:var(--openms-navy); + background: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) rgba(var(--openms-navy-rgb),.22) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:active .sponsor-tier__cta { + transform:none; + box-shadow:none +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active { + transform:none; + border-color:var(--tier-accent); + background:var(--openms-white); + box-shadow:0 0 0 1px var(--tier-accent),var(--pro-shadow) +} +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured.sponsor-tier--active .sponsor-tier__cta { + border-color:var(--openms-navy); + background:var(--openms-navy); + color:var(--openms-white)!important; + box-shadow:none; + transform:none +} +@media (hover:hover) and (pointer:fine) { + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta:hover, + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured .sponsor-tier__cta:hover { + transform:scale(var(--openms-btn-hover-scale)); + box-shadow:0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb),.28) + } +} +.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) +} +@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:none; + width:100%; + margin-inline:0 + } + +} +.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-6)0 0; + padding:clamp(1.25rem,2.5vw,1.75rem)0 0; + border:none; + border-radius:0; + background:0 0; + box-shadow:none; + text-align:center +} +.openms-lib-page--sponsor-us .sponsor-tiers__note > .openms-lib-btn { + margin-bottom: clamp(1.5rem, 4vw, 3rem); +} +.openms-lib-page--sponsor-us .sponsor-tiers__note-copy { + display:grid; + justify-items:center; + gap:var(--pro-stack-lead,.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:.14em; + text-transform:uppercase; + color:var(--openms-blue) +} +.openms-lib-page--sponsor-us .sponsor-tiers__note-text { + margin:0; + max-width:var(--pro-measure-wide,58ch); + 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:inline +} +.openms-lib-page--sponsor-us .sponsor-note-line + .sponsor-note-line::before { + content:" " +} +.openms-lib-page--sponsor-us .sponsor-benefits { + margin-top:var(--pro-space-6); + padding:0; + border:1px solid var(--pro-line); + border-radius:var(--pro-radius); + background:var(--openms-white); + box-shadow:var(--pro-shadow) +} +.openms-lib-page--sponsor-us .sponsor-benefits__summary { + display:flex; + align-items:center; + justify-content:space-between; + gap:1rem; + padding:1rem 1.15rem; + cursor:pointer; + list-style:none +} +.openms-lib-page--sponsor-us .sponsor-benefits__summary::-webkit-details-marker { + display:none +} +.openms-lib-page--sponsor-us .sponsor-benefits__summary::after { + content:"+"; + flex-shrink:0; + font-size:2rem; + font-weight:600; + line-height:1; + color:var(--openms-blue) +} +.openms-lib-page--sponsor-us .sponsor-benefits[open] .sponsor-benefits__summary::after { + content:"–" +} +.openms-lib-page--sponsor-us .sponsor-benefits__summary:focus-visible { + outline:2px solid var(--openms-blue); + outline-offset:2px +} +.openms-lib-page--sponsor-us .sponsor-benefits__summary-copy { + display:grid; + gap:.3rem; + min-width:0 +} +.openms-lib-page--sponsor-us .sponsor-benefits__title { + margin:0; + font-family:var(--openms-font-heading); + font-size:var(--openms-secondary-heading-size-lg); + font-weight:var(--openms-card-title-weight-strong,800); + line-height:1.25; + letter-spacing:normal; + text-transform:none; + color:var(--openms-navy) +} +.openms-lib-page--sponsor-us .sponsor-benefits__lead { + margin:0; + max-width:var(--pro-measure-wide,58ch); + font-size:var(--openms-body-size); + line-height:1.5; + color:var(--pro-text-muted) +} +.openms-lib-page--sponsor-us .sponsor-benefits__panel { + padding:0 1.15rem 1.15rem; + border-top:1px solid var(--pro-line) +} +.openms-lib-page--sponsor-us .sponsor-benefits__switcher { + display:none +} +.openms-lib-page--sponsor-us .sponsor-benefits__scroller { + width:100%; + max-height:none; + overflow-x:auto; + overflow-y:visible; + -webkit-overflow-scrolling:touch; + border:none; + border-radius:0; + background:transparent; + padding-top:1rem +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix { + --tier-cols:4; + --label-col:minmax(11rem, 1.2fr); + --tier-col:minmax(7rem, 1fr); + display:grid; + grid-template-columns:var(--label-col)repeat(var(--tier-cols),var(--tier-col)); + min-width:40rem; + 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:.25rem; + min-width:0; + padding:.7rem .75rem; + border:none; + border-bottom:1px solid color-mix(in srgb,var(--pro-line) 85%,transparent); + background:transparent +} +.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:transparent +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-row--head .sponsor-benefits__matrix-cell { + position:sticky; + top:0; + z-index:1; + padding-block:.65rem; + border-bottom:1px solid var(--openms-navy); + background:var(--openms-white) +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--label { + position:sticky; + left:0; + z-index:2; + font-size:.88rem; + font-weight:600; + line-height:1.35; + color:var(--openms-navy); + background:var(--openms-white); + text-align:left +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-row:nth-child(even):not(.sponsor-benefits__matrix-row--head) .sponsor-benefits__matrix-cell--label { + background:var(--openms-white) +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-row--head .sponsor-benefits__matrix-cell--label { + z-index:3; + font-weight:700; + letter-spacing:.02em; + text-transform:uppercase; + font-size:var(--openms-text-min); + color:var(--pro-text-muted); + background:var(--openms-white) +} +.openms-lib-page--sponsor-us .sponsor-benefits__col-name { + font-family:var(--openms-font-heading); + font-size:.95rem; + 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 +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--bronze { + background:#faf4ee!important +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--silver { + background:#f3f5f7!important +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--gold { + background:#fbf6e9!important +} +.openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--platinum { + background:#f4f4f8!important +} +.openms-lib-page--sponsor-us .sponsor-benefits__lines { + display:grid; + gap:.25rem; + margin:0; + padding:0; + list-style:none; + width:100% +} +.openms-lib-page--sponsor-us .sponsor-benefits__line { + margin:0; + font-size:.84rem; + line-height:1.4; + color:rgba(var(--openms-dark-rgb),.78); + text-align:center +} +.openms-lib-page--sponsor-us .sponsor-benefits__check, +.openms-lib-page--sponsor-us .sponsor-benefits__cross { + display:inline-flex; + align-items:center; + justify-content:center; + width:1.75rem; + height:1.75rem; + flex:0 0 auto; + background:transparent +} +.openms-lib-page--sponsor-us .sponsor-benefits__check { + color:#1f9d63 +} +.openms-lib-page--sponsor-us .sponsor-benefits__check svg { + width:1.375rem; + height:1.375rem +} +.openms-lib-page--sponsor-us .sponsor-benefits__cross { + color:#c62828 +} +.openms-lib-page--sponsor-us .sponsor-benefits__cross svg { + width:1.125rem; + height:1.125rem +} +.openms-lib-page--sponsor-us .sponsor-benefits__footnote { + margin:var(--pro-space-3)0 0; + font-size:var(--openms-text-min); + line-height:1.45; + 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) +} +.openms-lib-page--sponsor-us #current-sponsors .sponsor-logos { + padding-block:clamp(2.5rem,5vw,4rem) +} +.openms-lib-page--sponsor-us .sponsor-logos__inner { + display:grid; + grid-template-columns:minmax(0,.95fr)minmax(0,1.35fr); + column-gap:var(--pro-col-gap,clamp(2rem,5vw,4rem)); + row-gap:1.5rem; + align-items:center; + max-width:var(--pro-max,var(--hub-wide-max)); + margin-inline:auto +} +.openms-lib-page--sponsor-us .sponsor-logos__copy { + display:grid; + gap:0; + min-width:0; + text-align:left +} +.openms-lib-page--sponsor-us .sponsor-logos__eyebrow { + margin:0 0 var(--pro-stack-eyebrow); + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--openms-blue) +} +.openms-lib-page--sponsor-us .sponsor-logos__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.2; + letter-spacing:normal; + text-transform:uppercase; + color:var(--openms-navy) +} +.openms-lib-page--sponsor-us .sponsor-logos__lead { + margin:var(--pro-stack-lead)0 0; + max-width:28rem; + font-size:var(--openms-body-size); + line-height:1.55; + color:rgba(var(--openms-dark-rgb),.72) +} +.openms-lib-page--sponsor-us .sponsor-logos__rail { + display:flex; + flex-wrap:wrap; + align-items:center; + justify-content:flex-end; + gap:clamp(1.5rem,4vw,3rem)clamp(1.75rem,5vw,3.5rem); + margin:0; + padding:0; + list-style:none +} +.openms-lib-page--sponsor-us .sponsor-logos__item { + margin:0; + padding:0; + min-width:0 +} +.openms-lib-page--sponsor-us .sponsor-logos__link { + display:flex; + align-items:center; + justify-content:center; + text-decoration:none!important; + opacity:.92; + transition:opacity .2s ease,transform .2s ease +} +.openms-lib-page--sponsor-us .sponsor-logos__link:hover, +.openms-lib-page--sponsor-us .sponsor-logos__link:focus-visible { + opacity:1; + transform:translateY(-2px); + outline:none +} +.openms-lib-page--sponsor-us .sponsor-logos__img { + display:block; + width:auto; + max-width:9.5rem; + max-height:3.5rem; + height:auto; + object-fit:contain +} +.openms-lib-page--sponsor-us .sponsor-logos__img[src*=Elixir] { + max-width:7.5rem; + max-height:4.75rem +} +.openms-lib-page--sponsor-us .sponsor-logos__fallback { + font-family:var(--openms-font-heading); + font-size:var(--openms-secondary-heading-size); + font-weight:700; + color:var(--openms-navy) +} +.openms-lib-page--sponsor-us .sponsor-logos__more { + grid-column:1/-1; + margin:0; + text-align:right +} +.openms-lib-page--sponsor-us .sponsor-logos__more a { + display:inline-flex; + align-items:center; + gap:.3rem; + font-size:var(--openms-text-min); + font-weight:700; + color:var(--openms-navy)!important; + text-decoration:none!important; + transition:gap .2s ease +} +.openms-lib-page--sponsor-us .sponsor-logos__more a:hover, +.openms-lib-page--sponsor-us .sponsor-logos__more a:focus-visible { + gap:.5rem +} +/* FAQ sits closer under tiers — no stacked anchor + full section top pad */ +.openms-lib-page--sponsor-us #faq.openms-lib-page__anchor { + padding-top: 0; +} +.openms-lib-page--sponsor-us .sponsor-faq-pro { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} +.openms-lib-page--sponsor-us .sponsor-faq-pro__inner { + display:grid; + grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr); + align-items:start; + column-gap:var(--pro-col-gap,clamp(2rem,5vw,4rem)); + row-gap:var(--pro-head-to-content,clamp(1.5rem,3vw,2.25rem)); + max-width:min(var(--hub-wide-max,72rem),100%); + margin-inline:auto +} +.openms-lib-page--sponsor-us .sponsor-faq-pro__head { + display:flex; + flex-direction:column; + align-items:flex-start; + gap:0; + text-align:left +} +.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:.14em; + text-transform:uppercase; + color:var(--openms-blue); + justify-content:flex-start +} +.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:left +} +.openms-lib-page--sponsor-us .sponsor-faq-pro__lead { + margin:var(--pro-stack-lead,.75rem) 0 0; + max-width:36ch; + font-size:var(--openms-body-size-lg); + line-height:1.65; + color:var(--pro-text-muted); + text-wrap:pretty +} +.openms-lib-page--sponsor-us .sponsor-faq-pro__cta { + margin-top:1.25rem; + width:fit-content +} +.openms-lib-page--sponsor-us .sponsor-faq__list { + display:grid; + gap:.75rem; + margin:0; + min-width: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) +} +.openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-developers__card-body { + width:100%; + max-width:min(var(--hub-wide-max,72rem),100%); + min-width:0; + padding-inline:clamp(.75rem,3vw,1.5rem); + box-sizing:border-box +} +.openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-developers__card-text { + white-space:normal; + overflow-wrap:break-word; + word-break:normal; + max-width:min(36rem,100%); + width:100%; + margin-inline:auto; + box-sizing:border-box; + font-size:clamp(.95rem,.88rem + .35vw,1.05rem); + line-height:1.5 +} +.openms-lib-page--sponsor-us .sponsor-cta-line { + display:block +} +.openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-developers__platforms { + flex-wrap:wrap; + width:100%; + max-width:min(28rem,100%); + margin-inline:auto +} +.openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-btn--ghost { + border-color:rgba(var(--openms-white-rgb),.34)!important; + background:0 0!important; + color:var(--openms-white)!important +} +.openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-btn--ghost:hover, +.openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-btn--ghost:active { + border-color:rgba(var(--openms-white-rgb),.55)!important; + background:0 0!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,.22) +} +@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: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 { + grid-template-columns:1fr; + max-width:100% !important; + font-size:var(--openms-body-size) + } + .openms-lib-page--sponsor-us .sponsor-faq-pro__inner { + grid-template-columns:1fr + } + .openms-lib-page--sponsor-us .sponsor-faq-pro__lead { + max-width:none + } + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + grid-template-columns:repeat(2,minmax(0,1fr)); + gap:.85rem + } + .openms-lib-page--sponsor-us .openms-lib-about__mosaic { + gap:clamp(.85rem,2vw,1.25rem) + } + .openms-lib-page--sponsor-us .sponsor-logos__inner { + grid-template-columns:1fr; + row-gap:1.75rem + } + .openms-lib-page--sponsor-us .sponsor-logos__rail { + justify-content:flex-start + } + .openms-lib-page--sponsor-us .sponsor-logos__more { + text-align:left + } + .openms-lib-page--sponsor-us .sponsor-benefits__scroller { + overflow-x:auto; + overflow-y:visible; + max-height:none + } + .openms-lib-page--sponsor-us .sponsor-benefits__matrix { + --label-col:minmax(0, 1.15fr); + --tier-col:minmax(0, 1fr); + grid-template-columns:var(--label-col) var(--tier-col); + min-width:0 + } + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier=bronze] [data-sponsor-benefits]:not([data-sponsor-benefits=bronze]), + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier=silver] [data-sponsor-benefits]:not([data-sponsor-benefits=silver]), + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier=gold] [data-sponsor-benefits]:not([data-sponsor-benefits=gold]), + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier=platinum] [data-sponsor-benefits]:not([data-sponsor-benefits=platinum]) { + display:none !important + } + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--label { + position:static; + left:auto + } + .openms-lib-page--sponsor-us .sponsor-benefits__switcher { + display:grid; + grid-template-columns:repeat(4,minmax(0,1fr)); + gap:.35rem; + margin:0 0 .9rem; + padding:.3rem; + border:1px solid rgba(var(--openms-navy-rgb),.12); + border-radius:999px; + background:rgba(var(--openms-navy-rgb),.03) + } + .openms-lib-page--sponsor-us .sponsor-benefits__switcher-btn { + appearance:none; + margin:0; + padding:.55rem .35rem; + border:0; + border-radius:999px; + background:transparent; + color:rgba(var(--openms-dark-rgb),.72); + font-family:var(--openms-font-body); + font-size:.78rem; + font-weight:700; + letter-spacing:.02em; + line-height:1.2; + text-align:center; + cursor:pointer; + transition:background-color .18s ease,color .18s ease,box-shadow .18s ease + } + .openms-lib-page--sponsor-us .sponsor-benefits__switcher-btn.is-active, + .openms-lib-page--sponsor-us .sponsor-benefits__switcher-btn[aria-selected=true] { + background:var(--openms-navy); + color:var(--openms-white); + box-shadow:0 .2rem .55rem rgba(var(--openms-navy-rgb),.22) + } + .openms-lib-page--sponsor-us .sponsor-benefits__switcher-btn:focus-visible { + outline:2px solid var(--openms-blue); + outline-offset:2px + } + + /* Active tier cells must stay visible; clear blue wash on mobile */ + .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] { + display:flex !important; + background:transparent !important; + box-shadow:none !important + } + .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:var(--pro-band-soft) !important; + box-shadow:none !important + } + .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-navy) + } + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--bronze, + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--silver, + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--gold, + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--platinum { + background:transparent !important + } + .openms-lib-page--sponsor-us .sponsor-benefits__lines, + .openms-lib-page--sponsor-us .sponsor-benefits__check, + .openms-lib-page--sponsor-us .sponsor-benefits__cross { + display:grid; + visibility:visible; + opacity:1 + } + .openms-lib-page--sponsor-us .sponsor-benefits__check, + .openms-lib-page--sponsor-us .sponsor-benefits__cross { + display:inline-flex + } + +} +@media(max-width:768px) { + .openms-lib-page--sponsor-us .sponsor-cta-note-line { + display:inline; + white-space:normal + } + .openms-lib-page--sponsor-us .sponsor-cta-note-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-logos__rail { + gap:1.35rem 1.75rem + } + .openms-lib-page--sponsor-us .sponsor-logos__img { + max-width:8rem; + max-height:3rem + } + .openms-lib-page--sponsor-us .sponsor-logos__img[src*=Elixir] { + max-width:6.5rem; + max-height:4rem + } + .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:.6rem; + max-width:none + } + .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:min(28rem,100%); + font-size:var(--openms-body-size); + line-height:1.5 + } + .openms-lib-page--sponsor-us .sponsor-cta-line { + display:inline + } + .openms-lib-page--sponsor-us .sponsor-cta-line::after { + content:" " + } + .openms-lib-page--sponsor-us .openms-lib-developers__card--build .openms-lib-developers__card-body { + padding-inline:clamp(.65rem,4vw,1rem) + } + +} +@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-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__switcher { + grid-template-columns:repeat(2,minmax(0,1fr)); + border-radius:1rem + } + .openms-lib-page--sponsor-us .sponsor-benefits__switcher-btn { + padding:.6rem .4rem; + font-size:.8rem + } + +} +.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:.55rem; + justify-content:flex-end; + margin:0 0 .85rem +} +.openms-lib-page--privacy .privacy-pro__tool-btn { + appearance:none; + margin:0; + min-height:2.5rem; + padding:.45rem .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:.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:.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:.55rem; + height:.55rem; + margin-top:.45rem; + border-right:2px solid var(--openms-navy,#0b1f33); + border-bottom:2px solid var(--openms-navy,#0b1f33); + transform:rotate(45deg); + transition:transform .15s ease; + justify-self:end +} +.openms-lib-page--privacy .privacy-pro__item[open] .privacy-pro__summary::after { + transform:rotate(225deg); + margin-top:.65rem +} +.openms-lib-page--privacy .privacy-pro__summary-index { + margin-top:.2rem; + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.06em; + color:var(--openms-blue); + font-variant-numeric:tabular-nums +} +.openms-lib-page--privacy .privacy-pro__summary-copy { + display:grid; + gap:.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; + 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 .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:.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,.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% - .3rem) + } + .openms-lib-page--privacy .privacy-pro__summary { + grid-template-columns:auto 1fr auto; + gap:.7rem; + padding:.9rem .95rem + } + .openms-lib-page--privacy .privacy-pro__answer { + padding-inline:.95rem + } + .openms-lib-page--privacy .privacy-pro__summary-text { + font-size:var(--openms-text-min) + } + +} + + +/* ========================================================================== + OpenMS-lib + pyopenms_viz — Explore blue destination cards + (shared Get started design) + ========================================================================== */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) #getting-started, +.openms-lib-page--pyopenms-viz-pro #getting-started { + background: var(--openms-white); +} + +/* Get started / Explore pyOpenMS — extra space under cards before next section */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started { + padding-bottom: 0; +} +.openms-lib-page--pyopenms-pro + #getting-started, +.openms-lib-page--pyopenms-viz-pro + #getting-started { + padding-bottom: calc(var(--pro-section-y) * 0.7); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner, +.openms-lib-page--pyopenms-pro + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner, +.openms-lib-page--pyopenms-viz-pro + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner { + gap: clamp(2.25rem, 4.5vw, 3.5rem); + padding-bottom: clamp(0.75rem, 2vw, 1.5rem); +} + +/* Get started / Explore pyOpenMS — extra space under cards before next section */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #getting-started { + padding-bottom: calc(var(--pro-section-y) * 0.7); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner { + gap: clamp(2.25rem, 4.5vw, 3.5rem); + padding-bottom: clamp(0.75rem, 2vw, 1.5rem); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-resources__explore-tag, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-tag, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-icon { + display: none; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-resources__explore-grid, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-grid { + gap: clamp(0.9rem, 2vw, 1.35rem); + width: 100%; + max-width: min(100%, var(--pro-max)); + margin-inline: auto; +} + +/* OpenMS-lib Explore: left-aligned head + flat equal feature columns */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__head { + justify-items: start; + max-width: min(100%, 42rem); + margin-inline: 0; + text-align: left; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__eyebrow { + justify-content: flex-start; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__title, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__lead { + text-align: left; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__lead { + max-width: 36rem; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner { + gap: clamp(2.75rem, 5.5vw, 4.25rem); +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + width: 100%; + max-width: var(--pro-max); + margin-inline: 0; + gap: clamp(1.5rem, 3vw, 2.25rem); + align-items: start; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) + > .openms-lib-resources__explore-item, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item { + width: 100%; + min-width: 0; + grid-column: auto; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card { + width: 100%; + height: auto; + min-height: 0; + padding: 0; + gap: 0.65rem; + box-sizing: border-box; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-title { + font-size: clamp(1.05rem, 1.45vw, 1.2rem); +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-text { + font-size: 0.95rem; + line-height: 1.55; +} +@media (max-width: 1100px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (max-width: 560px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: 1fr; + } +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-grid, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-grid:has(> :nth-child(3):last-child) { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +/* pyopenms_viz Explore — blue destination cards (OpenMS-lib hub uses flat columns below) */ +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-card { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + width: 100%; + height: 100%; + min-height: 0; + padding: 1.55rem 1.4rem 1.45rem; + border: none; + border-radius: 1.15rem; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%), + var(--openms-blue); + box-shadow: 0 0.55rem 1.4rem rgba(var(--openms-blue-rgb), 0.28); + color: var(--openms-white); + transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-card:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-card:focus-visible { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy); + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32); + transform: translateY(-4px); + outline: none; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-title { + margin: 0; + font-size: clamp(1.15rem, 1.7vw, 1.3rem); + letter-spacing: -0.015em; + color: var(--openms-white); +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-text { + max-width: none; + color: rgba(255, 255, 255, 0.82); +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-link { + margin-top: auto; + padding-top: 0.35rem; + background: transparent; + color: var(--openms-white); + font-weight: 700; + transition: gap 0.2s ease, opacity 0.2s ease; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-card:hover .openms-lib-resources__explore-link, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-card:focus-visible .openms-lib-resources__explore-link { + gap: 0.55rem; + color: var(--openms-white); +} + +/* pyopenms_viz Contribute — full-bleed band + horizontal deck (not left/center stacks) */ +.openms-lib-page--pyopenms-viz-pro .openms-lib-page__outro .openms-lib-block--developers.openms-lib-developers--split { + width: 100%; + max-width: none; + margin-inline: 0; + padding-block: var(--pro-section-y); + padding-inline: var(--openms-page-inline); + overflow: visible; + box-sizing: border-box; + border: none; + background: + linear-gradient(135deg, rgba(var(--openms-blue-rgb), 0.06) 0%, transparent 48%), + linear-gradient(180deg, rgba(var(--openms-navy-rgb), 0.03) 0%, transparent 100%), + var(--openms-white); +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: clamp(1.75rem, 3.5vw, 2.5rem); + align-items: start; + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding: 0; + border: none; + background: transparent; + box-sizing: border-box; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-head { + display: block; + width: 100%; + margin: 0; + padding: 0 0 1.35rem; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.12); +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-deck { + display: grid; + grid-template-columns: minmax(0, auto) minmax(0, 1fr); + gap: clamp(1.5rem, 4vw, 3.25rem); + align-items: center; + width: 100%; +} + +/* Eyebrow + title as one lockup (not stacked like Research Impact) */ +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-lockup { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.65rem 1rem; + min-width: 0; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-block__eyebrow { + display: inline-flex; + align-items: center; + justify-content: flex-start; + margin: 0; + padding: 0.28rem 0.7rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.28); + border-radius: 0; + background: rgba(var(--openms-blue-rgb), 0.06); + color: var(--openms-blue); + font-size: var(--openms-text-min, 0.75rem); + letter-spacing: 0.08em; + line-height: 1.2; + white-space: nowrap; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__title { + margin: 0; + max-width: none; + padding: 0; + justify-self: start; + text-align: start; + text-transform: none; + letter-spacing: -0.03em; + font-size: clamp(2rem, 3.6vw, 2.75rem); + line-height: 1.05; + color: var(--openms-navy); +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__lead { + margin: 0; + max-width: min(100%, 42ch); + justify-self: end; + text-align: end; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)); + font-size: var(--openms-body-size, 1rem); + line-height: 1.55; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0; + min-width: 0; + border-top: none; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: 0.95rem 1.1rem; + align-items: center; + padding: 1.25rem 1.15rem 1.25rem 0; + border-bottom: none; + border-right: 1px solid rgba(var(--openms-navy-rgb), 0.12); + text-decoration: none !important; + color: inherit; + transition: background-color 0.2s ease, padding-left 0.2s ease; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:last-child { + border-right: none; + padding-right: 0; + padding-left: 1.15rem; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:focus-visible { + background: rgba(var(--openms-blue-rgb), 0.04); + padding-left: 0.45rem; + outline: none; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:last-child:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:last-child:focus-visible { + padding-left: 1.15rem; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.35rem; + height: 2.35rem; + border-radius: 0; + background: transparent; + color: var(--openms-blue); + font-size: 1.25rem; + line-height: 1; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action-body { + display: grid; + gap: 0.2rem; + min-width: 0; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action-title { + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size, clamp(1rem, 1.4vw, 1.1rem)); + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy); +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action-text { + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.68)); + text-wrap: pretty; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action-cta { + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-blue); + white-space: nowrap; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:hover .openms-lib-developers__split-action-cta, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:focus-visible .openms-lib-developers__split-action-cta { + color: var(--openms-navy); +} + +@media (max-width: 900px) { + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-deck { + grid-template-columns: 1fr; + gap: 0.85rem; + align-items: start; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-lockup { + flex-direction: column; + align-items: flex-start; + gap: 0.55rem; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__lead { + justify-self: start; + text-align: start; + max-width: none; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-actions { + grid-template-columns: 1fr; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action, + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:last-child { + border-right: none; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.12); + padding: 1.15rem 0; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:last-child { + border-bottom: none; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:last-child:hover, + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action:last-child:focus-visible { + padding-left: 0.45rem; + } +} + +@media (max-width: 560px) { + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action { + grid-template-columns: auto minmax(0, 1fr); + gap: 0.75rem 0.85rem; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--split .openms-lib-developers__split-action-cta { + grid-column: 2; + } +} + +/* legacy compact card row — kept for non-split pages */ +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + width: 100%; + max-width: 100%; + margin-inline: 0; +} + +.openms-lib-page--pyopenms-viz-pro .openms-lib-page__outro .openms-lib-block--developers:not(.openms-lib-developers--split) { + padding-block: var(--pro-section-y); + overflow: visible; +} + +/* Install CTA — hug label text (pyOpenMS / pyopenms_viz) */ +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions { + width: auto; + max-width: 100%; + margin-inline: auto; +} + +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install { + flex: 0 0 auto !important; + width: fit-content !important; + max-width: 100%; + min-width: 0 !important; + padding-inline: 1.05rem !important; + gap: 0.4rem !important; + white-space: nowrap; +} + +/* Single Python glyph — no multi-platform icon rail spacing */ +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms { + padding-left: 0.4rem; + margin-left: 0; + gap: 0; +} + +/* Install CTA — keep Python glyph white on blue button */ +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-python, +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms i, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-python, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms i { + color: #ffffff !important; +} + +/* Install CTA — keep Python glyph white on blue button */ +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-python, +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms i, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fa-python, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms i { + color: #ffffff !important; +} + +@media (max-width: 900px) { + .openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install, + .openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install { + flex: 0 0 auto; + width: fit-content; + max-width: 100%; + padding-inline: 1.15rem; + } + + .openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-grid, + .openms-lib-page--pyopenms-viz-pro .openms-lib-resources__explore-grid:has(> :nth-child(3):last-child) { + grid-template-columns: 1fr; + max-width: 100%; + } +} + +@media (max-width: 720px) { + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child), + .openms-lib-page--pyopenms-viz-pro .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + width: 100%; + max-width: 100%; + } +} + + +/* pyopenms_viz Contribute — dark navy hover */ +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:focus-visible { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy) !important; + border-color: transparent !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32) !important; + color: #ffffff !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-title, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-title span, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-subtitle, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-cta, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-icon i, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-icon .fa-github, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-icon .fa-code, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-title, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-title span, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-subtitle, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-icon i, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-icon .fa-github, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-icon .fa-code, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-title, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-subtitle, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-icon i, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-title, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-subtitle, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-icon i { + color: #ffffff !important; + opacity: 1 !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + margin: 0 !important; +} + +/* Keep subtitle readable on hover (don't collapse it on viz) */ +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-subtitle, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-subtitle, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-subtitle { + opacity: 1 !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + margin: 0 !important; + color: rgba(255, 255, 255, 0.92) !important; +} + +/* Keep Contribute card text anchored — no lift / no reflow on hover */ +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within { + transform: none !important; + } +} + +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-body { + display: grid; + grid-template-rows: auto auto auto; + align-content: start; + gap: 0.7rem; +} + +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-link { + margin-top: 0 !important; +} + +/* pyopenms_viz Contribute — match other card icon size (override hub icon chip) */ +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-icon, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__route-icon { + display: grid !important; + place-items: center; + width: 1em !important; + height: 1em !important; + margin: 0 0 0.15rem !important; + padding: 0 !important; + border: none !important; + border-radius: 0 !important; + background: none !important; + box-shadow: none !important; + font-size: var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)) !important; + line-height: 1; + color: rgba(var(--openms-blue-rgb), 0.28); +} +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__route-icon + .fab, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__route-icon + .fas, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__route-icon + .svg-inline--fa { + font-size: 1em !important; + width: 1em !important; + height: 1em !important; + max-width: 1em; + max-height: 1em; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .fab, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .fas, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .svg-inline--fa { + color: inherit; + font-size: 1em; + width: 1em; + height: 1em; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-icon + .svg-inline--fa + path { + fill: currentColor; +} + +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-icon, + .openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-icon, + .openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-icon { + background: none !important; + box-shadow: none !important; + color: var(--openms-white) !important; + } +} + + +/* pyopenms_viz Contribute — rest vs hover link colors */ +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card-link { + color: var(--openms-navy) !important; +} + +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-link, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-link, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-link, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-link { + color: #ffffff !important; +} + + +/* ========================================================================== + pyOpenMS (/pyopenms/) — restored pro layout + Explore banner + cards, Overview mosaic, Contribute blue routes, rhythm + ========================================================================== */ + +/* Section rhythm — shared site-wide hero → first section (zz-page-shell) */ +.openms-lib-page--pyopenms-pro .openms-lib-hero__actions, +.openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions { + margin-bottom: 0.35rem; +} + +.openms-lib-page--pyopenms-pro .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--pyopenms-viz-pro .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: var(--pro-section-y) 0; +} + +.openms-lib-page--pyopenms-pro .openms-lib-about, +.openms-lib-page--pyopenms-pro .openms-lib-resources, +.openms-lib-page--pyopenms-pro .openms-lib-resources--explore, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources--explore { + padding-block: 0; + padding-top: 0; +} + +.openms-lib-page--pyopenms-pro .openms-lib-resources__inner, +.openms-lib-page--pyopenms-viz-pro .openms-lib-resources__inner { + padding-bottom: 0; +} + +.openms-lib-page--pyopenms-pro #getting-started .openms-lib-resources__inner, +.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__inner { + padding-bottom: clamp(0.75rem, 2vw, 1.5rem); +} + +.openms-lib-page--pyopenms-pro #getting-started, +.openms-lib-page--pyopenms-viz-pro #getting-started { + padding-bottom: calc(var(--pro-section-y) * 0.7); +} + +/* Explore pyopenms_viz — extra space after destination cards */ +.openms-lib-page--pyopenms-viz-pro #getting-started { + padding-bottom: calc(var(--pro-section-y) * 1.15); +} + +.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__inner { + padding-bottom: clamp(1.75rem, 4vw, 3rem); +} + +.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__explore-grid { + margin-bottom: clamp(1rem, 2.5vw, 1.75rem); +} + +/* pyOpenMS: extra air after Explore cards before Contribute */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) #getting-started { + padding-bottom: clamp(1.75rem, 4vw, 3rem); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #getting-started + .openms-lib-resources__inner { + padding-bottom: clamp(0.75rem, 2vw, 1.5rem); +} + +/* Explore pyopenms_viz — keep head→cards rhythm, add air after cards */ +.openms-lib-page--pyopenms-viz-pro #getting-started { + padding-bottom: clamp(3.5rem, 8vw, 6rem); +} + +.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__inner, +.openms-lib-page--pyopenms-viz-pro + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner { + gap: var(--pro-head-to-content); + padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem); +} + +.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__explore-grid { + margin-bottom: clamp(1.25rem, 3vw, 2.25rem); +} + +.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic { + padding-top: 0; +} + +.openms-lib-page--pyopenms-pro .openms-lib-page__outro .openms-lib-block--developers, +.openms-lib-page--pyopenms-viz-pro .openms-lib-page__outro .openms-lib-block--developers { + gap: 0; + padding-block: var(--pro-section-y); + overflow: visible; +} + +/* pyopenms_viz Contribute — head→cards via head margin; cite via section-y only */ +.openms-lib-page--pyopenms-viz-pro + .openms-lib-page__outro + .openms-lib-block--developers.openms-lib-developers--cards { + gap: 0; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-pro .openms-lib-developers__head, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__head { + margin-bottom: 0; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-page__cite + .openms-lib-developers__cite--separate, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-page__cite + .openms-lib-developers__cite--separate, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-page__cite + .openms-lib-developers__cite--separate, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-page__cite + .openms-lib-developers__cite--separate { + margin-top: 0; +} + +/* Research impact — solution pages own this band (see zzzz-openms-lib-solution.css) */ +.openms-lib-page--hub.openms-lib-page--pyopenms-pro:not(.openms-lib-page--solution) .openms-lib-page__cite, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--solution) .openms-lib-page__cite, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro:not(.openms-lib-page--solution) .openms-lib-page__cite, +.openms-lib-page--pyopenms-viz-pro:not(.openms-lib-page--solution) .openms-lib-page__cite { + margin-top: 0; + margin-bottom: 0; + padding-bottom: 0; + padding-inline: var(--openms-page-inline); + background: var(--pro-band-soft, #f4f7fb) !important; + color: var(--openms-navy); + box-sizing: border-box; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-pro .openms-lib-page__cite .openms-lib-developers__cite--panel, +.openms-lib-page--hub.openms-lib-page--pyopenms-pro .openms-lib-page__cite .openms-lib-developers__cite--separate, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite .openms-lib-developers__cite--panel, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite .openms-lib-developers__cite--separate { + background: transparent !important; + box-shadow: none !important; +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-pro .openms-lib-page__cite .openms-lib-developers__cite-details, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite .openms-lib-developers__cite-details { + background: transparent !important; +} + +/* Citation card — roomier research-facing block (match OpenMS-lib comfort) */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__cite + .openms-lib-developers__cite-details { + padding: clamp(1.5rem, 3vw, 2.15rem) clamp(1.35rem, 3vw, 2rem) !important; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__cite + .openms-lib-developers__cite--panel + .publications-cite-card, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__cite + .openms-lib-developers__cite--panel + .openms-lib-developers__cite-card { + gap: 1rem; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__cite + .publications-cite-card__title { + line-height: 1.45; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__cite + .publications-cite-card__authors { + margin: 0; + line-height: 1.7; + max-width: 62ch; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__cite + .publications-cite-card__meta { + gap: 0.55rem 0.9rem; + margin-top: 0.15rem; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__cite + .openms-lib-developers__cite-actions { + margin-top: 0.35rem; + gap: 0.75rem; +} + +/* Overview — What is pyOpenMS? */ +.openms-lib-page--pyopenms-pro #what-is-openms { + background: + radial-gradient(ellipse 70% 55% at 50% -5%, rgba(var(--openms-blue-rgb), 0.1), transparent 58%), + linear-gradient(180deg, rgba(var(--openms-blue-rgb), 0.035) 0%, transparent 70%); +} + +.openms-lib-page--pyopenms-pro .openms-lib-about__head { + grid-template-columns: 1fr; + justify-items: center; + max-width: min(100%, 46rem); + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--pyopenms-pro .openms-lib-about__head-copy { + justify-items: center; +} + +.openms-lib-page--pyopenms-pro .openms-lib-about__eyebrow { + justify-content: center; +} + +.openms-lib-page--pyopenms-pro .openms-lib-about__title, +.openms-lib-page--pyopenms-pro .openms-lib-about__lead { + text-align: center; +} + +.openms-lib-page--pyopenms-pro .openms-lib-about__lead { + max-width: min(100%, 46rem); + margin-inline: auto; +} + +/* Overview tiles — intentional watermark nums + soft strip tint */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) { + --openms-step-num-color: rgba(var(--openms-navy-rgb), 0.18); + --openms-step-num-color-hover: rgba(var(--openms-navy-rgb), 0.3); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-about__mosaic { + background: color-mix(in srgb, var(--pro-band-soft, #f4f7fb) 88%, var(--openms-white)); + border-radius: 0; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-about__num { + color: var(--openms-step-num-color) !important; +} + +/* Hero — fill under Install with install hint; balance side air with soft mark */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-hero__code-hint { + display: flex; + justify-content: center; + margin: 0.9rem 0 0; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-hero__code-chip { + margin-left: 0; + padding: 0.4rem 0.85rem; + border-radius: 0.65rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + background: rgba(var(--openms-navy-rgb), 0.045); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-hero__code-chip code { + font-family: var(--openms-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 0.01em; + color: var(--openms-navy); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-hero--pro + .openms-lib-hero__panel::before { + content: ""; + position: absolute; + top: clamp(0.5rem, 2vw, 1.5rem); + left: clamp(-0.5rem, -1vw, 0); + z-index: 0; + width: clamp(8rem, 16vw, 12.5rem); + height: clamp(8rem, 16vw, 12.5rem); + border-radius: 58% 42% 37% 63% / 42% 38% 62% 58%; + background: radial-gradient( + circle at 35% 35%, + rgba(var(--openms-blue-rgb), 0.16), + rgba(var(--openms-navy-rgb), 0.06) 62%, + transparent 70% + ); + opacity: 0.9; + pointer-events: none; +} + +/* Explore pyOpenMS — left-aligned section head */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources--explore + .openms-lib-resources__head { + justify-items: start; + max-width: min(100%, 40rem); + margin: 0; + text-align: left; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources--explore + .openms-lib-resources__eyebrow { + justify-content: flex-start; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources--explore + .openms-lib-resources__title, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources--explore + .openms-lib-resources__lead { + text-align: left; +} + +/* Explore pyOpenMS — 4 equal blue destination cards side by side */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-grid, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-grid:has(> :nth-child(4):last-child) { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--pro-card-gap); + align-items: stretch; + width: 100%; + max-width: min(100%, var(--pro-max)); + margin-inline: auto; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-grid:has(> :nth-child(4):last-child) + > .openms-lib-resources__explore-item, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-grid:has(> :nth-child(3):last-child) + > .openms-lib-resources__explore-item { + grid-column: auto; + margin: 0; + min-width: 0; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-card { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + width: 100%; + height: 100%; + min-height: 0; + padding: 1.55rem 1.4rem 1.45rem; + border: none; + border-radius: 1.15rem; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%), + var(--openms-blue); + box-shadow: 0 0.55rem 1.4rem rgba(var(--openms-blue-rgb), 0.28); + color: var(--openms-white); + transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-card:hover, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-card:focus-visible { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy); + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32); + transform: translateY(-4px); + outline: none; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-icon { + display: grid; + place-items: center; + width: auto; + height: auto; + border-radius: 0; + background: transparent; + color: rgba(255, 255, 255, 0.88); + font-size: clamp(1.85rem, 2.8vw, 2.25rem); + line-height: 1; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-icon .fab, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-icon .fas, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-icon .svg-inline--fa { + color: rgba(255, 255, 255, 0.88) !important; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-tag { + display: none; +} + +/* Featured entry (Try Online) — show "No install needed" badge */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured + .openms-lib-resources__explore-tag { + display: inline-flex; + align-items: center; + margin: 0; + padding: 0.22rem 0.55rem; + border-radius: 999px; + background: rgba(255, 255, 255, 0.18); + color: rgba(255, 255, 255, 0.95); + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + line-height: 1.2; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-title { + margin: 0; + font-size: clamp(1.15rem, 1.7vw, 1.3rem); + line-height: 1.25; + letter-spacing: -0.015em; + color: var(--openms-white); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-text { + margin: 0; + max-width: none; + color: rgba(255, 255, 255, 0.82); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: auto; + padding-top: 0.35rem; + background: transparent; + color: var(--openms-white); + font-weight: 700; + transition: gap 0.2s ease; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card:hover + .openms-lib-resources__explore-link, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card:focus-visible + .openms-lib-resources__explore-link { + gap: 0.55rem; + color: var(--openms-white); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--pending:hover, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--pending:focus-visible { + transform: none; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%), + var(--openms-blue); + box-shadow: 0 0.55rem 1.4rem rgba(var(--openms-blue-rgb), 0.28); +} + +/* Try Online — most prominent card in the 4-up row */ +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured { + min-height: 0; + padding: 1.75rem 1.55rem 1.55rem; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy) !important; + box-shadow: 0 0.8rem 1.85rem rgba(var(--openms-navy-rgb), 0.34) !important; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured + .openms-lib-resources__explore-title { + font-size: clamp(1.28rem, 2vw, 1.5rem); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured + .openms-lib-resources__explore-icon { + font-size: clamp(2rem, 3vw, 2.45rem); +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured.openms-lib-resources__explore-card--pending:hover, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured.openms-lib-resources__explore-card--pending:focus-visible, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured:hover, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-card--featured:focus-visible { + transform: none; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%), + var(--openms-blue) !important; + box-shadow: 0 0.9rem 2rem rgba(var(--openms-blue-rgb), 0.34) !important; +} + +@media (max-width: 980px) { + .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-grid, + .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-grid:has(> :nth-child(4):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 560px) { + .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-resources__explore-grid, + .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-resources__explore-grid:has(> :nth-child(4):last-child) { + grid-template-columns: 1fr; + } +} + +/* Contribute — 2×2 blue destination cards; keep intro→grid as one block */ +.openms-lib-page--hub.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__layout, +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-developers__layout { + gap: clamp(1.1rem, 2.2vw, 1.6rem); +} + +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__layout, +.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__layout { + gap: var(--pro-head-to-content); +} + +/* Contribute (2 cards) — fill the section rail; stay 2-up responsively */ +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2, +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2, +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 { + --openms-equal-card-min-h: 14.5rem; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-card-gap, clamp(0.85rem, 2vw, 1.25rem)); + width: 100%; + max-width: 100%; + margin-inline: 0; + justify-content: stretch; + align-items: stretch; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n), +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n), +.openms-lib-page--hub.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route:nth-child(n), +.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route:nth-child(n) { + grid-column: span 1; + width: 100%; + min-width: 0; + height: 100%; + align-self: stretch; +} + +.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-page__outro + .openms-lib-block--developers { + padding-block: clamp(2.25rem, 5vw, 3.5rem); +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__head { + max-width: min(100%, 52rem); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__head .openms-lib-developers__lead, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__head .openms-lib-developers__lead, +.openms-lib-page--pyopenms-pro .openms-lib-developers__lead { + max-width: min(100%, 52rem); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes { + /* Tall enough for Review (badge + 2 links) so both rows share one height */ + --openms-equal-card-min-h: 20.25rem; + /* 6 tracks → 3 equal cards/row; 5 cards stay in 2 rows (3 + 2 centered) */ + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: var(--pro-card-gap); + align-items: stretch; + max-width: var(--pro-cluster-max, min(100%, 68rem)); + margin-inline: auto; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n), +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.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 2; + width: 100%; + height: 100%; + min-height: 0; + align-self: stretch; +} + +/* Center the second row when there are 5 cards (3 + 2). */ +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(4), +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(4) { + grid-column: 2 / span 2; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(5), +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(5) { + grid-column: 4 / span 2; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route { + gap: 0.55rem; + padding: 1.55rem 1.4rem 1.45rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 1.15rem; + background: var(--openms-white); + box-shadow: 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.06); + color: var(--openms-navy); + min-height: var(--openms-equal-card-min-h); + height: 100%; + transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-body, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-within, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-within { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy); + border-color: transparent; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32); + transform: none; + outline: none; + min-height: var(--openms-equal-card-min-h); + height: 100%; + max-height: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):hover, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):focus-visible, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .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-page--pyopenms-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(1):focus-visible { + border: none; + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy); + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32); + transform: none; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon .fab, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon .fas, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .fa-github, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .fa-hammer, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .fa-puzzle-piece, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .fa-book, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .fa-code, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .fa-code-branch, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon .svg-inline--fa { + color: rgba(var(--openms-blue-rgb), 0.28) !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon, +.openms-lib-page--pyopenms-pro + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n) + .openms-lib-developers__route-icon { + display: grid; + place-items: center; + width: 1em; + height: 1em; + margin-bottom: 0.15rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + font-size: var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + line-height: 1; + color: rgba(var(--openms-blue-rgb), 0.28) !important; +} +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon .fab, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon .fas, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route-icon .svg-inline--fa { + font-size: 1em !important; + width: 1em !important; + height: 1em !important; + max-width: 1em; + max-height: 1em; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__card-tag, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-tag { + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)) !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route { + color: var(--openms-navy) !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-title span { + color: var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82)) !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-text, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-body { + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)) !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route .openms-lib-developers__card-link { + margin-top: auto; + color: var(--pro-link, var(--openms-navy)) !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__card-title span, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__card-text, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__card-body, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__card-link, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__card-tag, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-title span, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-text, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-body, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-link, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__card-tag { + color: #fff !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon .fab, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon .fas, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__route-icon .svg-inline--fa, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon .fab, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon .fas, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:focus-visible .openms-lib-developers__route-icon .svg-inline--fa { + color: #fff !important; +} +.openms-lib-page--pyopenms-pro .openms-lib-developers__route:hover .openms-lib-developers__card-link, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro + .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-page--pyopenms-pro + .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-page--pyopenms-pro + .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-page--pyopenms-pro + .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: #fff !important; +} + +/* Review card — match white route cards (text links + shared navy hover) */ +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review { + background: var(--openms-white); + color: var(--openms-navy); +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + flex: 1 1 auto; + gap: 0.7rem; + min-width: 0; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review .openms-lib-developers__badge { + align-self: flex-start; + margin: 0.1rem 0 0; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review .openms-lib-developers__platforms--text { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0 !important; + row-gap: 0 !important; + column-gap: 0 !important; + margin-top: auto; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review .openms-lib-developers__platforms--text .openms-lib-developers__card-link { + margin-top: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + line-height: 1.35; + font-weight: 700; + text-decoration: none; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy); + border-color: transparent; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32); + transform: none; + outline: none; + min-height: var(--openms-equal-card-min-h); + height: 100%; + max-height: none; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__card-title span, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__card-text, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__card-body, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__card-tag, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__card-link, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__card-title, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__card-title span, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__card-text, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__card-body, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__card-tag, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__card-link { + color: #fff !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__route-icon, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__route-icon .fas, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__route-icon .fab, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__route-icon .svg-inline--fa, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .fa-code-branch, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__route-icon, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__route-icon .fas, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__route-icon .fab, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__route-icon .svg-inline--fa, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .fa-code-branch { + color: #fff !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:hover .openms-lib-developers__badge, +.openms-lib-page--pyopenms-pro .openms-lib-developers__route--review:focus-within .openms-lib-developers__badge { + filter: brightness(1.08); +} + +@media (max-width: 780px) { + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n), + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes + > .openms-lib-developers__route:not(.openms-lib-developers__route--build):nth-child(n), + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(4), + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(4), + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(5), + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-5 + > .openms-lib-developers__route:nth-child(5) { + grid-column: auto / span 1; + } +} + +@media (max-width: 560px) { + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + .openms-lib-developers__grid--routes { + grid-template-columns: 1fr; + } +} + + +/* ========================================================================== + OpenMS-lib (/openms-lib/) — restored rhythm + benefit nums + ========================================================================== */ + +/* Equal vertical rhythm between page sections. + Keep a small bottom pad + overflow:visible so CTA hover scale/glow is not clipped. */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero--pro { + padding-bottom: calc(var(--openms-btn-glow-size, 6px) + 0.5rem); + overflow: visible; +} + +.openms-lib-page--governance.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero--pro { + padding-bottom: calc(clamp(2.75rem, 5.5vw, 4.25rem) + var(--openms-btn-glow-size, 6px)); + overflow: visible; +} + +.openms-lib-page--sponsor-us.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero--pro, +.openms-lib-page--our-sponsors.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero--pro { + padding-bottom: var(--pro-section-y); + overflow: visible; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps):not(.openms-lib-page--governance) + .openms-lib-page__body + > .openms-lib-page__anchor { + padding-block: var(--pro-section-y) 0; +} + +/* Bring What is OpenMS (1) and TOPP Tools (2) closer */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #what-is-openms { + padding-bottom: 0; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools { + padding-top: calc(var(--pro-section-y) * 0.4); +} + +/* Flush cite band against the footer (kill layout bottom gap) */ +.openms-lib-layout:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +) { + padding-bottom: 0; +} + +.content-padding:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +) { + padding-bottom: 0; + margin-bottom: 0; +} + +.openms-lib-layout:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +) + + #footer.footer-redesign, +.content-padding:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +) + + #footer.footer-redesign { + margin-top: 0; + padding-top: 0; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #what-is-openms, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started { + padding-bottom: 0; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools { + padding-top: var(--pro-section-y); + /* Extra air after the tool cards before Get started */ + padding-bottom: var(--pro-section-y); +} + +/* Flush cite band against the footer (kill layout bottom gap) */ +.openms-lib-layout:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +), +.openms-lib-layout:has(.openms-lib-page--pyopenms-pro > .openms-lib-page__cite), +.openms-lib-layout:has(.openms-lib-page--pyopenms-pro .openms-lib-page__cite), +.openms-lib-layout:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite), +.openms-lib-layout:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cite) { + padding-bottom: 0; +} + +.content-padding:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +), +.content-padding:has(.openms-lib-page--pyopenms-pro .openms-lib-page__cite), +.content-padding:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite), +.content-padding:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cite) { + padding-bottom: 0; + margin-bottom: 0; +} + +.openms-lib-layout:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +) + + #footer.footer-redesign, +.content-padding:has( + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite +) + + #footer.footer-redesign, +.openms-lib-layout:has(.openms-lib-page--pyopenms-pro .openms-lib-page__cite) + + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--pyopenms-pro .openms-lib-page__cite) + + #footer.footer-redesign, +.openms-lib-layout:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite) + + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite) + + #footer.footer-redesign, +.openms-lib-layout:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cite) + + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--pyopenms-viz-pro .openms-lib-developers__cite) + + #footer.footer-redesign { + margin-top: 0; + padding-top: 0; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-topp-split, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources--explore { + padding-block: 0; + padding-top: 0; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__inner, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources__inner, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner { + padding-bottom: 0; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources__assist { + overflow: visible; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-block--developers { + gap: 0; + padding-block: var(--pro-section-y) clamp(1.75rem, 4vw, 3rem); + overflow: visible; +} + +/* Contribute — head→cards spacing (overrides equal-rhythm gap:0) */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-block--developers.openms-lib-developers--cards { + gap: var(--pro-head-to-content); + padding-bottom: var(--pro-section-y); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__review + .openms-lib-review { + padding-block: var(--pro-section-y) clamp(1.75rem, 4vw, 3rem); + background: + radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--openms-blue-rgb), 0.08), transparent 62%), + var(--openms-white); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite + .openms-lib-cite, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite + .openms-lib-developers__cite { + margin-top: 0; + padding-top: var(--pro-section-y); + padding-bottom: calc(var(--pro-section-y) * 0.75); +} + +/* ========================================================================== + OpenMS-lib — visual organisation (grouping / surfaces / hierarchy) + Scoped to core OpenMS-lib only; no content or behaviour changes. + ========================================================================== */ + +/* End-matter: Contribute + Cite share a soft band; hairline separates roles */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__cite { + border-top: 1px solid var(--pro-line); +} + +/* TOPP: intro + tool cards read as one split unit on the soft band */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__inner { + align-items: stretch; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split--cards + .openms-lib-topp-split__intro { + align-content: center; +} + +/* Hub TOPP uses divider strip (gap handled in hub cohesion block) */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__cards { + gap: 0; +} + +/* Get started: Need help? connects via top hairline (not a nested card box) */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources__assist { + width: 100%; + max-width: var(--pro-max); + margin-top: clamp(1.75rem, 3.5vw, 2.5rem); + margin-bottom: clamp(2.75rem, 6vw, 4.75rem); + margin-inline: auto; + padding: clamp(1.5rem, 3vw, 2rem) 0 calc(var(--openms-btn-glow-size, 6px) + 0.5rem); + border: none; + border-top: 1px solid var(--openms-num-strip-border, var(--pro-line)); + border-radius: 0; + background: transparent; + box-sizing: border-box; + overflow: visible; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #getting-started + .openms-lib-resources--explore + .openms-lib-resources__inner { + gap: var(--pro-head-to-content); +} + +/* Contribute cards sit on soft band — keep white card surfaces for contrast */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-developers--cards + .openms-lib-developers__card--box, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-developers--cards + .openms-lib-developers__card--review, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src { + background: var(--openms-white); +} + +/* Re-assert muted niche cards after default white surface */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(6), +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) + > :nth-child(7) { + background: var(--openms-white); + box-shadow: var(--pro-shadow); +} + +/* -------------------------------------------------------------------------- + Contribute — keep distinct from Get started / Explore (left head + rail) + Card chrome still shares page tokens; section composition stays its own. + -------------------------------------------------------------------------- */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-page__outro + .openms-lib-block--developers.openms-lib-developers--cards { + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--pro-head-to-content); + max-width: none; + margin-inline: 0; + padding-inline: var(--openms-page-inline); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__cards-head { + display: grid; + justify-items: start; + gap: 0; + width: 100%; + max-width: var(--pro-max); + margin: 0 auto; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-block__eyebrow { + justify-content: flex-start; + color: var(--pro-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__title { + width: 100%; + max-width: none; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__lead { + justify-self: start; + max-width: 34rem; + margin: var(--pro-stack-lead) 0 0; + text-align: left; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers__cards-grid { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + gap: clamp(0.9rem, 2vw, 1.35rem); +} + +/* Resting CTA readable on white cards; hover fill still turns white */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card-link { + margin-top: auto; + padding-top: 0.35rem; + color: var(--pro-link, var(--openms-navy)) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-link { + color: var(--openms-white) !important; +} + +/* Explore — featured matches flat columns (no navy tile) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card--featured { + min-height: 0; + background: transparent !important; + box-shadow: none !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card--featured + .openms-lib-resources__explore-title { + font-size: clamp(1.05rem, 1.45vw, 1.2rem); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card--featured + .openms-lib-resources__explore-icon { + font-size: clamp(1.55rem, 2.2vw, 1.85rem); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card--featured:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card--featured:focus-visible { + background: var(--openms-num-strip-hover-bg, rgba(var(--openms-blue-rgb), 0.06)) !important; + box-shadow: none !important; + transform: translateY(-2px) !important; +} + +/* Citation card — roomier research-facing block */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-cite__card { + gap: 1rem; + padding: clamp(1.5rem, 3vw, 2.15rem) clamp(1.35rem, 3vw, 2rem); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-cite__card + .publications-cite-card__title { + line-height: 1.45; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-cite__card + .publications-cite-card__authors { + margin: 0; + line-height: 1.7; + max-width: 62ch; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-cite__card + .publications-cite-card__meta { + gap: 0.55rem 0.9rem; + margin-top: 0.15rem; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-cite__actions { + margin-top: 0.35rem; + gap: 0.75rem; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__inner { + display: flex; + flex-direction: column; + align-items: center; + gap: clamp(1.35rem, 3vw, 1.85rem); + max-width: min(100%, 42rem); + margin-inline: auto; + padding-inline: max(var(--olib-pad-x), calc((100% - var(--pro-max)) / 2 + var(--olib-pad-x))); + text-align: center; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__head { + display: grid; + justify-items: center; + gap: 0; + width: 100%; + text-align: center; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__eyebrow { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + margin: 0 0 var(--pro-stack-eyebrow); + padding: 0; + border: none; + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__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; + text-wrap: balance; + color: var(--openms-navy); + text-align: center; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__lead { + margin: var(--pro-stack-lead) auto 0; + max-width: 34rem; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-muted); + text-align: center; + text-wrap: pretty; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__cta { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + width: 100%; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + line-height: 0; + text-decoration: none; + transition: transform 0.2s ease, opacity 0.2s ease; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__badge:hover, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__badge:focus-visible { + border: none; + background: transparent; + box-shadow: none; + transform: translateY(-2px); + outline: none; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__badge img { + display: block; + height: 1.35rem; + width: auto; + max-width: min(100%, 18rem); +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__actions { + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + gap: 0.75rem; + width: max-content; + max-width: 100%; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__actions + .openms-lib-btn--primary + .fa-github { + color: #ffffff !important; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__actions + .openms-lib-btn--primary + .fa-github { + color: #ffffff !important; +} + +@media (max-width: 560px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__actions { + gap: clamp(0.45rem, 2vw, 0.75rem); + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-review__actions + .openms-lib-btn { + padding-inline: clamp(0.7rem, 3vw, 1.25rem); + } +} + +/* Overview benefit numbers — readable without dominating titles */ +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefit-num { + margin: 0 0 0.15rem; + color: rgba(var(--openms-navy-rgb), 0.2) !important; + letter-spacing: -0.03em; +} + +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefit:hover + .openms-lib-about__benefit-num, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefit:focus-within + .openms-lib-about__benefit-num { + color: var(--openms-step-num-color-hover, var(--openms-navy)); + background: transparent; + border: none; +} + +@media (max-width: 720px) { + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefit { + align-items: start; + text-align: left; + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefit-num, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefit-title, + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefit-text { + text-align: left; + width: 100%; + } +} + +/* OpenMS-lib Explore — flat feature columns (icon / title / text) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card { + border: none !important; + border-radius: 0.65rem !important; + background: transparent !important; + box-shadow: none !important; + color: inherit !important; + transform: none !important; + padding: 0.85rem 0.75rem !important; + margin: -0.85rem -0.75rem; + width: calc(100% + 1.5rem) !important; + transition: + background-color 0.2s ease, + transform 0.2s ease, + color 0.2s ease; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card:focus-visible { + background: var(--openms-num-strip-hover-bg, rgba(var(--openms-blue-rgb), 0.06)) !important; + box-shadow: none !important; + transform: translateY(-2px) !important; + outline: none; + opacity: 1; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card:hover + .openms-lib-resources__explore-title, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card:focus-visible + .openms-lib-resources__explore-title { + color: var(--openms-blue) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card:hover + .openms-lib-resources__explore-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card:focus-visible + .openms-lib-resources__explore-icon { + color: var(--openms-navy) !important; + transform: translateY(-1px); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-title { + margin: 0; + font-family: var(--openms-font-heading); + font-weight: 700; + letter-spacing: -0.01em; + text-transform: none; + color: var(--openms-navy) !important; + transition: color 0.2s ease; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-text { + margin: 0; + max-width: none; + color: var(--pro-text-muted) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-link { + display: none !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-tag { + display: none !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-icon { + display: grid !important; + place-items: center; + width: 1em; + height: 1em; + margin: 0 0 0.35rem; + color: var(--openms-blue) !important; + font-size: clamp(1.55rem, 2.2vw, 1.85rem) !important; + line-height: 1; + transition: color 0.2s ease, transform 0.2s ease; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-icon + .fab, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-icon + .fas, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-icon + .svg-inline--fa { + color: inherit !important; + font-size: 1em; + width: 1em; + height: 1em; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-icon + .svg-inline--fa + path { + fill: currentColor; +} + +/* ========================================================================== + OpenMS-lib hub — separate but connected component system + Strip language (hairlines between items) for info rows; + bordered cards reserved for Contribute / Cite destinations. + ========================================================================== */ + +/* Explore — vertical hairlines between columns */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + gap: 0; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item { + position: relative; + padding-inline: clamp(0.85rem, 2vw, 1.35rem); + border-right: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:first-child { + padding-left: 0; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:last-child { + border-right: none; + padding-right: 0; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-card { + margin: 0 !important; + width: 100% !important; + padding: 0.35rem 0.15rem !important; + border-radius: 0.5rem !important; +} + +/* Assist — connected footer of Get started (top hairline, no heavy box) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__assist { + margin-top: clamp(1.75rem, 3.5vw, 2.5rem); + padding: clamp(1.5rem, 3vw, 2rem) 0 0; + border: none; + border-top: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: 0; + background: transparent; + box-shadow: none; +} + +/* TOPP — same strip language as Overview (icons + hairlines, no boxed cards) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__cards { + gap: 0 !important; + align-items: stretch; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card { + border: none !important; + border-right: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)) !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + padding: var(--openms-num-strip-pad-y, 1.35rem) var(--openms-num-strip-pad-x, 0.85rem) !important; + transition: background-color 0.2s ease; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card:last-child { + border-right: none !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card:first-child { + padding-left: 0 !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card:focus-within { + background: var(--openms-num-strip-hover-bg, rgba(var(--openms-blue-rgb), 0.03)) !important; + border-color: transparent !important; + border-right-color: var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)) !important; + box-shadow: none !important; + transform: none !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card:last-child:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card:last-child:focus-within { + border-right-color: transparent !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card-icon, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card-icon .fab, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card-icon .fas, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card-icon .svg-inline--fa { + color: var(--openms-blue) !important; + font-size: clamp(1.55rem, 2.2vw, 1.85rem); +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card-title { + color: var(--openms-navy); +} + +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card { + border-right: none !important; + border-bottom: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)) !important; + padding-inline: 0 !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #topp-tools + .openms-lib-topp-split__card:last-child { + border-bottom: none !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item { + border-right: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + border-bottom: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + padding: clamp(0.85rem, 2.5vw, 1.15rem) !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:nth-child(2n) { + border-right: none; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:nth-last-child(-n + 2) { + border-bottom: none; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:last-child:nth-child(odd) { + border-bottom: none; + grid-column: 1 / -1; + } +} + +@media (max-width: 560px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: 1fr; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:nth-child(2n), + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:last-child:nth-child(odd) { + border-right: none; + border-bottom: 1px solid var(--openms-num-strip-border, rgba(var(--openms-navy-rgb), 0.1)); + grid-column: auto; + padding-inline: 0 !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-resources__explore-item:last-child { + border-bottom: none; + } +} + +/* Contribute titles — match page heading case language */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__title { + text-transform: uppercase; + letter-spacing: normal; + font-size: calc(var(--openms-heading-lg-size) * 1.15); +} + +/* For Developers link cards — white rest state (hover still navy) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link { + border: 1px solid var(--pro-line) !important; + border-radius: var(--pro-radius, 1.15rem) !important; + background: var(--openms-white) !important; + box-shadow: var(--pro-shadow) !important; + color: inherit !important; + gap: 0.5rem; + padding: 1.55rem 1.4rem 1.45rem !important; + transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, transform 0.22s ease; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1 1 auto; + width: 100%; + min-height: 0; + gap: 0.5rem; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-icon { + color: rgba(var(--openms-blue-rgb), 0.42) !important; + margin: 0 0 0.15rem; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-icon + .fab, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-icon + .fas, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-icon + .svg-inline--fa { + color: inherit !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-icon + .svg-inline--fa + path { + fill: currentColor !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-title, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-title + span { + color: var(--openms-navy, rgba(var(--openms-dark-rgb), 0.88)) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-subtitle { + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)) !important; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link + .openms-lib-developers__card-link { + margin-top: auto; + padding-top: 0.35rem; + color: var(--openms-blue) !important; +} + +/* Match Get started / Explore destination-card hover (navy + lift) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy) !important; + border-color: transparent !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32) !important; + color: #ffffff !important; + transform: translateY(-4px); + outline: none; + transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; +} + +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-link, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:focus-visible + .openms-lib-developers__card-link { + gap: 0.55rem !important; + color: var(--openms-white) !important; +} + +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within { + background: + linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), + var(--openms-navy) !important; + border-color: transparent !important; + box-shadow: 0 0.85rem 1.85rem rgba(var(--openms-navy-rgb), 0.32) !important; + color: #ffffff !important; + transform: translateY(-4px); + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-title, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-title span, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-subtitle, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-link, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-cta, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-hover-text, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-icon, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-icon i, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-title, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-title span, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-subtitle, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-link, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-icon, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-icon i, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-title, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-subtitle, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-link, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-icon, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--link:hover + .openms-lib-developers__card-icon i { + color: #ffffff !important; + opacity: 1 !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + /* Keep subtitle visible (white) instead of collapsing on hover */ + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-subtitle, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-subtitle, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__card-subtitle { + opacity: 1 !important; + height: auto !important; + margin: 0 !important; + overflow: visible !important; + color: rgba(255, 255, 255, 0.92) !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn { + border-color: rgba(255, 255, 255, 0.55) !important; + background: transparent !important; + color: #ffffff !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + i, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + i, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + .fab, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + .fab, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + .fas, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + .fas, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + .fa-windows, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + .fa-windows, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + .fa-apple, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + .fa-apple, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + .fa-linux, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + .fa-linux, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + .svg-inline--fa, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + .svg-inline--fa { + color: #ffffff !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__platform-btn + .svg-inline--fa + path, + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-within + .openms-lib-developers__platform-btn + .svg-inline--fa + path { + fill: currentColor !important; + } +} + +/* Unify all CTA button sizes on /openms-lib/ */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__actions, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__actions { + flex-wrap: nowrap; + width: max-content; + max-width: 100%; + margin-inline: auto; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__actions, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__actions { + flex-wrap: nowrap; + width: max-content; + max-width: 100%; + margin-inline: auto; +} +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-btn:not(.openms-lib-developers__platform-btn), +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-btn:not(.openms-lib-developers__platform-btn), +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__doc-btn, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__doc-btn, +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-cta-band__doc-btn, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-cta-band__doc-btn { + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: var(--openms-btn-min-height, 2.75rem); + height: auto; + padding: var(--openms-btn-padding); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + font-weight: 600; + line-height: 1.3; + gap: 0.4rem; + white-space: nowrap; +} + +@media (max-width: 640px) { + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__actions + .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-hero__actions + .openms-lib-btn:not(.openms-lib-developers__platform-btn) { + min-height: var(--openms-btn-min-height, 2.75rem); + height: auto; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + font-size: var(--openms-btn-font-size, var(--openms-text-min)); + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platforms, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platforms { + flex-wrap: nowrap; + gap: 0.35rem; + } + + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers--cards + .openms-lib-developers__card--build-src + .openms-lib-developers__platform-btn { + flex: 1 1 0; + min-width: 0; + max-width: none; + width: auto; + justify-content: center; + } +} + +/* 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 #about-the-retreat .openms-lib-about__head { + display: grid; + grid-template-columns: 1fr; + gap: 0; + align-items: start; + max-width: min(100%, 42rem); + margin: 0 0 var(--pro-head-to-content); + text-align: left; +} + +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__head-copy { + display: grid; + gap: 0; + justify-items: start; + width: 100%; + max-width: 100%; +} + +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__eyebrow, +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__title { + margin: 0; +} + +.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)) !important; +} + +.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 #about-the-retreat .openms-lib-about__mosaic.retreat-highlights__mosaic, + .openms-lib-page--developer-retreat .retreat-highlights__mosaic { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--developer-retreat .retreat-register--closed::after { + transition: none; + } +} + +/* ============================================================= */ +/* About pages — shared pro shell */ +/* ============================================================= */ +/* Governance section bands are set earlier (alternating chapters). */ +.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--our-sponsors #our-sponsors { + background: var(--openms-white); +} + +.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: var(--pro-max); +} + +/* ── Publications — pro shell parity ── */ +.openms-lib-page--publications .openms-lib-btn--scholar .openms-lib-btn__icon, +.openms-lib-btn--scholar .openms-lib-btn__icon { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 1.2em; + height: 1.2em; + line-height: 0; +} + +.openms-lib-page--publications .openms-lib-btn--scholar .openms-lib-btn__icon svg, +.openms-lib-btn--scholar .openms-lib-btn__icon svg { + display: block; + width: 100%; + height: 100%; +} + +.openms-lib-page--publications .openms-lib-resources__inner { + max-width: var(--pro-max); + width: 100%; + margin-inline: auto; +} + +/* Match body gutters to Cite CTA so all sections share one content column */ +.openms-lib-page--publications.openms-lib-page--openms-lib .openms-lib-page__body > .openms-lib-page__anchor { + padding-inline: var(--openms-page-inline) !important; + box-sizing: border-box; +} + +.openms-lib-page--publications .publications-featured, +.openms-lib-page--publications .publications-bibliography, +.openms-lib-page--publications .publications-featured__list, +.openms-lib-page--publications .publication-list, +.openms-lib-page--publications .publications-bibliography__entries, +.openms-lib-page--publications .publications-toolbar { + width: 100%; + max-width: none; +} + +.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: var(--pro-max); +} + +.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 .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: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; + 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; +} + +.openms-lib-page--contributors .leadership-card__photo--joshua { + object-position: center 18%; +} + +/* Executive Committee GitHub 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: none; +} + +@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: 0.35rem 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; +} + +@media (max-width: 720px) { + .openms-lib-page--contact .contact-application__form { + max-width: 100%; + margin-inline: 0; + padding: 0; + } +} + +.openms-lib-page--contact .contact-page__form-body, +.openms-lib-page--contact .contact-page__tally-iframe { + display: block; + width: 100%; + max-height: none; + overflow: visible; + border: 0; + background: transparent; +} + +.openms-lib-page--contact .contact-page__tally-iframe { + min-height: 24rem; +} + +.openms-lib-page--contact .contact-paths-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--pro-card-gap); +} + +/* Soft transparent icons — match Contribute / OpenMS-lib card icons */ +.openms-lib-page--contact .openms-lib-resources__item-icon { + display: grid; + place-items: center; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + color: rgba(var(--openms-blue-rgb), 0.28); + font-size: clamp(2.5rem, 3.8vw, 3rem); + line-height: 1; +} + +.openms-lib-page--contact .openms-lib-resources__item-icon .fab, +.openms-lib-page--contact .openms-lib-resources__item-icon .fas, +.openms-lib-page--contact .openms-lib-resources__item-icon .svg-inline--fa { + color: rgba(var(--openms-blue-rgb), 0.28) !important; + font-size: 1em; + width: 1em; + height: 1em; +} + +.openms-lib-page--contact .openms-lib-resources__item-icon .svg-inline--fa path { + fill: currentColor !important; +} + +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .fab, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .fab, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .fas, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .fas, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .svg-inline--fa, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .svg-inline--fa { + color: var(--openms-blue) !important; + } + + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-icon + .svg-inline--fa + path, + .openms-lib-page--contact + .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-icon + .svg-inline--fa + path { + fill: currentColor !important; + } +} + +.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; + max-width: 100%; + } +} + +@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: var(--pro-max); +} + +.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: 0; +} + +.openms-lib-page--research-partnerships #partnerships-include .openms-lib-about, +.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); +} + +.openms-lib-page--research-partnerships #partnership-form .openms-lib-resources { + padding-bottom: clamp(1.5rem, 4vw, 2.5rem); +} + +.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 #our-partners .uni-partners--static .uni-partners__static { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1rem 1.25rem; + max-width: var(--pro-max); + 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: 0 !important; + border: 0; + overflow: visible; + background: transparent; +} + +@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-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: 52rem; + border: 0; + overflow: visible; + 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: 72rem; + } + + .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; +} + +/* Section rhythm lives on .openms-lib-page__anchor only — avoid stacking + another --pro-section-y on the nested about/resources wrappers. */ +.openms-lib-page--governance #governance-bodies .openms-lib-about, +.openms-lib-page--governance #responsibilities .openms-lib-about, +.openms-lib-page--governance #core-developers .openms-lib-resources { + padding-block: 0; +} + +.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 { + display: block; + white-space: nowrap; +} + +.openms-lib-page--governance #core-developers .governance-lead-line, +.openms-lib-page--governance #responsibilities .governance-lead-line { + display: block; + white-space: normal; +} + +@media (max-width: 900px) { + .openms-lib-page--governance #governance-bodies .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__inner { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); + align-items: start; + column-gap: var(--pro-col-gap, clamp(2rem, 5vw, 4rem)); + row-gap: var(--pro-head-to-content); +} + +.openms-lib-page--governance #core-developers .openms-lib-resources__head { + max-width: min(100%, 28rem); + margin: 0; +} + +.openms-lib-page--governance #core-developers .openms-lib-resources__lead { + max-width: none; +} + +.openms-lib-page--governance #core-developers .openms-lib-resources__toolkit { + min-width: 0; + margin: 0; +} + +.openms-lib-page--governance #core-developers .governance-membership { + grid-column: 1 / -1; + margin-top: calc(var(--pro-section-y) * 0.45); + padding-top: var(--pro-section-y); +} + +.openms-lib-page--governance #core-developers .governance-pillars-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +@media (max-width: 992px) { + .openms-lib-page--governance #core-developers .openms-lib-resources__inner { + grid-template-columns: 1fr; + } + + .openms-lib-page--governance #core-developers .openms-lib-resources__head { + 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(--openms-white) !important; +} + +.openms-lib-page--our-sponsors #sponsor-cta { + background: var(--pro-band-soft, var(--olib-bg-soft, #f4f6f9)); +} + +.openms-lib-page--our-sponsors .openms-lib-page__outro .openms-lib-block--developers { + background: transparent; + padding-inline: 0; +} + +.openms-lib-page--our-sponsors #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: var(--pro-card-gap); + margin: 0; +} + +/* Our-sponsors / Sponsor-us: keep logos closer, no tile chrome */ +.openms-lib-page--our-sponsors .sponsors-logo-grid, +.openms-lib-page--sponsor-us .sponsors-logo-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.5rem 0.75rem; + max-width: 36rem; + margin-inline: auto; + width: 100%; +} + +.openms-lib-page--our-sponsors .about-sponsors-logos__item, +.openms-lib-page--sponsor-us .about-sponsors-logos__item { + min-height: 6.5rem; + padding: 0.35rem; +} + +.openms-lib-page--our-sponsors .about-sponsors-logos__item, +.openms-lib-page--sponsor-us .about-sponsors-logos__item { + min-height: 6.5rem; + padding: 0.35rem; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + display: flex; + align-items: center; + justify-content: center; + 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 { + 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--sponsor-us .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 { + background: transparent; + border: none; + box-shadow: none; +} + +.openms-lib-page--our-sponsors .about-sponsors-logos__logo { + width: 100%; + max-width: 12.5rem; + max-height: 4.25rem; + height: auto; + object-fit: contain; +} + +.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 — openms-lib section language */ +.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); +} + +.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: 1fr; + align-items: start; +} + +.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: none; +} + +.openms-lib-page--sponsor-us .openms-lib-about__mosaic { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.openms-lib-page--sponsor-us .sponsor-tile__list { + display: grid; + gap: 0.45rem; + 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; + 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: 0.55rem; + padding-top: 0; + 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: flex; + flex-direction: column; + align-items: flex-start; + justify-items: start; + 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 { + justify-self: start; + margin-inline: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head h2 { + width: 100%; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + width: 100%; + align-self: stretch; +} + +.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; + grid-template-columns: repeat(2, minmax(0, 1fr)); + column-gap: var(--pro-col-gap, clamp(2rem, 5vw, 4rem)); + row-gap: 0.85rem; + margin: var(--pro-stack-lead, 0.75rem) 0 0; + max-width: 100% !important; + width: 100% !important; + 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; + min-width: 0; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tiers__grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--pro-card-gap); + 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); + position: relative; + display: flex; + flex-direction: column; + gap: 0; + min-width: 0; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + padding: 0; + border: 1px solid var(--pro-line); + border-radius: 1rem; + background: var(--openms-white); + box-shadow: var(--pro-shadow); + overflow: visible !important; + transition: border-color 0.2s ease, box-shadow 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; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--silver { + --tier-accent: #65727e; + --tier-accent-rgb: 101, 114, 126; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--gold { + --tier-accent: #a97808; + --tier-accent-rgb: 169, 120, 8; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--platinum { + --tier-accent: #5d5d70; + --tier-accent-rgb: 93, 93, 112; + background: var(--openms-white); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:focus-within { + transform: none; + border-color: var(--pro-line); + box-shadow: var(--pro-shadow); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured:focus-within, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured.sponsor-tier--active { + transform: none; + 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__toggle { + display: flex; + flex-direction: column; + gap: 0.65rem; + flex: 1 1 auto; + width: 100%; + min-height: 100%; + height: 100%; + padding: 1rem 0.95rem 0.9rem; + 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.25rem; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__contribution { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.35rem; + margin: 0.15rem 0 0; + line-height: 1; + font-size: inherit; + font-weight: inherit; + letter-spacing: normal; + color: inherit; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: 0.78rem; + font-weight: 700; + line-height: 1.2; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-card-title-color, var(--openms-navy)); +} + +.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.04em; + color: var(--openms-card-title-color, var(--openms-navy)); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__period { + font-size: 0.8rem; + font-weight: 600; + color: var(--openms-card-title-color, var(--openms-navy)); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__motto { + margin: 0; + font-size: 0.68rem; + font-style: normal; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--openms-card-title-color, var(--openms-navy)); + opacity: 0.85; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__summary { + margin: 0; + flex: 0 0 auto; + font-size: var(--openms-text-min); + line-height: 1.4; + color: var(--pro-text-muted); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + align-self: stretch; + width: 100%; + min-height: 2.85rem; + margin-top: auto; + padding: 0.75rem 1.35rem; + border: 2px solid var(--openms-navy); + border-radius: var(--openms-btn-pill-radius); + background: transparent; + font-size: var(--openms-body-size); + font-weight: 600; + line-height: 1.3; + color: var(--openms-navy) !important; + text-decoration: none; + box-shadow: 0 0 0 0 rgba(var(--openms-navy-rgb), 0.16); + transition: var(--openms-btn-motion); +} + +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:hover { + 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) rgba(var(--openms-navy-rgb), 0.22); + } +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:focus-visible .sponsor-tier__cta { + 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) rgba(var(--openms-navy-rgb), 0.22); +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:active .sponsor-tier__cta { + transform: none; + box-shadow: none; +} + +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured .sponsor-tier__cta { + border-color: var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; + transform: none; + box-shadow: none; +} + +@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; + } +} + +.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: var(--openms-secondary-heading-size-lg); + font-weight: var(--openms-card-title-weight-strong, 800); + 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 — logo rail (not cards; distinct from tiers + FAQ) */ +.openms-lib-page--sponsor-us #current-sponsors .sponsor-logos { + padding-block: clamp(2.5rem, 5vw, 4rem); +} + +.openms-lib-page--sponsor-us .sponsor-logos__inner { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr); + column-gap: var(--pro-col-gap, clamp(2rem, 5vw, 4rem)); + row-gap: 1.5rem; + align-items: center; + max-width: var(--pro-max, var(--hub-wide-max)); + margin-inline: auto; +} + +.openms-lib-page--sponsor-us .sponsor-logos__copy { + display: grid; + gap: 0; + min-width: 0; + text-align: left; +} + +.openms-lib-page--sponsor-us .sponsor-logos__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); +} + +.openms-lib-page--sponsor-us .sponsor-logos__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.2; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--sponsor-us .sponsor-logos__lead { + margin: var(--pro-stack-lead) 0 0; + max-width: 28rem; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--sponsor-us .sponsor-logos__rail { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: clamp(1.5rem, 4vw, 3rem) clamp(1.75rem, 5vw, 3.5rem); + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--sponsor-us .sponsor-logos__item { + margin: 0; + padding: 0; + min-width: 0; +} + +.openms-lib-page--sponsor-us .sponsor-logos__link { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none !important; + opacity: 0.92; + transition: opacity 0.2s ease, transform 0.2s ease; +} + +.openms-lib-page--sponsor-us .sponsor-logos__link:hover, +.openms-lib-page--sponsor-us .sponsor-logos__link:focus-visible { + opacity: 1; + transform: translateY(-2px); + outline: none; +} + +.openms-lib-page--sponsor-us .sponsor-logos__img { + display: block; + width: auto; + max-width: 9.5rem; + max-height: 3.5rem; + height: auto; + object-fit: contain; +} + +.openms-lib-page--sponsor-us .sponsor-logos__img[src*="Elixir"] { + max-width: 7.5rem; + max-height: 4.75rem; +} + +.openms-lib-page--sponsor-us .sponsor-logos__fallback { + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 700; + color: var(--openms-navy); +} + +.openms-lib-page--sponsor-us .sponsor-logos__more { + grid-column: 1 / -1; + margin: 0; + text-align: right; +} + +.openms-lib-page--sponsor-us .sponsor-logos__more a { + display: inline-flex; + align-items: center; + gap: 0.3rem; + 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 .sponsor-logos__more a:hover, +.openms-lib-page--sponsor-us .sponsor-logos__more a:focus-visible { + gap: 0.5rem; +} + +/* FAQ — tighter under tiers (no stacked anchor + section top pad) */ +.openms-lib-page--sponsor-us #faq.openms-lib-page__anchor { + padding-top: 0; +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro { + padding-block: var(--pro-section-y); + padding-top: calc(var(--pro-section-y) * 0.5); +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__inner { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr); + align-items: start; + column-gap: var(--pro-col-gap, clamp(2rem, 5vw, 4rem)); + row-gap: var(--pro-head-to-content, clamp(1.5rem, 3vw, 2.25rem)); + max-width: min(var(--hub-wide-max, 72rem), 100%); + margin-inline: auto; +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__head { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0; + text-align: left; +} + +.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: flex-start; +} + +.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: left; +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__lead { + margin: var(--pro-stack-lead, 0.75rem) 0 0; + max-width: 36ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--pro-text-muted); + text-wrap: pretty; +} + +.openms-lib-page--sponsor-us .sponsor-faq-pro__cta { + margin-top: 1.25rem; + width: fit-content; +} + +.openms-lib-page--sponsor-us .sponsor-faq__list { + display: grid; + gap: 0.75rem; + margin: 0; + min-width: 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-body { + width: 100%; + max-width: min(var(--hub-wide-max, 72rem), 100%); + min-width: 0; + padding-inline: clamp(0.75rem, 3vw, 1.5rem); + box-sizing: border-box; +} + +.openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-developers__card-text { + white-space: normal; + overflow-wrap: break-word; + word-break: normal; + max-width: min(36rem, 100%); + width: 100%; + margin-inline: auto; + box-sizing: border-box; + font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.05rem); + line-height: 1.5; +} + +.openms-lib-page--sponsor-us .sponsor-cta-line { + display: block; +} + +.openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-developers__platforms { + flex-wrap: wrap; + width: 100%; + max-width: min(28rem, 100%); + margin-inline: auto; +} + +.openms-lib-page--sponsor-us + .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--sponsor-us + .openms-lib-developers__card--build + .openms-lib-btn--ghost:hover, +.openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--sponsor-us + .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); +} + +/* ============================================================= */ +/* 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 { + grid-template-columns: 1fr; + max-width: 100% !important; + gap: 0.75rem; + font-size: var(--openms-body-size); + } + + .openms-lib-page--sponsor-us .sponsor-faq-pro__inner { + grid-template-columns: 1fr; + } + + .openms-lib-page--sponsor-us .sponsor-faq-pro__lead { + max-width: none; + } + + .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-logos__inner { + grid-template-columns: 1fr; + row-gap: 1.75rem; + } + + .openms-lib-page--sponsor-us .sponsor-logos__rail { + justify-content: flex-start; + } + + .openms-lib-page--sponsor-us .sponsor-logos__more { + text-align: left; + } + + .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; + width: 100%; + } + + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="bronze"] [data-sponsor-benefits]:not([data-sponsor-benefits="bronze"]), + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="silver"] [data-sponsor-benefits]:not([data-sponsor-benefits="silver"]), + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="gold"] [data-sponsor-benefits]:not([data-sponsor-benefits="gold"]), + .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="platinum"] [data-sponsor-benefits]:not([data-sponsor-benefits="platinum"]) { + display: none !important; + } +} + +/* —— 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: 0; + width: 100%; + } + + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell { + padding: 0.75rem 0.85rem; + } + + /* Mobile single-tier view — no blue selected-column wash */ + .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"], + .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: transparent !important; + box-shadow: none !important; + } + + .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-navy); + } + + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--bronze, + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--silver, + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--gold, + .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--platinum { + background: transparent !important; + } + + /* Keep the active tier cells visible when switching */ + .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"] { + display: flex !important; + } + + .openms-lib-page--sponsor-us .sponsor-logos__rail { + gap: 1.35rem 1.75rem; + } + + .openms-lib-page--sponsor-us .sponsor-logos__img { + max-width: 8rem; + max-height: 3rem; + } + + .openms-lib-page--sponsor-us .sponsor-logos__img[src*="Elixir"] { + max-width: 6.5rem; + max-height: 4rem; + } + + .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; + max-width: none; + } + + .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: min(28rem, 100%); + font-size: var(--openms-body-size); + line-height: 1.5; + } + + .openms-lib-page--sponsor-us .sponsor-cta-line { + display: inline; + } + + .openms-lib-page--sponsor-us .sponsor-cta-line::after { + content: " "; + } + + .openms-lib-page--sponsor-us + .openms-lib-developers__card--build + .openms-lib-developers__card-body { + padding-inline: clamp(0.65rem, 4vw, 1rem); + } +} + +/* —— 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 Policy — glance + section cards */ +.openms-lib-page--privacy #privacy-content { + background: var(--openms-white); + padding-inline: 0; +} + +.openms-lib-page--privacy .privacy-pro { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--privacy .privacy-pro__inner { + max-width: min(52rem, 100%); + gap: clamp(1.25rem, 2.5vw, 1.75rem); +} + +.openms-lib-page--privacy .privacy-pro__glance { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.85rem; + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-page--privacy .privacy-pro__glance-link { + display: grid; + gap: 0.35rem; + height: 100%; + padding: 1rem 1.1rem; + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--pro-band-soft, #f5f8fb); + color: inherit; + text-decoration: none; + transition: border-color 0.15s ease, background-color 0.15s ease; +} + +.openms-lib-page--privacy .privacy-pro__glance-link:hover, +.openms-lib-page--privacy .privacy-pro__glance-link:focus-visible { + border-color: color-mix(in srgb, var(--openms-blue) 45%, var(--pro-line)); + background: var(--openms-white); + outline: none; +} + +.openms-lib-page--privacy .privacy-pro__glance-label { + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-page--privacy .privacy-pro__glance-text { + font-size: var(--openms-body-size); + line-height: 1.45; + color: var(--pro-text, #1a2332); +} + +.openms-lib-page--privacy .privacy-pro__sections { + display: grid; + gap: 0.85rem; +} + +.openms-lib-page--privacy .privacy-pro__card { + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + background: var(--openms-white); + box-shadow: var(--pro-shadow); + scroll-margin-top: 6rem; + overflow: clip; +} + +.openms-lib-page--privacy .privacy-pro__card-head { + display: grid; + grid-template-columns: auto 1fr; + align-items: baseline; + gap: 0.85rem; + padding: 1rem 1.15rem 0.85rem; + border-bottom: 1px solid var(--pro-line); + background: color-mix(in srgb, var(--pro-band-soft, #f5f8fb) 70%, var(--openms-white)); +} + +.openms-lib-page--privacy .privacy-pro__card-index { + 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__card-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.5vw, 1.2rem); + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy, #0b1f33); + text-wrap: balance; +} + +.openms-lib-page--privacy .privacy-pro__card-body { + padding: 1rem 1.15rem 1.2rem; + color: var(--pro-text, #1a2332); + font-size: var(--openms-body-size); + line-height: 1.65; +} + +.openms-lib-page--privacy .privacy-pro__card-body > *:first-child { + margin-top: 0; +} + +.openms-lib-page--privacy .privacy-pro__card-body p { + margin: 0 0 0.9rem; +} + +.openms-lib-page--privacy .privacy-pro__card-body h4 { + margin: 1.15rem 0 0.45rem; + font-family: var(--openms-font-heading); + font-size: 0.98rem; + font-weight: 700; + letter-spacing: 0.01em; + color: var(--openms-navy, #0b1f33); +} + +.openms-lib-page--privacy .privacy-pro__card-body h4:first-child { + margin-top: 0; +} + +.openms-lib-page--privacy .privacy-pro__card-body 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__card-body a:hover, +.openms-lib-page--privacy .privacy-pro__card-body a:focus-visible { + color: var(--openms-navy, #0b1f33); +} + +.openms-lib-page--privacy .privacy-pro__card-body strong { + font-weight: 700; +} + +@media (max-width: 720px) { + .openms-lib-page--privacy .privacy-pro__glance { + grid-template-columns: 1fr; + } + + .openms-lib-page--privacy .privacy-pro__card-head, + .openms-lib-page--privacy .privacy-pro__card-body { + padding-inline: 0.95rem; + } +} + +/* --- recovered patches (post-replay) --- */ +/* Membership — icon above each step; connected on desktop */ +.openms-lib-page--governance .governance-membership { + display:grid; + gap:var(--pro-head-to-content); + width:100%; + margin:0; + padding:var(--pro-section-y) 0 0; + border:none; + background:transparent +} +.openms-lib-page--governance .governance-membership__head { + display:grid; + justify-items:center; + gap:0; + max-width:min(100%,40rem); + margin-inline:auto; + text-align:center +} +.openms-lib-page--governance .governance-membership__eyebrow { + display:inline-flex; + margin:0 0 var(--pro-stack-eyebrow,.45rem); + font-size:var(--openms-text-min); + font-weight:700; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--openms-blue) +} +.openms-lib-page--governance .governance-membership__title { + margin:0; + font-family:var(--openms-font-heading); + font-size:calc(var(--openms-heading-lg-size) * 1.05); + 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--governance .governance-membership__lead { + margin:var(--pro-stack-lead,.75rem) 0 0; + max-width:42ch; + font-size:var(--openms-body-size-lg); + line-height:1.6; + color:var(--pro-text-muted); + text-align:center +} +.openms-lib-page--governance .governance-membership__track { + display:grid; + gap:0; + margin:0; + padding:0 +} +.openms-lib-page--governance .governance-membership__cards { + display:grid; + grid-template-columns:repeat(2,minmax(0,1fr)); + align-items:start; + gap:clamp(.85rem,2vw,1.35rem); + margin:0; + padding:0; + list-style:none; + position:relative +} +.openms-lib-page--governance .governance-membership__cards::before { + content:""; + position:absolute; + top:calc(var(--openms-card-icon-size, 2.75rem) / 2 - 1px); + left:calc(25% + .5rem); + right:calc(25% + .5rem); + height:2px; + background:linear-gradient(90deg,rgba(var(--openms-blue-rgb),.18),rgba(var(--openms-blue-rgb),.5),rgba(var(--openms-blue-rgb),.18)); + border-radius:999px; + pointer-events:none; + z-index:0 +} +.openms-lib-page--governance .governance-membership__card, +.openms-lib-page--governance .governance-membership__card:hover, +.openms-lib-page--governance .governance-membership__card:focus-within { + display:grid; + justify-items:center; + align-content:start; + gap:.4rem; + height:auto!important; + min-height:0!important; + max-height:none!important; + padding:0!important; + border:none!important; + border-radius:0!important; + background:transparent!important; + box-shadow:none!important; + transform:none!important; + text-align:center; + position:relative; + z-index:1 +} +.openms-lib-page--governance .governance-membership__icon { + display:grid; + place-items:center; + width:auto; + height:auto; + margin:0 0 .15rem; + border:none; + border-radius:0; + background:transparent; + color:rgba(var(--openms-blue-rgb),.28); + font-size:var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + line-height:1 +} +.openms-lib-page--governance .governance-membership__icon .fas, +.openms-lib-page--governance .governance-membership__icon .svg-inline--fa { + color:rgba(var(--openms-blue-rgb),.28)!important; + font-size:1em; + width:1em; + height:1em +} +.openms-lib-page--governance .governance-membership__icon .svg-inline--fa path { + fill:currentColor!important +} +.openms-lib-page--governance .governance-membership__tag { + margin:0; + text-align:center +} +.openms-lib-page--governance .governance-membership__text { + margin:0; + max-width:36ch; + font-family:var(--openms-font-body); + font-size:var(--openms-body-size); + line-height:1.6; + color:rgba(var(--openms-dark-rgb),.72); + text-align:center +} +@media (max-width:700px) { + .openms-lib-page--governance .governance-membership__cards { + grid-template-columns:1fr; + gap:1.15rem + } + .openms-lib-page--governance .governance-membership__cards::before { + display:none + } + .openms-lib-page--governance .governance-membership__icon { + font-size:var(--openms-card-icon-size, clamp(2.5rem, 3.8vw, 3rem)); + margin-bottom:.25rem + } +} + +/* ── Our Sponsors — match sponsor-us section rhythm ── */ +.openms-lib-page--our-sponsors #our-sponsors.openms-lib-page__anchor { + background: var(--openms-white) !important; + padding-inline: max( + var(--olib-pad-x, clamp(1.25rem, 4vw, 2rem)), + calc((100% - var(--pro-max, 75rem)) / 2 + var(--olib-pad-x, clamp(1.25rem, 4vw, 2rem))) + ); + /* Top spacing comes from shared body-anchor rhythm; section owns block pad */ + padding-block: 0; + box-sizing: border-box; +} + +.openms-lib-page--our-sponsors .openms-lib-hero--pro { + background: var(--openms-white); +} + +.openms-lib-page--our-sponsors #our-sponsors .openms-lib-resources { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--our-sponsors #sponsor-cta.openms-lib-page__anchor { + padding-block: var(--pro-section-y); +} + +.openms-lib-page--our-sponsors .sponsors-showcase { + width: 100%; + max-width: var(--pro-max, 75rem); + margin-inline: auto; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__inner { + display: grid; + gap: clamp(2.25rem, 4.5vw, 3.25rem); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__head { + display: grid; + justify-items: center; + gap: 0; + max-width: 42rem; + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__eyebrow { + margin: 0 0 var(--pro-stack-eyebrow, 0.45rem); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: calc(var(--openms-heading-lg-size, 1.65rem) * 1.15); + font-weight: var(--openms-heading-lg-weight, 800); + line-height: 1.25; + letter-spacing: normal; + text-transform: uppercase; + color: var(--openms-navy); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__lead { + margin: var(--pro-stack-lead, 0.75rem) 0 0; + max-width: 40ch; + font-size: var(--openms-body-size-lg, var(--openms-body-size)); + line-height: 1.65; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(1rem, 2.5vw, 1.5rem); + margin: 0; + padding: 0; + list-style: none; + width: 100%; + max-width: none; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__item { + display: grid; + grid-template-rows: minmax(7.5rem, auto) auto; + align-items: stretch; + gap: 0; + min-width: 0; + margin: 0; + padding: 0; + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: var(--pro-radius, 0.85rem); + background: var(--openms-white); + box-shadow: none; + text-decoration: none !important; + color: inherit; + overflow: hidden; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__item:hover, +.openms-lib-page--our-sponsors .sponsors-showcase__item:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 10px 28px rgba(var(--openms-navy-rgb), 0.08); + transform: translateY(-2px); + outline: none; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__logo-wrap { + display: flex; + align-items: center; + justify-content: center; + min-height: 7.5rem; + padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem); + background: + radial-gradient(circle at 50% 0%, rgba(var(--openms-blue-rgb), 0.06), transparent 55%), + var(--openms-white); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__item--dark .sponsors-showcase__logo-wrap { + background: var(--openms-navy); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__logo { + display: block; + width: auto; + max-width: min(100%, 11.5rem); + max-height: 3.75rem; + height: auto; + object-fit: contain; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__item .sponsors-showcase__logo[src*="Elixir"], +.openms-lib-page--our-sponsors .sponsors-showcase__item .sponsors-showcase__logo[src*="elixir"] { + max-height: 4.5rem; + max-width: 9rem; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__fallback { + font-family: var(--openms-font-heading); + font-size: 1.15rem; + font-weight: 700; + color: var(--openms-navy); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__meta { + display: grid; + gap: 0.35rem; + padding: 1rem 1.15rem 1.2rem; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.06); + background: color-mix(in srgb, var(--pro-band-soft, #f4f6f9) 65%, var(--openms-white)); + text-align: center; +} + +.openms-lib-page--our-sponsors .sponsors-showcase__name { + font-family: var(--openms-font-heading); + font-size: 0.95rem; + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy); +} + +.openms-lib-page--our-sponsors .sponsors-showcase__desc { + font-size: var(--openms-text-min, 0.8rem); + line-height: 1.45; + color: rgba(var(--openms-dark-rgb), 0.68); +} + +.openms-lib-page--our-sponsors .sponsors-tiers { + display: grid; + gap: clamp(2rem, 4vw, 3rem); +} + +.openms-lib-page--our-sponsors .sponsors-tier { + display: grid; + gap: 1rem; +} + +.openms-lib-page--our-sponsors .sponsors-tier__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size, 1.05rem); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--openms-navy); + text-align: center; +} + +@media (max-width: 640px) { + .openms-lib-page--our-sponsors .sponsors-showcase__grid { + grid-template-columns: 1fr; + max-width: 22rem; + margin-inline: auto; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--our-sponsors .sponsors-showcase__item, + .openms-lib-page--our-sponsors .sponsors-showcase__item:hover, + .openms-lib-page--our-sponsors .sponsors-showcase__item:focus-visible { + transform: none; + } +} + +/* pyopenms_viz Contribute — fill section rail; keep 2 columns on small screens */ +@media (max-width: 900px) { + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; + max-width: 100% !important; + margin-inline: 0 !important; + gap: var(--pro-card-gap, clamp(0.75rem, 2.5vw, 1.1rem)) !important; + } + + .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route, + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route { + grid-column: span 1 !important; + grid-area: auto !important; + width: 100% !important; + min-width: 0 !important; + } +} diff --git a/assets/css/zz-code-of-conduct-page.css b/assets/css/zz-code-of-conduct-page.css new file mode 100644 index 00000000..404d59fe --- /dev/null +++ b/assets/css/zz-code-of-conduct-page.css @@ -0,0 +1,536 @@ +/* Code of Conduct — polished hub layout aligned with Privacy / governance pages */ + +.openms-lib-page--code-of-conduct .openms-lib-hero--pro { + padding-bottom: 0; +} + +.openms-lib-page--code-of-conduct .openms-lib-hero__title { + max-width: 16ch; +} + +.openms-lib-page--code-of-conduct .openms-lib-hero__lead { + max-width: 40ch; +} + +.openms-lib-page--code-of-conduct.openms-lib-page--openms-lib .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--code-of-conduct .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--code-of-conduct .openms-lib-page__outro { + padding-inline: 0; +} + +.openms-lib-page--code-of-conduct.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--code-of-conduct .openms-lib-page__body > .openms-lib-page__anchor { + padding-top: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)) !important; + padding-bottom: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)) !important; +} + +.openms-lib-page--code-of-conduct #summary { + background: var(--pro-band-soft, #f4f6f9) !important; +} + +.openms-lib-page--code-of-conduct #detailed { + background: var(--openms-white) !important; +} + +/* Shared content column — same width as Privacy (page gutters only, no double max-width) */ +.openms-lib-page--code-of-conduct.openms-lib-page--openms-lib .openms-lib-about__inner, +.openms-lib-page--code-of-conduct .coc-overview__inner, +.openms-lib-page--code-of-conduct .coc-details__inner { + display: grid; + gap: clamp(2.75rem, 5.5vw, 4rem); + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +/* —— Overview head: left-aligned for policy readability —— */ +.openms-lib-page--code-of-conduct .coc-overview__head, +.openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__head { + display: grid; + grid-template-columns: 1fr; + justify-items: start; + text-align: left; + max-width: min(100%, 40rem); + margin-inline: 0; +} + +.openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__head-copy { + justify-items: start; +} + +.openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__eyebrow { + justify-content: flex-start; +} + +.openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__title, +.openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__lead { + text-align: left; + margin-inline: 0; +} + +.openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__lead { + max-width: min(100%, 46rem); +} + +/* —— Principles: numbered items with clear breathing room —— */ +.openms-lib-page--code-of-conduct .coc-overview__principles { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.35rem, 2.8vw, 2.25rem); + width: 100%; + margin: 0; + padding: clamp(0.35rem, 1vw, 0.75rem) 0 0; + list-style: none; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.openms-lib-page--code-of-conduct .coc-principle { + display: grid; + gap: 0.85rem; + margin: 0; + padding: clamp(1.15rem, 2vw, 1.5rem) 0.35rem 0.25rem; + border: none; + background: transparent; + box-shadow: none; +} + +.openms-lib-page--code-of-conduct .coc-principle:last-child { + padding-right: 0.35rem; +} + +.openms-lib-page--code-of-conduct .coc-principle:first-child { + padding-left: 0; +} + +/* Principle numbers use shared step-num tokens (Contribute channels) */ + +.openms-lib-page--code-of-conduct .coc-principle__body { + display: grid; + gap: 0.35rem; + min-width: 0; +} + +.openms-lib-page--code-of-conduct .coc-principle__num { + color: var(--openms-step-num-color) !important; +} + +.openms-lib-page--code-of-conduct .coc-principle:hover .coc-principle__num, +.openms-lib-page--code-of-conduct .coc-principle:focus-within .coc-principle__num { + color: var(--openms-step-num-color-hover) !important; +} + +.openms-lib-page--code-of-conduct .coc-principle__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size, clamp(1rem, 1.4vw, 1.1rem)); + font-weight: var(--openms-card-title-weight, 700); + line-height: 1.3; + color: var(--openms-card-title-color, var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82))) !important; +} + +.openms-lib-page--code-of-conduct .coc-principle__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +/* —— Report callout —— */ +.openms-lib-page--code-of-conduct .coc-report { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 1rem 1.75rem; + width: 100%; + margin: 0; + padding: clamp(1.15rem, 2.5vw, 1.45rem) clamp(1.2rem, 2.8vw, 1.6rem); + border: none; + border-radius: var(--pro-radius, 0.85rem); + background: var(--openms-white); + box-shadow: var(--pro-shadow, 0 0.15rem 0.65rem rgba(var(--openms-navy-rgb), 0.04)); +} + +.openms-lib-page--code-of-conduct .coc-report__copy { + display: grid; + gap: 0.4rem; + min-width: 0; +} + +.openms-lib-page--code-of-conduct .coc-report__kicker { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--pro-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); +} + +.openms-lib-page--code-of-conduct .coc-report__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.78); +} + +.openms-lib-page--code-of-conduct .coc-report__text a, +.openms-lib-page--code-of-conduct .coc-details__answer a { + color: var(--openms-content-link, var(--openms-navy)); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); + overflow-wrap: anywhere; +} + +.openms-lib-page--code-of-conduct .coc-report__text a:hover, +.openms-lib-page--code-of-conduct .coc-details__answer a:hover, +.openms-lib-page--code-of-conduct .coc-report__text a:focus-visible, +.openms-lib-page--code-of-conduct .coc-details__answer a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); + text-decoration: none; +} + +.openms-lib-page--code-of-conduct .coc-report__link { + display: inline-flex; + align-items: center; + gap: 0.4rem; + flex-shrink: 0; + font-size: var(--openms-text-min); + font-weight: var(--openms-cta-link-weight, 700); + line-height: 1.35; + color: var(--openms-cta-link, var(--openms-navy)); + text-decoration: none; + white-space: nowrap; +} + +.openms-lib-page--code-of-conduct .coc-report__link:hover, +.openms-lib-page--code-of-conduct .coc-report__link:focus-visible { + color: var(--openms-cta-link-hover, var(--openms-blue)); + outline: none; +} + +/* —— Full policy dropdowns —— */ +.openms-lib-page--code-of-conduct .coc-details { + padding-bottom: 0; +} + +.openms-lib-page--code-of-conduct .coc-details__head { + display: grid; + grid-template-columns: 1fr; + gap: 0; + align-items: start; + margin-bottom: 0; +} + +.openms-lib-page--code-of-conduct .coc-details__head-copy { + display: grid; + justify-items: start; + text-align: left; + max-width: min(100%, 42rem); +} + +.openms-lib-page--code-of-conduct .coc-details__body { + display: grid; + gap: 0.85rem; + width: 100%; +} + +.openms-lib-page--code-of-conduct .coc-details__toolbar { + display: flex; + flex-wrap: wrap; + gap: 0.55rem; + justify-content: flex-end; + width: 100%; + margin: 0; +} + +.openms-lib-page--code-of-conduct .coc-details__tool-btn { + appearance: none; + margin: 0; + min-height: 2.5rem; + padding: 0.45rem 0.95rem; + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)); + 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--code-of-conduct .coc-details__tool-btn:hover, +.openms-lib-page--code-of-conduct .coc-details__tool-btn:focus-visible { + border-color: color-mix(in srgb, var(--openms-blue) 40%, var(--pro-line, rgba(var(--openms-navy-rgb), 0.12))); + color: var(--openms-blue); + outline: none; +} + +.openms-lib-page--code-of-conduct .coc-details__list { + display: grid; + gap: 0.65rem; + width: 100%; + max-width: none; + margin: 0; +} + +.openms-lib-page--code-of-conduct .coc-details__item { + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)); + border-radius: var(--pro-radius, 0.85rem); + background: var(--openms-white); + box-shadow: none; + overflow: clip; + scroll-margin-top: 6rem; +} + +.openms-lib-page--code-of-conduct .coc-details__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--code-of-conduct .coc-details__summary::-webkit-details-marker { + display: none; +} + +.openms-lib-page--code-of-conduct .coc-details__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--code-of-conduct .coc-details__item[open] .coc-details__summary::after { + transform: rotate(225deg); + margin-top: 0.65rem; +} + +.openms-lib-page--code-of-conduct .coc-details__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--code-of-conduct .coc-details__summary-copy { + display: grid; + gap: 0.25rem; + min-width: 0; +} + +.openms-lib-page--code-of-conduct .coc-details__question-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.5vw, 1.12rem); + font-weight: 700; + line-height: 1.3; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--code-of-conduct .coc-details__summary-text { + color: rgba(var(--openms-navy-rgb), 0.58); + font-size: var(--openms-body-size); + line-height: 1.45; +} + +.openms-lib-page--code-of-conduct .coc-details__answer { + display: grid; + gap: 0.85rem; + padding: 0 1.15rem 1.2rem; + border-top: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)); +} + +.openms-lib-page--code-of-conduct .coc-details__answer > *:first-child { + margin-top: 1rem; +} + +.openms-lib-page--code-of-conduct .coc-details__answer p, +.openms-lib-page--code-of-conduct .coc-details__answer li { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--code-of-conduct .coc-details__answer ul, +.openms-lib-page--code-of-conduct .coc-details__answer ol { + margin: 0; + padding-left: 1.25rem; + display: grid; + gap: 0.4rem; + list-style: disc; +} + +.openms-lib-page--code-of-conduct .coc-details__answer ol { + list-style: decimal; +} + +/* —— Quiet attribution footer —— */ +.openms-lib-page--code-of-conduct .openms-lib-page__outro { + background: var(--openms-white); + padding-inline: 0; + padding-block: 0; +} + +.openms-lib-page--code-of-conduct .openms-lib-page__outro > .openms-lib-page__anchor { + padding-inline: var(--openms-page-inline); + padding-block: 0.85rem 2rem; + box-sizing: border-box; +} + +.openms-lib-page--code-of-conduct .coc-attribution { + width: 100%; + max-width: min(100%, 48rem); + margin: 0; + padding: 0.75rem 0 0; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.06); +} + +.openms-lib-page--code-of-conduct .coc-attribution__text { + margin: 0; + font-size: 0.72rem; + line-height: 1.45; + color: rgba(var(--openms-dark-rgb), 0.45); +} + +@media (max-width: 1100px) { + .openms-lib-page--code-of-conduct .coc-overview__principles { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 720px) { + .openms-lib-page--code-of-conduct .openms-lib-hero__actions { + width: 100%; + } + + .openms-lib-page--code-of-conduct .openms-lib-hero__actions .openms-btn-primary, + .openms-lib-page--code-of-conduct .openms-lib-hero__actions .about-cta-btn--donate { + width: 100%; + justify-content: center; + } + + .openms-lib-page--code-of-conduct .coc-overview__principles { + grid-template-columns: 1fr; + gap: 0; + border-top: none; + padding-top: 0; + } + + .openms-lib-page--code-of-conduct .coc-principle { + grid-template-columns: auto 1fr; + align-items: start; + gap: 0.85rem 1rem; + padding: 1.15rem 0; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); + } + + .openms-lib-page--code-of-conduct .coc-principle:first-child { + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1); + padding-left: 0; + } + + .openms-lib-page--code-of-conduct .coc-principle:last-child { + border-bottom: none; + padding-right: 0; + } + + .openms-lib-page--code-of-conduct .coc-principle__num { + font-size: 1.45rem; + margin-top: 0.1rem; + } + + .openms-lib-page--code-of-conduct .coc-report { + grid-template-columns: 1fr; + justify-items: start; + } + + .openms-lib-page--code-of-conduct .coc-report__link { + white-space: normal; + } + +} + +@media (max-width: 720px) { + .openms-lib-page--code-of-conduct .openms-lib-hero__actions { + width: 100%; + } + + .openms-lib-page--code-of-conduct .openms-lib-hero__actions .openms-lib-btn { + width: 100%; + justify-content: center; + } + + .openms-lib-page--code-of-conduct .coc-overview__principles { + grid-template-columns: 1fr; + border-top: none; + } + + .openms-lib-page--code-of-conduct .coc-principle { + grid-template-columns: auto 1fr; + align-items: start; + gap: 0.85rem; + padding: 1rem 0; + border-right: none; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); + } + + .openms-lib-page--code-of-conduct .coc-principle:first-child { + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1); + } + + .openms-lib-page--code-of-conduct .coc-principle:last-child { + border-bottom: none; + } + + .openms-lib-page--code-of-conduct .coc-principle:nth-child(n + 4) { + border-top: none; + } + + .openms-lib-page--code-of-conduct .coc-principle__num { + margin-top: 0; + } + + .openms-lib-page--code-of-conduct .coc-report { + grid-template-columns: 1fr; + justify-items: start; + } + + .openms-lib-page--code-of-conduct .coc-report__link { + white-space: normal; + } + + .openms-lib-page--code-of-conduct .coc-details__toolbar { + justify-content: stretch; + } + + .openms-lib-page--code-of-conduct .coc-details__tool-btn { + flex: 1 1 calc(50% - 0.3rem); + } + + .openms-lib-page--code-of-conduct .coc-details__summary { + gap: 0.7rem; + padding: 0.9rem 0.95rem; + } + + .openms-lib-page--code-of-conduct .coc-details__answer { + padding-inline: 0.95rem; + } + + .openms-lib-page--code-of-conduct .coc-details__summary-text { + font-size: var(--openms-text-min); + } +} diff --git a/assets/css/zz-contribute-page.css b/assets/css/zz-contribute-page.css new file mode 100644 index 00000000..1bcb5929 --- /dev/null +++ b/assets/css/zz-contribute-page.css @@ -0,0 +1,1035 @@ +/* Contribute page — layouts use shared pro spacing rhythm */ + +.openms-lib-page--contribute { + --contribute-space-1: var(--pro-space-1, 0.5rem); + --contribute-space-2: var(--pro-space-2, 0.75rem); + --contribute-space-3: var(--pro-space-3, 1rem); + --contribute-space-4: var(--pro-space-4, 1.25rem); + --contribute-space-5: var(--pro-space-5, 1.75rem); + --contribute-space-6: var(--pro-space-6, clamp(2.25rem, 4.5vw, 3.25rem)); + --contribute-max: var(--pro-max, 75rem); + --contribute-pad: var(--openms-page-inline, clamp(1.25rem, 4vw, 2.5rem)); + --contribute-section-y: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); + --contribute-soft: var(--pro-band-soft, #f4f6f9); + --contribute-border: var(--pro-line, rgba(var(--openms-navy-rgb), 0.1)); + --contribute-motion: 0.28s cubic-bezier(0.44, 0, 0.56, 1); + --contribute-gutter: max( + var(--contribute-pad), + calc((100% - var(--contribute-max)) / 2) + ); +} + +/* Full-bleed shells; anchors keep standard section-y like other hub pages */ +.openms-lib-page--contribute.openms-lib-page--openms-lib .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--contribute .openms-lib-page__body > .openms-lib-page__anchor { + width: 100%; + max-width: none; + padding-inline: 0; + padding-block: var(--contribute-section-y) 0; + background: transparent; +} + +.openms-lib-page--contribute .openms-lib-page__body > .openms-lib-page__anchor:nth-child(even) { + background: transparent; +} + +/* Ways — soft band edge-to-edge (page-wide) */ +.openms-lib-page--contribute #ways-to-contribute.openms-lib-page__anchor { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; + background: var(--contribute-soft, var(--pro-band-soft, #f4f6f9)); +} + +.openms-lib-page--contribute .contribute-channels, +.openms-lib-page--contribute .contribute-ways, +.openms-lib-page--contribute .contribute-track, +.openms-lib-page--contribute .contribute-support, +.openms-lib-page--contribute .contribute-outreach { + width: 100%; + max-width: none; + box-sizing: border-box; + margin-inline: 0; +} + +.openms-lib-page--contribute .contribute-channels__strip { + width: 100%; + max-width: none; + margin-inline: 0; + box-sizing: border-box; +} + +/* ── Hero ── */ +.openms-lib-page--contribute .openms-lib-hero--pro { + padding-bottom: calc(var(--openms-btn-glow-size, 6px) + 0.5rem); + overflow: visible; +} + +.openms-lib-page--contribute { + gap: 0; +} + +.openms-lib-page--contribute .openms-lib-hero__eyebrow { + margin: 0 auto var(--pro-stack-eyebrow, 0.5rem); + font-size: var(--openms-text-min) !important; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--pro-eyebrow, rgba(var(--openms-blue-rgb), 0.72)); +} + +.openms-lib-page--contribute .openms-lib-hero__title { + max-width: min(20ch, 94vw); + margin: 0 auto; + font-size: var(--openms-page-hero-title-size) !important; + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight, 800)); + line-height: 1.12; + letter-spacing: -0.02em; +} + +.openms-lib-page--contribute .openms-lib-hero__lead { + max-width: min(42ch, 92vw); + margin: var(--pro-stack-lead, 1rem) auto 0; + font-size: var(--openms-body-size-lg) !important; + line-height: 1.65; + white-space: normal; + text-wrap: balance; + color: var(--pro-text-muted, rgba(var(--openms-navy-rgb), 0.68)); +} + +.openms-lib-page--contribute .openms-lib-hero__actions { + margin-top: var(--pro-stack-actions, 2rem); +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .fab, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .svg-inline--fa { + color: var(--openms-white) !important; +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--primary .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .fab, +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .svg-inline--fa { + color: var(--openms-blue) !important; +} + +.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn--ghost .svg-inline--fa path { + fill: currentColor !important; +} + +.openms-lib-page--contribute .openms-lib-page__body > .openms-lib-page__anchor { + background: transparent; +} + +.openms-lib-page--contribute .openms-lib-page__body { + margin-top: 0; +} + +.openms-lib-page--contribute #communication-channels.openms-lib-page__anchor { + padding-top: var(--contribute-section-y); +} + +/* Shared kickers */ +.contribute-channels__eyebrow, +.contribute-ways__eyebrow, +.contribute-support__kicker, +.contribute-outreach__eyebrow { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); +} + +/* ═══════════════════════════════════════════ + 1. CHANNELS — numbered 3-up strip + ═══════════════════════════════════════════ */ +.contribute-channels { + padding: 0 var(--contribute-gutter); + background: var(--openms-white); +} + +.contribute-channels__head { + width: 100%; + max-width: 36rem; + margin: 0 auto var(--pro-head-to-content, var(--contribute-space-6)); + text-align: center; + display: grid; + gap: var(--pro-stack-eyebrow, var(--contribute-space-1)); + justify-items: center; +} + +.contribute-channels__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-section-title-size) !important; + font-weight: var(--openms-heading-lg-weight, 800); + line-height: 1.15; + letter-spacing: -0.02em; + text-transform: uppercase; + color: var(--openms-navy); +} + +.contribute-channels__lead { + margin: var(--pro-stack-lead, var(--contribute-space-2)) 0 0; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--openms-text-muted) !important; +} + +.contribute-channels__strip { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0; + width: 100%; + margin-inline: 0; + border-top: 1px solid var(--contribute-border); + border-bottom: 1px solid var(--contribute-border); +} + +.contribute-channel { + position: relative; + display: grid; + gap: var(--contribute-space-2); + align-content: start; + padding: var(--contribute-space-6) var(--contribute-space-4); + border: none; + border-right: 1px solid var(--contribute-border); + background: transparent; + transition: background-color var(--contribute-motion); +} + +.contribute-channel:last-child { + border-right: none; +} + +.contribute-channel:hover, +.contribute-channel:focus-within { + background: var(--openms-num-strip-hover-bg); + box-shadow: none; + transform: none; +} + +/* Index typography comes from brand-palette shared step numbers */ + +.contribute-channel__icon { + display: none; +} + +.contribute-channel__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size) !important; + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy); +} + +.contribute-channel__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.contribute-channel__link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: var(--contribute-space-1); + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy) !important; + text-decoration: none !important; + transition: gap var(--contribute-motion), color var(--contribute-motion); +} + +.contribute-channel:hover .contribute-channel__link, +.contribute-channel:focus-within .contribute-channel__link { + gap: 0.5rem; + color: var(--openms-blue) !important; +} + +/* ═══════════════════════════════════════════ + 2. WAYS — intro + numbered contribution track + ═══════════════════════════════════════════ */ +.contribute-ways { + display: grid; + gap: 0; + background: transparent; +} + +.contribute-ways__head { + display: grid; + justify-items: start; + text-align: left; + gap: 0; + width: 100%; + margin: 0; + padding: 0 var(--contribute-gutter) var(--pro-head-to-content, var(--contribute-space-6)); + box-sizing: border-box; + border-bottom: none; + background: transparent; +} + +.contribute-ways__eyebrow { + margin: 0 0 var(--pro-stack-eyebrow, 0.5rem); +} + +.contribute-ways__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-section-title-size) !important; + font-weight: var(--openms-heading-lg-weight, 800); + line-height: 1.15; + letter-spacing: -0.02em; + text-transform: uppercase; + color: var(--openms-navy); +} + +.contribute-ways__lead { + margin: var(--pro-stack-lead, 1rem) 0 0; + max-width: 42ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--openms-text-muted) !important; + text-wrap: pretty; +} + +/* Asymmetric side-by-side cards */ +.contribute-track { + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: var(--pro-card-gap, clamp(1rem, 2vw, 1.5rem)); + margin: 0; + padding: 0 var(--contribute-gutter) 0; + list-style: none; + box-sizing: border-box; + align-items: stretch; +} + +.contribute-track__item { + display: grid; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: auto 1fr; + align-content: stretch; + align-items: stretch; + justify-items: start; + gap: var(--contribute-space-2, 0.75rem); + min-width: 0; + height: 100%; + min-height: 100%; + padding: var(--pro-card-pad-lg, clamp(1.25rem, 2.5vw, 1.75rem)); + border: 1px solid var(--contribute-border); + border-radius: var(--pro-radius, 1rem); + background: var(--openms-white); + box-sizing: border-box; + color: var(--openms-navy); + transition: + border-color var(--contribute-motion), + box-shadow var(--contribute-motion), + background-color var(--contribute-motion), + color var(--contribute-motion), + transform var(--contribute-motion); +} + +.contribute-track__body { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + flex: 1 1 auto; + gap: 0.4rem; + min-width: 0; + width: 100%; + height: 100%; + min-height: 0; +} + +/* Soft blue icons — above title/body */ +.contribute-track__icon { + display: grid; + place-items: center; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + color: rgba(var(--openms-blue-rgb), 0.28); + font-size: var(--pro-card-icon-size, clamp(2.5rem, 4.2vw, 3.15rem)); + line-height: 1; + transition: color var(--contribute-motion); +} + +.contribute-track__icon .fab, +.contribute-track__icon .fas, +.contribute-track__icon .svg-inline--fa { + color: inherit !important; + font-size: 1em; + width: 1em; + height: 1em; +} + +.contribute-track__icon .svg-inline--fa path { + fill: currentColor !important; +} + +.contribute-track__item:hover .contribute-track__icon, +.contribute-track__item:focus-within .contribute-track__icon { + color: rgba(var(--openms-white-rgb), 0.88); +} + +.contribute-track__item:hover, +.contribute-track__item:focus-within { + border-color: transparent; + background: var(--openms-navy); + color: var(--openms-white); + box-shadow: var(--pro-shadow-hover, 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.1)); + transform: translateY(-2px); +} + +.contribute-track__item:hover .contribute-track__title, +.contribute-track__item:focus-within .contribute-track__title { + color: var(--openms-white); +} + +.contribute-track__item:hover .contribute-track__text, +.contribute-track__item:focus-within .contribute-track__text { + color: rgba(var(--openms-white-rgb), 0.78); +} + +.contribute-track__item:hover .contribute-track__cta, +.contribute-track__item:focus-within .contribute-track__cta { + color: var(--openms-white) !important; +} + +.openms-lib-page--contribute .contribute-track__item:hover .contribute-project-link, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-project-link { + border-color: rgba(var(--openms-white-rgb), 0.28); + color: var(--openms-white) !important; + background: rgba(var(--openms-white-rgb), 0.08); +} + +.openms-lib-page--contribute .contribute-track__item:hover .contribute-project-links, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-project-links { + border-top-color: rgba(var(--openms-white-rgb), 0.18); +} + +.openms-lib-page--contribute .contribute-track__item:hover .contribute-project-link:hover, +.openms-lib-page--contribute .contribute-track__item:hover .contribute-project-link:focus-visible, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-project-link:hover, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-project-link:focus-visible { + border-color: rgba(var(--openms-white-rgb), 0.5); + background: rgba(var(--openms-white-rgb), 0.14); + color: var(--openms-white) !important; +} + +.openms-lib-page--contribute .contribute-track__item:hover .contribute-os-buttons .openms-lib-btn--ghost, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-os-buttons .openms-lib-btn--ghost { + border-color: rgba(var(--openms-white-rgb), 0.92) !important; + color: var(--openms-navy) !important; + background: var(--openms-white) !important; +} + +.openms-lib-page--contribute .contribute-track__item:hover .contribute-os-buttons .openms-lib-btn--ghost:hover, +.openms-lib-page--contribute .contribute-track__item:hover .contribute-os-buttons .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-os-buttons .openms-lib-btn--ghost:hover, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-os-buttons .openms-lib-btn--ghost:focus-visible { + border-color: var(--openms-white) !important; + color: var(--openms-navy) !important; + background: rgba(var(--openms-white-rgb), 0.92) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-white-rgb), 0.22) !important; +} + +.openms-lib-page--contribute .contribute-track__item:hover .contribute-os-buttons .openms-lib-btn--ghost .fab, +.openms-lib-page--contribute .contribute-track__item:hover .contribute-os-buttons .openms-lib-btn--ghost .svg-inline--fa, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-os-buttons .openms-lib-btn--ghost .fab, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-os-buttons .openms-lib-btn--ghost .svg-inline--fa { + color: var(--openms-navy) !important; +} + +.openms-lib-page--contribute .contribute-track__item:hover .contribute-os-buttons .openms-lib-btn--ghost .svg-inline--fa path, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-os-buttons .openms-lib-btn--ghost .svg-inline--fa path { + fill: currentColor !important; +} + +.contribute-track__item--wide { + grid-column: span 7; +} + +.contribute-track__item--mid { + grid-column: span 5; +} + +.contribute-track__item--docs { + grid-column: span 5; +} + +.contribute-track__item--design { + grid-column: span 3; +} + +.contribute-track__item--web { + grid-column: span 4; +} + +.contribute-track__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size) !important; + font-weight: 700; + line-height: 1.3; + letter-spacing: -0.01em; + text-transform: none; + color: var(--openms-navy); +} + +.contribute-track__item--wide .contribute-track__title, +.contribute-track__item--mid .contribute-track__title { + font-size: var(--openms-secondary-heading-size-lg) !important; + font-weight: 800; + letter-spacing: -0.02em; + text-transform: none; +} + +.contribute-track__text { + margin: 0; + max-width: none; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.contribute-track__cta { + display: inline-flex; + align-items: center; + gap: 0.35rem; + width: fit-content; + 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; + transition: gap var(--contribute-motion), color var(--contribute-motion); +} + +.contribute-track__item--design .contribute-track__body, +.contribute-track__item--web .contribute-track__body, +.contribute-track__item--docs .contribute-track__body { + gap: 0.35rem; +} + +.contribute-track__cta:hover, +.contribute-track__cta:focus-visible { + gap: 0.55rem; + color: var(--openms-blue) !important; + outline: none; +} + +.openms-lib-page--contribute .contribute-project-links { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--contribute-space-2); + margin-top: auto; + margin-bottom: 0; + padding: var(--contribute-space-3) 0 0; + list-style: none; + width: 100%; + max-width: none; + align-self: stretch; + border-top: 1px solid var(--contribute-border); +} + +.openms-lib-page--contribute .contribute-project-links li { + min-width: 0; +} + +.openms-lib-page--contribute .contribute-project-link { + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + box-sizing: border-box; + min-height: 2.75rem; + padding: 0.55rem 0.75rem; + border: 1px solid var(--contribute-border); + border-radius: var(--openms-btn-pill-radius, 999px); + background: transparent; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-navy) !important; + text-decoration: none !important; + text-align: center; + line-height: 1.2; + transition: + color var(--contribute-motion), + border-color var(--contribute-motion), + background-color var(--contribute-motion), + transform var(--contribute-motion); +} + +.openms-lib-page--contribute .contribute-project-link:hover, +.openms-lib-page--contribute .contribute-project-link:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.4); + color: var(--openms-blue) !important; + background: rgba(var(--openms-blue-rgb), 0.04); + transform: translateY(-1px); + outline: none; +} + +.openms-lib-page--contribute .contribute-project-link__name { + color: inherit; + letter-spacing: 0.01em; + margin: 0; +} + +.openms-lib-page--contribute .contribute-os-buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--contribute-space-2); + justify-content: flex-start; + margin-top: auto; + padding-top: var(--contribute-space-3); + align-self: stretch; +} + +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn--ghost { + min-width: 0; + flex: 1 1 auto; + justify-content: center; + border-color: var(--openms-blue) !important; + background: var(--openms-blue) !important; + color: var(--openms-white) !important; + box-shadow: none !important; +} + +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn:hover, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn:focus-visible, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn--ghost:hover, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn--ghost:focus-visible { + border-color: var(--openms-blue) !important; + background: color-mix(in srgb, var(--openms-blue) 88%, var(--openms-navy)) !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) rgba(var(--openms-blue-rgb), 0.28) !important; + outline: none; +} + +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn .fab, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn .svg-inline--fa, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn--ghost .fab, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn--ghost .svg-inline--fa { + color: var(--openms-white) !important; +} + +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn .svg-inline--fa path, +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn--ghost .svg-inline--fa path { + fill: currentColor !important; +} + +/* ═══════════════════════════════════════════ + 7. SUPPORT — horizontal CTA band + ═══════════════════════════════════════════ */ +.contribute-support { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem); + width: 100%; + margin: 0; + padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--contribute-gutter); + box-sizing: border-box; + border: none; + border-radius: 0; + background: + linear-gradient( + 135deg, + color-mix(in srgb, var(--openms-blue) 7%, var(--openms-white)) 0%, + color-mix(in srgb, var(--olib-bg-soft, #f4f6f9) 80%, var(--openms-white)) 100% + ); + color: var(--openms-navy); + text-decoration: none !important; +} + +.contribute-support__copy { + display: grid; + gap: 0.4rem; + max-width: 40rem; + justify-items: start; + text-align: left; +} + +.contribute-support__kicker { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.contribute-support__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size-lg) !important; + font-weight: 800; + line-height: 1.2; + letter-spacing: -0.02em; + text-transform: none; + color: var(--openms-navy) !important; +} + +.contribute-support__text { + margin: 0; + max-width: 42ch; + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--openms-text-muted) !important; +} + +.contribute-support__cta { + justify-self: end; + white-space: nowrap; +} + +/* ═══════════════════════════════════════════ + 8. OUTREACH — copy + vertical social rail + ═══════════════════════════════════════════ */ +.contribute-outreach { + padding: var(--pro-head-to-content, var(--contribute-space-6)) var(--contribute-gutter) 0; + background: transparent; +} + +.contribute-outreach__inner { + display: grid; + grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr); + gap: var(--contribute-space-5) var(--pro-col-gap, clamp(2rem, 6vw, 5rem)); + align-items: center; + width: 100%; + margin-inline: 0; +} + +.contribute-outreach__copy { + display: grid; + gap: var(--contribute-space-2); + max-width: 40rem; +} + +.contribute-outreach__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--openms-section-title-size) !important; + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + text-transform: uppercase; + color: var(--openms-navy); +} + +.contribute-outreach__text, +.contribute-outreach__contact { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--openms-text-muted) !important; +} + +.contribute-outreach__contact a { + font-weight: 700; + color: var(--openms-content-link, var(--openms-navy)) !important; + text-decoration: none !important; +} + +.contribute-outreach__contact a:hover, +.contribute-outreach__contact a:focus-visible { + text-decoration: none !important; +} + +.contribute-outreach__social { + display: grid; + gap: 0; + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid var(--contribute-border); +} + +.contribute-outreach__social > li { + border-bottom: 1px solid var(--contribute-border); +} + +.contribute-outreach__social-link { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: var(--contribute-space-2) var(--contribute-space-3); + align-items: center; + width: 100%; + min-height: 4.25rem; + padding: 0.85rem 0.15rem 0.85rem 0; + border: none; + border-radius: 0; + background: transparent; + color: var(--openms-navy) !important; + text-decoration: none !important; + transition: + color var(--contribute-motion), + background-color var(--contribute-motion), + padding-left var(--contribute-motion); +} + +.contribute-outreach__social-link:hover, +.contribute-outreach__social-link:focus-visible { + color: var(--openms-blue) !important; + background: transparent; + padding-left: 0.35rem; + outline: none; +} + +.contribute-outreach__social-icon { + display: grid; + place-items: center; + width: 2.25rem; + height: 2.25rem; + font-size: 1.05rem; + color: inherit; +} + +.contribute-outreach__social-meta { + display: grid; + gap: 0.15rem; + min-width: 0; +} + +.contribute-outreach__social-label { + font-size: var(--openms-body-size); + font-weight: 700; + letter-spacing: 0.02em; + line-height: 1.2; +} + +.contribute-outreach__social-hint { + font-size: var(--openms-text-min); + font-weight: 500; + letter-spacing: 0; + text-transform: none; + color: rgba(var(--openms-navy-rgb), 0.5); + transition: color var(--contribute-motion); +} + +.contribute-outreach__social-link:hover .contribute-outreach__social-hint, +.contribute-outreach__social-link:focus-visible .contribute-outreach__social-hint { + color: rgba(var(--openms-blue-rgb), 0.7); +} + +.contribute-outreach__social-arrow { + font-size: var(--openms-text-min); + font-weight: 700; + opacity: 0.35; + transition: + opacity var(--contribute-motion), + transform var(--contribute-motion); +} + +.contribute-outreach__social-link:hover .contribute-outreach__social-arrow, +.contribute-outreach__social-link:focus-visible .contribute-outreach__social-arrow { + opacity: 1; + transform: translateX(0.25rem); +} + +/* ── CoC outro — full-bleed shell; panel fills content column ── */ +.openms-lib-page--contribute #code-of-conduct.openms-lib-page__anchor { + background: var(--openms-white); + padding-inline: var(--contribute-gutter); + padding-block: var(--contribute-section-y); +} + +.openms-lib-page--contribute .contribute-coc-band { + width: 100%; + max-width: none; + margin-inline: 0; +} + +/* ── Responsive ── */ +@media (max-width: 960px) { + .contribute-channels__strip { + grid-template-columns: 1fr; + } + + .contribute-channel { + border-right: none; + border-bottom: 1px solid var(--contribute-border); + padding-inline: 0; + } + + .contribute-channel:last-child { + border-bottom: none; + } + + .contribute-channels__head { + text-align: left; + justify-items: start; + max-width: none; + } + + .openms-lib-page--contribute .contribute-project-links { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .contribute-track { + grid-template-columns: 1fr 1fr; + } + + .contribute-track__item--wide, + .contribute-track__item--mid, + .contribute-track__item--docs, + .contribute-track__item--design, + .contribute-track__item--web { + grid-column: span 1; + } + + .contribute-track__item--wide { + grid-column: 1 / -1; + } + + .contribute-support { + grid-template-columns: 1fr; + justify-items: start; + gap: 1.25rem; + } + + .contribute-support__cta { + justify-self: start; + } + + .contribute-outreach__inner { + grid-template-columns: 1fr; + justify-items: stretch; + } + + .contribute-outreach__copy { + max-width: none; + width: 100%; + } + + .contribute-outreach__social, + .contribute-outreach__social > li, + .contribute-outreach__social-link { + width: 100%; + max-width: none; + } +} + +@media (max-width: 720px) { + /* One shared content column: section owns the gutter; children fill it */ + .openms-lib-page--contribute .contribute-ways { + padding-inline: var(--contribute-gutter); + box-sizing: border-box; + width: 100%; + } + + .openms-lib-page--contribute .contribute-ways__head, + .openms-lib-page--contribute .contribute-track, + .openms-lib-page--contribute .contribute-support, + .openms-lib-page--contribute .contribute-outreach { + padding-inline: 0 !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box; + } + + .openms-lib-page--contribute .contribute-channels__strip, + .openms-lib-page--contribute .contribute-channel, + .openms-lib-page--contribute .contribute-track, + .openms-lib-page--contribute .contribute-track__item, + .openms-lib-page--contribute .contribute-support, + .openms-lib-page--contribute .contribute-outreach__inner, + .openms-lib-page--contribute .contribute-outreach__social, + .openms-lib-page--contribute .contribute-outreach__social > li, + .openms-lib-page--contribute .contribute-outreach__social-link, + .openms-lib-page--contribute .contribute-coc-band, + .openms-lib-page--contribute .contribute-coc-band__panel { + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box; + } + + .openms-lib-page--contribute .contribute-ways__lead, + .openms-lib-page--contribute .contribute-support__copy, + .openms-lib-page--contribute .contribute-support__text, + .openms-lib-page--contribute .contribute-outreach__copy, + .openms-lib-page--contribute .contribute-track__body { + width: 100% !important; + max-width: none !important; + } + + /* Match channel-card interior inset on the CoC panel */ + .openms-lib-page--contribute .contribute-coc-band__panel { + padding-inline: clamp(0.85rem, 3.4vw, 1.1rem) !important; + } + + /* Support band: keep readable inset without shrinking the shell */ + .openms-lib-page--contribute .contribute-support { + padding-block: clamp(1.25rem, 3vw, 1.75rem); + padding-inline: clamp(0.85rem, 3.4vw, 1.1rem) !important; + } +} + +@media (max-width: 640px) { + .contribute-track { + grid-template-columns: 1fr; + } + + .contribute-track__item--wide, + .contribute-track__item--mid, + .contribute-track__item--docs, + .contribute-track__item--design, + .contribute-track__item--web { + grid-column: 1 / -1; + } + + .openms-lib-page--contribute .contribute-os-buttons { + width: 100%; + } + + .openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn { + flex: 1 1 auto; + min-width: 0; + } + +} + +@media (max-width: 420px) { + .openms-lib-page--contribute .contribute-project-links { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (prefers-reduced-motion: reduce) { + .contribute-channel, + .contribute-project-link, + .contribute-track__item, + .contribute-track__cta, + .contribute-support, + .contribute-outreach__social-link, + .contribute-channel__link, + .contribute-support__cta { + transition: none; + } + + .contribute-track__item:hover, + .contribute-track__item:focus-within, + .contribute-outreach__social-link:hover, + .contribute-outreach__social-link:hover .contribute-outreach__social-arrow { + transform: none; + padding-left: 0; + } +} diff --git a/assets/css/zz-openms-buttons.css b/assets/css/zz-openms-buttons.css new file mode 100644 index 00000000..7fc8816b --- /dev/null +++ b/assets/css/zz-openms-buttons.css @@ -0,0 +1,1717 @@ +/* Button spacing + responsive layout — loads last so it wins over page/hub/pro CSS. + Gap must clear hover glow (both sides) + scale so buttons never collide on hover. + Keep the same clearance on small screens — narrow viewports still get hover + (mouse, trackpad, stylus). */ + +.openms-lib-hero__actions, +.openms-lib-page--hub .openms-lib-hero__actions, +.openms-lib-page--openms-lib .openms-lib-hero__actions, +[class$="-page-layout"] .openms-lib-hero__actions, +.community-calendar-layout .openms-lib-hero__actions, +.contribute-page-layout .openms-lib-hero__actions, +.openms-lib-cta-band__actions, +.openms-lib-page__cta-actions, +.openms-lib-cite__actions, +.openms-lib-review__actions, +.openms-lib-resources__assist-actions, +.openms-lib-developers__cite-actions, +.openms-lib-developers__platforms, +.openms-lib-developers__card-cta, +.openms-lib-resource-card__platforms, +.openms-lib-explore__support-actions, +.donate-application__actions, +.contribute-coc-band__actions, +.contribute-way__actions, +.contribute-conduct__actions, +.contribute-os-buttons, +.fellowship-project-card__actions, +.retreat-upcoming__actions, +.sponsor-us-page__actions, +.research-partnerships-page__actions, +.about-donate-actions, +.contact-area__actions, +.community-home__actions, +.hero-home__actions, +.hero-modern__actions, +.footer-brand__actions, +.webapps-archived-entry__actions, +.webapps-archived__revival-actions, +.webapps-project-links, +.webapps-contribute__research-impact .openms-lib-cite__actions, +.webapps-contribute__research-impact .openms-lib-developers__cite-actions, +.governance-cta-band__actions, +.openms-lib-page--governance .governance-cta-band__actions, +.openms-lib-page--sponsor-us .governance-cta-band__actions, +.news-pager, +.navbar.is-fresh .navbar-actions, +#navbar-clone.navbar.is-fresh .navbar-actions, +.navbar-menu .navbar-mobile-ctas { + gap: var(--openms-btn-gap) !important; + row-gap: var(--openms-btn-gap) !important; + column-gap: var(--openms-btn-gap) !important; +} + +/* App catalog pills (Featured / Affiliated / Archived) */ +.webapps-project-links, +.openms-lib-page--featured-pro .webapps-project-links, +.openms-lib-page--affiliated .webapps-project-links, +.openms-lib-page--archived .webapps-archived-entry .webapps-project-links { + gap: var(--openms-btn-gap) !important; + row-gap: var(--openms-btn-gap) !important; + column-gap: var(--openms-btn-gap) !important; +} + +/* Navbar CTAs are spaced by the flex gap above — no extra margin on top of it */ +.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: 0; +} + +/* Research impact (citation) CTAs — one row; buttons hug their labels */ +.openms-lib-cite__actions, +.openms-lib-developers__cite-actions, +.webapps-contribute__research-impact .openms-lib-cite__actions, +.webapps-contribute__research-impact .openms-lib-developers__cite-actions { + display: flex !important; + flex-wrap: wrap !important; + align-items: center; + align-self: stretch; + justify-content: flex-start; + width: 100%; + max-width: 100%; + box-sizing: border-box; +} + +.openms-lib-cite__actions .openms-lib-btn, +.openms-lib-developers__cite-actions .openms-lib-btn, +.webapps-contribute__research-impact .openms-lib-btn { + flex: 0 0 auto; + width: fit-content; + min-width: 0; + max-width: 100%; + padding-inline: 1.25rem; + justify-content: center; + white-space: nowrap; +} + +/* Research impact — outline/white CTA gets the same scale + glow as primary */ +.openms-lib-developers__cite-actions .openms-lib-btn--outline:hover, +.openms-lib-developers__cite-actions .openms-lib-btn--outline:focus-visible, +.openms-lib-developers__cite-actions .openms-lib-btn--outline:active, +.openms-lib-developers__cite-actions .openms-lib-btn--ghost:hover, +.openms-lib-developers__cite-actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-developers__cite-actions .openms-lib-btn--ghost:active, +.openms-lib-cite__actions .openms-lib-btn--outline:hover, +.openms-lib-cite__actions .openms-lib-btn--outline:focus-visible, +.openms-lib-cite__actions .openms-lib-btn--outline:active, +.openms-lib-cite__actions .openms-lib-btn--ghost:hover, +.openms-lib-cite__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-cite__actions .openms-lib-btn--ghost:active, +.webapps-contribute__research-impact .openms-lib-btn--outline:hover, +.webapps-contribute__research-impact .openms-lib-btn--outline:focus-visible, +.webapps-contribute__research-impact .openms-lib-btn--outline:active, +.webapps-contribute__research-impact .openms-lib-btn--ghost:hover, +.webapps-contribute__research-impact .openms-lib-btn--ghost:focus-visible, +.webapps-contribute__research-impact .openms-lib-btn--ghost: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)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none !important; +} + +.openms-lib-developers__cite-actions, +.openms-lib-cite__actions, +.webapps-contribute__research-impact .openms-lib-developers__cite-actions, +.webapps-contribute__research-impact .openms-lib-cite__actions, +.openms-lib-developers__cite-details { + overflow: visible; +} + +@media (max-width: 720px) { + /* One standard mobile CTA size (overrides page-specific 2.85rem / custom padding) */ + .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-cta-band__doc-btn, + .openms-btn-primary, + .openms-step__cta, + .about-cta-btn--sponsor, + .about-cta-btn--donate, + .hero-home__btn, + .hero-home__btn--primary, + .hero-home__btn--secondary, + .hero-modern__btn, + .contact-area__cta, + .contact-area__cta-secondary, + .community-home__cta, + .webapps-featured__show-all, + .webapps-archived__revival-actions .openms-lib-btn, + .webapps-archived-entry__actions .openms-lib-btn, + .news-pager__btn, + .footer-redesign .footer-sponsor-btn, + .footer-brand__actions .footer-brand-btn, + #footer.footer-redesign .footer-donate-btn.signup-button.secondary-btn, + #footer.footer-redesign a.footer-donate-btn.button.signup-button.secondary-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.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 { + box-sizing: border-box; + width: auto; + min-width: 0 !important; + max-width: 100%; + min-height: var(--openms-btn-min-height) !important; + height: auto !important; + padding: var(--openms-btn-padding) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: normal; + text-align: center; + text-wrap: balance; + } + + .openms-lib-hero__actions, + .openms-lib-page--hub .openms-lib-hero__actions, + .openms-lib-page--openms-lib .openms-lib-hero__actions, + [class$="-page-layout"] .openms-lib-hero__actions, + .community-calendar-layout .openms-lib-hero__actions, + .contribute-page-layout .openms-lib-hero__actions, + .openms-lib-cta-band__actions, + .openms-lib-page__cta-actions, + .openms-lib-cite__actions, + .openms-lib-developers__cite-actions, + .openms-lib-review__actions, + .donate-application__actions, + .contribute-coc-band__actions, + .contribute-way__actions, + .contribute-conduct__actions, + .fellowship-project-card__actions, + .retreat-upcoming__actions, + .sponsor-us-page__actions, + .about-donate-actions, + .contact-area__actions, + .community-home__actions, + .hero-home__actions, + .hero-modern__actions, + .footer-brand__actions, + .webapps-archived-entry__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + gap: var(--openms-btn-gap) !important; + width: 100%; + max-width: 100%; + } + + /* Archived project CTAs (e.g. diaProteomics) stay left-aligned on phones */ + .openms-lib-page--archived .webapps-archived-entry__actions, + .openms-lib-page--archived .webapps-archived-entry .webapps-project-links { + justify-content: flex-start !important; + align-items: center; + } + + /* Upcoming retreat copy stays left-aligned with its facts on phones */ + .openms-lib-page--developer-retreat .retreat-upcoming__actions { + justify-content: flex-start; + } + + /* Research impact CTAs hug label text on phones */ + .openms-lib-cite__actions, + .openms-lib-developers__cite-actions, + .webapps-contribute__research-impact .openms-lib-cite__actions, + .webapps-contribute__research-impact .openms-lib-developers__cite-actions { + justify-content: flex-start !important; + align-items: center; + } + + .openms-lib-cite__actions .openms-lib-btn, + .openms-lib-developers__cite-actions .openms-lib-btn, + .webapps-contribute__research-impact .openms-lib-btn { + flex: 0 0 auto !important; + width: fit-content !important; + min-width: 0 !important; + max-width: 100%; + padding-inline: 1rem; + white-space: nowrap; + } + + /* Equal width + equal height when CTAs sit in the same row */ + .openms-lib-hero__actions .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-page--hub .openms-lib-hero__actions .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-page--openms-lib .openms-lib-hero__actions .openms-lib-btn:not(.openms-lib-developers__platform-btn), + [class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .community-calendar-layout .openms-lib-hero__actions .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .contribute-page-layout .openms-lib-hero__actions .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-cta-band__actions .openms-lib-btn, + .openms-lib-cta-band__actions .openms-lib-cta-band__doc-btn, + .openms-lib-page__cta-actions .openms-lib-btn, + .openms-lib-review__actions .openms-lib-btn, + .donate-application__actions .openms-lib-btn, + .contribute-coc-band__actions .openms-lib-btn, + .contribute-way__actions .openms-lib-btn, + .contribute-conduct__actions .openms-lib-btn, + .fellowship-project-card__actions .openms-lib-btn, + .retreat-upcoming__actions .openms-lib-btn, + .sponsor-us-page__actions > a, + .about-donate-actions > a, + .contact-area__actions .openms-btn-primary, + .contact-area__actions .openms-step__cta, + .contact-area__actions .contact-area__cta, + .contact-area__actions .contact-area__cta-secondary, + .hero-home__actions .hero-home__btn, + .hero-home__actions .hero-home__btn--primary, + .hero-home__actions .hero-home__btn--secondary, + .hero-modern__actions .hero-modern__btn, + .footer-brand__actions .footer-brand-btn, + .webapps-archived-entry__actions .openms-lib-btn { + flex: 1 1 0; + width: 100%; + max-width: 100%; + min-width: 0 !important; + align-self: stretch; + min-height: var(--openms-btn-min-height) !important; + height: auto !important; + justify-content: center; + } + + /* Community hero: single CTA sizes to its label, not full row */ + .community-home__actions { + justify-content: flex-start !important; + width: auto; + max-width: 100%; + } + + .community-home__actions .community-home__cta { + flex: 0 0 auto !important; + width: fit-content !important; + max-width: 100%; + min-width: 0 !important; + align-self: flex-start; + white-space: nowrap; + } + + /* Paired CTAs: equal columns, equal button size */ + .webapps-archived__revival-actions:has(> :nth-child(2)), + .governance-cta-band__actions:has(> :nth-child(2)), + .openms-lib-page--governance .governance-cta-band__actions:has(> :nth-child(2)), + .openms-lib-page--sponsor-us .governance-cta-band__actions:has(> :nth-child(2)), + .contribute-coc-band__actions:has(> :nth-child(2)), + .home-page__hero .hero-home__actions:has(> :nth-child(2)), + .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(2)), + .openms-lib-cta-band__actions:has(> :nth-child(2)), + .donate-application__actions:has(> :nth-child(2)), + .contact-area__actions:has(> :nth-child(2)) { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: stretch; + width: 100%; + max-width: 24rem; + margin-inline: auto; + gap: var(--openms-btn-gap) !important; + } + + .webapps-archived__revival-actions:has(> :nth-child(2)) .openms-lib-btn, + .governance-cta-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .openms-lib-page--governance .governance-cta-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .openms-lib-page--sponsor-us .governance-cta-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .contribute-coc-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .home-page__hero .hero-home__actions:has(> :nth-child(2)) > *, + .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(2)) > .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-cta-band__actions:has(> :nth-child(2)) > .openms-lib-btn, + .openms-lib-cta-band__actions:has(> :nth-child(2)) > .openms-lib-cta-band__doc-btn, + .donate-application__actions:has(> :nth-child(2)) > .openms-lib-btn, + .contact-area__actions:has(> :nth-child(2)) > * { + flex: none; + display: inline-flex; + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + min-height: var(--openms-btn-min-height) !important; + height: 100% !important; + padding: var(--openms-btn-padding) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + justify-content: center; + align-items: center; + } + + /* 3+ hero CTAs: equal thirds when they fit one row */ + .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)), + .openms-lib-page--hub .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)), + .openms-lib-page--openms-lib .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + max-width: 100%; + } + + /* Icons inside a single Install button — compact */ + .openms-lib-btn__platforms { + flex-wrap: nowrap; + gap: 0.45rem !important; + } + + /* Separate platform / OS CTA pills — same hover-safe gap */ + .openms-lib-developers__platforms, + .openms-lib-resource-card__platforms, + .contribute-os-buttons { + gap: var(--openms-btn-gap) !important; + row-gap: var(--openms-btn-gap) !important; + column-gap: var(--openms-btn-gap) !important; + } + + .openms-lib-developers__platform-btn { + white-space: nowrap; + min-height: 0 !important; + height: auto !important; + padding: 0.35rem 0.55rem !important; + font-size: 0.85rem !important; + } +} + +@media (max-width: 480px) { + /* Stack solo action rows full-width; keep paired grids equal size */ + .openms-lib-hero__actions:not(:has(> .openms-lib-btn:nth-child(2))) .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-cta-band__actions:not(:has(> :nth-child(2))) .openms-lib-btn, + .openms-lib-page__cta-actions .openms-lib-btn, + .openms-lib-review__actions .openms-lib-btn, + .donate-application__actions:not(:has(> :nth-child(2))) .openms-lib-btn, + .contribute-way__actions .openms-lib-btn, + .contribute-conduct__actions .openms-lib-btn, + .fellowship-project-card__actions .openms-lib-btn, + .retreat-upcoming__actions .openms-lib-btn, + .sponsor-us-page__actions > a, + .about-donate-actions > a, + .hero-modern__actions .hero-modern__btn, + .footer-brand__actions .footer-brand-btn, + .webapps-archived-entry__actions .openms-lib-btn { + flex: 1 1 100%; + width: 100% !important; + min-width: 0 !important; + min-height: var(--openms-btn-min-height) !important; + } + + /* pyOpenMS / pyopenms_viz Install — hug label instead of full-width */ + .openms-lib-page--pyopenms-pro .openms-lib-hero__actions:not(:has(> .openms-lib-btn:nth-child(2))) .openms-lib-btn--install, + .openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions:not(:has(> .openms-lib-btn:nth-child(2))) .openms-lib-btn--install { + flex: 0 0 auto !important; + width: fit-content !important; + max-width: 100%; + min-width: 0 !important; + padding-inline: 1.05rem !important; + } + + .openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms, + .openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms { + display: inline-flex !important; + align-items: center; + flex: 0 0 auto; + } + + .openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa, + .openms-lib-page--pyopenms-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fab, + .openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .svg-inline--fa, + .openms-lib-page--pyopenms-viz-pro .openms-lib-hero__actions .openms-lib-btn--install .openms-lib-btn__platforms .fab { + display: inline-block !important; + width: 1em !important; + height: 1em !important; + font-size: 1em; + visibility: visible !important; + } + + .openms-lib-cite__actions:not(:has(> :nth-child(2))) .openms-lib-btn, + .openms-lib-developers__cite-actions:not(:has(> :nth-child(2))) .openms-lib-btn { + flex: 0 0 auto !important; + width: fit-content !important; + max-width: 100%; + } + + .community-home__actions .community-home__cta { + flex: 0 0 auto !important; + width: fit-content !important; + max-width: 100%; + } + + .webapps-archived__revival-actions:has(> :nth-child(2)), + .governance-cta-band__actions:has(> :nth-child(2)), + .openms-lib-page--governance .governance-cta-band__actions:has(> :nth-child(2)), + .openms-lib-page--sponsor-us .governance-cta-band__actions:has(> :nth-child(2)), + .contribute-coc-band__actions:has(> :nth-child(2)), + .home-page__hero .hero-home__actions:has(> :nth-child(2)), + .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(2)):not(:has(> .openms-lib-btn:nth-child(3))), + .openms-lib-cta-band__actions:has(> :nth-child(2)), + .donate-application__actions:has(> :nth-child(2)), + .contact-area__actions:has(> :nth-child(2)) { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: stretch; + width: 100%; + max-width: 24rem; + margin-inline: auto; + gap: var(--openms-btn-gap) !important; + } + + .webapps-archived__revival-actions:has(> :nth-child(2)) .openms-lib-btn, + .governance-cta-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .openms-lib-page--governance .governance-cta-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .openms-lib-page--sponsor-us .governance-cta-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .contribute-coc-band__actions:has(> :nth-child(2)) .openms-lib-btn, + .home-page__hero .hero-home__actions:has(> :nth-child(2)) > *, + .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(2)):not(:has(> .openms-lib-btn:nth-child(3))) > .openms-lib-btn:not(.openms-lib-developers__platform-btn), + .openms-lib-cta-band__actions:has(> :nth-child(2)) > .openms-lib-btn, + .openms-lib-cta-band__actions:has(> :nth-child(2)) > .openms-lib-cta-band__doc-btn, + .donate-application__actions:has(> :nth-child(2)) > .openms-lib-btn, + .contact-area__actions:has(> :nth-child(2)) > * { + width: 100% !important; + min-width: 0 !important; + min-height: var(--openms-btn-min-height) !important; + height: 100% !important; + padding: var(--openms-btn-padding) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + justify-content: center; + } + + /* Lone CTA in a band: one full-width column under the centred copy */ + .webapps-archived__revival-actions:not(:has(> :nth-child(2))), + .governance-cta-band__actions:not(:has(> :nth-child(2))), + .openms-lib-page--governance .governance-cta-band__actions:not(:has(> :nth-child(2))), + .openms-lib-page--sponsor-us .governance-cta-band__actions:not(:has(> :nth-child(2))), + .contribute-coc-band__actions:not(:has(> :nth-child(2))) { + display: grid; + grid-template-columns: minmax(0, 1fr); + justify-items: stretch; + width: 100%; + max-width: 24rem; + margin-inline: auto; + } + + .webapps-archived__revival-actions:not(:has(> :nth-child(2))) .openms-lib-btn, + .governance-cta-band__actions:not(:has(> :nth-child(2))) .openms-lib-btn, + .contribute-coc-band__actions:not(:has(> :nth-child(2))) .openms-lib-btn { + width: 100% !important; + min-width: 0 !important; + justify-content: center; + } + + /* Three hero CTAs: keep equal size, wrap last if needed */ + .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)), + .openms-lib-page--hub .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)), + .openms-lib-page--openms-lib .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)) { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + max-width: 24rem; + } + + .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)) > .openms-lib-btn:nth-child(3), + .openms-lib-page--hub .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)) > .openms-lib-btn:nth-child(3), + .openms-lib-page--openms-lib .openms-lib-hero__actions:has(> .openms-lib-btn:nth-child(3)) > .openms-lib-btn:nth-child(3) { + grid-column: 1 / -1; + } +} + +/* Featured + Affiliated app link pills — same hover as navbar Sponsor Us */ +.openms-lib-page--featured-pro .webapps-project-links__btn:hover, +.openms-lib-page--featured-pro .webapps-project-links__btn:focus-visible, +.openms-lib-page--featured-pro .webapps-project-links__btn:active, +.openms-lib-page--affiliated .webapps-project-links__btn:hover, +.openms-lib-page--affiliated .webapps-project-links__btn:focus-visible, +.openms-lib-page--affiliated .webapps-project-links__btn:active, +.openms-lib-page--affiliated .webapps-affiliates .webapps-project-links__btn:hover, +.openms-lib-page--affiliated .webapps-affiliates .webapps-project-links__btn:focus-visible, +.openms-lib-page--affiliated .webapps-affiliates .webapps-project-links__btn:active { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none; +} + +/* App link pills: on small screens keep hover feedback without scale, so + neighbors never collide when glow expands. */ +@media (max-width: 720px) { + .webapps-project-links { + gap: var(--openms-btn-gap) !important; + row-gap: var(--openms-btn-gap) !important; + column-gap: var(--openms-btn-gap) !important; + } + + .webapps-project-links__btn:hover, + .webapps-project-links__btn:focus-visible, + .openms-lib-page--featured-pro .webapps-project-links__btn:hover, + .openms-lib-page--featured-pro .webapps-project-links__btn:focus-visible, + .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, + .openms-lib-page--featured-pro .webapps-project-links__btn--github:hover, + .openms-lib-page--featured-pro .webapps-project-links__btn--github:focus-visible, + .openms-lib-page--featured-pro .webapps-project-links__btn--homepage:hover, + .openms-lib-page--featured-pro .webapps-project-links__btn--homepage:focus-visible, + .openms-lib-page--featured-pro .webapps-project-links__btn--pypi:hover, + .openms-lib-page--featured-pro .webapps-project-links__btn--pypi:focus-visible, + .openms-lib-page--featured-pro .webapps-project-links__btn--nfcore:hover, + .openms-lib-page--featured-pro .webapps-project-links__btn--nfcore:focus-visible, + .openms-lib-page--featured-pro .webapps-project-links__btn--link:hover, + .openms-lib-page--featured-pro .webapps-project-links__btn--link:focus-visible, + .openms-lib-page--affiliated .webapps-project-links__btn:hover, + .openms-lib-page--affiliated .webapps-project-links__btn:focus-visible, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-links__btn:hover, + .openms-lib-page--affiliated .webapps-project-detail-card--affiliate .webapps-project-links__btn:focus-visible, + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-links__btn:hover, + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-links__btn:focus-visible, + .openms-lib-page--affiliated .webapps-affiliates .webapps-project-links__btn:active, + .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn:hover, + .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn:focus-visible, + .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn:active { + transform: none !important; + } +} + +/* Publications / Contact outro CTAs — full-width stack on phones */ +@media (max-width: 720px) { + .openms-lib-page--publications .contribute-coc-band__actions, + .openms-lib-page--publications .contribute-coc-band__actions:has(> :nth-child(2)), + .openms-lib-page--contact .contribute-coc-band__actions, + .openms-lib-page--contact .contribute-coc-band__actions:has(> :nth-child(2)) { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + gap: var(--openms-btn-gap) !important; + } + + .openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, + .openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost { + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + height: auto !important; + white-space: normal !important; + text-align: center; + padding-inline: 1rem !important; + } + + .openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn__label, + .openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn__label { + white-space: normal !important; + } +} + +/* ── Navy bottom CTA bands — one shared button layout sitewide ── + Covers Attribution / Cite / Contact / Privacy / Contribute / + Governance / Sponsor Us outro bands. + Page-specific selectors beat older page CSS with equal weight. */ +.openms-lib-page .contribute-coc-band__actions, +.openms-lib-page .governance-cta-band__actions, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions, +.openms-lib-page--contact .contribute-coc-band__actions, +.openms-lib-page--contribute .contribute-coc-band__actions, +.openms-lib-page--publications .contribute-coc-band__actions, +.openms-lib-page--privacy .contribute-coc-band__actions, +.openms-lib-page--governance .governance-cta-band__actions, +.openms-lib-page--sponsor-us .governance-cta-band__actions { + display: flex !important; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + gap: var(--openms-btn-gap) !important; + row-gap: var(--openms-btn-gap) !important; + column-gap: var(--openms-btn-gap) !important; +} + +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn { + box-sizing: border-box; + display: inline-flex !important; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-width: clamp(10rem, 22vw, 14rem); + max-width: 100%; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + height: auto !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border-radius: var(--openms-btn-pill-radius, 999px); + font-family: var(--openms-font-body); + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + text-decoration: none !important; + white-space: nowrap; + transition: var(--openms-btn-motion); +} + +/* White filled primary (on navy) */ +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--primary, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--primary { + border: 2px solid var(--openms-white) !important; + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + color: var(--openms-navy) !important; + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.22) !important; +} + +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--primary:active, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary:active, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--primary:active { + border-color: var(--openms-white) !important; + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + color: var(--openms-navy) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.22) !important; + outline: none; + text-decoration: none !important; +} + +/* Outline ghost — match navbar Partner with OpenMS */ +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--ghost, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--ghost, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost { + border: 2px solid rgba(var(--openms-white-rgb), 0.34) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; +} + +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:hover, +.openms-lib-page .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:active, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:hover, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:active, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:hover, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:active, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:hover, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:active, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--privacy .contribute-coc-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--our-sponsors .governance-cta-band__actions .openms-lib-btn--ghost:active, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn--ghost:active { + /* Match navbar “Partner with OpenMS”: outline stays, scale + glow only */ + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none !important; +} + +/* Hero “Make a donation” — same Partner hover (no lift fill) */ +.openms-lib-page--sponsor-us .openms-lib-hero__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--sponsor-us .openms-lib-hero__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--sponsor-us .openms-lib-hero__actions .openms-lib-btn--ghost: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)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none !important; +} + +.openms-lib-page--sponsor-us .governance-cta-band__panel, +.openms-lib-page--our-sponsors .governance-cta-band__panel { + overflow: visible; +} + +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page .contribute-coc-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page .governance-cta-band__actions .openms-lib-btn--primary:focus-visible, +.openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn:focus-visible, +.openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-btn:focus-visible, +.openms-lib-page--publications .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost:focus-visible, +.openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-navy), + 0 0 0 5px rgba(var(--openms-white-rgb), 0.45), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow) !important; +} + +@media (max-width: 720px) { + .openms-lib-page .contribute-coc-band__actions:has(> :nth-child(2)), + .openms-lib-page .governance-cta-band__actions:has(> :nth-child(2)), + .openms-lib-page--code-of-conduct .contribute-coc-band__actions:has(> :nth-child(2)), + .openms-lib-page--contact .contribute-coc-band__actions:has(> :nth-child(2)), + .openms-lib-page--contribute .contribute-coc-band__actions:has(> :nth-child(2)), + .openms-lib-page--governance .governance-cta-band__actions:has(> :nth-child(2)), + .openms-lib-page--sponsor-us .governance-cta-band__actions:has(> :nth-child(2)) { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)); + width: 100%; + max-width: 22rem; + margin-inline: auto; + } + + .openms-lib-page .contribute-coc-band__actions:not(:has(> :nth-child(2))), + .openms-lib-page .governance-cta-band__actions:not(:has(> :nth-child(2))), + .openms-lib-page--privacy .contribute-coc-band__actions:not(:has(> :nth-child(2))) { + display: flex !important; + justify-content: center; + width: 100%; + } + + .openms-lib-page .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, + .openms-lib-page .governance-cta-band__actions .openms-lib-btn, + .openms-lib-page--code-of-conduct .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--contact .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--contact .contribute-coc-band__actions .openms-lib-cta-band__btn-ghost, + .openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn, + .openms-lib-page--sponsor-us .governance-cta-band__actions .openms-lib-btn { + width: 100%; + min-width: 0 !important; + justify-content: center; + } + + /* Keep publications long labels stacked full-width */ + .openms-lib-page--publications .contribute-coc-band__actions, + .openms-lib-page--publications .contribute-coc-band__actions:has(> :nth-child(2)) { + grid-template-columns: minmax(0, 1fr) !important; + max-width: none !important; + margin-inline: 0 !important; + } +} + +/* Sponsor Us / Our Sponsors outro — hug-content pills like navbar “Sponsor Us” */ +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions, +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions:has(> :nth-child(2)), +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions:not(:has(> :nth-child(2))), +.openms-lib-page--our-sponsors #sponsor-cta .governance-cta-band__actions, +.openms-lib-page--our-sponsors #sponsor-cta .governance-cta-band__actions:has(> :nth-child(2)), +.openms-lib-page--our-sponsors #sponsor-cta .governance-cta-band__actions:not(:has(> :nth-child(2))) { + display: flex !important; + flex-wrap: wrap; + justify-content: center; + align-items: center; + width: auto; + max-width: none; + margin-inline: 0; + gap: var(--openms-btn-gap) !important; +} + +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn, +.openms-lib-page--our-sponsors #sponsor-cta .governance-cta-band__actions .openms-lib-btn { + flex: 0 0 auto !important; + width: fit-content !important; + min-width: 0 !important; + max-width: 100% !important; + height: auto !important; + align-self: center; +} + +/* Become a sponsor “Make a donation” — identical to navbar “Sponsor Us” */ +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn--ghost, +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn--ghost:visited { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: fit-content !important; + min-width: 0 !important; + min-height: var(--openms-btn-min-height) !important; + height: auto !important; + padding: var(--openms-btn-padding) !important; + border-radius: var(--openms-btn-pill-radius) !important; + border: 2px solid rgba(var(--openms-white-rgb), 0.34) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + font-family: var(--openms-font-body) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: nowrap !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; + transition: var(--openms-btn-motion); + text-decoration: none !important; +} + +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band__actions .openms-lib-btn--ghost: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)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none !important; +} + +/* ── Navy outro CTAs: airy space above, flush into footer ── */ +.openms-lib-page .openms-lib-page__outro:has(.contribute-coc-band, .governance-cta-band):not(:has(.openms-lib-page--code-of-conduct *)):not(:has(.openms-lib-page--publications *)):not(:has(.openms-lib-page--governance *)):not(:has(.openms-lib-page--our-sponsors *)):not(:has(.openms-lib-page--sponsor-us *)):not(:has(.openms-lib-page--contact *)), +.openms-lib-page--privacy #privacy-help.openms-lib-page__anchor, +.openms-lib-page--privacy .openms-lib-page__outro { + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-inline: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border-top: none !important; + background: transparent !important; +} + +/* Generous top breathing room so the band doesn’t sit tight under content */ +.openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance):not(.openms-lib-page--our-sponsors):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--contact) + .openms-lib-page__outro:has(.contribute-coc-band, .governance-cta-band) + > .openms-lib-page__anchor, +.openms-lib-page--privacy #privacy-help.openms-lib-page__anchor { + padding-top: clamp(5.5rem, 12vw, 8rem) !important; + padding-bottom: 0 !important; + padding-inline: 0 !important; + box-sizing: border-box; +} + +/* Contact — Need a hand? keeps space after the band before the footer */ +.openms-lib-page--contact .openms-lib-page__outro, +.openms-lib-page--contact #get-help.openms-lib-page__anchor { + margin: 0 !important; + border-top: none !important; + background: transparent !important; +} + +.openms-lib-page--contact #get-help.openms-lib-page__anchor { + width: 100%; + max-width: none; + padding-top: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)) !important; + padding-bottom: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)) !important; + padding-inline: max( + var(--openms-page-inline), + calc((100% - var(--pro-max, 75rem)) / 2) + ) !important; + box-sizing: border-box; +} + +.openms-lib-page--contact .contribute-coc-band { + max-width: var(--pro-max, 75rem); + margin-inline: auto; + margin-bottom: 0 !important; +} + +.openms-lib-page--contact .contribute-coc-band__panel { + border-radius: var(--pro-radius, 0.85rem) !important; +} + +.openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance) .contribute-coc-band, +.openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--our-sponsors) .governance-cta-band { + margin-bottom: 0 !important; +} + +/* Full-bleed navy into footer — rounded top only (inset pages excluded) */ +.openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--contact) .contribute-coc-band__panel, +.openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--our-sponsors):not(.openms-lib-page--sponsor-us) .governance-cta-band__panel, +.openms-lib-page--privacy .contribute-coc-band__panel { + border-radius: var(--pro-radius, 0.85rem) var(--pro-radius, 0.85rem) 0 0 !important; + padding-inline: var(--openms-page-inline) !important; +} + +.openms-lib-layout:has( + .openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance) + .contribute-coc-band, + .openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--our-sponsors) .governance-cta-band + ), +.content-padding:has( + .openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance) + .contribute-coc-band, + .openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--our-sponsors) .governance-cta-band + ) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +.openms-lib-layout:has( + .openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance) + .contribute-coc-band, + .openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--our-sponsors) .governance-cta-band + ) + + #footer.footer-redesign, +.content-padding:has( + .openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance) + .contribute-coc-band, + .openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--our-sponsors) .governance-cta-band + ) + + #footer.footer-redesign, +.openms-lib-layout:has( + .openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance) + .contribute-coc-band, + .openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--our-sponsors) .governance-cta-band + ) + + footer.footer-redesign, +.content-padding:has( + .openms-lib-page:not(.openms-lib-page--code-of-conduct):not(.openms-lib-page--contribute):not(.openms-lib-page--publications):not(.openms-lib-page--governance) + .contribute-coc-band, + .openms-lib-page:not(.openms-lib-page--governance):not(.openms-lib-page--sponsor-us):not(.openms-lib-page--our-sponsors) .governance-cta-band + ) + + footer.footer-redesign { + margin-top: 0 !important; + padding-top: 0 !important; +} + +/* CoC attribution — compact quiet footer */ +.openms-lib-page--code-of-conduct .openms-lib-page__outro { + background: var(--openms-white) !important; + padding: 0 !important; + margin: 0 !important; + border-top: none !important; +} + +.openms-lib-page--code-of-conduct .openms-lib-page__outro > .openms-lib-page__anchor { + padding-top: 1.25rem !important; + padding-bottom: 2.5rem !important; + padding-inline: var(--openms-page-inline) !important; + box-sizing: border-box; +} + +.openms-lib-layout:has(.openms-lib-page--code-of-conduct), +.content-padding:has(.openms-lib-page--code-of-conduct) { + padding-bottom: 0 !important; +} + +/* Contribute CoC band — space above content + below before footer */ +.openms-lib-page--contribute .openms-lib-page__outro { + background: transparent !important; + padding: 0 !important; + margin: 0 !important; + border-top: none !important; +} + +.openms-lib-page--contribute #code-of-conduct.openms-lib-page__anchor { + padding-top: clamp(6.5rem, 14vw, 9.5rem) !important; + padding-bottom: clamp(5.5rem, 12vw, 8rem) !important; + padding-inline: var(--openms-page-inline) !important; + box-sizing: border-box; + background: var(--openms-white) !important; +} + +.openms-lib-page--contribute .contribute-coc-band__panel { + border-radius: var(--pro-radius, 0.85rem) !important; + padding-inline: clamp(1.25rem, 3vw, 2rem) !important; + gap: clamp(1.75rem, 3.5vw, 2.5rem) !important; +} + +.openms-lib-layout:has(.openms-lib-page--contribute), +.content-padding:has(.openms-lib-page--contribute) { + padding-bottom: 0 !important; +} + +/* Publications Cite band — match Contribute CoC inset panel (not footer flush) */ +.openms-lib-page--publications .openms-lib-page__outro { + background: transparent !important; + padding: 0 !important; + margin: 0 !important; + border-top: none !important; +} + +.openms-lib-page--publications #cite-openms.openms-lib-page__anchor { + width: 100%; + max-width: none; + margin-inline: 0; + padding-top: clamp(5.5rem, 12vw, 8rem) !important; + padding-bottom: clamp(4.5rem, 10vw, 7rem) !important; + padding-inline: var(--openms-page-inline) !important; + box-sizing: border-box; + background: var(--openms-white) !important; +} + +.openms-lib-page--publications .contribute-coc-band { + width: 100%; + max-width: var(--pro-max, 75rem); + margin-inline: auto; + margin-bottom: 0 !important; +} + +.openms-lib-page--publications .contribute-coc-band__panel { + width: 100%; + max-width: none; + margin-inline: 0; + border-radius: var(--pro-radius, 0.85rem) !important; + padding-inline: clamp(1.25rem, 3vw, 2rem) !important; + gap: clamp(1.75rem, 3.5vw, 2.5rem) !important; + box-sizing: border-box; +} + +.openms-lib-layout:has(.openms-lib-page--publications #cite-openms), +.content-padding:has(.openms-lib-page--publications #cite-openms) { + padding-bottom: 0 !important; +} + +.openms-lib-layout:has(.openms-lib-page--publications #cite-openms) + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--publications #cite-openms) + #footer.footer-redesign, +.openms-lib-layout:has(.openms-lib-page--publications #cite-openms) + footer.footer-redesign, +.content-padding:has(.openms-lib-page--publications #cite-openms) + footer.footer-redesign { + margin-top: 0; + padding-top: 0; +} + +/* Inset navy CTA panels — Governance / Our Sponsors / Sponsor Us */ +.openms-lib-page--governance .openms-lib-page__outro, +.openms-lib-page--our-sponsors .openms-lib-page__outro, +.openms-lib-page--sponsor-us .openms-lib-page__outro { + background: transparent !important; + padding: 0 !important; + margin: 0 !important; + border-top: none !important; +} + +.openms-lib-page--governance #related-pages.openms-lib-page__anchor { + width: 100%; + max-width: none; + margin-inline: 0; + /* Match body section rhythm (--pro-section-y) */ + padding-top: var(--pro-section-y) !important; + padding-bottom: var(--pro-section-y) !important; + padding-inline: max( + var(--openms-page-inline), + calc((100% - var(--pro-max, 75rem)) / 2) + ) !important; + box-sizing: border-box; + background: var(--openms-white) !important; +} + +.openms-lib-page--our-sponsors #sponsor-cta.openms-lib-page__anchor, +.openms-lib-page--sponsor-us #become-a-sponsor.openms-lib-page__anchor { + width: 100%; + max-width: none; + margin-inline: 0; + /* Match body section rhythm (--pro-section-y) */ + padding-top: var(--pro-section-y) !important; + padding-bottom: var(--pro-section-y) !important; + padding-inline: max( + var(--openms-page-inline), + calc((100% - var(--pro-max, 75rem)) / 2) + ) !important; + box-sizing: border-box; + background: var(--pro-band-soft, var(--olib-bg-soft, #f4f6f9)) !important; +} + +/* Keep inner shell transparent so the full-bleed gray shows edge-to-edge */ +.openms-lib-page--our-sponsors #sponsor-cta .governance-cta-band, +.openms-lib-page--sponsor-us #become-a-sponsor .governance-cta-band, +.openms-lib-page--sponsor-us #become-a-sponsor .openms-lib-block--developers { + background: transparent !important; + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0 !important; +} + +.openms-lib-page--governance .governance-cta-band, +.openms-lib-page--our-sponsors .governance-cta-band, +.openms-lib-page--sponsor-us .governance-cta-band { + width: 100%; + max-width: var(--pro-max, 75rem); + margin-inline: auto; + margin-bottom: 0 !important; +} + +.openms-lib-page--governance .governance-cta-band__panel, +.openms-lib-page--our-sponsors .governance-cta-band__panel, +.openms-lib-page--sponsor-us .governance-cta-band__panel { + width: 100%; + max-width: var(--pro-max, 75rem); + margin-inline: auto; + border-radius: var(--pro-radius, 0.85rem) !important; + padding-inline: clamp(1.25rem, 3vw, 2rem) !important; + gap: clamp(1.75rem, 3.5vw, 2.5rem) !important; +} + +.openms-lib-layout:has(.openms-lib-page--governance #related-pages), +.content-padding:has(.openms-lib-page--governance #related-pages), +.openms-lib-layout:has(.openms-lib-page--our-sponsors #sponsor-cta), +.content-padding:has(.openms-lib-page--our-sponsors #sponsor-cta), +.openms-lib-layout:has(.openms-lib-page--sponsor-us #become-a-sponsor), +.content-padding:has(.openms-lib-page--sponsor-us #become-a-sponsor) { + padding-bottom: 0 !important; +} + +/* ── For Developers (Contribute) — link + button hover ───────────────────── */ +/* Never underline card anchors, CTAs, or platform/ghost buttons (rest + hover) */ +#for-developers a, +#for-developers a:hover, +#for-developers a:focus, +#for-developers a:focus-visible, +#for-developers a:active, +#for-developers .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card-cta, +#for-developers .openms-lib-btn--ghost, +#for-developers .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers a, +.openms-lib-page--openms-lib #for-developers a:hover, +.openms-lib-page--openms-lib #for-developers a:focus-visible, +.openms-lib-page--openms-lib #for-developers a:active, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card-cta, +.openms-lib-page--openms-lib #for-developers .openms-lib-btn--ghost, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn { + text-decoration: none !important; +} + +/* Link cards — blue CTAs on white; white CTAs on navy hover */ +#for-developers .openms-lib-developers__card--link .openms-lib-developers__card-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--link .openms-lib-developers__card-link, +.openms-lib-page--openms-lib .openms-lib-developers--cards .openms-lib-developers__card--link .openms-lib-developers__card-link { + color: var(--openms-blue) !important; + gap: 0.35rem !important; + text-decoration: none !important; + transition: + color 0.2s ease, + gap 0.2s ease; +} + +#for-developers .openms-lib-developers__card--link:hover .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card--link:focus-visible .openms-lib-developers__card-link, +.openms-lib-page--openms-lib .openms-lib-developers--cards .openms-lib-developers__card--link:hover .openms-lib-developers__card-link, +.openms-lib-page--openms-lib .openms-lib-developers--cards .openms-lib-developers__card--link:focus-visible .openms-lib-developers__card-link { + color: var(--openms-white) !important; + gap: 0.55rem !important; + text-decoration: none !important; + opacity: 1; +} + +#for-developers .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn { + border: 2px solid var(--openms-blue) !important; + background: var(--openms-blue) !important; + color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +/* Build-from-source OS icons — white on blue pills (and on navy card hover) */ +#for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fab, +#for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fas, +#for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .svg-inline--fa, +#for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fa-linux, +#for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fa-apple, +#for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fa-windows, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fab, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fas, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fa-linux, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fa-apple, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .fa-windows { + color: var(--openms-white) !important; +} + +#for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .svg-inline--fa path, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn .svg-inline--fa path { + fill: currentColor !important; +} + +#for-developers .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn:focus-visible { + border-color: var(--openms-blue) !important; + background: var(--openms-blue) !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 0.55rem) var(--openms-btn-glow) !important; + outline: none; +} + +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + border-color: rgba(var(--openms-white-rgb), 0.55) !important; + background: transparent !important; + color: var(--openms-white) !important; + box-shadow: none !important; + transform: none !important; +} + +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:focus-visible, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:focus-visible { + border-color: var(--openms-white) !important; + background: rgba(var(--openms-white-rgb), 0.16) !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 0.45rem) rgba(255, 255, 255, 0.22) !important; +} + +/* Reviewing Pull Requests — match navbar Sponsor Us outline pill + hover */ +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms { + display: flex !important; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + justify-content: stretch; + gap: var(--openms-btn-gap, 0.65rem) !important; + width: 100%; + margin-top: auto; +} + +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn, +#for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + flex: 1 1 0 !important; + width: auto !important; + max-width: none; + min-width: 0; + justify-content: center; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + height: auto !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border: 2px solid var(--openms-blue) !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: nowrap; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none !important; + transition: var(--openms-btn-motion); +} + +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fab, +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fas, +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fab, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fas, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa, +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-github, +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-book-open, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-github, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-book-open { + color: inherit !important; +} + +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa path, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa path { + fill: currentColor !important; +} + +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:focus-visible, +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:active, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:active, +#for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn:focus-visible { + 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, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none !important; +} + +/* On navy card hover — white outline like navbar Sponsor Us */ +#for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn { + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none !important; +} + +#for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:focus-visible { + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) var(--openms-btn-glow) !important; +} + +/* Always show platform CTAs (Build from Source / Review PRs) so hover is usable */ +@media (hover: hover) and (pointer: fine) and (min-width: 981px) { + #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms, + .openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms { + opacity: 1 !important; + visibility: visible !important; + pointer-events: auto !important; + transform: none !important; + } +} + +/* For Developers — keep multi-CTA rows inside narrow cards */ +@media (max-width: 720px) { + #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms, + .openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms { + flex-wrap: wrap !important; + width: 100%; + /* Room for hover scale + glow so platform pills never touch */ + gap: calc(2 * var(--openms-btn-glow-size, 6px) + 0.75rem) !important; + row-gap: calc(2 * var(--openms-btn-glow-size, 6px) + 0.75rem) !important; + column-gap: calc(2 * var(--openms-btn-glow-size, 6px) + 0.75rem) !important; + } + + #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn, + .openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn { + flex: 1 1 auto !important; + min-width: 0; + max-width: 100%; + } + + #for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms, + .openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms { + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + gap: 0.45rem !important; + } + + #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn, + .openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn { + flex: 1 1 0 !important; + width: auto !important; + max-width: none; + justify-content: center; + white-space: nowrap; + min-height: 2.5rem !important; + padding: 0.55rem 0.65rem !important; + font-size: 0.85rem !important; + } +} + +/* ── White-card soft pill CTAs (match Contact → Discord & GitHub) ── */ +:root { + --openms-card-soft-pill-bg: rgba(var(--openms-navy-rgb), 0.04); + --openms-card-soft-pill-border: rgba(var(--openms-navy-rgb), 0.12); + --openms-card-soft-pill-color: var(--openms-navy); + --openms-card-soft-pill-bg-hover: rgba(var(--openms-blue-rgb), 0.1); + --openms-card-soft-pill-border-hover: rgba(var(--openms-blue-rgb), 0.28); + --openms-card-soft-pill-color-hover: var(--openms-blue); +} + +.openms-lib-resources__item-link, +.contact-path-social, +.openms-lib-about__tile-link, +.openms-lib-resources__explore-link, +.openms-lib-topp-split__card-link, +.contribute-channel__link, +.contribute-way__link, +.contact-home__card-cta, +.community-events-home__card-cta, +.news-home__card-cta, +.events-past-card__cta, +.fellowship-project-card__cta, +.donate-impact-card__cta, +.sponsor-why__card-link, +.sponsor-tier__cta, +.governance-card__link, +.keyfeatures-modern__topic-card .openms-btn-link, +.help-page__card--wide .openms-btn-link, +.openms-lib-page--openms-lib .openms-lib-resources__item-link { + box-sizing: border-box; + display: inline-flex !important; + align-items: center; + align-self: flex-start; + gap: 0.4rem !important; + width: fit-content; + max-width: 100%; + min-height: 2.25rem; + margin-top: auto; + padding: 0.35rem 0.75rem !important; + border: 1px solid var(--openms-card-soft-pill-border) !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + background: var(--openms-card-soft-pill-bg) !important; + color: var(--openms-card-soft-pill-color) !important; + font-family: var(--openms-font-body); + font-size: 0.875rem !important; + font-weight: 650 !important; + line-height: 1.2 !important; + text-decoration: none !important; + transition: + background 0.18s ease, + border-color 0.18s ease, + color 0.18s ease, + gap 0.18s ease; +} + +.openms-lib-resources__item:hover .openms-lib-resources__item-link, +.openms-lib-resources__item:focus-visible .openms-lib-resources__item-link, +.openms-lib-resources__item:focus-within .openms-lib-resources__item-link, +.contact-path-social:hover, +.contact-path-social:focus-visible, +.openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-about__tile:focus-within .openms-lib-about__tile-link, +.openms-lib-about__tile-link:hover, +.openms-lib-about__tile-link:focus-visible, +.openms-lib-resources__explore-link:hover, +.openms-lib-resources__explore-link:focus-visible, +.openms-lib-topp-split__card:hover .openms-lib-topp-split__card-link, +.openms-lib-topp-split__card:focus-within .openms-lib-topp-split__card-link, +.contribute-channel:hover .contribute-channel__link, +.contribute-channel:focus-within .contribute-channel__link, +.contribute-channel__link:hover, +.contribute-channel__link:focus-visible, +.contribute-way:hover .contribute-way__link, +.contribute-way:focus-within .contribute-way__link, +.contribute-way__link:hover, +.contribute-way__link:focus-visible, +.contact-home__card:hover .contact-home__card-cta, +.contact-home__card:focus-visible .contact-home__card-cta, +.community-events-home__card-link:hover .community-events-home__card-cta, +.community-events-home__card-link:focus-visible .community-events-home__card-cta, +.news-home__card-link:hover .news-home__card-cta, +.news-home__card-link:focus-visible .news-home__card-cta, +.fellowship-project-card:hover .fellowship-project-card__cta, +.fellowship-project-card:focus-within .fellowship-project-card__cta, +.donate-impact-card:hover .donate-impact-card__cta, +.donate-impact-card:focus-within .donate-impact-card__cta, +.sponsor-why__card:hover .sponsor-why__card-link, +.sponsor-why__card:focus-within .sponsor-why__card-link, +.sponsor-tier:hover .sponsor-tier__cta, +.sponsor-tier:focus-within .sponsor-tier__cta, +.governance-card:hover .governance-card__link, +.governance-card:focus-within .governance-card__link, +.keyfeatures-modern__topic-card:hover .openms-btn-link, +.keyfeatures-modern__topic-card:focus-visible .openms-btn-link, +.help-page__card--wide:hover .openms-btn-link, +.help-page__card--wide:focus-within .openms-btn-link, +.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 { + background: var(--openms-card-soft-pill-bg-hover) !important; + border-color: var(--openms-card-soft-pill-border-hover) !important; + color: var(--openms-card-soft-pill-color-hover) !important; + gap: 0.5rem !important; + outline: none; + text-decoration: none !important; +} + +/* Navy card hover (contribute / developers): invert soft pill to outline-on-navy */ +@media (hover: hover) and (pointer: fine) { + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):hover + .openms-lib-resources__item-link, + .openms-lib-page--contribute + .openms-lib-resources__grid + > .openms-lib-resources__item:not(.openms-lib-resources__item--static):focus-visible + .openms-lib-resources__item-link, + .openms-lib-page--openms-lib + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:hover + .openms-lib-developers__card-link, + .openms-lib-page--openms-lib + .openms-lib-developers--cards + .openms-lib-developers__card--interactive:focus-visible + .openms-lib-developers__card-link { + color: var(--openms-white) !important; + } +} + +/* For Developers / Contribute — CTAs are text links, not pills */ +#for-developers .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__platform-link, +#for-developers .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib .openms-lib-developers--cards .openms-lib-developers__card-link, +.openms-lib-page--openms-lib .openms-lib-developers--cards .openms-lib-developers__platform-link { + display: inline-flex !important; + align-items: center; + align-self: flex-start; + gap: 0.35rem !important; + width: fit-content !important; + min-height: 0 !important; + height: auto !important; + margin-top: auto; + padding: 0 !important; + border: none !important; + border-radius: 0 !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + transform: none !important; + color: var(--openms-blue) !important; + font-size: var(--openms-text-min) !important; + font-weight: 700 !important; + line-height: 1.3 !important; + text-decoration: none !important; +} + +#for-developers .openms-lib-developers__platforms, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platforms, +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms { + display: flex !important; + flex-wrap: wrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 0.55rem 1rem !important; + width: 100%; +} + +#for-developers .openms-lib-developers__card-link:hover, +#for-developers .openms-lib-developers__card-link:focus-visible, +#for-developers .openms-lib-developers__platform-link:hover, +#for-developers .openms-lib-developers__platform-link:focus-visible, +#for-developers .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card-link:hover, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card-link:focus-visible, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link:hover, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link:focus-visible, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn:focus-visible { + background: transparent !important; + border: none !important; + box-shadow: none !important; + transform: none !important; + color: var(--openms-blue) !important; + gap: 0.5rem !important; + text-decoration: none !important; + text-underline-offset: 0.18em; +} + +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-link, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-link, +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-link, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + background: transparent !important; + border: none !important; + box-shadow: none !important; + transform: none !important; + color: var(--openms-white) !important; +} + +#for-developers .openms-lib-developers__platform-link i, +#for-developers .openms-lib-developers__platform-link .fab, +#for-developers .openms-lib-developers__platform-link .fas, +#for-developers .openms-lib-developers__platform-link .svg-inline--fa, +#for-developers .openms-lib-developers__platform-btn i, +#for-developers .openms-lib-developers__platform-btn .fab, +#for-developers .openms-lib-developers__platform-btn .fas, +#for-developers .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link i, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link .fab, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link .fas, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link .svg-inline--fa { + color: inherit !important; +} + +#for-developers .openms-lib-developers__platform-link .svg-inline--fa path, +#for-developers .openms-lib-developers__platform-btn .svg-inline--fa path, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-link .svg-inline--fa path { + fill: currentColor !important; +} diff --git a/assets/css/zz-page-shell.css b/assets/css/zz-page-shell.css new file mode 100644 index 00000000..498ab38c --- /dev/null +++ b/assets/css/zz-page-shell.css @@ -0,0 +1,230 @@ +/* Shared page shell — one content width across the site. + Loads late (zz-*) so page-specific narrower max-widths lose. + Pattern: full-bleed section uses --openms-page-inline gutters; + content rails use max-width: var(--pro-max) with no extra side pad. */ + +.openms-lib-page, +.home-page, +[class$="-page-layout"], +.community-calendar-layout { + /* Re-declare so gutters always track the live --pro-max */ + --openms-page-inline: max( + var(--olib-pad-x), + calc((100% - var(--pro-max)) / 2) + ); + --pro-hero-content-max: min(100%, var(--pro-max)); + --pro-cluster-max: min(100%, var(--pro-max)); + --hub-wide-max: var(--pro-max); +} + +@media (max-width: 720px) { + .openms-lib-page, + .home-page, + [class$="-page-layout"], + .community-calendar-layout { + --openms-page-inline: var(--openms-page-gutter); + } +} + +/* ── OpenMS-lib / inner pages ─────────────────────────────────────── */ + +/* Site-wide: standard air under hero title/CTAs → first content block */ +.openms-lib-page .openms-lib-hero--pro, +[class$="-page-layout"] .openms-lib-hero--pro, +.community-calendar-layout .openms-lib-hero { + padding-bottom: calc(var(--openms-btn-glow-size, 6px) + 0.5rem); + overflow: visible; +} + +.openms-lib-page .openms-lib-page__body > .openms-lib-page__anchor:first-child, +[class$="-page-layout"] .openms-lib-page__body > .openms-lib-page__anchor:first-child, +.community-calendar-layout .openms-lib-page__body > .openms-lib-page__anchor:first-child { + padding-top: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); +} + +/* First block rides the anchor spacing — don't stack a second section-y */ +.openms-lib-page .openms-lib-page__body > .openms-lib-page__anchor:first-child > .openms-lib-about, +.openms-lib-page .openms-lib-page__body > .openms-lib-page__anchor:first-child > .openms-lib-resources, +.openms-lib-page .openms-lib-page__body > .openms-lib-page__anchor:first-child > .openms-lib-block, +[class$="-page-layout"] .openms-lib-page__body > .openms-lib-page__anchor:first-child > .openms-lib-about, +[class$="-page-layout"] .openms-lib-page__body > .openms-lib-page__anchor:first-child > .openms-lib-resources, +[class$="-page-layout"] .openms-lib-page__body > .openms-lib-page__anchor:first-child > .openms-lib-block { + padding-top: 0; +} + +.openms-lib-page.openms-lib-page--openms-lib .openms-lib-hero--pro, +.openms-lib-page .openms-lib-hero--pro { + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.openms-lib-page.openms-lib-page--openms-lib .openms-lib-hero__content, +.openms-lib-page .openms-lib-hero__content { + width: 100%; + max-width: var(--pro-hero-content-max); + margin-inline: auto; +} + +.openms-lib-page .openms-lib-page__body > .openms-lib-page__anchor { + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +/* WebApps Examples — section paints its own gutters for full-bleed bg */ +.openms-lib-page--webapps-pro .openms-lib-page__body > #examples.openms-lib-page__anchor { + padding-inline: 0; +} + +.openms-lib-page .openms-lib-resources__inner, +.openms-lib-page .openms-lib-about__inner, +.openms-lib-page .about-pro-content__inner, +.openms-lib-page .openms-lib-developers__layout, +.openms-lib-page .contribute-coc-band, +.openms-lib-page .governance-cta-band { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + box-sizing: border-box; +} + +.openms-lib-page--contributors .openms-lib-resources__inner, +.openms-lib-page--research-partnerships .openms-lib-resources__inner, +.openms-lib-page--publications .about-pro-content__inner, +.openms-lib-page--research-partnerships #our-partners .uni-partners--static .uni-partners__static, +.governance-page-layout, +.governance-page-layout__content { + max-width: var(--pro-max); + width: 100%; +} + +.governance-page-layout { + --governance-max: var(--pro-max); +} + +/* Featured showcase lives inside an already --pro-max rail — don't re-cap */ +.openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__inner { + max-width: var(--pro-max); + width: 100%; +} + +/* WebApps hub sections — gutters on the section, not max-width + pad */ +.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, +.openms-lib-page--hub.openms-lib-page--featured-pro .webapps-modern-wrap--page .webapps-featured--page { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.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, +.openms-lib-page .webapps-featured__inner, +.openms-lib-page .webapps-affiliates__inner, +.openms-lib-page .webapps-archived__inner { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} + +.openms-lib-page--hub.openms-lib-page--webapps .webapps-archived--editorial .webapps-archived__layout, +.webapps-archived--editorial .webapps-archived__layout { + max-width: var(--pro-max); +} + +/* ── Homepage: kill max-width + side-pad double shrink ─────────────── */ + +.home-page .home-page__block--projects .webapps-featured--home, +.home-page .ecosystem-home, +.home-page .home-page__container, +.home-page .community-home__inner, +.home-page .home-page__block--partners .uni-partners--home .uni-partners__inner, +.home-page .keyfeatures-modern, +.home-page .contact-home__main, +.home-page .community-events-home, +.home-page__hero .hero-home__main { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.home-page .webapps-featured__inner, +.home-page .webapps-affiliates__inner, +.home-page .webapps-archived__inner, +.home-page .ecosystem-home__inner, +.home-page .keyfeatures-modern__inner, +.home-page .hero-home__inner, +.home-page .home-metrics__grid, +.home-page .community-events-home__inner, +.home-page .contact-home__inner, +.home-page .contact-area__inner, +.home-page .trusted-by__inner { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} + +/* Partners marquee: bleed to the shared page gutter, not the old pad token */ +.home-page .home-page__block--partners .uni-partners--home .uni-partners__marquee { + margin-inline: calc(-1 * var(--openms-page-inline)); + width: calc(100% + 2 * var(--openms-page-inline)); +} + +/* Generic shells that still used hardcoded rem caps */ +.webapps-featured__inner, +.uni-partners__header, +.hero-home__inner { + max-width: var(--pro-max); +} + +/* ── OpenMS-lib: one wide rail for every section ───────────────────── */ + +.openms-lib-page--openms-lib .openms-lib-page__outro .openms-lib-block--developers, +.openms-lib-page--openms-lib .openms-lib-page__cite { + width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.openms-lib-page--openms-lib .openms-lib-about__inner, +.openms-lib-page--openms-lib .openms-lib-topp-split__inner, +.openms-lib-page--openms-lib .openms-lib-resources__inner, +.openms-lib-page--openms-lib .openms-lib-resources__explore-grid, +.openms-lib-page--openms-lib .openms-lib-developers__cards-grid, +.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-developers__cite--separate, +.openms-lib-page--openms-lib .openms-lib-page__cite .openms-lib-developers__cite--panel, +.openms-lib-page--openms-lib .openms-lib-cite, +.openms-lib-page--openms-lib .openms-lib-cite__inner { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} + +/* ── Footer: same --pro-max rail as page components ─────────────────── */ + +.footer-redesign { + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.footer-inner, +.footer-bottom { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} diff --git a/assets/css/zz-publications-layout.css b/assets/css/zz-publications-layout.css new file mode 100644 index 00000000..9631e0f4 --- /dev/null +++ b/assets/css/zz-publications-layout.css @@ -0,0 +1,138 @@ +/* Publications — page shell uses shared --pro-max / --openms-page-inline + from brand-palette + zz-page-shell.css. This file keeps publications-only + rhythm and component fill rules. */ + +.openms-lib-page--publications .openms-lib-resources__inner { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: 0; + box-sizing: border-box; +} + +.openms-lib-page--publications #cite-openms.openms-lib-page__anchor { + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.openms-lib-page--publications .contribute-coc-band { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; +} + +/* Components fill the shell */ +.openms-lib-page--publications .publications-featured, +.openms-lib-page--publications .publications-bibliography, +.openms-lib-page--publications .publications-featured__list, +.openms-lib-page--publications .publication-list, +.openms-lib-page--publications .publications-bibliography__entries, +.openms-lib-page--publications .publications-toolbar, +.openms-lib-page--publications .publications-year, +.openms-lib-page--publications .publications-more, +.openms-lib-page--publications .contribute-coc-band__panel { + width: 100%; + max-width: none; + min-width: 0; +} + +/* Section heads stay readable; cards use full column */ +.openms-lib-page--publications .openms-lib-resources__head { + max-width: min(100%, 42rem); +} + +/* —— Spacing rhythm —— */ +.openms-lib-page--publications .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: var(--pro-section-y) 0; +} + +.openms-lib-page--publications .publications-featured, +.openms-lib-page--publications .publications-bibliography { + display: grid; + gap: var(--pro-head-to-content); +} + +.openms-lib-page--publications .publications-bibliography { + gap: 0.75rem; +} + +.openms-lib-page--publications .publications-bibliography > .openms-lib-resources__head { + margin-bottom: 0.35rem; +} + +.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); +} + +/* Toolbar — year filter only, right-aligned and tight to the cards */ +.openms-lib-page--publications .publications-toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: 0.65rem 1rem; + margin: 0 0 0.45rem; + padding: 0; +} + +.openms-lib-page--publications .publications-year__title { + display: none !important; +} + +.openms-lib-page--publications .publications-year { + gap: 0; +} + +.openms-lib-page--publications .publications-toolbar__filter { + width: auto; + max-width: 100%; + min-width: 0; + margin-left: 0; +} + +.openms-lib-page--publications .publications-toolbar__select { + min-width: 8.5rem; + max-width: 100%; +} + +/* Tablet — keep single-column cards until the 2-up breakpoint */ +@media (max-width: 899px) { + .openms-lib-page--publications .publications-featured__list { + grid-template-columns: minmax(0, 1fr); + } +} + +/* Phone — full-width filter, comfortable tap targets */ +@media (max-width: 640px) { + .openms-lib-page--publications .publications-toolbar { + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + margin-top: 0; + } + + .openms-lib-page--publications .publications-toolbar__filter { + width: 100%; + flex-direction: column; + align-items: stretch; + } + + .openms-lib-page--publications .publications-toolbar__select { + width: 100%; + min-width: 0; + min-height: 2.75rem; + } + + .openms-lib-page--publications .contribute-coc-band__panel { + padding-inline: clamp(1rem, 4vw, 1.35rem); + } +} + +/* Mid widths — keep Cite actions usable without horizontal squeeze */ +@media (min-width: 641px) and (max-width: 1023px) { + .openms-lib-page--publications .contribute-coc-band__panel { + gap: clamp(1.25rem, 3vw, 2rem); + } +} diff --git a/assets/css/zzz-cards-mobile.css b/assets/css/zzz-cards-mobile.css new file mode 100644 index 00000000..9e5ae335 --- /dev/null +++ b/assets/css/zzz-cards-mobile.css @@ -0,0 +1,1540 @@ +/* Site-wide card normalization. + Filename sorts last (after zz-*) so it wins over page-specific overrides; + !important is required because page scopes like + .openms-lib-page--hub.openms-lib-page--openms-lib have higher specificity. */ + +:root { + --openms-equal-card-min-h: 14.5rem; + --openms-equal-card-min-h-mobile: 16rem; + /* Featured / Affiliated Apps — fixed shell so every card matches */ + --webapps-featured-card-h: 18.25rem; + --webapps-featured-card-h-mobile: 18.25rem; + --webapps-affiliated-card-h: 18.25rem; + --webapps-affiliated-card-h-mobile: 18.25rem; + /* Homepage Community tools → Featured Apps catalog */ + --webapps-home-featured-card-h: 15rem; + --webapps-home-featured-card-h-mobile: 14rem; + /* Homepage Ecosystem — content-driven height; rows equalize via grid stretch */ + --ecosystem-home-card-h: 0; + --ecosystem-home-card-h-mobile: 0; +} + +/* ── Equal-height cards within grids (all breakpoints) ── */ +.ecosystem-home__grid, +.community-events-home__grid, +.community-news-events__grid, +.keyfeatures-modern__topics, +.contact-home__grid, +.contact-page__support-list, +.contact-paths-grid, +.openms-lib-page--contact .contact-paths-grid, +.webapps-featured__grid, +.webapps-featured__grid--catalog, +.webapps-featured__grid--detail, +.webapps-affiliates__grid, +.webapps-archived__grid, +.openms-lib-resources__grid, +.openms-lib-resources__explore-grid, +.openms-lib-resources__toolkit, +.openms-lib-topp-split__cards, +.openms-lib-developers__grid, +.openms-lib-developers__grid--routes, +.openms-lib-developers__cards-grid, +.contribute-channels__grid, +.contribute-ways__grid, +.governance-pillars-grid, +.governance-compare-grid, +.help-page__resources, +.sponsor-tiers__grid, +.sponsor-why__grid, +.leadership-grid, +.fellowship-projects-grid, +.developer-retreat-highlights__grid, +.donate-impact-grid, +.home-metrics__grid, +.trusted-by__wall-grid { + align-items: stretch !important; +} + +.community-events-home__card-link:not(.community-events-home__card-link--split), +.contact-page__support-card, +.contact-page__path-item, +.keyfeatures-modern__topic-card, +.openms-lib-resources__item, +.openms-lib-developers__card, +.openms-lib-developers__route, +.contribute-way, +.contribute-ways__feature, +.governance-card, +.sponsor-tier, +.sponsor-why__card, +.leadership-card, +.fellowship-project-card, +.developer-retreat-highlights__card, +.donate-impact-card, +.trusted-by__card, +.trusted-by__home-card, +.trusted-by__wall-card, +.help-page__card--wide, +.openms-lib-page .openms-lib-developers__card, +.openms-lib-page--hub .openms-lib-developers__card { + box-sizing: border-box !important; + height: 100% !important; + min-height: var(--openms-equal-card-min-h) !important; + max-height: none; + display: flex !important; + flex-direction: column !important; +} + +/* TOPP Tools: equal via grid stretch only — never lock a fixed shell that + differs between rest and hover (that was jumping card height on hover). */ +.openms-lib-topp-split__card, +.openms-lib-page .openms-lib-topp-split__card, +.openms-lib-page--openms-lib .openms-lib-topp-split__card, +.openms-lib-page--hub .openms-lib-topp-split__card { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + display: flex !important; + flex-direction: column !important; +} + +/* Get started / Explore cards: content-driven height; equal via grid stretch */ +.openms-lib-resources__explore-card, +.openms-lib-resources__explore-card--featured, +.openms-lib-page .openms-lib-resources__explore-card, +.openms-lib-page .openms-lib-resources__explore-card--featured, +.openms-lib-page--hub .openms-lib-resources__explore-card { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + display: flex !important; + flex-direction: column !important; +} + +/* Featured Apps cards: content-driven height; equal via grid stretch */ +.webapps-project-card, +.webapps-project-detail-card, +.webapps-featured__item .webapps-project-card, +.webapps-featured__item .webapps-project-detail-card, +.home-page__block--projects .webapps-project-card--catalog { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + display: flex !important; + flex-direction: column !important; +} + +/* Community tools → Featured Apps: one fixed height for every card */ +.openms-lib-page--featured .webapps-featured__grid--detail > .webapps-featured__item, +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail > .webapps-featured__item { + box-sizing: border-box !important; + height: var(--webapps-featured-card-h) !important; + min-height: var(--webapps-featured-card-h) !important; + max-height: var(--webapps-featured-card-h) !important; + display: flex !important; + flex-direction: column !important; +} + +.openms-lib-page--featured .webapps-featured__grid--detail .webapps-project-detail-card, +.openms-lib-page--featured .webapps-featured__item .webapps-project-detail-card, +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + display: flex !important; + flex-direction: column !important; + overflow: hidden !important; +} + +/* Homepage Community tools → Featured Apps catalog: ecosystem-style cards */ +.home-page__block--projects .webapps-featured__grid--catalog > .webapps-featured__item, +.home-page .home-page__block--projects .webapps-featured__grid--catalog > .webapps-featured__item { + box-sizing: border-box !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + display: flex !important; + flex-direction: column !important; + align-self: stretch !important; +} + +.home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog, +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog { + box-sizing: border-box !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +.home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__surface, +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__surface { + box-sizing: border-box !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +/* Partner ecosystem → Affiliated Apps: one fixed height for every card */ +.openms-lib-page--affiliated .webapps-affiliates__grid > .webapps-affiliates__item, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid > .webapps-affiliates__item { + box-sizing: border-box !important; + height: var(--webapps-affiliated-card-h) !important; + min-height: var(--webapps-affiliated-card-h) !important; + max-height: var(--webapps-affiliated-card-h) !important; + display: flex !important; + flex-direction: column !important; +} + +.openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card, +.openms-lib-page--affiliated .webapps-affiliates__item .webapps-project-detail-card, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item .webapps-project-detail-card { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + display: flex !important; + flex-direction: column !important; + overflow: hidden !important; +} + +/* Affiliate cards use display:contents — pin links to the card bottom */ +.openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card { + position: relative !important; +} + +.openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card__main, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card__main { + flex: 1 1 auto !important; + height: 100% !important; + min-height: 100% !important; + /* Reserve space for absolutely positioned action links */ + padding-bottom: calc(var(--webapps-card-pad, 1.25rem) + 2.75rem) !important; + align-content: start !important; +} + +.openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-links, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-links { + position: absolute !important; + left: var(--webapps-card-pad, clamp(1.1rem, 2.2vw, 1.45rem)) !important; + right: var(--webapps-card-pad, clamp(1.1rem, 2.2vw, 1.45rem)) !important; + bottom: var(--webapps-card-pad, clamp(1.1rem, 2.2vw, 1.45rem)) !important; + margin-top: 0 !important; +} + +.webapps-project-card__surface, +.webapps-project-card--catalog .webapps-project-card__surface, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; +} + +/* Homepage contact cards: keep icon | title on the left (not stacked/centered) */ +.contact-home__card { + box-sizing: border-box !important; + height: 100% !important; + min-height: var(--openms-equal-card-min-h) !important; + max-height: none !important; + display: grid !important; + grid-template-columns: auto minmax(0, 1fr); + grid-template-rows: auto auto auto; + grid-template-areas: + "icon title" + "text text" + "cta cta"; + align-items: start; + justify-items: start; + text-align: left; + flex-direction: unset !important; +} + +.contact-home__card-icon, +.contact-home__card-title { + align-self: center !important; + justify-self: start !important; +} + +.contact-home__card-text, +.contact-home__card-cta { + justify-self: start !important; + text-align: left !important; +} + +/* Latest news / Upcoming events: date | title side-by-side; height from content + stretch */ +.community-events-home__card-link--split { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + display: grid !important; + grid-template-columns: auto minmax(0, 1fr); + align-items: start; + flex-direction: unset !important; +} + +.community-events-home__card:has(.community-events-home__card-link--split), +.news-home__card:has(.community-events-home__card-link--split) { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +/* Explore grid items fill the cell so row cards match (content-driven) */ +.openms-lib-resources__explore-item, +.openms-lib-page .openms-lib-resources__explore-item { + display: flex !important; + height: 100%; + min-height: 0 !important; + align-self: stretch; +} + +/* Multi-row grids: lock a shared shell so row 1 and row 2 match */ +.openms-lib-developers__cards-grid > .openms-lib-developers__card, +.openms-lib-page--hub .openms-lib-developers__cards-grid > .openms-lib-developers__card, +.sponsor-why__grid .sponsor-why__card, +.governance-pillars-grid .governance-card, +.fellowship-projects-grid .fellowship-project-card, +.donate-impact-grid .donate-impact-card { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +/* Homepage Ecosystem — equal cards that grow with full copy */ +.ecosystem-home__grid > .ecosystem-home__item, +.home-page .ecosystem-home__grid > .ecosystem-home__item { + box-sizing: border-box !important; + height: auto !important; + min-height: var(--ecosystem-home-card-h) !important; + max-height: none !important; + display: flex !important; + align-self: stretch !important; +} + +.ecosystem-home__grid .ecosystem-home__card, +.ecosystem-home__grid .ecosystem-home__card:hover, +.ecosystem-home__grid .ecosystem-home__card:focus-visible, +.home-page .ecosystem-home__grid .ecosystem-home__card, +.home-page .ecosystem-home__grid .ecosystem-home__card:hover, +.home-page .ecosystem-home__grid .ecosystem-home__card:focus-visible { + box-sizing: border-box !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + display: flex !important; + flex-direction: column !important; + overflow: visible !important; +} + +/* OpenMS-lib For Developers — grow with CTAs; equalize via grid stretch */ +#for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card, +.openms-lib-page--hub #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card { + height: auto !important; + min-height: var(--openms-equal-card-min-h, 14.5rem) !important; + max-height: none !important; + overflow: visible !important; + align-self: stretch !important; + transform: none !important; +} + +/* Match Explore card hover lift (navy + translateY) */ +#for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:hover, +#for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:focus-visible, +#for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:focus-within, +.openms-lib-page--hub #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:hover, +.openms-lib-page--hub #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:focus-visible, +.openms-lib-page--hub #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:focus-within, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:hover, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:focus-visible, +.openms-lib-page--openms-lib #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card:focus-within { + height: auto !important; + min-height: var(--openms-equal-card-min-h, 14.5rem) !important; + max-height: none !important; + overflow: visible !important; + transform: translateY(-4px) !important; +} + +/* Leadership bios / sponsorship tiers — grow with content; equal via grid stretch */ +.leadership-grid .leadership-card, +.leadership-card, +.leadership-card:hover, +.leadership-card:focus-within, +.sponsor-tiers__grid .sponsor-tier, +.sponsor-tier, +.sponsor-tier:hover, +.sponsor-tier:focus-within { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +/* Archived project cards — content height; hover must not resize */ +.webapps-archived-entry, +.webapps-archived-entry:hover, +.webapps-archived-entry:focus-within, +.openms-lib-page--archived .webapps-archived-entry, +.openms-lib-page--archived .webapps-archived-entry:hover, +.openms-lib-page--archived .webapps-archived-entry:focus-within { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; + transform: none !important; +} + +/* Governance Separation of Responsibilities — content height; equal via grid stretch */ +.governance-compare-grid .openms-lib-resources__item, +.governance-compare-grid .openms-lib-resources__item:hover, +.governance-compare-grid .openms-lib-resources__item:focus-within, +.openms-lib-page--governance #responsibilities .governance-compare-grid .openms-lib-resources__item, +.openms-lib-page--governance #responsibilities .governance-compare-grid .openms-lib-resources__item:hover, +.openms-lib-page--governance #responsibilities .governance-compare-grid .openms-lib-resources__item:focus-within { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +/* Contact Ways to reach us — keep equal row height; hover must not shrink */ +.openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item, +.openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item:hover, +.openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item:focus-visible, +.openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item:focus-within, +.openms-lib-page--contact #contact-paths .contact-paths-grid > .contact-page__path-item, +.openms-lib-page--contact #contact-paths .contact-paths-grid > .contact-page__path-item:hover, +.openms-lib-page--contact #contact-paths .contact-paths-grid > .contact-page__path-item:focus-within { + height: 100% !important; + min-height: var(--openms-equal-card-min-h) !important; + max-height: none !important; + overflow: visible !important; +} + +.governance-compare-grid .openms-lib-resources__item-text, +.openms-lib-page--governance #responsibilities .governance-compare-grid .openms-lib-resources__item-text { + display: block !important; + -webkit-line-clamp: unset !important; + overflow: visible !important; +} + +.contact-home__grid .contact-home__card, +.keyfeatures-modern__topics .keyfeatures-modern__topic-card { + min-height: var(--openms-equal-card-min-h) !important; + height: var(--openms-equal-card-min-h) !important; + max-height: var(--openms-equal-card-min-h) !important; + overflow: hidden !important; +} + +.webapps-project-card:not(.webapps-project-card--catalog) .webapps-project-card__surface { + display: grid !important; + grid-template-columns: var(--webapps-logo-size, 6.5rem) minmax(0, 1fr) !important; + align-items: stretch !important; + gap: 0 !important; + padding: 0 !important; +} + +.webapps-project-card:not(.webapps-project-card--catalog) .webapps-project-card__body { + display: flex !important; + flex-direction: column !important; + flex: 1 1 auto !important; + min-height: 0 !important; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__body { + display: flex !important; + flex-direction: column !important; + flex: 1 1 auto !important; +} + +.webapps-project-card:not(.webapps-project-card--catalog) .webapps-project-card__logo-wrap { + align-self: stretch !important; + width: 100% !important; + height: auto !important; + min-height: 100% !important; + flex: 1 1 auto; +} + +.webapps-project-card__cta, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta { + margin-top: auto !important; +} + +/* Keep CTAs pinned to the bottom so equal shells look balanced */ +.ecosystem-home__card-link, +.contact-home__card-cta, +.community-events-home__card-cta, +.keyfeatures-modern__topic-card .openms-btn-link, +.openms-lib-resources__explore-link, +.openms-lib-topp-split__card-link, +.openms-lib-developers__card-cta, +.openms-lib-developers__card-link, +.openms-lib-developers__platforms, +.contribute-way__link, +.contribute-channel__link, +.webapps-project-card__cta, +.sponsor-tier__cta, +.sponsor-why__card-link, +.fellowship-project-card__cta, +.donate-impact-card__cta, +.governance-card__link, +.help-page__card--wide .openms-btn-link { + margin-top: auto; +} + +/* Hover/focus must not change card shell size */ +.contact-home__card:hover, +.contact-home__card:focus-visible, +.contact-page__support-card:hover, +.contact-page__support-card:focus-visible, +.contact-page__path-item:hover, +.contact-page__path-item:focus-within, +.keyfeatures-modern__topic-card:hover, +.keyfeatures-modern__topic-card:focus-visible, +.openms-lib-resources__item:hover, +.openms-lib-resources__item:focus-visible, +.openms-lib-resources__item:focus-within, +.contribute-way:hover, +.contribute-way:focus-within, +.governance-card:hover, +.governance-card:focus-within, +.sponsor-why__card:hover, +.sponsor-why__card:focus-within, +.fellowship-project-card:hover, +.fellowship-project-card:focus-within, +.developer-retreat-highlights__card:hover, +.developer-retreat-highlights__card:focus-within, +.donate-impact-card:hover, +.donate-impact-card:focus-within, +.trusted-by__card:hover, +.trusted-by__wall-card:hover, +.help-page__card--wide:hover { + min-height: var(--openms-equal-card-min-h) !important; + height: var(--openms-equal-card-min-h) !important; + max-height: var(--openms-equal-card-min-h) !important; + transform: none !important; +} + +.openms-lib-developers__route:hover, +.openms-lib-developers__route:focus-visible, +.openms-lib-developers__route:focus-within, +.openms-lib-developers__card:hover, +.openms-lib-developers__card:focus-visible, +.openms-lib-developers__card:focus-within, +.openms-lib-page .openms-lib-developers__route:hover, +.openms-lib-page .openms-lib-developers__route:focus-visible, +.openms-lib-page .openms-lib-developers__route:focus-within, +.openms-lib-page .openms-lib-developers__card:hover, +.openms-lib-page .openms-lib-developers__card:focus-visible, +.openms-lib-page .openms-lib-developers__card:focus-within, +.openms-lib-page--hub .openms-lib-developers__route:hover, +.openms-lib-page--hub .openms-lib-developers__route:focus-visible, +.openms-lib-page--hub .openms-lib-developers__route:focus-within, +.openms-lib-page--hub .openms-lib-developers__card:hover, +.openms-lib-page--hub .openms-lib-developers__card:focus-visible, +.openms-lib-page--hub .openms-lib-developers__card:focus-within { + /* Keep equal shell; allow card lift / navy hover (do not force transform:none) */ + min-height: var(--openms-equal-card-min-h) !important; + height: 100% !important; + max-height: none !important; +} + +/* Featured Apps: keep content-driven equal shells; never grow/shrink on hover */ +.webapps-project-card:hover, +.webapps-project-card:focus-within, +.webapps-project-card__surface:hover, +.webapps-project-card__surface:focus-visible, +.webapps-project-detail-card:hover, +.webapps-project-detail-card:focus-within, +.home-page__block--projects .webapps-project-card:hover, +.home-page__block--projects .webapps-project-card:focus-within, +.home-page__block--projects .webapps-project-card__surface:hover, +.home-page__block--projects .webapps-project-card__surface:focus-visible, +.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 { + min-height: 0 !important; + height: 100% !important; + max-height: none !important; +} + +.openms-lib-page--featured .webapps-featured__grid--detail > .webapps-featured__item:hover, +.openms-lib-page--featured .webapps-featured__grid--detail > .webapps-featured__item:focus-within, +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail > .webapps-featured__item:hover, +.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail > .webapps-featured__item:focus-within { + height: var(--webapps-featured-card-h) !important; + min-height: var(--webapps-featured-card-h) !important; + max-height: var(--webapps-featured-card-h) !important; +} + +.openms-lib-page--featured .webapps-featured__grid--detail .webapps-project-detail-card:hover, +.openms-lib-page--featured .webapps-featured__grid--detail .webapps-project-detail-card:focus-within, +.openms-lib-page--featured .webapps-featured__item .webapps-project-detail-card:hover, +.openms-lib-page--featured .webapps-featured__item .webapps-project-detail-card:focus-within { + min-height: 0 !important; + height: 100% !important; + max-height: none !important; +} + +.openms-lib-page--affiliated .webapps-affiliates__grid > .webapps-affiliates__item:hover, +.openms-lib-page--affiliated .webapps-affiliates__grid > .webapps-affiliates__item:focus-within, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid > .webapps-affiliates__item:hover, +.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid > .webapps-affiliates__item:focus-within { + height: var(--webapps-affiliated-card-h) !important; + min-height: var(--webapps-affiliated-card-h) !important; + max-height: var(--webapps-affiliated-card-h) !important; +} + +.openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card:hover, +.openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card:focus-within, +.openms-lib-page--affiliated .webapps-affiliates__item .webapps-project-detail-card:hover, +.openms-lib-page--affiliated .webapps-affiliates__item .webapps-project-detail-card:focus-within { + min-height: 0 !important; + height: 100% !important; + max-height: none !important; +} + +/* TOPP Tools cards: same shell on hover as rest (no height jump / lift) */ +.openms-lib-topp-split__card:hover, +.openms-lib-topp-split__card:focus-within, +.openms-lib-page .openms-lib-topp-split__card:hover, +.openms-lib-page .openms-lib-topp-split__card: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--hub .openms-lib-topp-split__card:hover, +.openms-lib-page--hub .openms-lib-topp-split__card:focus-within { + min-height: 0 !important; + height: 100% !important; + max-height: none !important; + box-sizing: border-box !important; +} + +/* Only cancel lift after scroll-reveal has finished — avoid fighting scale(0.94) */ +.openms-lib-topp-split__card.is-revealed:hover, +.openms-lib-topp-split__card.is-revealed:focus-within, +.openms-lib-page .openms-lib-topp-split__card.is-revealed:hover, +.openms-lib-page .openms-lib-topp-split__card.is-revealed:focus-within, +.openms-lib-page--openms-lib .openms-lib-topp-split__card.is-revealed:hover, +.openms-lib-page--openms-lib .openms-lib-topp-split__card.is-revealed:focus-within { + transform: translate(0, 0) scale(1) !important; +} + +/* Explore / Get started cards: content-driven equal shells; no lift/resize on hover */ +.openms-lib-resources__explore-card:hover, +.openms-lib-resources__explore-card:focus-visible, +.openms-lib-resources__explore-card--featured:hover, +.openms-lib-resources__explore-card--featured:focus-visible, +.openms-lib-page .openms-lib-resources__explore-card:hover, +.openms-lib-page .openms-lib-resources__explore-card:focus-visible, +.openms-lib-page .openms-lib-resources__explore-card--featured:hover, +.openms-lib-page .openms-lib-resources__explore-card--featured:focus-visible, +.openms-lib-page--hub .openms-lib-resources__explore-card:hover, +.openms-lib-page--hub .openms-lib-resources__explore-card:focus-visible { + min-height: 0 !important; + height: 100% !important; + max-height: none !important; + transform: none !important; +} + +/* Clamp body copy so equal shells don’t overflow */ +.ecosystem-home__card-text, +.contact-home__card-text, +.contact-page__support-card p, +.keyfeatures-modern__topic-card p, +.openms-lib-resources__item-text, +.openms-lib-topp-split__card-text, +.openms-lib-developers__card-subtitle, +.openms-lib-developers__card-text, +.contribute-way__text, +.contribute-channel__text, +.governance-card__text, +.sponsor-why__card-text, +.sponsor-tier__blurb, +.leadership-card__role, +.fellowship-project-card__text, +.developer-retreat-highlights__card-text, +.donate-impact-card__text, +.webapps-project-card__text, +.webapps-project-detail-card__text, +.webapps-archived-entry__text, +.help-page__card--wide p { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; +} + +@media (max-width: 720px) { + /* ── Content card grids: one full-width column ── */ + .ecosystem-home__grid, + .community-news-events__grid, + .community-events-home__grid, + .keyfeatures-modern__topics, + .contact-home__grid, + .contact-page__support-list, + .contact-paths-grid, + .openms-lib-page--contact .contact-paths-grid, + .webapps-featured__grid, + .webapps-featured__grid--catalog, + .webapps-featured__grid--detail, + .webapps-affiliates__grid, + .webapps-archived__grid, + .openms-lib-about__mosaic, + .openms-lib-page--openms-lib .openms-lib-about__mosaic, + .coc-overview__principles, + .openms-lib-resources__grid, + .openms-lib-page--openms-lib .openms-lib-resources__grid, + .openms-lib-resources__explore-grid, + .openms-lib-resources__toolkit, + .openms-lib-topp-split__cards, + .openms-lib-developers__grid, + .openms-lib-developers__grid--routes, + .openms-lib-developers__cards-grid, + .openms-lib-list--tiles, + .contribute-channels__grid, + .contribute-channels__strip, + .contribute-ways__grid, + .openms-lib-about__benefits, + .governance-pillars, + .governance-pillars-grid, + .governance-compare, + .governance-compare-grid, + .help-page__resources, + .about-sponsors-grid, + .about-sponsorship-program__tiers, + .sponsor-tiers__grid, + .sponsor-why__grid, + .leadership-grid, + .publications-featured__list, + .fellowship-projects-grid, + .developer-retreat-highlights__grid, + .donate-impact-grid, + .privacy-overview__list, + .events-past-list, + .trusted-by__wall-grid { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + width: 100%; + max-width: 100%; + min-width: 0; + } + + /* Overview (What is OpenMS?) — keep 2×2 on phones */ + .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefits { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100%; + max-width: 100%; + min-width: 0; + } + + /* pyopenms_viz Contribute — keep 2 cards filling the section on phones */ + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0; + } + + .openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro + .openms-lib-developers__grid--routes.openms-lib-developers__grid--count-2 + > .openms-lib-developers__route { + grid-column: span 1 !important; + width: 100% !important; + min-width: 0 !important; + } + + /* Featured WebApps logo rail — keep three logos in one row */ + .openms-lib-page--webapps-pro .openms-lib-resources__examples-layout { + display: grid !important; + grid-template-columns: 1fr !important; + width: 100%; + max-width: 100%; + min-width: 0; + } + + .openms-lib-page--webapps-pro .openms-lib-resources__examples-grid { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + width: 100%; + max-width: 100%; + min-width: 0; + } + + /* Research Partnerships / WebApps Features — one column on phones */ + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic, + .openms-lib-page--research-partnerships .rp-include__mosaic, + .openms-lib-page--webapps-pro .openms-lib-about__mosaic { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + width: 100%; + max-width: 100%; + min-width: 0; + gap: 0 !important; + } + + /* Logo tiles and avatars are thumbnails, not cards — pair them so the + lists stay scannable instead of becoming one very long column */ + .sponsors-logo-grid, + .openms-lib-page--sponsor-us .sponsors-logo-grid, + .uni-partners__static, + .uni-partners--static .uni-partners__static, + .footer-sponsors__logos, + .contributors-members { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100%; + max-width: 100%; + } + + /* Our Sponsors page: three logos stay on one row */ + .openms-lib-page--our-sponsors .sponsors-logo-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 0.35rem 0.45rem; + max-width: 100%; + } + + .openms-lib-page--our-sponsors .about-sponsors-logos__item { + min-height: 4.75rem; + padding: 0.2rem; + } + + .openms-lib-page--our-sponsors .about-sponsors-logos__logo { + max-width: 100%; + max-height: 3.25rem; + } + + .openms-lib-page--our-sponsors .about-sponsors-logos__item .about-sponsors-logos__logo[src*="Elixir"] { + max-width: 100%; + max-height: 4.5rem; + } + + /* Homepage partners: static columns on mobile, not the carousel */ + .home-page__block--partners .uni-partners--home .uni-partners__marquees, + .home-page__block--partners .uni-partners--home .uni-partners__marquee { + display: none !important; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100%; + max-width: 100%; + } + + .uni-partners__marquees, + .uni-partners__marquee, + .uni-partners--home .uni-partners__marquee { + display: none !important; + } + + .uni-partners__static, + .uni-partners--home .uni-partners__static { + gap: 0.6rem; + margin-top: clamp(1rem, 2.5vh, 1.5rem); + padding-inline: 0; + } + + /* Equal-height logos in the static mobile grid */ + .home-page__block--partners .uni-partners--home .uni-partners__static .uni-partners__item, + .uni-partners--home .uni-partners__static .uni-partners__item { + display: flex !important; + flex: none !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + height: 3.75rem !important; + min-height: 3.75rem !important; + max-height: 3.75rem !important; + padding: 0.35rem 0.4rem !important; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static .uni-partners__item img, + .uni-partners--home .uni-partners__static .uni-partners__item img { + display: block !important; + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + margin-inline: auto !important; + object-fit: contain !important; + object-position: center !important; + opacity: 1 !important; + filter: none !important; + } + + .uni-partners__static > [role="listitem"] { + display: block; + width: 100%; + min-width: 0; + } + + /* ── Card shells: same width + equal height (1-col stacks) ── */ + .about-sponsor-card, + .about-sponsorship-tier, + .community-events-home__card:not(:has(.community-events-home__card-link--split)), + .contact-home__card, + .contact-page__support-card, + .contribute-way, + .contribute-ways__feature, + .developer-retreat-highlights__card, + .donate-impact-card, + .events-past-card, + .fellowship-project-card, + .governance-card, + .help-page__card--wide, + .keyfeatures-modern__topic-card, + .openms-lib-core-tools__card, + .openms-lib-developers__card, + .openms-lib-developers__route, + .openms-lib-resource-card, + .openms-lib-resources__item, + .openms-lib-topp__cta-card, + .sponsor-why__card, + .trusted-by__card, + .trusted-by__home-card, + .trusted-by__wall-card { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: var(--openms-equal-card-min-h-mobile) !important; + min-height: var(--openms-equal-card-min-h-mobile) !important; + max-height: var(--openms-equal-card-min-h-mobile) !important; + margin-inline: 0; + overflow: hidden !important; + overflow-wrap: break-word; + } + + /* For Developers Contribute — let multi-CTA cards expand on phones */ + #for-developers .openms-lib-developers__card, + .openms-lib-page--hub #for-developers .openms-lib-developers__card, + .openms-lib-page--openms-lib #for-developers .openms-lib-developers__card, + #for-developers .openms-lib-developers__card:hover, + #for-developers .openms-lib-developers__card:focus-visible, + #for-developers .openms-lib-developers__card:focus-within { + height: auto !important; + min-height: var(--openms-equal-card-min-h-mobile) !important; + max-height: none !important; + overflow: visible !important; + } + + .webapps-archived-entry, + .webapps-archived-entry:hover, + .webapps-archived-entry:focus-within { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + margin-inline: 0; + overflow: visible !important; + overflow-wrap: break-word; + transform: none !important; + } + + .governance-compare-grid .openms-lib-resources__item, + .governance-compare-grid .openms-lib-resources__item:hover, + .governance-compare-grid .openms-lib-resources__item:focus-within, + .openms-lib-page--governance #responsibilities .governance-compare-grid .openms-lib-resources__item { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + margin-inline: 0; + overflow: visible !important; + overflow-wrap: break-word; + } + + .openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item, + .openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item:hover, + .openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item:focus-visible, + .openms-lib-page--contact #contact-paths .contact-paths-grid > .openms-lib-resources__item:focus-within, + .openms-lib-page--contact #contact-paths .contact-paths-grid > .contact-page__path-item, + .openms-lib-page--contact #contact-paths .contact-paths-grid > .contact-page__path-item:hover, + .openms-lib-page--contact #contact-paths .contact-paths-grid > .contact-page__path-item:focus-within { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + margin-inline: 0; + overflow: visible !important; + overflow-wrap: break-word; + } + + /* Get started / Explore — content height, equal within a row */ + .openms-lib-resources__explore-card, + .openms-lib-resources__explore-card--featured, + .openms-lib-page .openms-lib-resources__explore-card, + .openms-lib-page .openms-lib-resources__explore-card--featured { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + margin-inline: 0; + overflow: hidden !important; + overflow-wrap: break-word; + } + + /* Leadership bios / sponsorship tiers — content height on phones too */ + .leadership-grid .leadership-card, + .leadership-card, + .leadership-card:hover, + .leadership-card:focus-within, + .sponsor-tiers__grid .sponsor-tier, + .sponsor-tier, + .sponsor-tier:hover, + .sponsor-tier:focus-within { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + margin-inline: 0; + overflow: visible !important; + overflow-wrap: break-word; + } + + /* Featured Apps — fixed equal height on mobile too */ + .webapps-project-card, + .webapps-project-detail-card, + .webapps-project-card__surface, + .home-page__block--projects .webapps-project-card--catalog, + .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + margin-inline: 0; + overflow: visible !important; + overflow-wrap: break-word; + } + + .openms-lib-page--featured .webapps-featured__grid--detail > .webapps-featured__item, + .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail > .webapps-featured__item { + height: var(--webapps-featured-card-h-mobile) !important; + min-height: var(--webapps-featured-card-h-mobile) !important; + max-height: var(--webapps-featured-card-h-mobile) !important; + } + + .home-page__block--projects .webapps-featured__grid--catalog > .webapps-featured__item, + .home-page .home-page__block--projects .webapps-featured__grid--catalog > .webapps-featured__item { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + } + + .openms-lib-page--featured .webapps-featured__grid--detail .webapps-project-detail-card, + .openms-lib-page--featured .webapps-featured__item .webapps-project-detail-card { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: hidden !important; + } + + .openms-lib-page--affiliated .webapps-affiliates__grid > .webapps-affiliates__item, + .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid > .webapps-affiliates__item { + height: var(--webapps-affiliated-card-h-mobile) !important; + min-height: var(--webapps-affiliated-card-h-mobile) !important; + max-height: var(--webapps-affiliated-card-h-mobile) !important; + } + + .openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card, + .openms-lib-page--affiliated .webapps-affiliates__item .webapps-project-detail-card { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: hidden !important; + position: relative !important; + } + + .openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card__main { + flex: 1 1 auto !important; + height: 100% !important; + min-height: 100% !important; + padding-bottom: calc(var(--webapps-card-pad, 1.25rem) + 2.75rem) !important; + align-content: start !important; + } + + .openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-links { + position: absolute !important; + left: var(--webapps-card-pad, clamp(1.1rem, 2.2vw, 1.45rem)) !important; + right: var(--webapps-card-pad, clamp(1.1rem, 2.2vw, 1.45rem)) !important; + bottom: var(--webapps-card-pad, clamp(1.1rem, 2.2vw, 1.45rem)) !important; + margin-top: 0 !important; + } + + /* Variable-length panels keep full width but not a fixed shell height */ + .contact-page__form-card, + .contribute-coc-band__panel, + .contributors-exec-panel, + .events-past-panel, + .fellowship-page__form-card, + .fellowship-application__form-card, + .governance-cta-band__panel, + .news-entry, + .openms-lib-cite__card, + .privacy-details__item, + .privacy-overview__note, + .coc-details__item, + .coc-report, + .publications-cite-card, + .sponsor-benefits__panel, + .uni-partners__item { + box-sizing: border-box; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: auto; + margin-inline: 0; + overflow-wrap: break-word; + } + + .home-page__block--partners .uni-partners--home .uni-partners__marquee .uni-partners__item { + width: auto !important; + max-width: var(--uni-home-logo-max-w, 12rem) !important; + min-width: 0 !important; + height: var(--uni-home-logo-h, 3.25rem) !important; + min-height: var(--uni-home-logo-h, 3.25rem) !important; + max-height: var(--uni-home-logo-h, 3.25rem) !important; + flex: 0 0 auto !important; + } + + .home-page__block--partners .uni-partners--home .uni-partners__marquee .uni-partners__item img { + display: block !important; + width: auto !important; + height: var(--uni-home-logo-h, 3.25rem) !important; + max-width: var(--uni-home-logo-max-w, 12rem) !important; + max-height: var(--uni-home-logo-h, 3.25rem) !important; + opacity: 1 !important; + filter: none !important; + object-fit: contain !important; + } + + .ecosystem-home__grid > .ecosystem-home__item, + .home-page .ecosystem-home__grid > .ecosystem-home__item { + height: auto !important; + min-height: var(--ecosystem-home-card-h-mobile) !important; + max-height: none !important; + } + + .ecosystem-home__card, + .ecosystem-home__card:hover, + .ecosystem-home__card:focus-visible, + .ecosystem-home__grid .ecosystem-home__card, + .ecosystem-home__grid .ecosystem-home__card:hover, + .ecosystem-home__grid .ecosystem-home__card:focus-visible { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + transform: none !important; + overflow: visible !important; + } + + .contact-home__card:hover, + .contact-home__card:focus-visible, + .contact-page__support-card:hover, + .openms-lib-resources__item:hover, + .openms-lib-resources__item:focus-visible, + .openms-lib-resources__item:focus-within, + .openms-lib-developers__card:hover, + .openms-lib-developers__card:focus-visible, + .openms-lib-developers__card:focus-within, + .sponsor-why__card:hover, + .governance-card:hover, + .fellowship-project-card:hover, + .donate-impact-card:hover, + .contribute-way:hover, + .keyfeatures-modern__topic-card:hover { + height: var(--openms-equal-card-min-h-mobile) !important; + min-height: var(--openms-equal-card-min-h-mobile) !important; + max-height: var(--openms-equal-card-min-h-mobile) !important; + transform: none !important; + } + + /* For Developers — keep Explore-style hover lift on phones too */ + #for-developers .openms-lib-developers__card:hover, + #for-developers .openms-lib-developers__card:focus-visible, + #for-developers .openms-lib-developers__card:focus-within { + height: auto !important; + min-height: var(--openms-equal-card-min-h-mobile) !important; + max-height: none !important; + transform: translateY(-4px) !important; + } + + .webapps-project-card:hover, + .webapps-project-card:focus-within, + .webapps-project-card__surface:hover, + .webapps-project-card__surface:focus-visible, + .webapps-project-detail-card:hover, + .webapps-project-detail-card:focus-within { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + transform: none !important; + } + + /* TOPP Tools — content-driven equal shells on mobile; identical rest/hover */ + .openms-lib-topp-split__card, + .openms-lib-page .openms-lib-topp-split__card, + .openms-lib-page--openms-lib .openms-lib-topp-split__card, + .openms-lib-topp-split__card:hover, + .openms-lib-topp-split__card:focus-within, + .openms-lib-page .openms-lib-topp-split__card:hover, + .openms-lib-page .openms-lib-topp-split__card: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 { + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; + } + + /* Homepage Featured Apps — stack like Ecosystem cards on phones */ + .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + grid-template-columns: 1fr !important; + } + + .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface { + display: flex !important; + flex-direction: column !important; + aspect-ratio: auto !important; + overflow: visible !important; + } + + /* Grid/flex children must be allowed to shrink */ + .webapps-featured__grid > *, + .webapps-featured__grid--catalog > *, + .webapps-featured__grid--detail > *, + .webapps-affiliates__grid > *, + .webapps-affiliates__item, + .webapps-archived__grid > *, + .openms-lib-about__mosaic > *, + .openms-lib-resources__grid > *, + .openms-lib-resources__explore-grid > *, + .openms-lib-developers__grid > *, + .openms-lib-developers__grid--routes > *, + .openms-lib-developers__cards-grid > *, + .contribute-channels__grid > *, + .contribute-ways__grid > *, + .governance-pillars-grid > *, + .governance-compare-grid > *, + .about-sponsors-grid > *, + .sponsor-tiers__grid > *, + .sponsor-why__grid > *, + .leadership-grid > *, + .fellowship-projects-grid > *, + .developer-retreat-highlights__grid > *, + .donate-impact-grid > * { + min-width: 0; + max-width: 100%; + grid-column: auto !important; + grid-row: auto !important; + } + + /* Card media never forces the card wider than the screen */ + .webapps-project-card img, + .webapps-project-detail-card img, + .webapps-archived-entry img, + .openms-lib-about__tile img, + .openms-lib-resources__item img, + .uni-partners__item img, + .trusted-by__card img, + .trusted-by__wall-card img, + .leadership-card img, + .sponsors-logo-grid img { + max-width: 100%; + height: auto; + } + + /* Long strings inside cards should wrap rather than widen the card */ + .ecosystem-home__card-tag, + .home-metrics__value, + .publications-cite-card__authors-more, + .sponsor-tier__badge, + .help-page__card--wide a, + .keyfeatures-modern__topic-card a { + white-space: normal; + } +} + +@media (max-width: 480px) { + .contributors-members { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +/* Homepage metrics: 3 across from md–xl+; stack on small phones */ +@media (min-width: 641px) { + .home-metrics__grid { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } +} + +@media (max-width: 640px) { + .home-metrics__grid { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + } +} + +/* Homepage — full card copy must fit; shells grow with content */ +.home-page .webapps-project-card--catalog .webapps-project-card__text, +.home-page .ecosystem-home__card-text, +.home-page .contact-home__card-text, +.home-page .keyfeatures-modern__topic-text, +.home-page .keyfeatures-modern__topic-card p, +.home-page .news-home__card-summary, +.home-page .community-events-home__card-summary, +.home-page .home-metrics__description { + display: block !important; + -webkit-box-orient: unset !important; + -webkit-line-clamp: unset !important; + overflow: visible !important; + text-overflow: unset !important; +} + +.home-page .webapps-project-card--catalog, +.home-page .webapps-project-card--catalog .webapps-project-card__surface, +.home-page .contact-home__card, +.home-page .contact-home__grid .contact-home__card, +.home-page .keyfeatures-modern__topic-card, +.home-page .keyfeatures-modern__topics .keyfeatures-modern__topic-card, +.home-page .news-home__card, +.home-page .community-events-home__card { + height: auto !important; + max-height: none !important; + overflow: visible !important; +} + +.home-page .webapps-project-card--catalog, +.home-page .contact-home__card, +.home-page .keyfeatures-modern__topic-card, +.home-page .news-home__card, +.home-page .community-events-home__card { + min-height: 0 !important; +} + +/* Homepage metrics — flat proof strip (not equal-height cards) */ +.home-page .home-metrics__card { + display: grid !important; + justify-items: center !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + background: transparent !important; + border-radius: 0 !important; + box-shadow: none !important; + text-align: center !important; +} + +.home-page .home-metrics__card + .home-metrics__card { + border-left: 1px solid rgba(var(--openms-navy-rgb), 0.16) !important; +} + +@media (max-width: 640px) { + .home-page .home-metrics__card + .home-metrics__card { + border-left: none !important; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.16) !important; + } +} + +.home-page .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; +} + +@media (min-width: 1100px) { + .home-page .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } +} + +@media (max-width: 768px) { + .home-page .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + grid-template-columns: 1fr !important; + } +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog > .webapps-featured__item { + height: auto !important; + min-height: 0 !important; + max-height: none !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__surface { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__surface { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: 1.05rem !important; + padding: 0 !important; + border: none !important; + background: transparent !important; + box-shadow: none !important; + aspect-ratio: auto !important; + overflow: visible !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__logo-wrap { + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + width: auto !important; + height: auto !important; + min-height: 0 !important; + padding: 0 !important; + border: none !important; + border-radius: 0 !important; + background: transparent !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__body { + display: flex !important; + flex-direction: column !important; + flex: 1 1 auto !important; + width: 100% !important; + height: auto !important; + margin-top: 0 !important; + padding: 0 !important; + background: transparent !important; + color: inherit !important; + opacity: 1 !important; + visibility: visible !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__name { + color: var(--home-card-title-color, rgba(var(--openms-dark-rgb), 0.9)) !important; + text-shadow: none !important; + font-size: var(--openms-card-title-size, clamp(1rem, 1.4vw, 1.1rem)) !important; + font-weight: var(--openms-card-title-weight, 700) !important; + line-height: 1.3 !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__name, +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__text { + width: 100% !important; + max-width: none !important; +} + +.home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__text { + color: var(--openms-text-muted, rgba(var(--openms-dark-rgb), 0.72)) !important; + text-shadow: none !important; + display: block !important; + -webkit-line-clamp: unset !important; + overflow: visible !important; + text-wrap: wrap !important; +} + +.home-page .ecosystem-home__grid > .ecosystem-home__item { + height: auto !important; + min-height: var(--ecosystem-home-card-h) !important; + max-height: none !important; +} + +.home-page .ecosystem-home__card { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; +} + +@media (max-width: 720px) { + .home-page .home-metrics__card, + .home-page .contact-home__card, + .home-page .keyfeatures-modern__topic-card, + .home-page .news-home__card, + .home-page .community-events-home__card, + .home-page .community-events-home__card:not(:has(.community-events-home__card-link--split)) { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; + } + + .home-page .home-page__block--projects .webapps-featured__grid--catalog > .webapps-featured__item { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + } + + .home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; + } + + .home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__surface { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; + } + + .home-page .ecosystem-home__grid > .ecosystem-home__item { + height: auto !important; + min-height: var(--ecosystem-home-card-h-mobile) !important; + max-height: none !important; + } + + .home-page .ecosystem-home__card { + height: 100% !important; + min-height: 0 !important; + max-height: none !important; + overflow: visible !important; + } +} diff --git a/assets/css/zzz-hero-mobile.css b/assets/css/zzz-hero-mobile.css new file mode 100644 index 00000000..f5e6c24a --- /dev/null +++ b/assets/css/zzz-hero-mobile.css @@ -0,0 +1,145 @@ +/* Hero layout on small screens — widths, wrapping and alignment only. + Type sizes live in zzzzz-type-scale.css, which owns the whole site's scale. + !important is needed here because page scopes like + .openms-lib-page--hub.openms-lib-page--openms-lib out-specify anything + reasonable. */ + +@media (max-width: 720px) { + /* ── Inner-page heroes (.openms-lib-hero, every non-home page) ── */ + .openms-lib-hero__title, + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__title, + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title { + width: 100% !important; + max-width: 100% !important; + line-height: 1.18 !important; + letter-spacing: normal !important; + text-wrap: balance; + overflow-wrap: break-word; + } + + .openms-lib-hero__lead, + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__lead, + .contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__lead, + .openms-lib-page--openms-lib .openms-lib-hero__lead, + .openms-lib-page--calendar .openms-lib-hero__lead, + .openms-lib-page--news .openms-lib-hero__lead, + .openms-lib-page--contribute .openms-lib-hero__lead { + width: 100% !important; + max-width: 100% !important; + line-height: 1.55 !important; + white-space: normal !important; + text-wrap: pretty; + } + + /* Retreat hero — drop hanging indent + forced
; keep title-line as its + own block so mobile reads as ~3 clean lines instead of a balanced scramble */ + .openms-lib-page--developer-retreat .openms-lib-hero__title { + --openms-page-hero-title-size: clamp(1.4rem, 0.85rem + 3.4vw, 1.85rem) !important; + font-size: var(--openms-page-hero-title-size) !important; + width: 100% !important; + max-width: 100% !important; + margin-inline: 0 !important; + margin-left: 0 !important; + line-height: 1.12 !important; + letter-spacing: 0.01em !important; + text-align: center !important; + text-wrap: unset; + overflow-wrap: normal !important; + white-space: normal !important; + } + + .openms-lib-page--developer-retreat .openms-lib-hero__title br { + display: none !important; + } + + .openms-lib-page--developer-retreat .openms-lib-hero__title-line { + display: block !important; + margin-left: 0 !important; + max-width: 100% !important; + white-space: normal !important; + text-wrap: balance; + } + + .openms-lib-page--developer-retreat .openms-lib-hero__eyebrow, + .openms-lib-page--developer-retreat .openms-lib-hero__lead { + text-align: center !important; + max-width: 100% !important; + } + + /* ── Homepage hero (.hero-home) ── */ + .home-page__hero .hero-home__title, + .hero-home__title { + width: 100% !important; + max-width: 100% !important; + line-height: 1.12 !important; + letter-spacing: 0.01em !important; + overflow-wrap: break-word !important; + text-wrap: balance; + } + + .home-page__hero .hero-home__title-line, + .hero-home__title-line { + display: block !important; + max-width: 100% !important; + min-width: 0 !important; + white-space: normal !important; + overflow-wrap: break-word !important; + } + + .home-page__hero .hero-home__description, + .hero-home__description { + width: 100% !important; + max-width: 100% !important; + line-height: 1.6 !important; + text-wrap: pretty; + } + + .hero-home__visual-caption { + font-size: var(--openms-text-min); + line-height: 1.45; + } + + /* Homepage hero: hide mockup labels + trust line on phones */ + .home-page__hero .hero-mockup__labels, + .home-page__hero .hero-mockup__chrome-title, + .home-page__hero .hero-mockup__chrome-brand, + .home-page__hero .hero-home__note, + .home-page__hero .hero-home__note--under-graphic, + .home-page__hero .hero-home__highlights { + display: none !important; + } + +} + +/* ── Homepage hero alignment: left at every viewport ── + No media query on purpose. The headline, copy and CTAs start on the same + edge from 320px up to the widest desktop. Placed at the end of the last + stylesheet so it also beats the mobile button grid in zz-openms-buttons.css, + which centres paired CTAs everywhere else. */ +.home-page__hero .hero-home__content, +.home-page__hero .hero-home__copy, +.home-page__hero .hero-home__footer, +.home-page__hero .hero-home__actions-block, +/* the title is a column flexbox, so its line spans need this too */ +.home-page__hero .hero-home__title { + align-items: flex-start !important; + text-align: left !important; + margin-inline: 0 !important; +} + +.home-page__hero .hero-home__title, +.home-page__hero .hero-home__description, +.home-page__hero .hero-home__note { + text-align: left !important; + margin-inline: 0 !important; +} + +.home-page__hero .hero-home__eyebrow, +.home-page__hero .hero-home__actions, +.home-page__hero .hero-home__note, +.home-page__hero .hero-home__highlights { + justify-content: flex-start !important; + margin-inline: 0 !important; +} \ No newline at end of file diff --git a/assets/css/zzz-num-strip.css b/assets/css/zzz-num-strip.css new file mode 100644 index 00000000..5ceab8c5 --- /dev/null +++ b/assets/css/zzz-num-strip.css @@ -0,0 +1,597 @@ +/* Numbered feature strips — same layout as Contribute channels (01 / title / text / link). + Loads after page CSS so mosaics, benefits, CoC principles, and privacy points share one pattern. */ + +/* ── Strip containers ── */ +.contribute-channels__strip, +.openms-lib-about__mosaic, +.openms-lib-about__benefits, +.coc-overview__principles, +.privacy-overview__list, +.openms-lib-page--sponsor-us .openms-lib-about__mosaic, +.openms-lib-page--research-partnerships .rp-include__mosaic, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic, +.openms-lib-page--webapps-pro .openms-lib-about__mosaic, +.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, +.openms-lib-page--openms-lib .openms-lib-about__mosaic, +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits, +.openms-lib-page--code-of-conduct .coc-overview__principles, +.openms-lib-page--privacy .privacy-overview__list { + display: grid; + gap: 0; + width: 100%; + max-width: 100%; + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid var(--openms-num-strip-border); + border-bottom: 1px solid var(--openms-num-strip-border); + box-sizing: border-box; + align-items: stretch; + justify-content: stretch; +} + +.contribute-channels__strip, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic, +.openms-lib-page--privacy .privacy-overview__list { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.openms-lib-page--sponsor-us .openms-lib-about__mosaic, +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-about__mosaic:not(.rp-include__mosaic) { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.contribute-channel:hover, +.contribute-channel:focus-within { + background: var(--openms-num-strip-hover-bg) !important; + margin: 0 !important; + transform: none !important; + box-shadow: none !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; +} + +/* Sponsor-us / Governance Structure — card mosaics, no strip hairlines */ +.openms-lib-page--sponsor-us .openms-lib-about__mosaic, +.openms-lib-page--governance #governance-bodies .openms-lib-about__mosaic { + border-top: none; + border-bottom: none; +} + +.openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__mosaic.retreat-highlights__mosaic, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; +} + +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits, +.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +/* OpenMS-lib Overview — vertical column lines only (no outer box / top-bottom strip) */ +.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + .openms-lib-about--benefits + .openms-lib-about__benefits { + border-top: none !important; + border-bottom: none !important; + border-left: none !important; + border-right: none !important; + border-radius: 0 !important; + background: transparent !important; + padding: 0 !important; +} + +.openms-lib-page--code-of-conduct .coc-overview__principles, +.openms-lib-page--research-partnerships .rp-include__mosaic { + grid-template-columns: repeat(5, minmax(0, 1fr)); +} + +/* Research Partnerships — five across on desktop; wraps below */ +.openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic, +.openms-lib-page--research-partnerships .rp-include__mosaic { + display: grid !important; + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + gap: 0 !important; + border-top: 1px solid var(--openms-num-strip-border); + border-bottom: 1px solid var(--openms-num-strip-border); +} + +/* WebApps Features — keep one row of five */ +.openms-lib-page--webapps-pro .openms-lib-about__mosaic { + display: grid !important; + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + gap: 0 !important; + border-top: 1px solid var(--openms-num-strip-border); + border-bottom: 1px solid var(--openms-num-strip-border); + background: color-mix(in srgb, var(--pro-band-soft, #f4f7fb) 88%, var(--openms-white)); +} + +/* Developer Retreat About — numbered strip, no white cards */ +.openms-lib-page--developer-retreat.openms-lib-page--openms-lib .retreat-highlights__mosaic, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 0 !important; + border-top: 1px solid var(--openms-num-strip-border); + border-bottom: 1px solid var(--openms-num-strip-border); +} + +/* pyOpenMS / pyopenms_viz Overview — one row of four numbered strip cards */ +.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic, +.openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic { + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + gap: 0 !important; + border-top: 1px solid var(--openms-num-strip-border); + border-bottom: 1px solid var(--openms-num-strip-border); +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile, +.openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile, +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile, +.openms-lib-page--developer-retreat.openms-lib-page--openms-lib .retreat-highlights__mosaic > .openms-lib-about__tile, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile, +.openms-lib-page--pyopenms-pro .openms-lib-about__tile, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__tile { + width: 100% !important; + height: 100% !important; + margin: 0 !important; + align-self: stretch !important; + justify-self: stretch !important; + border: none !important; + border-right: 1px solid var(--openms-num-strip-border) !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + transform: none !important; +} + +.openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:first-child, +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:first-child, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile:first-child, +.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic > .openms-lib-about__tile:first-child, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic > .openms-lib-about__tile:first-child { + padding-left: var(--openms-num-strip-pad-x) !important; +} + +.openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child, +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:last-child, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile:last-child, +.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child { + border-right: none !important; + padding-right: var(--openms-num-strip-pad-x) !important; +} + +.openms-lib-page--webapps-pro .openms-lib-about__tile:hover, +.openms-lib-page--webapps-pro .openms-lib-about__tile:focus-within, +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:hover, +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:focus-within, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile:hover, +.openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile:focus-within, +.openms-lib-page--pyopenms-pro .openms-lib-about__tile:hover, +.openms-lib-page--pyopenms-pro .openms-lib-about__tile:focus-within, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__tile:hover, +.openms-lib-page--pyopenms-viz-pro .openms-lib-about__tile:focus-within { + background: var(--openms-num-strip-hover-bg) !important; + margin: 0 !important; + transform: none !important; + box-shadow: none !important; +} + +.openms-lib-page--privacy .privacy-overview__list { + max-width: none; + margin-inline: 0; +} + +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile, +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(4), +.openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(5) { + grid-column: auto; +} + +/* Two-column strips — end-of-row + second-row rules */ +.openms-lib-page--sponsor-us .openms-lib-about__tile:nth-child(2n), +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-about__mosaic:not(.rp-include__mosaic) > .openms-lib-about__tile:nth-child(2n) { + border-right: none; +} + +.openms-lib-page--sponsor-us .openms-lib-about__tile:nth-child(n + 3), +.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro) .openms-lib-about__mosaic:not(.rp-include__mosaic) > .openms-lib-about__tile:nth-child(n + 3) { + border-top: 1px solid var(--openms-num-strip-border); +} + +/* ── Strip items ── */ +.contribute-channel, +.openms-lib-about__tile, +.openms-lib-about__benefit, +.coc-principle, +.privacy-overview__item, +.openms-lib-page--sponsor-us .openms-lib-about__tile, +.openms-lib-page--research-partnerships .openms-lib-about__tile, +.openms-lib-page--developer-retreat .openms-lib-about__tile, +.openms-lib-page--webapps-pro .openms-lib-about__tile, +.openms-lib-page--pyopenms-pro .openms-lib-about__tile, +.openms-lib-page--openms-lib .openms-lib-about__tile, +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit, +.openms-lib-page--code-of-conduct .coc-principle, +.openms-lib-page--privacy .privacy-overview__item { + position: relative; + display: grid; + gap: 0.1rem; + align-content: start; + align-items: start; + justify-items: start; + text-align: left; + flex: none; + min-width: 0; + max-width: none; + min-height: 0; + margin: 0; + padding: var(--openms-num-strip-pad-y) var(--openms-num-strip-pad-x); + border: none; + border-right: 1px solid var(--openms-num-strip-border); + border-radius: 0; + background: transparent; + box-shadow: none; + overflow: visible; + transition: background-color 0.22s ease; + transform: none; +} + +/* First column — a bit more inset so 01 / title / text clear the strip edge */ +@media (min-width: 961px) { + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:first-child { + padding-left: clamp(1.35rem, 3.25vw, 2.15rem); + } +} + +.contribute-channel:last-child, +.openms-lib-about__mosaic > .openms-lib-about__tile:last-child, +.openms-lib-about__benefits > .openms-lib-about__benefit:last-child, +.coc-overview__principles > .coc-principle:last-child, +.privacy-overview__list > .privacy-overview__item:last-child { + border-right: none; +} + +.contribute-channel:hover, +.contribute-channel:focus-within, +.openms-lib-about__tile:hover, +.openms-lib-about__tile:focus-within, +.openms-lib-about__benefit:hover, +.openms-lib-about__benefit:focus-within, +.coc-principle:hover, +.coc-principle:focus-within, +.privacy-overview__item:hover, +.openms-lib-page--sponsor-us .openms-lib-about__tile:hover, +.openms-lib-page--sponsor-us .openms-lib-about__tile:focus-within, +.openms-lib-page--research-partnerships .openms-lib-about__tile:hover, +.openms-lib-page--research-partnerships .openms-lib-about__tile:focus-within, +.openms-lib-page--developer-retreat .openms-lib-about__tile:hover, +.openms-lib-page--developer-retreat .openms-lib-about__tile:focus-within, +.openms-lib-page--webapps-pro .openms-lib-about__tile:hover, +.openms-lib-page--webapps-pro .openms-lib-about__tile:focus-within, +.openms-lib-page--pyopenms-pro .openms-lib-about__tile:hover, +.openms-lib-page--pyopenms-pro .openms-lib-about__tile:focus-within, +.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-about--benefits .openms-lib-about__benefit:hover, +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:focus-within { + background: var(--openms-num-strip-hover-bg); + border-color: var(--openms-num-strip-border); + border-right-color: var(--openms-num-strip-border); + box-shadow: none; + transform: none; +} + +.contribute-channel:last-child:hover, +.contribute-channel:last-child:focus-within, +.openms-lib-about__mosaic > .openms-lib-about__tile:last-child:hover, +.openms-lib-about__mosaic > .openms-lib-about__tile:last-child:focus-within { + border-right-color: transparent; +} + +/* Privacy was a two-column row (num | text) — stack like channels */ +.openms-lib-page--privacy .privacy-overview__item { + grid-template-columns: minmax(0, 1fr); +} + +.openms-lib-page--code-of-conduct .coc-principle__body { + display: grid; + gap: 0.35rem; + min-width: 0; +} + +/* Titles / text / links — channel hierarchy */ +.openms-lib-about__tile-title, +.openms-lib-about__benefit-title, +.coc-principle__title, +.contribute-channel__title { + margin: 0 0 0.5rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-card-title-size) !important; + font-weight: var(--openms-card-title-weight, 700); + line-height: 1.3; + color: var(--openms-card-title-color, var(--pro-card-title, rgba(var(--openms-dark-rgb), 0.82))) !important; +} + +.coc-principle__title { + margin: 0; +} + +.openms-lib-about__tile-text, +.openms-lib-about__benefit-text, +.coc-principle__text, +.contribute-channel__text, +.privacy-overview__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-navy-rgb), 0.68); + max-width: none; +} + +.openms-lib-about__tile-link, +.contribute-channel__link { + 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-navy) !important; + text-decoration: none !important; + transition: gap 0.22s ease, color 0.22s ease; +} + +.openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-about__tile:focus-within .openms-lib-about__tile-link, +.contribute-channel:hover .contribute-channel__link, +.contribute-channel:focus-within .contribute-channel__link { + gap: 0.5rem; + color: var(--openms-blue) !important; +} + +/* Force shared number size / color over older page shrinks */ +.contribute-channel__index, +.openms-lib-about__num, +.openms-lib-about__benefit-num, +.openms-lib-about__list-num, +.coc-principle__num, +.privacy-overview__num, +.home-pathways__step-num, +.openms-step__index, +.openms-lib-list__index, +.governance-note__index, +.coc-summary__num, +.webapps-archived__notice-index { + display: block !important; + font-size: var(--openms-step-num-size) !important; + font-weight: 800 !important; + line-height: 1 !important; + letter-spacing: -0.04em !important; + color: var(--openms-step-num-color) !important; + -webkit-text-fill-color: var(--openms-step-num-color) !important; + background: transparent !important; + border: none !important; + margin: 0 0 -0.18em !important; +} + +.contribute-channel:hover .contribute-channel__index, +.contribute-channel:focus-within .contribute-channel__index, +.openms-lib-about__tile:hover .openms-lib-about__num, +.openms-lib-about__tile:focus-within .openms-lib-about__num, +.openms-lib-about__benefit:hover .openms-lib-about__benefit-num, +.openms-lib-about__benefit:focus-within .openms-lib-about__benefit-num, +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:hover .openms-lib-about__benefit-num, +.openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:focus-within .openms-lib-about__benefit-num, +.coc-principle:hover .coc-principle__num, +.coc-principle:focus-within .coc-principle__num, +.privacy-overview__item:hover .privacy-overview__num, +.home-pathways__step:hover .home-pathways__step-num, +.home-pathways__step:focus-within .home-pathways__step-num { + color: var(--openms-step-num-color-hover) !important; + -webkit-text-fill-color: var(--openms-step-num-color-hover) !important; +} + +/* ── Responsive: stack with horizontal rules ── */ +@media (max-width: 1100px) { + .openms-lib-page--code-of-conduct .coc-overview__principles, + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .openms-lib-page--code-of-conduct .coc-principle:nth-child(3n), + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:nth-child(3n) { + border-right: none; + } + + .openms-lib-page--code-of-conduct .coc-principle:nth-child(n + 4), + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:nth-child(n + 4) { + border-top: 1px solid var(--openms-num-strip-border); + } +} + +@media (max-width: 900px) { + .contribute-channels__strip, + .openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__mosaic.retreat-highlights__mosaic, + .openms-lib-page--developer-retreat.openms-lib-page--openms-lib .retreat-highlights__mosaic, + .openms-lib-page--developer-retreat .retreat-highlights__mosaic, + .openms-lib-page--privacy .privacy-overview__list { + grid-template-columns: minmax(0, 1fr) !important; + } + + .contribute-channel, + .openms-lib-page--developer-retreat .openms-lib-about__tile, + .openms-lib-page--privacy .privacy-overview__item { + border-right: none; + border-bottom: 1px solid var(--openms-num-strip-border); + } + + .contribute-channel:last-child, + .openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile:last-child, + .openms-lib-page--privacy .privacy-overview__list > .privacy-overview__item:last-child { + border-bottom: none; + } + + /* WebApps Features / Research Partnerships — wrap to 3 + 2 before stacking */ + .openms-lib-page--webapps-pro .openms-lib-about__mosaic, + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic, + .openms-lib-page--research-partnerships .rp-include__mosaic { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .openms-lib-page--webapps-pro .openms-lib-about__tile, + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile, + .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile { + border-right: 1px solid var(--openms-num-strip-border) !important; + border-bottom: none !important; + padding: clamp(1rem, 2.5vw, 1.35rem) clamp(0.85rem, 2.2vw, 1.15rem); + } + + .openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:nth-child(3n), + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile:nth-child(3n), + .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(3n) { + border-right: none !important; + } + + .openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:nth-child(n + 4), + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile:nth-child(n + 4), + .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(n + 4) { + border-top: 1px solid var(--openms-num-strip-border); + } + + .openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child, + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile:last-child, + .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:last-child { + border-right: none !important; + } + + /* pyOpenMS / viz overview: keep a 2×2 before stacking */ + .openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, + .openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .openms-lib-page--pyopenms-pro .openms-lib-about__tile, + .openms-lib-page--pyopenms-viz-pro .openms-lib-about__tile { + border-right: 1px solid var(--openms-num-strip-border) !important; + border-bottom: none !important; + } + + .openms-lib-page--pyopenms-pro .openms-lib-about__mosaic > .openms-lib-about__tile:nth-child(2n), + .openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic > .openms-lib-about__tile:nth-child(2n) { + border-right: none !important; + } + + .openms-lib-page--pyopenms-pro .openms-lib-about__mosaic > .openms-lib-about__tile:nth-child(n + 3), + .openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic > .openms-lib-about__tile:nth-child(n + 3) { + border-top: 1px solid var(--openms-num-strip-border); + } +} + +@media (max-width: 720px) { + .contribute-channels__strip, + .openms-lib-about__mosaic, + .openms-lib-about__benefits, + .coc-overview__principles, + .privacy-overview__list, + .openms-lib-page--sponsor-us .openms-lib-about__mosaic, + .openms-lib-page--governance #governance-bodies .openms-lib-about__mosaic, + .openms-lib-page--openms-lib .openms-lib-about__mosaic, + .openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, + .openms-lib-page--openms-lib.openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, + .openms-lib-page--code-of-conduct .coc-overview__principles { + grid-template-columns: 1fr !important; + } + + /* Overview (What is OpenMS?) — keep 2×2 on phones */ + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + /* WebApps Features / Research Partnerships — stack full-width on phones */ + .openms-lib-page--webapps-pro .openms-lib-about__mosaic, + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic, + .openms-lib-page--research-partnerships .rp-include__mosaic { + grid-template-columns: 1fr !important; + } + + .openms-lib-page--webapps-pro .openms-lib-about__tile, + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile, + .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile { + border-right: none !important; + border-bottom: 1px solid var(--openms-num-strip-border) !important; + border-top: none !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + padding: 0.7rem clamp(0.85rem, 3.4vw, 1.1rem) !important; + gap: 0.35rem !important; + background: transparent !important; + box-shadow: none !important; + } + + .openms-lib-page--webapps-pro .openms-lib-about__num, + .openms-lib-page--research-partnerships .rp-include__mosaic .openms-lib-about__num { + margin-bottom: 0.1rem !important; + } + + .openms-lib-page--webapps-pro .openms-lib-about__mosaic > .openms-lib-about__tile:last-child, + .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile:last-child, + .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:last-child { + border-right: none !important; + border-bottom: none !important; + } + + .contribute-channel, + .openms-lib-about__tile, + .openms-lib-about__benefit, + .coc-principle, + .privacy-overview__item { + border-right: none !important; + border-bottom: 1px solid var(--openms-num-strip-border); + /* Match mobile card gutters (was 0.15rem — flush against the strip edge) */ + padding-inline: clamp(0.85rem, 3.4vw, 1.1rem); + align-items: start; + text-align: left; + justify-items: start; + } + + /* Overview (What is OpenMS?): no divider lines between items on phones */ + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits, + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit, + .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:last-child { + border: none !important; + border-top: none !important; + border-right: none !important; + border-bottom: none !important; + border-left: none !important; + } + + .contribute-channel:last-child, + .openms-lib-about__mosaic > .openms-lib-about__tile:last-child, + .openms-lib-about__benefits > .openms-lib-about__benefit:last-child, + .coc-overview__principles > .coc-principle:last-child, + .privacy-overview__list > .privacy-overview__item:last-child { + border-bottom: none; + } + + .openms-lib-about__tile-title, + .openms-lib-about__benefit-title, + .coc-principle__title, + .openms-lib-about__tile-text, + .openms-lib-about__benefit-text, + .coc-principle__text, + .privacy-overview__text { + text-align: left; + } +} diff --git a/assets/css/zzzz-form-embeds.css b/assets/css/zzzz-form-embeds.css new file mode 100644 index 00000000..249dc8a9 --- /dev/null +++ b/assets/css/zzzz-form-embeds.css @@ -0,0 +1,222 @@ +/* Form embeds (Tally / Zeffy) — never clip; let the page scroll. + Loads last (zzzz-*) so it beats page shells and pro overrides. + + Causes: + 1) .openms-lib-page / __body use overflow-x: clip → overflow-y computes to auto + 2) .openms-lib-page--hub .openms-lib-page__anchor uses overflow: hidden (for reveal) + 3) Form cards / iframes used overflow: hidden + height: auto + All of that breaks Tally iframe-resizer and can clip tall embeds. */ + +.openms-lib-page--contact, +.openms-lib-page--fellowship, +.openms-lib-page--services-support, +.openms-lib-page--research-partnerships, +.openms-lib-page--donate, +.openms-lib-page--contact, +.openms-lib-page--contact .openms-lib-page__body, +.openms-lib-page--contact .openms-lib-page__outro, +.openms-lib-page--fellowsh +.openms-lib-page--fellowship .openms-lib-page__body, +.openms-lib-page--fellowship .openms-lib-page__outro, +.openms-lib-page--services-support +.openms-lib-page--services-support .openms-lib-page__body, +.openms-lib-page--services-support .openms-lib-page__outro, +.openms-lib-page--research-partnerships +.openms-lib-page--research-partnerships .openms-lib-page__body, +.openms-lib-page--research-partnerships .openms-lib-page__outro, +.openms-lib-page--donate .openms-lib-page__body, +.openms-lib-page--donate .openms-lib-page__outro, +.openms-lib-page--contact .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--fellowship .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--services-support .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--donate .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--contact .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--fellowship .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--services-support .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--hub.openms-lib-page--donate .openms-lib-page__body > .openms-lib-page__anchor { + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; + max-height: none; +} + +/* Wrappers around embeds */ +.contact-page__form-card, +.contact-page__form-body, +.contact-application__form, +.fellowship-page__form-body, +.services-page__form, +.services-page__form-body, +.services-support-application__form, +.rp-application__form, +.donate-application__form, +.donate-page__embed, +.openms-lib-page--contact .contact-application__form, +.openms-lib-page--contact .contact-page__form-body, +.openms-lib-page--fellowship .fellowship-page__form-body, +.openms-lib-page--services-support .services-support-application__form, +.openms-lib-page--services-support .services-page__form-body, +.openms-lib-page--research-partnerships .rp-application__form, +.openms-lib-page--donate .donate-application__form, +.openms-lib-page--donate .donate-page__embed { + overflow: visible !important; + max-height: none !important; + height: auto; +} + +/* Fellowship — clip Tally chrome; keep body/iframe measurable */ +.openms-lib-page--fellowship + +.fellowship-page__form-card { + overflow: hidden !important; + max-height: none !important; + height: auto; +} + +/* Grid/flex children must not shrink-wrap the iframe away */ +.fellowship-page__form-body, +.openms-lib-page--fellowship .fellowship-page__form-body { + min-height: auto; +} + +/* Iframes: tall floor; allow Tally/Zeffy to set height via attr/inline style */ +.contact-page__tally-iframe, +.fellowship-page__tally-iframe, +.services-page__tally-iframe, +.rp-application__tally-iframe, +.donate-page__zeffy-iframe, +.openms-lib-page--contact .contact-page__tally-iframe, +.openms-lib-page--fellowship .fellowship-page__tally-iframe, +.openms-lib-page--services-support .services-page__tally-iframe, +.openms-lib-page--research-partnerships .rp-application__tally-iframe, +.openms-lib-page--donate .donate-page__zeffy-iframe { + display: block; + width: 100%; + max-width: 100%; + max-height: none !important; + overflow: visible !important; + border: 0; + background: transparent; +} + +.contact-page__tally-iframe, +.openms-lib-page--contact .contact-page__tally-iframe { + /* Soft floor until Tally dynamicHeight reports the real size */ + min-height: 24rem; + height: auto; +} + +.fellowship-page__tally-iframe, +.openms-lib-page--fellowship .fellowship-page__tally-iframe { + /* Soft floor until Tally dynamicHeight reports the real size */ + min-height: 800px; + height: auto; +} + +.services-page__tally-iframe, +.openms-lib-page--services-support .services-page__tally-iframe { + /* No tall floor — Tally dynamicHeight sets the real height */ + min-height: 0 !important; +} + +.rp-application__tally-iframe, +.openms-lib-page--research-partnerships .rp-application__tally-iframe { + /* No tall floor — Tally dynamicHeight sets the real height */ + min-height: 0 !important; +} + +.donate-page__zeffy-iframe, +.openms-lib-page--donate .donate-page__zeffy-iframe { + min-height: 52rem; +} + +@media (max-width: 720px) { + .donate-page__zeffy-iframe, + .openms-lib-page--donate .donate-page__zeffy-iframe { + min-height: 72rem; + } + + /* Soft floor on phones; Tally dynamicHeight sets the real height. */ + .contact-page__tally-iframe, + .openms-lib-page--contact .contact-page__tally-iframe { + min-height: 32rem !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + /* Fellowship Apply form stacks on phones (~1424px content). */ + .fellowship-page__tally-iframe, + .openms-lib-page--fellowship .fellowship-page__tally-iframe { + min-height: 900px !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + /* Match Message + form to other mobile section width (no nested card pad) */ + .openms-lib-page--contact #contact-form .openms-lib-resources__head, + .openms-lib-page--contact #contact-form .openms-lib-resources__lead, + .openms-lib-page--contact .contact-application__form, + .openms-lib-page--contact .contact-page__form-body, + .contact-page__form-body { + width: 100% !important; + max-width: 100% !important; + margin-inline: 0 !important; + box-sizing: border-box; + } + + .openms-lib-page--contact .contact-application__form, + .openms-lib-page--contact .contact-page__form-body, + .contact-page__form-body { + padding: 0 !important; + } + + .openms-lib-page--contact .contact-page__tally-iframe, + .contact-page__tally-iframe, + .openms-lib-page--fellowship .fellowship-page__tally-iframe, + .fellowship-page__tally-iframe { + width: 100% !important; + max-width: 100% !important; + } + + .openms-lib-page--fellowship #fellowship-application .fellowship-application__head, + .openms-lib-page--fellowship #fellowship-application .openms-lib-resources__lead, + .openms-lib-page--fellowship + .openms-lib-page--fellowship .fellowship-page__form-body, + .fellowship-page__form-body { + width: 100% !important; + max-width: 100% !important; + margin-inline: 0 !important; + box-sizing: border-box; + } + + .openms-lib-page--fellowship .fellowship-page__form-body, + .fellowship-page__form-body { + padding: 0 !important; + overflow: visible !important; + max-height: none !important; + } + + .openms-lib-page--fellowship { + padding: 0 !important; + overflow: hidden !important; + max-height: none !important; + } + + .contact-page__tally-iframe, + .fellowship-page__tally-iframe, + .services-page__tally-iframe, + .rp-application__tally-iframe, + .donate-page__zeffy-iframe, + .openms-lib-page--contact .contact-page__tally-iframe, + .openms-lib-page--fellowship .fellowship-page__tally-iframe, + .openms-lib-page--services-support .services-page__tally-iframe, + .openms-lib-page--research-partnerships .rp-application__tally-iframe, + .openms-lib-page--donate .donate-page__zeffy-iframe { + max-height: none !important; + overflow: visible !important; + } +} diff --git a/assets/css/zzzz-mobile-gutters.css b/assets/css/zzzz-mobile-gutters.css new file mode 100644 index 00000000..8feb80a9 --- /dev/null +++ b/assets/css/zzzz-mobile-gutters.css @@ -0,0 +1,264 @@ +/* Tighter side gutters on phones so components use more of the screen. + Two things were shrinking content at 375px: + 1. the shared gutter token resolved to 1.35rem (21.6px) per side, and + 2. homepage sections nest a padded wrapper inside an already-padded block, + doubling that to ~43px per side (cards were 289px of a 375px screen). + Filename sorts last; !important is needed to beat page-scoped selectors. */ + +@media (max-width: 720px) { + :root, + .openms-lib-page, + .home-page, + [class$="-page-layout"], + .community-calendar-layout { + --openms-page-gutter: max(0.9rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); + --olib-pad-x: var(--openms-page-gutter); + --pro-pad: var(--openms-page-gutter); + --home-pad-x: var(--openms-page-gutter); + --openms-page-inline: var(--openms-page-gutter); + /* Navbar runs tighter than the content gutter — logo and burger sit close + to the screen edges, with tap padding coming from the controls instead */ + --openms-navbar-container-pad-inline-mobile: 0.5rem; + } + + /* Section wrappers inside an already-padded homepage block. Descendant, not + child: some blocks wrap the section in an extra unpadded div. */ + .home-page__block .webapps-featured, + .home-page__block .webapps-affiliates, + .home-page__block .webapps-archived, + .home-page__block .home-metrics, + .home-page__block .uni-partners, + .home-page__block .keyfeatures-modern, + .home-page__block .ecosystem-home, + .home-page__block .community-home, + .home-page__block .community-news-events, + .home-page__block .community-events-home, + .home-page__block .contact-home, + .home-page__block .contact-area, + .home-page__block .hero-sponsors, + .home-page__block .trusted-by, + .home-page__block .home-page__container { + padding-inline: 0 !important; + max-width: 100% !important; + } + + /* ...and their inner rails, which add the gutter a second time */ + .home-page__block .webapps-featured__inner, + .home-page__block .webapps-affiliates__inner, + .home-page__block .webapps-archived__inner, + .home-page__block .home-metrics__inner, + .home-page__block .uni-partners__inner, + .home-page__block .keyfeatures-modern__inner, + .home-page__block .ecosystem-home__inner, + .home-page__block .community-home__inner, + .home-page__block .community-news-events__inner, + .home-page__block .community-events-home__inner, + .home-page__block .contact-home__inner, + .home-page__block .contact-area__inner, + .home-page__block .hero-sponsors__inner, + .home-page__block .trusted-by__inner, + .home-page__block .home-section-head { + padding-inline: 0 !important; + width: 100% !important; + max-width: 100% !important; + margin-inline: 0 !important; + } + + /* Inner-page sections do the same nesting inside .openms-lib-block */ + .openms-lib-page .openms-lib-block > .openms-lib-block__inner, + .openms-lib-page .webapps-featured__inner, + .openms-lib-page .webapps-affiliates__inner, + .openms-lib-page .webapps-archived__inner, + .openms-lib-page .uni-partners__inner, + [class$="-page-layout"] .uni-partners__inner, + /* Calendar / News: block sits inside an already-padded anchor (no __inner) */ + .openms-lib-page--calendar .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block, + .openms-lib-page--calendar .community-calendar-block, + .openms-lib-page--news .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block, + .openms-lib-page--news .news-page-block { + padding-inline: 0 !important; + max-width: 100% !important; + width: 100% !important; + } + + /* Card interiors: trim the inset so text gets the width back. + Catalog Featured Apps cards keep padding:0 — the white surface is the + full-bleed shell; media/content already own their own insets. + Do not pad .community-events-home__card — it's only a list wrapper; the + visible surface is .community-events-home__card-link (already padded). */ + .about-sponsor-card, + .contact-home__card, + .contact-page__support-card, + .contribute-channel, + .contribute-way, + .coc-principle, + .developer-retreat-highlights__card, + .donate-impact-card, + .ecosystem-home__card, + .events-past-card, + .fellowship-project-card, + .governance-card, + .home-metrics__card, + .keyfeatures-modern__topic-card, + .leadership-card, + .openms-lib-about__benefit, + .openms-lib-about__tile, + .openms-lib-developers__card, + .openms-lib-resource-card, + .openms-lib-resources__explore-card, + .openms-lib-topp-split__card, + .privacy-overview__item, + .publications-cite-card, + .sponsor-tier, + .sponsor-why__card, + .webapps-project-card:not(.webapps-project-card--catalog), + .webapps-project-detail-card, + .webapps-archived-entry { + padding-inline: clamp(0.85rem, 3.4vw, 1.1rem) !important; + } + + /* Calendar / events / news: wrappers must stay full-bleed so cards match titles */ + .community-events-home__card, + .news-home__card, + .openms-lib-page--calendar .community-events-home__card, + .community-calendar-layout .community-events-home__card, + .openms-lib-page--news .community-events-home__card, + .openms-lib-page--news .news-home__card { + padding-inline: 0 !important; + width: 100% !important; + max-width: 100% !important; + } + + .home-page__block--projects .webapps-project-card--catalog, + .webapps-project-card--catalog { + padding-inline: 0 !important; + width: 100% !important; + max-width: 100% !important; + } + + /* Footer: gutter on the shell, content rail matches --pro-max */ + .footer-redesign { + padding-inline: var(--openms-page-gutter) !important; + } + + .footer-inner, + .footer-bottom, + .footer-redesign .footer-inner, + .footer-redesign .footer-bottom { + max-width: var(--pro-max) !important; + padding-inline: 0 !important; + } + + /* Logo link carries its own inline padding on top of the bar's — drop it so + the wordmark starts at the bar edge (vertical tap area is unchanged) */ + .site-header #nav.navbar.is-fresh .navbar-brand > .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-brand > .navbar-item { + padding-inline: 0 !important; + } + + /* Community band is a full-bleed photo section: let it run edge to edge and + inset the copy instead. Must come after the generic rules above. */ + .home-page__block--community { + padding-inline: 0 !important; + } + + .home-page__block--community .community-home { + width: 100% !important; + max-width: 100% !important; + border-radius: 0 !important; + } + + .home-page__block--community .community-home__inner { + padding-inline: clamp(1.15rem, 4.5vw, 1.6rem) !important; + width: 100% !important; + max-width: 100% !important; + } + + /* Partner logo wall: edge-to-edge on mobile for a wider band */ + .home-page__block--partners { + padding-inline: 0 !important; + } + + .home-page__block--partners .uni-partners, + .home-page__block--partners .uni-partners__inner { + width: 100% !important; + max-width: 100% !important; + padding-inline: 0 !important; + } + + .home-page__block--partners .uni-partners__header, + .home-page__block--partners .uni-partners--home .uni-partners__header--trust { + padding-inline: 0.5rem !important; + max-width: none !important; + width: 100% !important; + } + + .home-page__block--partners .uni-partners--home .uni-partners__header-main { + max-width: none !important; + width: 100% !important; + } + + .home-page__block--partners .uni-partners--home .uni-partners__marquees, + .home-page__block--partners .uni-partners--home .uni-partners__marquee { + display: none !important; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; + max-width: 100% !important; + margin-top: clamp(1.15rem, 2.5vh, 1.6rem) !important; + padding-inline: 0 !important; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static .uni-partners__item { + display: flex !important; + height: 3.75rem !important; + min-height: 3.75rem !important; + max-height: 3.75rem !important; + padding: 0.35rem 0.4rem !important; + width: 100% !important; + max-width: 100% !important; + justify-self: stretch; + } + + .home-page__block--partners .uni-partners--home .uni-partners__static .uni-partners__item img { + display: block !important; + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + margin-inline: auto !important; + object-fit: contain !important; + } + + /* Announcement bar and hero were on their own gutters — line them up with + the navbar logo and card edges */ + .news-banner { + --news-banner-max: 100%; + } + + .news-banner__inner { + --news-banner-pad-x: var(--openms-page-gutter); + } + + .home-page__hero .hero-home__main, + .hero-home__main { + padding-inline: var(--openms-page-gutter) !important; + } + + /* WebApps Features strip — compact stacked tiles (no equal-card shell) */ + .openms-lib-page--webapps-pro .openms-lib-about__tile { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + padding-block: 0.65rem !important; + gap: 0.3rem !important; + overflow: visible !important; + } + + .openms-lib-page--webapps-pro .openms-lib-about__num { + margin-bottom: 0 !important; + } +} diff --git a/assets/css/zzzz-openms-lib-solution.css b/assets/css/zzzz-openms-lib-solution.css new file mode 100644 index 00000000..2d28653f --- /dev/null +++ b/assets/css/zzzz-openms-lib-solution.css @@ -0,0 +1,2742 @@ +/* ========================================================================== + OpenMS-lib hub — solution-page layout (InOrder-inspired composition) + Scoped to .openms-lib-page--solution. Brand colors preserved. + ========================================================================== */ + +.openms-lib-page--solution.openms-lib-page--hub, +.openms-lib-page--solution.openms-lib-page--openms-lib { + --sol-radius: 1rem; + --sol-radius-lg: 1.25rem; + --sol-canvas: #f8f8f9; + --sol-soft: #f2f3f5; + --sol-dark-band: #122448; + --sol-dark: var(--openms-navy); + --sol-line: rgba(var(--openms-navy-rgb), 0.1); + --sol-lead-on-dark: #c7cae8; + /* Titles/body: gray-black. Eyebrows stay light blue. Blue only on CTAs/dots. */ + --sol-ink: var(--openms-dark); + --sol-title: rgba(var(--openms-dark-rgb), 0.92); + --sol-body: rgba(var(--openms-dark-rgb), 0.72); + --sol-muted: rgba(var(--openms-navy-rgb), 0.58); + --sol-eyebrow: rgba(var(--openms-blue-rgb), 0.72); + --sol-accent: var(--openms-blue); + /* One vertical rhythm for major bands; nested bands use the smaller step */ + --sol-section-y: clamp(3.5rem, 7vw, 5.25rem); + --sol-section-y-sm: clamp(2.5rem, 5vw, 3.5rem); + /* One stack for eyebrow → title → lead on every section */ + --sol-stack-eyebrow: var(--openms-stack-eyebrow, 12px); + --sol-stack-lead: var(--openms-stack-lead, 20px); + /* Match homepage hero title size */ + --openms-page-hero-title-size: clamp(1.65rem, 1.05rem + 2.6vw, 3.25rem); + overflow-x: clip; +} + +.openms-lib-page--solution .openms-lib-about__benefits > *, +.openms-lib-page--solution .openms-lib-topp-split__inner > *, +.openms-lib-page--solution .openms-lib-resources__explore-grid > *, +.openms-lib-page--solution .openms-lib-developers__cards-grid > *, +.openms-lib-page--solution .openms-lib-cite__inner > * { + min-width: 0; +} + +/* Top section labels match homepage “Community tools” */ +.openms-lib-page--solution .openms-lib-hero__eyebrow, +.openms-lib-page--solution .openms-lib-about__eyebrow, +.openms-lib-page--solution .openms-lib-topp-split__eyebrow, +.openms-lib-page--solution .openms-lib-resources__eyebrow, +.openms-lib-page--solution .openms-lib-block__eyebrow, +.openms-lib-page--solution .openms-lib-cite__eyebrow, +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__eyebrow, +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-block__eyebrow { + display: inline-flex !important; + align-items: center; + gap: 0.4rem; + font-family: var(--openms-font-body) !important; + font-size: 0.75rem !important; + font-weight: 650 !important; + letter-spacing: 0.16em !important; + line-height: 1.3 !important; + text-transform: uppercase !important; + color: var(--sol-eyebrow) !important; + -webkit-text-fill-color: var(--sol-eyebrow) !important; +} + +.openms-lib-page--solution .openms-lib-eyebrow-icon { + display: inline-flex; + line-height: 0; + opacity: 0.9; + color: inherit; +} + +.openms-lib-page--solution .openms-lib-eyebrow-icon svg { + display: block; + width: 0.875rem; + height: 0.875rem; +} + +/* No accent dots on section labels */ +.openms-lib-page--solution .openms-lib-hero__eyebrow::before, +.openms-lib-page--solution .openms-lib-about__eyebrow::before, +.openms-lib-page--solution .openms-lib-topp-split__eyebrow::before, +.openms-lib-page--solution .openms-lib-resources__eyebrow::before, +.openms-lib-page--solution .openms-lib-block__eyebrow::before, +.openms-lib-page--solution .openms-lib-cite__eyebrow::before { + content: none !important; + display: none !important; +} + +/* Section / card icons: translucent blue + larger */ +.openms-lib-page--solution .openms-lib-topp-split__nested-icon, +.openms-lib-page--solution .openms-lib-topp-split__nested-icon .fas, +.openms-lib-page--solution .openms-lib-topp-split__nested-icon .fab, +.openms-lib-page--solution .openms-lib-topp-split__nested-icon .svg-inline--fa, +.openms-lib-page--solution .openms-lib-topp-split__nested-icon .svg-inline--fa path, +.openms-lib-page--solution .openms-lib-resources__explore-icon, +.openms-lib-page--solution .openms-lib-resources__explore-icon .fas, +.openms-lib-page--solution .openms-lib-resources__explore-icon .fab, +.openms-lib-page--solution .openms-lib-resources__explore-icon .svg-inline--fa, +.openms-lib-page--solution .openms-lib-resources__explore-icon .svg-inline--fa path, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-icon, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-icon .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-icon .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-icon .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-icon .svg-inline--fa path { + color: rgba(var(--openms-blue-rgb), 0.42) !important; + fill: rgba(var(--openms-blue-rgb), 0.42) !important; + opacity: 1 !important; +} + +.openms-lib-page--solution .openms-lib-topp-split__nested-icon, +.openms-lib-page--solution .openms-lib-topp-split__nested-icon .svg-inline--fa, +.openms-lib-page--solution .openms-lib-resources__explore-icon, +.openms-lib-page--solution .openms-lib-resources__explore-icon .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-icon, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-icon .svg-inline--fa { + font-size: 1.85rem !important; + width: 1em !important; + height: 1em !important; +} + +.openms-lib-page--solution .openms-lib-resources__explore-card .openms-lib-resources__explore-link, +.openms-lib-page--solution .openms-lib-btn--ghost, +.openms-lib-page--solution a.openms-lib-btn--ghost { + color: var(--sol-ink) !important; + -webkit-text-fill-color: var(--sol-ink) !important; + border-color: rgba(var(--openms-navy-rgb), 0.28) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-link { + color: var(--openms-cta-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-cta-link, var(--openms-navy)) !important; +} + +.openms-lib-page--solution .openms-lib-resources__explore-card:hover .openms-lib-resources__explore-link, +.openms-lib-page--solution .openms-lib-btn--ghost:hover, +.openms-lib-page--solution .openms-lib-btn--ghost:focus-visible { + color: var(--sol-ink) !important; + -webkit-text-fill-color: var(--sol-ink) !important; + border-color: var(--sol-accent) !important; /* blue detail on btn border only */ + background: transparent !important; +} + +/* Primary CTAs: same filled blue as navbar “Partner with OpenMS” */ +.openms-lib-page--solution .openms-lib-btn--primary { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution .openms-lib-btn--primary:hover, +.openms-lib-page--solution .openms-lib-btn--primary:focus-visible { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; +} + +/* ── Unified titles: gray/black + uppercase ── */ +.openms-lib-page--solution .openms-lib-hero__title, +.openms-lib-page--solution .openms-lib-hero__accent, +.openms-lib-page--solution .openms-lib-about__title, +.openms-lib-page--solution .openms-lib-topp-split__title, +.openms-lib-page--solution .openms-lib-resources__title, +.openms-lib-page--solution .openms-lib-developers__title, +.openms-lib-page--solution .openms-lib-cite__title, +.openms-lib-page--solution .openms-lib-about__benefit-title, +.openms-lib-page--solution .openms-lib-topp-split__nested-title, +.openms-lib-page--solution .openms-lib-resources__explore-title, +.openms-lib-page--solution .openms-lib-resources__assist-title, +.openms-lib-page--solution .openms-lib-developers__card-title, +.openms-lib-page--solution .openms-lib-developers__card-title span, +.openms-lib-page--solution .publications-cite-card__title, +.openms-lib-page--solution .webapps-project-detail-card__name, +.openms-lib-page--solution .webapps-archived-entry__name, +.openms-lib-page--solution .webapps-archived__projects-title, +.openms-lib-page--solution .webapps-archived__notice-title { + font-family: var(--openms-font-heading) !important; + text-transform: uppercase !important; +} + +.openms-lib-page--solution .openms-lib-hero__title, +.openms-lib-page--solution .openms-lib-hero__accent, +.openms-lib-page--solution .openms-lib-about__title, +.openms-lib-page--solution .openms-lib-topp-split__title, +.openms-lib-page--solution .openms-lib-developers__title, +.openms-lib-page--solution .openms-lib-cite__title, +.openms-lib-page--solution .openms-lib-about__benefit-title, +.openms-lib-page--solution .openms-lib-topp-split__nested-title, +.openms-lib-page--solution .openms-lib-developers__card-title, +.openms-lib-page--solution .openms-lib-developers__card-title span, +.openms-lib-page--solution .publications-cite-card__title, +.openms-lib-page--solution .webapps-project-detail-card__name, +.openms-lib-page--solution .webapps-archived-entry__name, +.openms-lib-page--solution .webapps-archived__projects-title, +.openms-lib-page--solution .webapps-archived__notice-title { + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +/* Body / lead copy: gray */ +.openms-lib-page--solution .openms-lib-hero__lead, +.openms-lib-page--solution .openms-lib-about__lead, +.openms-lib-page--solution .openms-lib-topp-split__lead, +.openms-lib-page--solution .openms-lib-developers__lead, +.openms-lib-page--solution .openms-lib-cite__lead, +.openms-lib-page--solution .openms-lib-about__benefit-text, +.openms-lib-page--solution .openms-lib-topp-split__nested-text, +.openms-lib-page--solution .openms-lib-developers__card-subtitle, +.openms-lib-page--solution .publications-cite-card__meta, +.openms-lib-page--solution .publications-cite-card__meta *, +.openms-lib-page--solution .publications-cite-card__authors, +.openms-lib-page--solution .webapps-project-detail-card__text, +.openms-lib-page--solution .webapps-project-detail-card__maintainers, +.openms-lib-page--solution .webapps-archived-entry__text, +.openms-lib-page--solution .webapps-archived-entry__maintainers, +.openms-lib-page--solution .webapps-archived__notice-text, +.openms-lib-page--solution .webapps-catalog__contact { + color: var(--sol-body) !important; + -webkit-text-fill-color: var(--sol-body) !important; +} + +/* Section titles (h2) share one size/weight/tracking */ +.openms-lib-page--solution .openms-lib-about__title, +.openms-lib-page--solution .openms-lib-topp-split__title, +.openms-lib-page--solution .openms-lib-resources__title, +.openms-lib-page--solution .openms-lib-developers__title, +.openms-lib-page--solution .openms-lib-cite__title { + font-size: var(--openms-section-title-size) !important; + font-weight: 700 !important; + letter-spacing: -0.02em !important; + line-height: 1.2 !important; +} + +/* Eyebrow → title → paragraph: one stack on every section */ +.openms-lib-page--solution .openms-lib-hero__eyebrow, +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-hero__eyebrow, +.openms-lib-page--solution .openms-lib-about__eyebrow, +.openms-lib-page--solution .openms-lib-topp-split__eyebrow, +.openms-lib-page--solution .openms-lib-resources__eyebrow, +.openms-lib-page--solution .openms-lib-block__eyebrow, +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-block__eyebrow, +.openms-lib-page--solution .openms-lib-cite__eyebrow, +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__eyebrow { + margin: 0 0 var(--sol-stack-eyebrow) !important; + padding: 0 !important; +} + +.openms-lib-page--solution .openms-lib-hero__title, +.openms-lib-page--solution .openms-lib-about__title, +.openms-lib-page--solution .openms-lib-topp-split__title, +.openms-lib-page--solution .openms-lib-resources__title, +.openms-lib-page--solution #getting-started .openms-lib-resources__title, +.openms-lib-page--solution #examples .openms-lib-resources__title, +.openms-lib-page--solution .openms-lib-developers__title, +.openms-lib-page--solution .openms-lib-cite__title { + margin-top: 0 !important; + padding-top: 0 !important; +} + +.openms-lib-page--solution .openms-lib-hero__lead, +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-hero__lead, +.openms-lib-page--solution .openms-lib-about__lead, +.openms-lib-page--solution .openms-lib-topp-split__lead, +.openms-lib-page--solution .openms-lib-resources__lead, +.openms-lib-page--solution #getting-started .openms-lib-resources__lead, +.openms-lib-page--solution #examples .openms-lib-resources__lead, +.openms-lib-page--solution .openms-lib-developers__lead { + margin-top: var(--sol-stack-lead) !important; + padding-top: 0 !important; +} + +/* Page hero title: same face/size/tracking as the homepage H1 */ +.openms-lib-page--solution .openms-lib-hero__title, +.openms-lib-page--solution .openms-lib-hero__accent { + font-family: var(--openms-font-heading) !important; + font-size: var(--openms-page-hero-title-size) !important; + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight, 800)) !important; + letter-spacing: 0.015em !important; + line-height: 1.15 !important; +} + +/* Card / nested titles share one secondary size */ +.openms-lib-page--solution .openms-lib-about__benefit-title, +.openms-lib-page--solution .openms-lib-topp-split__nested-title, +.openms-lib-page--solution .openms-lib-resources__explore-title, +.openms-lib-page--solution .openms-lib-developers__card-title, +.openms-lib-page--solution .openms-lib-developers__card-title span, +.openms-lib-page--solution .publications-cite-card__title { + font-size: var(--openms-card-title-size) !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; + line-height: 1.3 !important; +} + +/* ── Hero: centered copy, no visual (no blue section bg) ── */ +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-page__intro, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution { + background: var(--sol-canvas, #f8f8f9) !important; + color: var(--sol-title); +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution { + padding-block: var(--sol-section-y) !important; + padding-inline: var(--openms-page-inline, 1.5rem); +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__panel, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__panel { + display: grid !important; + grid-template-columns: 1fr; + justify-items: center; + align-items: center; + width: 100%; + + margin-inline: auto; + background: transparent !important; + box-shadow: none !important; + border: none !important; + padding: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__content, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__content { + display: grid !important; + justify-items: center !important; + gap: 0; + max-width: min(100%, 42rem); + margin-inline: auto !important; + text-align: center !important; +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__eyebrow, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__eyebrow { + color: var(--sol-eyebrow) !important; + -webkit-text-fill-color: var(--sol-eyebrow) !important; + justify-content: center !important; + margin-bottom: var(--sol-stack-eyebrow) !important; +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__title, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__title, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__accent, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__accent, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__accent--warm, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__accent--warm { + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; + text-align: center !important; + text-transform: uppercase !important; + letter-spacing: 0.015em !important; +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__title::after, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__title::after { + display: none !important; +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__lead, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__lead { + margin-top: var(--sol-stack-lead) !important; + max-width: 36rem; + color: var(--sol-body) !important; + -webkit-text-fill-color: var(--sol-body) !important; + text-align: center !important; +} + +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__actions, +.openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__actions { + margin-top: 1.75rem !important; + justify-content: center !important; + gap: 0.75rem; +} + +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost, +.openms-lib-page--solution .openms-lib-hero--solution a.openms-lib-btn--ghost { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; +} + +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost .fab, +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost .fas, +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost .openms-lib-btn__label, +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost .svg-inline--fa { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: var(--openms-navy) !important; +} + +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost:hover, +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--solution .openms-lib-hero--solution .openms-lib-btn--ghost:active { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + background: rgba(var(--openms-navy-rgb), 0.08) !important; + background-color: rgba(var(--openms-navy-rgb), 0.08) !important; + border-color: rgba(var(--openms-navy-rgb), 0.78) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb), 0.18) !important; +} + +/* ── Overview: full-bleed solid band + numbered benefits ── */ +.openms-lib-page--solution #what-is-openms.openms-lib-page__anchor, +.openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms, +.openms-lib-page--solution.openms-lib-page--pyopenms-pro #what-is-openms, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro #what-is-openms, +.openms-lib-page--solution.openms-lib-page--webapps-pro #what-is-openms { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + padding-inline: 0 !important; + padding-block: 0 !important; + background: var(--sol-soft) !important; +} + +.openms-lib-page--solution #what-is-openms > .openms-lib-about { + padding-block: var(--sol-section-y) !important; + padding-inline: var(--openms-page-inline, 1.5rem) !important; + background: var(--sol-soft) !important; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__head { + max-width: min(100%, 40rem); + margin-bottom: 0.25rem; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__head:not(:has(.openms-lib-about__title)) { + margin-bottom: 0; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefits { + margin-top: 0; + border-top: none; + border-bottom: none; + padding-block: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-about--benefits .openms-lib-about__benefits { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit-stat { + display: none; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit-num { + display: block !important; + color: rgba(var(--openms-blue-rgb), 0.38) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.38) !important; + font-weight: 700; + letter-spacing: 0.04em; + margin: 0 0 -0.18em !important; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit { + gap: 0.1rem !important; + border-right: 1px solid var(--sol-line) !important; + padding-block: 0.35rem !important; + padding-inline: clamp(1.1rem, 2.4vw, 1.75rem) !important; + background: transparent !important; + box-shadow: none !important; + transform: none !important; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit:first-child { + padding-left: 0 !important; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit:last-child { + border-right: none !important; + padding-right: 0 !important; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit:hover, +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit:focus-within { + background: transparent !important; + box-shadow: none !important; + transform: none !important; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit-title { + margin: 0 0 0.35rem; +} + +.openms-lib-page--solution .openms-lib-about--benefits .openms-lib-about__benefit-text { + font-size: var(--openms-body-size) !important; + color: var(--sol-body); +} + +/* ── TOPP: media | copy + nested features ── */ +.openms-lib-page--solution #topp-tools > .openms-lib-topp-split, +.openms-lib-page--solution .openms-lib-topp-split--solution { + background: var(--sol-soft); + padding-block: var(--sol-section-y); + padding-inline: var(--openms-page-inline, 1.5rem); +} + +.openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__inner { + grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); + gap: clamp(1.75rem, 4vw, 3rem); + align-items: center; + max-width: var(--pro-max, 72rem); +} + +.openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__visual { + order: 1; +} + +.openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__copy { + order: 2; +} + +.openms-lib-page--solution .openms-lib-topp-split__visual-card--image { + display: block; + margin: 0; + padding: 0; + overflow: hidden; + border-radius: var(--sol-radius-lg); + background: var(--openms-white); + box-shadow: 0 1.25rem 2.5rem rgba(var(--openms-navy-rgb), 0.12); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.openms-lib-page--solution .openms-lib-topp-split__visual-img { + display: block; + width: 100%; + height: auto; + max-height: clamp(18rem, 38vw, 26rem); + object-fit: contain; + object-position: top center; + background: #f7f8fa; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-chrome { + display: flex; + align-items: center; + gap: 0.4rem; + padding: 0.85rem 1rem; + background: rgba(255, 255, 255, 0.06); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.openms-lib-page--solution .openms-lib-topp-split__term-chrome span { + width: 0.55rem; + height: 0.55rem; + border-radius: 50%; + background: rgba(255, 255, 255, 0.22); +} + +.openms-lib-page--solution .openms-lib-topp-split__term-chrome span:nth-child(1) { + background: #ff6b6b; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-chrome span:nth-child(2) { + background: #f6c344; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-chrome span:nth-child(3) { + background: #3dd68c; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-body { + display: grid; + align-content: start; + gap: 0.55rem; + padding: 1.15rem 1.25rem 1rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: clamp(0.78rem, 1.1vw, 0.88rem); + line-height: 1.45; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-line { + margin: 0; + color: rgba(255, 255, 255, 0.88); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-prompt { + color: rgba(255, 255, 255, 0.45); + margin-right: 0.35rem; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-line--out { + color: #8fe0b0; + padding-left: 1.1rem; +} + +.openms-lib-page--solution .openms-lib-topp-split__term-blink { + display: inline-block; + width: 0.55rem; + height: 1em; + margin-left: 0.1rem; + vertical-align: -0.15em; + background: rgba(255, 255, 255, 0.75); + animation: openms-topp-term-blink 1.1s steps(1) infinite; +} + +@keyframes openms-topp-term-blink { + 50% { opacity: 0; } +} + +.openms-lib-page--solution .openms-lib-topp-split__term-flow { + display: flex; + align-items: center; + justify-content: center; + gap: 0.55rem; + padding: 0.9rem 1rem; + background: rgba(255, 255, 255, 0.06); + border-top: 1px solid rgba(255, 255, 255, 0.1); + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.78); +} + +.openms-lib-page--solution .openms-lib-topp-split__term-flow span:first-child { + color: #fff; + box-shadow: inset 0 -2px 0 0 var(--sol-accent); +} + +.openms-lib-page--solution .openms-lib-topp-split__term-flow .fas { + font-size: 0.65rem; + color: rgba(255, 255, 255, 0.55); +} + +@media (prefers-reduced-motion: reduce) { + .openms-lib-page--solution .openms-lib-topp-split__term-blink { + animation: none; + } +} + +.openms-lib-page--solution .openms-lib-topp-split__copy { + display: grid; + gap: clamp(1.5rem, 3vw, 2rem); +} + +.openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__intro { + max-width: none; +} + +.openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__title { + white-space: normal !important; + overflow: visible !important; +} + +.openms-lib-page--solution .openms-lib-topp-split__nested { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1.25rem 1.5rem; +} + +.openms-lib-page--solution .openms-lib-topp-split__nested-item { + display: grid; + gap: 0.4rem; + align-content: start; +} + +.openms-lib-page--solution .openms-lib-topp-split__nested-icon { + color: rgba(var(--openms-blue-rgb), 0.42); + font-size: 1.85rem; + margin-bottom: 0.25rem; +} + +.openms-lib-page--solution .openms-lib-topp-split__nested-title { + margin: 0; +} + +.openms-lib-page--solution .openms-lib-topp-split__nested-text { + margin: 0; + font-size: var(--openms-body-size) !important; + line-height: 1.55; + color: var(--pro-text-muted, rgba(var(--openms-dark-rgb), 0.72)); +} + +/* Hide legacy TOPP card strip — features live in nested copy on solution layout */ +.openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__cards { + display: none !important; +} + +/* ── Get started: full-bleed dark band + recessed icon cards ── */ +.openms-lib-page--solution #getting-started.openms-lib-page__anchor, +.openms-lib-page--solution.openms-lib-page--openms-lib #getting-started { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + padding-inline: 0 !important; + padding-block: 0 !important; + background: transparent !important; + color: var(--sol-title); +} + +.openms-lib-page--solution #getting-started > .openms-lib-resources--explore { + background: transparent !important; + color: inherit; + width: 100%; + max-width: none; + margin-inline: 0; + padding: 0; +} + +/* Dark band only for Get started titles + cards */ +.openms-lib-page--solution #getting-started .openms-lib-resources__dark { + width: 100%; + color: var(--openms-white); + padding-block: var(--sol-section-y); + padding-inline: var(--openms-page-inline, 1.5rem); + background: var(--sol-dark-band, #122448) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__inner { + max-width: var(--pro-max, 72rem); + margin-inline: auto; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__head, +.openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__head, +.openms-lib-page--solution.openms-lib-page--webapps-pro #getting-started .openms-lib-resources--explore .openms-lib-resources__head { + display: grid !important; + justify-items: start !important; + max-width: min(100%, 40rem); + margin: 0 0 clamp(2rem, 4vw, 2.75rem) !important; + margin-inline: 0 !important; + text-align: left !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__eyebrow, +.openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__eyebrow, +.openms-lib-page--solution.openms-lib-page--webapps-pro #getting-started .openms-lib-resources--explore .openms-lib-resources__eyebrow { + justify-content: flex-start !important; + color: var(--openms-text-soft-on-dark, rgba(var(--openms-white-rgb), 0.65)) !important; + -webkit-text-fill-color: var(--openms-text-soft-on-dark, rgba(var(--openms-white-rgb), 0.65)) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__title, +.openms-lib-page--solution #getting-started .openms-lib-resources__lead, +.openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__title, +.openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__lead, +.openms-lib-page--solution.openms-lib-page--webapps-pro #getting-started .openms-lib-resources--explore .openms-lib-resources__title, +.openms-lib-page--solution.openms-lib-page--webapps-pro #getting-started .openms-lib-resources--explore .openms-lib-resources__lead { + text-align: left !important; + margin-inline: 0 !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__title, +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-title, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist-title { + text-transform: uppercase !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__title { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + font-size: var(--openms-section-title-size) !important; + line-height: 1.2 !important; + letter-spacing: -0.02em; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__lead { + color: rgba(255, 255, 255, 0.68) !important; + max-width: 36rem; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid, +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + display: grid !important; + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + gap: 0.85rem !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(4):last-child) { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) > * { + grid-column: auto !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-item { + border: none !important; + padding: 0 !important; + background: transparent !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-card { + display: grid !important; + align-content: start; + gap: 0.75rem; + height: 100% !important; + margin: 0 !important; + width: 100% !important; + min-height: 11.5rem; + padding: 1.5rem 1.35rem !important; + border-radius: var(--sol-radius) !important; + background: #142556 !important; + border: 1px solid rgba(255, 255, 255, 0.06) !important; + box-shadow: none !important; + transform: none !important; + text-decoration: none !important; + color: var(--openms-white) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-card:hover, +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-card:focus-visible { + background: #1a3168 !important; + border-color: rgba(255, 255, 255, 0.12) !important; + box-shadow: none !important; + transform: translateY(-2px) !important; + opacity: 1; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-icon, +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-icon .fas, +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-icon .fab, +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-icon .svg-inline--fa, +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-icon .svg-inline--fa path { + display: inline-grid !important; + place-items: center; + color: var(--openms-white) !important; + fill: var(--openms-white) !important; + font-size: 1.85rem !important; + width: 1em !important; + height: 1em !important; + margin: 0 !important; + background: transparent !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-tag { + display: none !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-title { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + margin: 0 !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-text { + color: rgba(255, 255, 255, 0.7) !important; + margin: 0 !important; + font-size: var(--openms-body-size) !important; + line-height: 1.55; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__explore-link { + display: none !important; +} + +/* Need help: same gray band as Contribute */ +.openms-lib-page--solution #getting-started .openms-lib-resources__assist { + width: 100% !important; + max-width: none !important; + margin: 0 !important; + padding: var(--sol-section-y-sm) var(--openms-page-inline, 1.5rem) !important; + border: none !important; + border-radius: 0 !important; + background: var(--sol-soft) !important; + background-color: var(--sol-soft) !important; + box-shadow: none !important; + color: var(--sol-title); + box-sizing: border-box; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__assist-title { + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__assist-text { + color: var(--sol-body) !important; + -webkit-text-fill-color: var(--sol-body) !important; +} + +/* Need help: filled blue buttons (same hover scale + glow as other CTAs) */ +.openms-lib-page--solution #getting-started .openms-lib-resources__assist, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist-actions { + overflow: visible !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost { + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + border: 2px solid var(--openms-blue) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none; + transition: var(--openms-btn-motion); +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:focus-visible, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:active, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary:hover, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary:focus-visible, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary:active, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:hover, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:active { + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn .fab, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn .fas, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn .fa-discord, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn .fa-github, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn .svg-inline--fa, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn .svg-inline--fa path, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn .openms-lib-btn__label, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover .fab, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover .fas, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover .fa-discord, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover .fa-github, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover .svg-inline--fa, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover .svg-inline--fa path, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn:hover .openms-lib-btn__label, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost .fa-github { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +/* ── Contribute: InOrder-style soft band + elevated icon cards ── */ +.openms-lib-page--solution .openms-lib-page__outro { + background: var(--sol-soft) !important; + margin: 0 !important; + padding: 0 !important; +} + +.openms-lib-page--solution .openms-lib-page__outro .openms-lib-block--developers { + background: var(--sol-soft) !important; + padding-block: var(--sol-section-y) !important; + padding-inline: var(--openms-page-inline, 1.5rem); +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-head, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__cards-head, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__cards-head, +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-developers--cards .openms-lib-developers__cards-head, +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__cards-head { + display: grid !important; + justify-items: start !important; + max-width: min(100%, 36rem) !important; + margin: 0 0 clamp(2rem, 4vw, 2.75rem) !important; + margin-inline: 0 !important; + text-align: left !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-block__eyebrow { + justify-content: flex-start !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__title, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__title, +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__title { + text-align: left !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__lead, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__lead, +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__lead { + text-align: left !important; + color: var(--sol-body) !important; + -webkit-text-fill-color: var(--sol-body) !important; +} + +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro #getting-started, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro #getting-started.openms-lib-page__anchor, +.openms-lib-page--solution.openms-lib-page--webapps-pro #getting-started, +.openms-lib-page--solution.openms-lib-page--webapps-pro #getting-started.openms-lib-page__anchor { + padding-bottom: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__inner, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources--explore .openms-lib-resources__inner { + padding-bottom: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__explore-grid { + margin-bottom: 0 !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) { + display: grid !important; + grid-template-columns: repeat(10, minmax(0, 1fr)) !important; + justify-content: stretch; + gap: 0.85rem !important; + width: 100%; + max-width: var(--pro-max, 72rem); + margin: 0; +} + +/* Top row: 5 equal cards */ +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(-n + 5), +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(-n + 5) { + grid-column: span 2 !important; +} + +/* Bottom row: 2 wider cards */ +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(6), +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(6) { + grid-column: 1 / span 5 !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(7), +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(7) { + grid-column: 6 / span 5 !important; +} + +/* pyOpenMS (and similar): 5 equal cards that wrap before they get too narrow */ +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child), +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > *, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > * { + grid-column: auto !important; + min-width: 0; +} + +/* pyopenms_viz (and similar): 3 equal cards */ +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child), +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child) { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child) > *, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child) > * { + grid-column: auto !important; + min-width: 0; +} + +/* Two-card Contribute rows */ +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child), +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child) > *, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child) > * { + grid-column: auto !important; + min-width: 0; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card, +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card--box { + display: grid !important; + grid-template-rows: auto 1fr; + align-content: stretch; + align-items: stretch; + gap: 0.85rem; + height: 100%; + min-height: 13.5rem; + margin: 0 !important; + padding: 1.5rem 1.35rem !important; + border-radius: var(--sol-radius) !important; + background: var(--openms-white) !important; + border: 1px solid rgba(var(--openms-navy-rgb), 0.06) !important; + box-shadow: 0 0.55rem 1.35rem rgba(var(--openms-navy-rgb), 0.06) !important; + text-decoration: none !important; + transform: none !important; + box-sizing: border-box !important; +} + +/* Blue fill on hover — same size/position; text/icons invert to white */ +.openms-lib-page--solution #for-developers .openms-lib-developers__card:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card:focus-within, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--box:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--box:focus-within, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-visible, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within { + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + box-shadow: 0 0.85rem 1.75rem rgba(var(--openms-blue-rgb), 0.28) !important; + transform: none !important; + color: var(--openms-white) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-title, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-title span, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-title, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-title span, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-title, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-title span, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link:hover .openms-lib-developers__card-title, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link:hover .openms-lib-developers__card-title span { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-subtitle, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-subtitle, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-subtitle, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link:hover .openms-lib-developers__card-subtitle { + color: rgba(255, 255, 255, 0.82) !important; + -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-icon, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-icon .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-icon .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-icon .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-icon .svg-inline--fa path, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-icon, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-icon .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-icon .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-icon .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-icon .svg-inline--fa path { + color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link:hover .openms-lib-developers__card-link { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-icon { + display: inline-grid; + place-items: center; + width: 2.5rem; + height: 2.5rem; + margin: 0 !important; + font-size: 1.85rem !important; + background: transparent !important; + border: none !important; + box-shadow: none !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-body { + display: flex; + flex-direction: column; + gap: 0.55rem; + height: 100%; + min-height: 0; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-title-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 0.65rem 0.85rem; + width: 100%; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-title-row .openms-lib-developers__card-title { + flex: 1 1 auto; + min-width: 0; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__badge { + flex: 0 0 auto; + display: inline-flex !important; + align-items: center; + margin: 0.15rem 0 0 !important; + align-self: flex-start; + line-height: 0; + text-decoration: none !important; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__badge img { + display: block; + height: 1.25rem; + width: auto; + max-width: 100%; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-title, +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-title span { + margin: 0 !important; + color: rgba(var(--openms-dark-rgb, 35, 31, 32), 0.9) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb, 35, 31, 32), 0.9) !important; + overflow-wrap: anywhere; + hyphens: auto; +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-subtitle { + margin: 0 !important; + font-size: var(--openms-body-size) !important; + line-height: 1.55 !important; + color: rgba(var(--openms-dark-rgb, 35, 31, 32), 0.62) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb, 35, 31, 32), 0.62) !important; + flex: 1 1 auto; +} + +/* For Developers / Contribute — always-visible text links, not hover-only pills */ +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-link { + display: inline-flex !important; + align-items: center; + align-self: flex-start; + margin-top: auto !important; + padding: 0 !important; + flex: 0 0 auto; + width: fit-content; + max-width: 100%; + min-height: 0; + height: auto; + gap: 0.35rem !important; + font-size: var(--openms-text-min) !important; + font-weight: 700; + line-height: 1.3; + color: var(--openms-cta-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-cta-link, var(--openms-navy)) !important; + opacity: 1; + transform: none !important; + overflow: visible; + white-space: normal; + overflow-wrap: anywhere; + pointer-events: auto; + background: transparent !important; + border: none !important; + border-radius: 0 !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link:hover .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link:focus-visible .openms-lib-developers__card-link { + opacity: 1; + pointer-events: auto; + max-height: none; + gap: 0.35rem !important; + transform: none !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +@media (hover: none) { + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-link, + .openms-lib-page--solution #for-developers .openms-lib-developers__card-link { + opacity: 1; + pointer-events: auto; + color: var(--openms-content-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-content-link, var(--openms-navy)) !important; + } +} + +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__platforms { + margin-top: auto; + display: flex !important; + flex-direction: row; + flex-wrap: wrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: var(--openms-btn-gap, 0.75rem) !important; + width: auto; + min-height: 2.75rem; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms { + gap: 0.55rem !important; + row-gap: 0.55rem !important; + column-gap: 0.55rem !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--build-src .openms-lib-developers__platforms { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: stretch !important; + justify-content: flex-start !important; + gap: 0.55rem !important; + row-gap: 0.55rem !important; + column-gap: 0.55rem !important; + width: 100%; + min-width: 0; +} + +/* Same size as page CTAs (hero / TOPP / Need help / Cite) */ +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + flex: 0 0 auto !important; + width: auto !important; + max-width: none !important; + min-width: 0 !important; + min-height: 2.75rem !important; + height: auto !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + justify-content: center; + gap: 0.35rem !important; + border: 2px solid var(--openms-blue) !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + font-size: var(--openms-text-min) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: nowrap; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none !important; + transition: var(--openms-btn-motion); +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + flex: 1 1 0 !important; + white-space: nowrap !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .svg-inline--fa path, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .openms-lib-btn__label, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-github, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-book-open { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +/* Always show Review CTA icons (pro CSS hides GitHub until card hover) */ +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-github, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .fa-book-open, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa.fa-github, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn .svg-inline--fa.fa-book-open { + display: inline-block !important; + opacity: 1 !important; + width: 1em !important; + height: 1em !important; + margin: 0 !important; + overflow: visible !important; + transform: none !important; + visibility: visible !important; +} + +/* Platform pills invert on blue card hover so they stay visible */ +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + border-color: var(--openms-white) !important; + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn .svg-inline--fa path, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn .openms-lib-btn__label, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn .svg-inline--fa, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn .svg-inline--fa path, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn .openms-lib-btn__label { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + fill: var(--openms-blue) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn:focus-visible { + border-color: var(--openms-blue) !important; + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn:focus-visible { + border-color: var(--openms-white) !important; + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(255, 255, 255, 0.35) !important; +} + +/* Light surfaces: no blue body/link text (filled primary/platform btns keep white on blue) */ +.openms-lib-page--solution .openms-lib-hero--solution a.openms-lib-btn--ghost, +.openms-lib-page--solution #for-developers a.openms-lib-btn--ghost:not(.openms-lib-developers__platform-btn) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page--solution .openms-lib-about a:not(.openms-lib-btn), +.openms-lib-page--solution .openms-lib-topp-split a:not(.openms-lib-btn), +.openms-lib-page--solution .openms-lib-page__cite a:not(.openms-lib-btn), +.openms-lib-page--solution .openms-lib-cite a:not(.openms-lib-btn) { + color: var(--openms-content-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-content-link, var(--openms-navy)) !important; +} + +.openms-lib-page--solution .openms-lib-about a:not(.openms-lib-btn):hover, +.openms-lib-page--solution .openms-lib-about a:not(.openms-lib-btn):focus-visible, +.openms-lib-page--solution .openms-lib-topp-split a:not(.openms-lib-btn):hover, +.openms-lib-page--solution .openms-lib-topp-split a:not(.openms-lib-btn):focus-visible, +.openms-lib-page--solution .openms-lib-page__cite a:not(.openms-lib-btn):hover, +.openms-lib-page--solution .openms-lib-page__cite a:not(.openms-lib-btn):focus-visible, +.openms-lib-page--solution .openms-lib-cite a:not(.openms-lib-btn):hover, +.openms-lib-page--solution .openms-lib-cite a:not(.openms-lib-btn):focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)) !important; + -webkit-text-fill-color: var(--openms-content-link-hover, var(--openms-blue)) !important; +} + +/* WebApps leftover pro rhythm added white bands between Need help / Examples / Contribute */ +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-page__body > .openms-lib-page__anchor { + padding-block: 0 !important; +} + +/* ── WebApps examples: same section head + white cards as Contribute ── */ +.openms-lib-page--solution #examples.openms-lib-page__anchor, +.openms-lib-page--solution.openms-lib-page--webapps-pro #examples.openms-lib-page__anchor, +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-page__body > #examples.openms-lib-page__anchor { + padding: 0 !important; + padding-block: 0 !important; + padding-inline: 0 !important; + margin: 0 !important; + background: var(--sol-canvas, #f8f8f9) !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources--examples { + padding-block: var(--sol-section-y) !important; + padding-inline: var(--openms-page-inline, 1.5rem) !important; + background-color: var(--sol-canvas, #f8f8f9) !important; + background-image: linear-gradient( + 180deg, + var(--sol-soft) 0%, + var(--sol-canvas, #f8f8f9) 3.5rem, + var(--sol-canvas, #f8f8f9) calc(100% - 3.5rem), + var(--sol-soft) 100% + ) !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-layout, +.openms-lib-page--solution #examples .openms-lib-resources--examples .openms-lib-resources__inner { + display: grid !important; + grid-template-columns: 1fr !important; + gap: clamp(1.75rem, 3.5vw, 2.5rem) !important; + width: 100%; + max-width: var(--pro-max, 72rem); + margin-inline: auto; +} + +.openms-lib-page--solution #examples .openms-lib-resources__head, +.openms-lib-page--solution #examples .openms-lib-resources__examples-head { + display: flex !important; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + gap: 0; + width: 100% !important; + max-width: none !important; + margin: 0 !important; + text-align: left !important; + justify-items: start !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-copy { + max-width: min(100%, 36rem); + min-width: 0; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-lead-row { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 1rem 1.5rem; + width: 100%; + margin-top: var(--sol-stack-lead); +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-link { + display: inline-flex !important; + align-items: baseline; + flex-shrink: 0; + margin: 0 0 0 auto !important; + padding: 0 !important; + border: none !important; + background: none !important; + box-shadow: none !important; + border-radius: 0 !important; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 700; + line-height: 1.3; + color: var(--openms-content-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-content-link, var(--openms-navy)) !important; + text-decoration: none !important; + white-space: nowrap; + gap: 0.35rem; + transition: gap 0.2s ease; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-link span[aria-hidden="true"] { + display: inline-block; + transition: transform 0.2s ease; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-link:hover, +.openms-lib-page--solution #examples .openms-lib-resources__examples-link:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)) !important; + -webkit-text-fill-color: var(--openms-content-link-hover, var(--openms-blue)) !important; + background: none !important; + box-shadow: none !important; + transform: none !important; + gap: 0.5rem; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-link:hover span[aria-hidden="true"], +.openms-lib-page--solution #examples .openms-lib-resources__examples-link:focus-visible span[aria-hidden="true"] { + transform: translateX(2px); +} + +.openms-lib-page--solution #examples .openms-lib-resources__eyebrow { + justify-content: flex-start !important; + color: var(--sol-eyebrow) !important; + -webkit-text-fill-color: var(--sol-eyebrow) !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__title { + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; + text-align: left !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__lead { + margin: 0 !important; + max-width: min(100%, 36rem); + color: var(--sol-body) !important; + -webkit-text-fill-color: var(--sol-body) !important; + text-align: left !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-grid { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 0.85rem !important; + width: 100%; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-card { + display: grid !important; + place-items: center; + min-height: 16rem; + padding: 2rem 1.5rem !important; + border-radius: var(--sol-radius) !important; + background: var(--openms-white) !important; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1) !important; + box-shadow: 0 0.55rem 1.35rem rgba(var(--openms-navy-rgb), 0.07) !important; + text-decoration: none !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo, +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo--large { + width: min(13.5rem, 82%) !important; + max-width: 13.5rem !important; + height: auto !important; + padding: 0 !important; + background: transparent !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo img, +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo--large img { + max-width: 13.5rem !important; + max-height: 8.5rem !important; + width: 100% !important; + height: auto !important; + object-fit: contain !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo--large, +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo:has(img[src*="openDDA"]) { + width: min(16.5rem, 92%) !important; + max-width: 16.5rem !important; +} + +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo--large img, +.openms-lib-page--solution #examples .openms-lib-resources__examples-logo img[src*="openDDA"] { + max-width: 16.5rem !important; + max-height: 11.5rem !important; +} + +@media (max-width: 700px) { + .openms-lib-page--solution #examples .openms-lib-resources__examples-lead-row { + flex-wrap: wrap; + align-items: flex-start; + } + + .openms-lib-page--solution #examples .openms-lib-resources__examples-grid { + grid-template-columns: 1fr !important; + } +} + +/* ── Cite: white band + 2-col promo/card (shared by openms-lib + pyOpenMS) ── */ +.openms-lib-page--solution .openms-lib-page__cite, +.openms-lib-page--solution.openms-lib-page--hub .openms-lib-page__cite, +.openms-lib-page--solution.openms-lib-page--pyopenms-pro .openms-lib-page__cite, +.openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro .openms-lib-page__cite, +.openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-page__cite { + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-bottom: 0 !important; + padding-inline: var(--openms-page-inline, 1.5rem) !important; + background: var(--sol-canvas, #f8f8f9) !important; + color: var(--sol-title); + border-top: 1px solid color-mix(in srgb, var(--sol-line) 55%, transparent) !important; + box-sizing: border-box; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite, +.openms-lib-page--solution .openms-lib-cite { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: clamp(1.75rem, 3.5vw, 2.5rem) !important; + width: 100% !important; + max-width: var(--pro-max, 75rem) !important; + margin-inline: auto !important; + padding-block: var(--sol-section-y) !important; + padding-inline: 0 !important; + box-sizing: border-box; +} + +.openms-lib-page--solution .openms-lib-cite__inner { + display: grid !important; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) !important; + gap: clamp(1.75rem, 4vw, 4rem) !important; + align-items: start !important; + width: 100% !important; + max-width: none !important; +} + +.openms-lib-page--solution .openms-lib-cite__head { + display: grid !important; + justify-items: start !important; + gap: 0 !important; + max-width: min(100%, 28rem) !important; + text-align: left !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__eyebrow, +.openms-lib-page--solution .openms-lib-cite__eyebrow { + margin: 0 0 var(--sol-stack-eyebrow) !important; + background: none !important; + text-transform: uppercase !important; + letter-spacing: 0.16em !important; + color: var(--sol-eyebrow) !important; + -webkit-text-fill-color: var(--sol-eyebrow) !important; +} + +.openms-lib-page--solution .openms-lib-cite__title { + margin: 0 !important; + max-width: min(100%, 28ch) !important; + text-align: left !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__card, +.openms-lib-page--solution .openms-lib-cite__card { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: 0.85rem !important; + width: 100% !important; + margin: 0 !important; + padding: clamp(1.5rem, 3vw, 2.15rem) clamp(1.35rem, 3vw, 2rem) !important; + border-radius: var(--sol-radius-lg, 1.25rem) !important; + background: var(--sol-soft) !important; + border: 1px solid rgba(var(--openms-navy-rgb), 0.08) !important; + box-shadow: 0 0.55rem 1.35rem rgba(var(--openms-navy-rgb), 0.06) !important; + color: var(--sol-title); + text-align: left !important; + box-sizing: border-box; +} + +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__title, +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__authors { + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__card a:not(.openms-lib-btn), +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__title a { + color: var(--openms-content-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-content-link, var(--openms-navy)) !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__card a:not(.openms-lib-btn):hover, +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__card a:not(.openms-lib-btn):focus-visible, +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__title a:hover, +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__title a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)) !important; + -webkit-text-fill-color: var(--openms-content-link-hover, var(--openms-blue)) !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__title { + margin: 0 !important; + text-align: left !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__authors { + margin: 0 !important; + max-width: 62ch; + line-height: 1.65; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__actions { + display: flex !important; + flex-wrap: wrap !important; + gap: 0.75rem !important; + margin-top: 0.35rem !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-btn--primary, +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-btn--primary * { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__meta, +.openms-lib-page--solution .openms-lib-page__cite .publications-cite-card__meta * { + color: var(--sol-body) !important; + -webkit-text-fill-color: var(--sol-body) !important; +} + +.openms-lib-page--solution .openms-lib-page__cite .openms-lib-btn--ghost, +.openms-lib-page--solution .openms-lib-page__cite a.openms-lib-btn--ghost { + border-color: rgba(var(--openms-navy-rgb), 0.28) !important; + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; + background: transparent !important; +} + +/* ── Responsive ── */ +@media (max-width: 1680px) { + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3) { + grid-column: span 2 !important; + } + + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4) { + grid-column: span 3 !important; + } +} + +@media (max-width: 1100px) { + /* Keep terminal card left, TOPP copy to its right */ + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__inner { + grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important; + align-items: center; + } + + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__visual { + order: 1; + } + + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__copy { + order: 2; + } + + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__intro, + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__copy { + max-width: none !important; + margin-inline: 0 !important; + justify-items: start !important; + justify-content: start !important; + text-align: left !important; + } + + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__eyebrow, + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__title, + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__lead, + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__cta, + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__actions { + text-align: left !important; + justify-content: flex-start !important; + justify-self: start !important; + margin-inline: 0 !important; + } + + .openms-lib-page--solution .openms-lib-topp-split__visual-card--image { + min-height: 0; + } + + .openms-lib-page--solution .openms-lib-topp-split__visual-img { + max-height: 18rem; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid, + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) > * { + grid-column: auto !important; + } + + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child) { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(-n + 5), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(-n + 5), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(6), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(6), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(7), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(7), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > *, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > *, + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4) { + grid-column: auto !important; + } + + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :last-child, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :last-child, + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child) > :last-child, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child) > :last-child { + grid-column: 1 / -1 !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefits { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit { + border-right: none !important; + border-bottom: 1px solid var(--sol-line) !important; + padding-inline: 0 !important; + padding-block: 1.15rem !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:nth-child(odd) { + padding-right: 0.85rem !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:nth-child(even) { + padding-left: 0.85rem !important; + border-right: none !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:nth-last-child(-n + 2) { + border-bottom: none !important; + } +} + +@media (max-width: 700px) { + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__inner { + grid-template-columns: 1fr !important; + } + + /* Copy first, image at the bottom */ + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__copy { + order: 1; + } + + .openms-lib-page--solution .openms-lib-topp-split--solution .openms-lib-topp-split__visual { + order: 2; + } + + .openms-lib-page--solution .openms-lib-topp-split__nested { + grid-template-columns: 1fr !important; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid, + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child) { + grid-template-columns: 1fr !important; + } + + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child) { + grid-template-columns: 1fr !important; + } + + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(-n + 5), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(-n + 5), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(6), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(6), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(7), + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child) > :nth-child(7), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > *, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > * { + grid-column: auto !important; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__assist { + display: grid; + gap: 1rem; + text-align: center; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__assist-actions { + display: flex !important; + flex-wrap: wrap !important; + justify-content: center !important; + gap: 0.65rem !important; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__assist-actions .openms-lib-btn { + flex: 1 1 10rem; + justify-content: center; + min-width: min(100%, 10rem); + } + + .openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__inner, + .openms-lib-page--solution .openms-lib-cite__inner { + grid-template-columns: 1fr !important; + gap: 1.5rem !important; + } + + .openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__actions, + .openms-lib-page--solution .openms-lib-cite__actions { + display: flex !important; + flex-wrap: wrap !important; + gap: 0.65rem !important; + } + + .openms-lib-page--solution .openms-lib-page__cite .openms-lib-cite__actions .openms-lib-btn, + .openms-lib-page--solution .openms-lib-cite__actions .openms-lib-btn { + flex: 1 1 10rem; + justify-content: center; + min-width: min(100%, 10rem); + } +} + +@media (max-width: 560px) { + .openms-lib-page--solution.openms-lib-page--hub, + .openms-lib-page--solution.openms-lib-page--openms-lib { + --sol-section-y: clamp(2.75rem, 8vw, 3.5rem); + --sol-section-y-sm: clamp(2rem, 6vw, 2.75rem); + } + + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution, + .openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution { + padding-block: var(--sol-section-y) !important; + padding-inline: 1.25rem !important; + } + + /* Fluid type: keep long uppercase titles readable on narrow screens. + Specificity must beat zzzzz-type-scale.css page-hero rules. */ + .openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__title, + .openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__accent, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__title, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__accent { + font-size: var(--openms-page-hero-title-size) !important; + letter-spacing: 0.015em !important; + line-height: 1.18 !important; + overflow-wrap: anywhere; + text-wrap: balance; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #getting-started .openms-lib-resources__title, + .openms-lib-page--solution.openms-lib-page--hub #getting-started .openms-lib-resources__title { + font-size: var(--openms-section-title-size) !important; + } + + .openms-lib-page--solution .openms-lib-about__title, + .openms-lib-page--solution .openms-lib-topp-split__title, + .openms-lib-page--solution .openms-lib-resources__title, + .openms-lib-page--solution #getting-started .openms-lib-resources__title, + .openms-lib-page--solution .openms-lib-developers__title, + .openms-lib-page--solution .openms-lib-cite__title, + .openms-lib-page--solution .openms-lib-about__benefit-title, + .openms-lib-page--solution .openms-lib-topp-split__nested-title, + .openms-lib-page--solution .openms-lib-resources__explore-title, + .openms-lib-page--solution .openms-lib-developers__card-title, + .openms-lib-page--solution .openms-lib-developers__card-title span, + .openms-lib-page--solution .publications-cite-card__title, + .openms-lib-page--solution .openms-lib-hero__lead, + .openms-lib-page--solution .openms-lib-topp-split__lead, + .openms-lib-page--solution .openms-lib-resources__lead, + .openms-lib-page--solution .openms-lib-developers__lead, + .openms-lib-page--solution .openms-lib-about__benefit-text, + .openms-lib-page--solution .openms-lib-topp-split__nested-text, + .openms-lib-page--solution .openms-lib-resources__explore-text, + .openms-lib-page--solution .openms-lib-developers__card-subtitle, + .openms-lib-page--solution .publications-cite-card__authors { + overflow-wrap: break-word; + word-break: normal; + hyphens: auto; + } + + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__actions, + .openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__actions { + display: flex !important; + flex-direction: column !important; + flex-wrap: nowrap !important; + align-items: stretch !important; + width: 100% !important; + max-width: 22rem !important; + margin-inline: auto !important; + margin-top: 1.1rem !important; + gap: 0.65rem !important; + } + + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-hero--solution .openms-lib-hero__actions .openms-lib-btn, + .openms-lib-page--solution.openms-lib-page--openms-lib .openms-lib-hero--solution .openms-lib-hero__actions .openms-lib-btn { + width: 100% !important; + min-width: 0 !important; + flex: none !important; + justify-content: center !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefits, + .openms-lib-page--solution.openms-lib-page--hub.openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefits { + grid-template-columns: 1fr !important; + border-top: none !important; + border-bottom: none !important; + padding-block: 0 !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit, + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:nth-child(odd), + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:nth-child(even) { + border-right: none !important; + border-bottom: 1px solid var(--sol-line) !important; + padding-inline: 0 !important; + padding-block: 1.15rem !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:last-child, + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:nth-last-child(-n + 2) { + border-bottom: 1px solid var(--sol-line) !important; + } + + .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit:last-child { + border-bottom: none !important; + } + + .openms-lib-page--solution #topp-tools > .openms-lib-topp-split, + .openms-lib-page--solution .openms-lib-topp-split--solution, + .openms-lib-page--solution .openms-lib-page__outro .openms-lib-block--developers, + .openms-lib-page--solution #for-developers { + padding-inline: 1.25rem !important; + } + + /* Get started blue band: full-bleed; keep text/card gutters on the band itself */ + .openms-lib-page--solution #getting-started, + .openms-lib-page--solution #getting-started.openms-lib-page__anchor, + .openms-lib-page--solution #getting-started > .openms-lib-resources--explore { + padding-inline: 0 !important; + margin-inline: 0 !important; + max-width: none !important; + width: 100% !important; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__dark { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + border-radius: 0 !important; + padding-inline: 1.25rem !important; + } + + .openms-lib-page--solution .openms-lib-topp-split__visual-card--image { + border-radius: 0.85rem; + } + + .openms-lib-page--solution .openms-lib-topp-split__visual-img { + max-height: 16rem; + } + + .openms-lib-page--solution #for-developers .openms-lib-developers__platforms, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms { + width: 100%; + flex-wrap: wrap !important; + justify-content: flex-start !important; + gap: 0.55rem !important; + row-gap: 0.55rem !important; + column-gap: 0.55rem !important; + } + + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--build-src .openms-lib-developers__platforms { + flex-wrap: nowrap !important; + flex-direction: row !important; + gap: 0.45rem !important; + row-gap: 0.45rem !important; + column-gap: 0.45rem !important; + } + + .openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn { + flex: 0 0 auto !important; + justify-content: center; + min-width: 0 !important; + min-height: 2.75rem !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + font-size: var(--openms-text-min) !important; + } + + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn { + flex: 1 1 0 !important; + white-space: nowrap !important; + padding: 0.55rem 0.7rem !important; + } +} + +/* ── Apps catalog pages: same solution language as project hubs ── */ +.openms-lib-page--solution.openms-lib-page--featured-pro .openms-lib-page__body, +.openms-lib-page--solution.openms-lib-page--featured-pro #featured-webapps, +.openms-lib-page--solution.openms-lib-page--featured-pro #affiliated-apps, +.openms-lib-page--solution.openms-lib-page--featured-pro #archived-apps, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-modern-wrap--page, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-featured--page, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-affiliates, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived { + background: var(--sol-soft) !important; + border: none !important; + border-bottom: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .openms-lib-page__body > .openms-lib-page__anchor, +.openms-lib-page--solution.openms-lib-page--featured-pro .openms-lib-page__body > .openms-lib-page__anchor:first-child, +.openms-lib-page--solution.openms-lib-page--featured-pro #featured-webapps, +.openms-lib-page--solution.openms-lib-page--featured-pro #affiliated-apps, +.openms-lib-page--solution.openms-lib-page--featured-pro #archived-apps, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-modern-wrap--page { + padding: 0 !important; + padding-block: 0 !important; + margin: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-featured--page, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-affiliates, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-modern-wrap--page .webapps-featured--page { + padding-block: var(--sol-section-y) !important; + padding-inline: var(--openms-page-inline, 1.5rem) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-featured__inner, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-affiliates__inner, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__inner { + max-width: var(--pro-max, 72rem); + margin-inline: auto; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__inner, +.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__inner { + gap: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__projects { + gap: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice + .webapps-archived__grid { + margin-top: var(--sol-stack-lead, 20px) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__meta, +.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__meta { + display: flex !important; + justify-content: space-between !important; + align-items: center !important; + width: 100% !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry__badge, +.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__badge { + margin-left: auto !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__projects + .webapps-archived__revival, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__revival { + margin-top: var(--sol-section-y) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry { + background: var(--openms-white) !important; + border: 1px solid var(--sol-line) !important; + border-radius: var(--sol-radius-lg) !important; + box-shadow: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card:hover, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card:focus-within, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry:hover, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry:focus-within { + box-shadow: none !important; + border-color: var(--sol-line) !important; + transform: none !important; + height: 100% !important; + min-height: 100% !important; + max-height: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail > .webapps-featured__item:hover, +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail > .webapps-featured__item:focus-within, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid > .webapps-affiliates__item:hover, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid > .webapps-affiliates__item:focus-within { + height: auto !important; + min-height: 100% !important; + max-height: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__name, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry__name { + font-size: var(--openms-card-title-size) !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; + line-height: 1.3 !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers-label, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry__maintainers-label, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry__type, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry__badge, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival-kicker { + font-family: var(--openms-font-body) !important; + font-size: 0.75rem !important; + font-weight: 650 !important; + letter-spacing: 0.16em !important; + text-transform: uppercase !important; + color: var(--sol-eyebrow) !important; + -webkit-text-fill-color: var(--sol-eyebrow) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links { + display: flex !important; + flex-wrap: wrap !important; + align-items: center !important; + gap: 0.65rem !important; + width: 100%; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item { + display: flex; + flex: 0 1 auto; + min-width: 0; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__btn, +.openms-lib-page--solution.openms-lib-page--featured-pro a.webapps-project-links__btn { + display: inline-flex !important; + align-items: center; + justify-content: center; + gap: 0.35rem; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + font-family: var(--openms-font-body) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: nowrap; + text-decoration: none !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: none !important; + transition: var(--openms-btn-motion); +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:first-child a.webapps-project-links__btn { + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + border: 2px solid var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) a.webapps-project-links__btn { + background: transparent !important; + background-color: transparent !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:hover, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:focus-visible { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + transform: none !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:hover, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:focus-visible { + background: rgba(var(--openms-navy-rgb), 0.08) !important; + border-color: rgba(var(--openms-navy-rgb), 0.78) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + transform: none !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb), 0.18) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__btn:hover, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-links__btn:focus-visible, +.openms-lib-page--solution.openms-lib-page--featured-pro a.webapps-project-links__btn:hover, +.openms-lib-page--solution.openms-lib-page--featured-pro a.webapps-project-links__btn:focus-visible { + transform: none !important; +} + +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn i, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn i::before, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn .fab, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn .fas, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn .fa-github, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn .fa-windows, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn .fa-play-circle, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn .fa-python, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn .fa-home, +.openms-lib-page--solution.openms-lib-page--webapps.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn i[class*="fa-"] { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn i, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn i::before, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn .fab, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn .fas, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn .fa-github, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn .fa-windows, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn .fa-play-circle, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn .fa-python, +.openms-lib-page--solution.openms-lib-page--openms-lib.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn .fa-home, +.openms-lib-page--solution.openms-lib-page--webapps.openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn i[class*="fa-"] { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-catalog__contact a { + color: var(--openms-content-link, var(--openms-blue)) !important; + -webkit-text-fill-color: var(--openms-content-link, var(--openms-blue)) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice--callout { + display: grid !important; + grid-template-columns: minmax(11rem, 15.5rem) minmax(0, 1fr) !important; + gap: 1.15rem 2.25rem !important; + align-items: start !important; + width: 100% !important; + margin: 0 !important; + padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.35rem, 2.8vw, 2rem) !important; + background: var(--sol-soft, #f2f3f5) !important; + border: none !important; + border-left: 3px solid var(--openms-blue) !important; + border-radius: var(--sol-radius-lg) !important; + box-shadow: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-head { + display: flex; + align-items: center; + gap: 0.55rem; + min-width: 0; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-icon { + display: inline-flex; + flex: 0 0 auto; + color: var(--openms-blue); + line-height: 0; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-icon svg { + display: block; + width: 1rem; + height: 1rem; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-title, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-title { + margin: 0 !important; + font-family: var(--openms-font-heading) !important; + font-size: 1.05rem !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; + line-height: 1.25 !important; + text-transform: none !important; + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-list, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-list { + display: grid !important; + grid-template-columns: 1fr !important; + gap: 0.7rem !important; + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + list-style: none !important; + border: none !important; + background: transparent !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-item, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item { + display: grid !important; + grid-template-columns: auto minmax(0, 1fr) !important; + gap: 0.7rem !important; + align-items: start !important; + margin: 0 !important; + padding: 0 !important; + min-height: 0 !important; + border: none !important; + background: transparent !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-item:hover, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item:hover { + background: transparent !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-item::before, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-index { + display: none !important; + content: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-mark { + display: block; + width: 0.42rem; + height: 0.42rem; + margin-top: 0.55em; + border-radius: 50%; + background: var(--openms-blue); +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-copy { + margin: 0 !important; + padding: 0 !important; + min-width: 0; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-heading { + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; + font-family: var(--openms-font-heading) !important; + text-transform: uppercase !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-text { + max-width: none !important; +} + +@media (max-width: 700px) { + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice, + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice, + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice--callout { + grid-template-columns: 1fr !important; + gap: 0.85rem !important; + } + + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-item, + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__notice-item { + border: none !important; + } +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__revival, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--editorial .webapps-archived__revival { + background: var(--sol-dark-band, #122448) !important; + background-image: none !important; + border: none !important; + border-radius: var(--sol-radius-lg) !important; + box-shadow: none !important; + color: var(--openms-white) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival-kicker { + color: var(--openms-text-soft-on-dark, rgba(var(--openms-white-rgb), 0.65)) !important; + -webkit-text-fill-color: var(--openms-text-soft-on-dark, rgba(var(--openms-white-rgb), 0.65)) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival-text, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival-text strong { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival-note { + color: var(--sol-lead-on-dark, #c7cae8) !important; + -webkit-text-fill-color: var(--sol-lead-on-dark, #c7cae8) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival .openms-lib-btn--primary { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__revival .openms-lib-btn--ghost { + background: transparent !important; + border: 2px solid rgba(var(--openms-white-rgb), 0.72) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* ── Apps catalog: list rows so action buttons stay readable ── */ +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__inner, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__inner { + max-width: var(--pro-max, 72rem); + margin-inline: auto; +} + +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + align-items: stretch !important; + gap: 0.85rem !important; +} + +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item, +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item:last-child, +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item:last-child:nth-child(odd), +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item:last-child:nth-child(3n + 1), +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item:last-child, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item:last-child:nth-child(odd), +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item:last-child:nth-child(3n + 1) { + display: flex !important; + grid-column: auto !important; + max-width: none !important; + width: 100% !important; + height: auto !important; + min-height: 100% !important; + max-height: none !important; + align-self: stretch !important; + justify-self: stretch !important; +} + +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card--featured, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item .webapps-project-detail-card, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card { + display: grid !important; + grid-template-columns: auto minmax(0, 1fr) !important; + grid-template-areas: + "logo body" + "logo actions" !important; + grid-template-rows: 1fr auto !important; + align-items: stretch !important; + column-gap: 1.25rem !important; + row-gap: 0.7rem !important; + flex: 1 1 auto !important; + width: 100% !important; + height: 100% !important; + min-height: 100% !important; + max-height: none !important; + padding: 1.15rem 1.35rem !important; + overflow: visible !important; + flex-direction: unset !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--large, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--xlarge, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--wide { + grid-area: logo; + width: 6.75rem !important; + height: 6.75rem !important; + min-width: 6.75rem !important; + min-height: 6.75rem !important; + padding: 0.15rem !important; + align-self: start !important; + background: transparent !important; + background-image: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__body { + grid-area: body; + display: flex !important; + flex-direction: column !important; + justify-content: flex-start !important; + gap: 0.3rem !important; + min-width: 0 !important; + min-height: 0 !important; + height: auto !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__text { + display: block !important; + -webkit-line-clamp: unset !important; + line-clamp: unset !important; + overflow: visible !important; + max-width: 62ch; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions { + grid-area: actions; + display: flex; + flex-direction: row; + align-items: center; + align-self: end; + min-width: 0; + margin-top: auto; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-links, +.openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links { + display: flex !important; + flex-direction: row !important; + flex-wrap: wrap !important; + align-items: center !important; + gap: 0.65rem !important; + width: auto !important; + max-width: 100% !important; + margin: 0 !important; + padding: 0 !important; + position: static !important; + left: auto !important; + right: auto !important; + bottom: auto !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links__item { + display: flex !important; + flex: 0 0 auto !important; + width: auto !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links__btn, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions a.webapps-project-links__btn { + width: auto !important; + justify-content: center !important; + min-height: 2.45rem !important; + padding: 0.55rem 1.05rem !important; +} + +@media (max-width: 800px) { + .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail, + .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid { + grid-template-columns: 1fr !important; + } + + .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail > .webapps-featured__item, + .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid > .webapps-affiliates__item { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + } + + .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, + .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, + .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item .webapps-project-detail-card, + .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card { + grid-template-columns: auto minmax(0, 1fr) !important; + grid-template-areas: + "logo body" + "actions actions" !important; + height: 100% !important; + overflow: visible !important; + } + + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions, + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links { + justify-content: flex-end !important; + width: 100% !important; + } + + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links__item { + flex: 0 0 auto !important; + } +} diff --git a/assets/css/zzzzz-type-scale.css b/assets/css/zzzzz-type-scale.css new file mode 100644 index 00000000..dfdd12f4 --- /dev/null +++ b/assets/css/zzzzz-type-scale.css @@ -0,0 +1,297 @@ +/* ============================================================================ + Site-wide type scale — one hierarchy for every page. + + Size hierarchy only. Weight + color roles for eyebrows, card body, meta, + and CTAs live in zzzzzz-type-roles.css (loads after this file). + + Loads last among size sheets (resources.Match "css/*.css" is alphabetical), so it settles the + ~410 one-off font sizes that had accumulated across ~40 stylesheets: 17 + different values for page titles, 38 for section titles, 83 for card titles. + + Two layers: + 1. The brand tokens are re-pointed at fluid clamps. Every rule that + already used a token (about half the site) becomes consistent and + responsive for free, keeping the ratios the brand defined. + 2. Role selectors below force the remaining hardcoded rules onto the same + steps. !important is required: page scopes like + .openms-lib-page--hub.openms-lib-page--openms-lib out-specify anything + reasonable, and some steps must beat earlier !important mobile rules. + + Scale (min at 375px → max on desktop), each step from the brand's own pt + values so nothing jumps: + + page title (hero h1) 33.0 → 43.4px (--openms-heading-xl-size × 1.25) + content h1 26.4 → 34.7px (26pt) + section title (h2) 23.9 → 30.7px (--openms-heading-lg-size × 1.15) + content h2 20.8 → 26.7px (20pt) + subsection (h3) 18.4 → 21.3px (16pt) + card title / lead 16.4 → 18.7px (14pt) + body 15.3 → 16.0px (12pt) + small / meta 13.6 → 14.7px (11pt) + ========================================================================== */ + +:root { + /* Headings — Montserrat */ + --openms-heading-xl-size: clamp(1.65rem, 1.28rem + 1.55vw, 2.17rem); + --openms-heading-lg-size: clamp(1.3rem, 1.12rem + 0.78vw, 1.67rem); + + /* Secondary headings — Raleway */ + --openms-secondary-heading-size-lg: clamp(1.15rem, 1.09rem + 0.26vw, 1.33rem); + --openms-secondary-heading-size: clamp(1.02rem, 0.98rem + 0.18vw, 1.17rem); + + /* Body */ + --openms-body-size-lg: clamp(1.02rem, 0.98rem + 0.18vw, 1.17rem); + --openms-body-size: clamp(0.95rem, 0.93rem + 0.11vw, 1rem); + --openms-text-min: clamp(0.85rem, 0.83rem + 0.08vw, 0.92rem); + --openms-presentation-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); + + /* Card titles sit on the secondary-heading step, told apart by weight */ + --openms-card-title-size: var(--openms-secondary-heading-size); + + /* Page hero gets its own curve rather than a flat ×1.25: it lands on the + same 43.4px on desktop, but eases off on phones where a 33px headline + costs three or four wrapped lines */ + --openms-page-hero-title-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.71rem); + --openms-section-title-size: calc(var(--openms-heading-lg-size) * 1.15); +} + +/* ── Page titles (h1) ───────────────────────────────────────────────────── + Every hero across the site, whatever page scope it carries. */ +.openms-lib-hero__title, +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__title, +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__title, +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title, +.openms-lib-page--hub .openms-lib-hero__title, +.openms-lib-page--openms-lib .openms-lib-hero__title, +.openms-lib-page--webapps .openms-lib-hero__title, +.hero-home__title, +.home-page__hero .hero-home__title, +.hero-modern__title, +.about-hero__title, +.governance-hero__title { + font-size: var(--openms-page-hero-title-size) !important; + text-transform: uppercase !important; + letter-spacing: 0.015em !important; +} + +/* ── Section titles (h2) ────────────────────────────────────────────────── + The heading that opens a block. Base classes are enough: the page-scoped + variants that override them do so without !important. */ +.home-section-head__title, +.openms-lib-block__title, +.openms-lib-topp__title, +.openms-lib-topp-split__title, +.openms-lib-explore__title, +.openms-lib-resources__title, +.openms-lib-developers__title, +.openms-lib-cta-band__title, +.openms-lib-core-tools__title, +.openms-lib-cite__title, +.openms-lib-review__title, +.openms-lib-about__title, +.openms-steps__title, +.keyfeatures-modern__title, +.webapps-featured__title, +.webapps-affiliates__title, +.webapps-archived__title, +.webapps-archived__projects-title, +.webapps-contribute__title, +.uni-partners__title, +.uni-partners__trust-title, +.uni-partners__trust-title-main, +.trusted-by__title, +.ecosystem-home__title, +.community-home__title, +.community-events-home__title, +.community-news-events__column-title, +.community-events-page__title, +.events-past-toolbar__title, +.news-home__title, +.contact-home__title, +.contact-area__title, +.contact-page__section-title, +.home-pathways__title, +.developer-retreat-highlights__title, +.developer-retreat-upcoming__title, +.contribute-channels__title, +.contribute-ways__title, +.contribute-conduct__title, +.governance-membership__title, +.contributors-exec-panel__title, +.sponsor-logos__title, +.publications-key__title, +.about-section h2, +.about-page .governance-links h2, +.governance-section h2, +.governance-links h2, +.fellowship-page__section-head h2, +.sponsor-section__head h2, +.sponsor-us-page .sponsor-donations h2 { + font-size: var(--openms-section-title-size) !important; + /* Set in caps; the tracking keeps long headlines from packing together */ + text-transform: uppercase !important; + letter-spacing: 0.015em !important; +} + +/* Band headlines are marked up as inside a paragraph */ +.contribute-coc-band__text strong, +.governance-cta-band__text strong, +.webapps-archived__revival-text strong { + font-size: var(--openms-section-title-size) !important; + text-transform: uppercase !important; + letter-spacing: 0.015em !important; +} + +/* ── Subsection titles (h3) ─────────────────────────────────────────────── + Bigger than a card title, smaller than a section head: featured cards and + the headings inside long-form article content. */ +.openms-lib-developers__card--build .openms-lib-developers__card-title, +.openms-lib-spotlight__title, +.contribute-ways__feature-title, +.events-past-year__title, +.sponsor-benefits__title { + font-size: var(--openms-secondary-heading-size-lg) !important; +} + +/* ── Card titles (h4) ───────────────────────────────────────────────────── + The title inside a card, tile, panel or list row. */ +.openms-lib-about__tile-title, +.openms-lib-about__benefit-title, +.openms-lib-about__list-title, +.openms-lib-list__title, +.openms-lib-highlights__item-title, +.openms-lib-developers__card-title, +.openms-lib-resources__support-title, +.openms-lib-resources__assist-title, +.openms-lib-resources__explore-title, +.openms-lib-resources__route-title, +.openms-lib-resource-card__title, +.openms-lib-topp-split__card-title, +.openms-step__title, +.home-pathways__step-label, +.ecosystem-home__card-title, +.webapps-project-card--catalog .webapps-project-card__name, +.community-events-home__card-title, +.news-home__card-title, +.contact-home__card-title, +.events-past-card__title, +.keyfeatures-modern__topic-title, +.webapps-project-card__title, +.webapps-archived-entry__name, +.webapps-contribute__action-title, +.contact-page__form-title, +.contact-page__path-title, +.contact-page__support-card-title, +.fellowship-page__form-title, +.fellowship-project-card__title, +.services-page__form-title, +.developer-retreat-highlights__card-title, +.publications-cite-card__title, +.leadership-card__name, +.donate-impact-card__title, +.contribute-channel__title, +.contribute-way__title, +.governance-compare__title, +.privacy-details__question-title, +.coc-details__question-title, +.sponsor-faq__question, +.sponsor-why__card h3, +.governance-card h2, +.infrastructure-card h2 { + font-size: var(--openms-card-title-size) !important; +} + +/* ── Lead paragraphs ────────────────────────────────────────────────────── + The intro under a hero or section title. Fluid width matches the Contact + section: wide measure on desktop, full container width on small screens. */ +.openms-lib-hero__lead, +.openms-lib-block__lead, +.openms-lib-about__lead, +.openms-lib-topp__lead, +.openms-lib-topp-split__lead, +.openms-lib-explore__lead, +.openms-lib-resources__lead, +.openms-lib-developers__lead, +.openms-lib-cta-band__lead, +.home-section-head__lead, +.hero-home__description, +.hero-modern__description, +.about-hero__description, +.governance-hero__description, +.webapps-featured__lead, +.webapps-affiliates__lead, +.webapps-archived__lead, +.webapps-contribute__lead, +.uni-partners__lead, +.trusted-by__subtitle, +.trusted-by__home-lead, +.trusted-by__minimal-lead, +.keyfeatures-modern__lead, +.community-home__lead, +.community-events-home__lead, +.contact-home__description, +.contact-page__section-lead, +.contribute-channels__lead, +.contribute-ways__lead, +.ecosystem-home__lead, +.openms-steps__subtitle, +.sponsor-section__lead, +.home-pathways__lead { + font-size: var(--openms-body-size-lg) !important; + box-sizing: border-box !important; + width: 100% !important; + max-width: min(100%, var(--pro-measure-wide, 58ch)) !important; + text-wrap: pretty; +} + +@media (max-width: 768px) { + .openms-lib-hero__lead, + .openms-lib-block__lead, + .openms-lib-about__lead, + .openms-lib-topp__lead, + .openms-lib-topp-split__lead, + .openms-lib-explore__lead, + .openms-lib-resources__lead, + .openms-lib-developers__lead, + .openms-lib-cta-band__lead, + .home-section-head__lead, + .hero-home__description, + .hero-modern__description, + .about-hero__description, + .governance-hero__description, + .webapps-featured__lead, + .webapps-affiliates__lead, + .webapps-archived__lead, + .webapps-contribute__lead, + .uni-partners__lead, + .trusted-by__subtitle, + .trusted-by__home-lead, + .trusted-by__minimal-lead, + .keyfeatures-modern__lead, + .community-home__lead, + .community-events-home__lead, + .contact-home__description, + .contact-page__section-lead, + .contribute-channels__lead, + .contribute-ways__lead, + .ecosystem-home__lead, + .openms-steps__subtitle, + .sponsor-section__lead, + .home-pathways__lead { + max-width: 100% !important; + } +} + +/* ── Stragglers that never used a token ───────────────────────────────── */ +.facts-para, +.trusted-by__minimal-text { + font-size: var(--openms-body-size); +} + +.home-metrics__label, +.home-metrics__description, +.members .role { + font-size: var(--openms-text-min); +} diff --git a/assets/css/zzzzzz-type-roles.css b/assets/css/zzzzzz-type-roles.css new file mode 100644 index 00000000..c03735bb --- /dev/null +++ b/assets/css/zzzzzz-type-roles.css @@ -0,0 +1,842 @@ +/* ============================================================================ + Site-wide type & color roles — loads after zzzzz-type-scale.css. + + Size steps live in the type-scale sheet. This file settles weight + color + for the same semantic jobs (eyebrow, card body, meta, CTA, tags) so pages + stop inventing near-duplicate rgba / rem values for identical roles. + ========================================================================== */ + +/* ── Page titles ────────────────────────────────────────────────────────── */ +.openms-lib-hero__title, +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__title, +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__title, +.contribute-page-layout .openms-lib-hero.contribute-page-hero .openms-lib-hero__title, +.openms-lib-page--hub .openms-lib-hero__title, +.openms-lib-page--openms-lib .openms-lib-hero__title, +.openms-lib-page--webapps .openms-lib-hero__title, +.hero-home__title, +.home-page__hero .hero-home__title, +.hero-modern__title, +.about-hero__title, +.governance-hero__title { + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)) !important; + color: var(--openms-page-hero-title-color, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-page-hero-title-color, var(--openms-navy)) !important; +} + +/* Title accent spans match the page title color (no separate blue/warm) */ +.openms-lib-hero__title .openms-lib-hero__accent, +.openms-lib-hero__title .openms-lib-hero__accent--warm, +.openms-lib-hero__accent, +.openms-lib-hero__accent--warm, +.openms-lib-page--hub .openms-lib-hero__accent, +.openms-lib-page--hub .openms-lib-hero__accent--warm, +.openms-lib-page--openms-lib .openms-lib-hero__accent--warm, +.openms-lib-page--webapps .openms-lib-hero__accent--warm, +.openms-lib-page--hub.openms-lib-page--webapps .openms-lib-hero__accent--warm, +.openms-lib-page--webapps:not(.openms-lib-page--openms-lib) .openms-lib-hero__accent--warm { + color: var(--openms-page-hero-title-color, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-page-hero-title-color, var(--openms-navy)) !important; + background: none !important; + -webkit-background-clip: unset !important; + background-clip: unset !important; +} + +/* Dark heroes keep white titles for contrast */ +.home-page__hero .hero-home__title, +.home-page__hero .hero-home__title-accent, +.about-hero__title, +.about-hero__title span, +.governance-hero__title, +.governance-hero__title span, +.community-home__title, +.community-home__title-accent { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* ── Section titles ─────────────────────────────────────────────────────── */ +.home-section-head__title, +.openms-lib-block__title, +.openms-lib-topp__title, +.openms-lib-topp-split__title, +.openms-lib-explore__title, +.openms-lib-resources__title, +.openms-lib-developers__title, +.openms-lib-cta-band__title, +.openms-lib-core-tools__title, +.openms-lib-cite__title, +.openms-lib-review__title, +.openms-lib-about__title, +.openms-steps__title, +.keyfeatures-modern__title, +.webapps-featured__title, +.webapps-affiliates__title, +.webapps-archived__title, +.webapps-contribute__title, +.uni-partners__title, +.uni-partners__trust-title, +.uni-partners__trust-title-main, +.trusted-by__title, +.ecosystem-home__title, +.community-home__title, +.community-events-home__title, +.community-news-events__column-title, +.community-events-page__title, +.events-past-toolbar__title, +.news-home__title, +.contact-home__title, +.contact-area__title, +.contact-page__section-title, +.home-pathways__title, +.developer-retreat-highlights__title, +.developer-retreat-upcoming__title, +.contribute-channels__title, +.contribute-ways__title, +.contribute-conduct__title, +.governance-membership__title, +.contributors-exec-panel__title, +.sponsor-logos__title, +.publications-key__title, +.about-section h2, +.about-page .governance-links h2, +.governance-section h2, +.governance-links h2, +.fellowship-page__section-head h2, +.sponsor-section__head h2, +.sponsor-us-page .sponsor-donations h2, +.contribute-coc-band__text strong, +.governance-cta-band__text strong, +.webapps-archived__revival-text strong { + font-weight: var(--openms-section-title-weight, var(--openms-heading-lg-weight)) !important; + color: var(--openms-section-title-color, var(--openms-navy)) !important; +} + +/* Navy CTA bands — keep titles white over dark backgrounds */ +.contribute-coc-band__kicker, +.contribute-coc-band__text strong, +.governance-cta-band__kicker, +.governance-cta-band__text strong, +.webapps-archived__revival-kicker, +.webapps-archived__revival-text strong { + color: var(--openms-white) !important; +} + +/* ── Card titles ────────────────────────────────────────────────────────── */ +.openms-lib-about__tile-title, +.openms-lib-about__benefit-title, +.openms-lib-about__list-title, +.openms-lib-list__title, +.openms-lib-highlights__item-title, +.openms-lib-developers__card-title, +.openms-lib-resources__support-title, +.openms-lib-resources__assist-title, +.openms-lib-resources__explore-title, +.openms-lib-resources__route-title, +.openms-lib-resources__item-title, +.openms-lib-resource-card__title, +.openms-lib-topp-split__card-title, +.openms-step__title, +.home-pathways__step-label, +.ecosystem-home__card-title, +.webapps-project-card--catalog .webapps-project-card__name, +.community-events-home__card-title, +.news-home__card-title, +.contact-home__card-title, +.events-past-card__title, +.keyfeatures-modern__topic-title, +.webapps-project-card__title, +.webapps-archived-entry__name, +.webapps-contribute__action-title, +.contact-page__form-title, +.contact-page__path-title, +.contact-page__support-card-title, +.fellowship-page__form-title, +.fellowship-project-card__title, +.services-page__form-title, +.developer-retreat-highlights__card-title, +.publications-cite-card__title, +.leadership-card__name, +.donate-impact-card__title, +.contribute-channel__title, +.contribute-way__title, +.contribute-track__title, +.contribute-support__title, +.contribute-outreach__title, +.coc-principle__title, +.governance-compare__title, +.privacy-details__question-title, +.coc-details__question-title, +.sponsor-faq__question, +.sponsor-why__card h3, +.governance-card h2, +.infrastructure-card h2 { + font-weight: var(--openms-card-title-weight, 700) !important; +} + +.openms-lib-developers__card--build .openms-lib-developers__card-title, +.contribute-ways__feature-title, +.contribute-track__item--wide .contribute-track__title, +.contribute-track__item--mid .contribute-track__title, +.sponsor-benefits__title { + font-weight: var(--openms-card-title-weight-strong, 800) !important; +} + +/* ── Leads (intro under section / hero titles) ──────────────────────────── */ +.openms-lib-hero__lead, +.openms-lib-block__lead, +.openms-lib-about__lead, +.openms-lib-topp__lead, +.openms-lib-explore__lead, +.openms-lib-resources__lead, +.openms-lib-developers__lead, +.home-section-head__lead, +.hero-home__description, +.hero-modern__description, +.about-hero__description, +.governance-hero__description, +.webapps-featured__lead, +.webapps-affiliates__lead, +.webapps-archived__lead, +.webapps-contribute__lead, +.uni-partners__lead, +.trusted-by__subtitle, +.keyfeatures-modern__lead, +.community-home__lead, +.community-events-home__lead, +.contact-home__description, +.contact-page__section-lead, +.contribute-channels__lead, +.contribute-ways__lead, +.openms-steps__subtitle, +.sponsor-section__lead { + font-weight: var(--openms-body-weight, 400) !important; +} + +/* ── Eyebrows / kickers / section labels ────────────────────────────────── */ +.openms-lib-hero__eyebrow, +.openms-lib-about__eyebrow, +.openms-lib-topp-split__eyebrow, +.openms-lib-resources__eyebrow, +.openms-lib-block__eyebrow, +.openms-lib-developers__head .openms-lib-block__eyebrow, +.openms-lib-cta-band__eyebrow, +.openms-lib-cite__eyebrow, +.webapps-featured__eyebrow, +.webapps-affiliates__eyebrow, +.webapps-archived__eyebrow, +.webapps-archived__notice-title, +.webapps-contribute__eyebrow, +.contribute-channels__eyebrow, +.contribute-ways__eyebrow, +.contribute-outreach__eyebrow, +.contribute-conduct__eyebrow, +.contact-home__eyebrow, +.contact-page__path-label, +.contact-page__support-card-label, +.contact-page__section-eyebrow, +.ecosystem-home__eyebrow, +.keyfeatures-modern__eyebrow, +.community-home__eyebrow, +.community-events-home__eyebrow, +.trusted-by__home-eyebrow, +.trusted-by__eyebrow, +.home-pathways__eyebrow, +.hero-sponsors__label, +.uni-partners__eyebrow, +.openms-steps__eyebrow, +.governance-hero__eyebrow, +.governance-card__eyebrow, +.sponsor-eyebrow, +.sponsor-section-eyebrow, +.about-hero__eyebrow, +.news-home__eyebrow, +.publications-key__eyebrow, +.developer-retreat-highlights__eyebrow, +.developer-retreat-upcoming__eyebrow { + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-eyebrow-weight, 700) !important; +} + +/* ── Card / tile body copy ──────────────────────────────────────────────── */ +.openms-lib-about__tile-text, +.openms-lib-about__benefit-text, +.openms-lib-about__list-text, +.openms-lib-topp-split__card-text, +.openms-lib-resources__item-text, +.openms-lib-resources__feature-text, +.openms-lib-resources__support-text, +.openms-lib-resources__assist-text, +.openms-lib-resources__explore-text, +.openms-lib-list__text, +.openms-lib-developers__card-text, +.openms-lib-developers__route .openms-lib-developers__card-text, +.openms-step__text, +.webapps-project-card__text, +.webapps-project-detail-card__text, +.webapps-archived-entry__text, +.webapps-archived__notice-text, +.webapps-contribute__action-text, +.ecosystem-home__card-text, +.contact-home__card-text, +.contact-page__path-desc, +.contact-page__support-card-desc, +.news-home__card-summary, +.news-entry__summary, +.community-events-home__card-summary, +.community-events-home__empty-text, +.contribute-channel__text, +.contribute-track__text, +.contribute-support__text, +.contribute-way__text, +.contribute-ways__feature-text, +.keyfeatures-modern__topic-text, +.home-pathways__step-text, +.developer-retreat-highlights__card-text, +.donate-impact-card__text, +.fellowship-project-card__text, +.governance-compare__text, +.privacy-overview__text, +.coc-principle__text, +.events-past-card__summary { + font-size: var(--openms-body-size) !important; + font-weight: var(--openms-body-weight, 400) !important; +} + +/* Light-surface body/meta — use shared muted tokens without fighting inverse cards */ +.home-page .webapps-project-card__text, +.home-page .ecosystem-home__card-text, +.home-page .contact-home__card-text, +.home-page .news-home__card-summary, +.home-page .community-events-home__card-summary, +.home-page .keyfeatures-modern__topic-text, +.home-page .home-pathways__step-text, +.home-page .webapps-featured__lead, +.home-page .community-events-home__lead, +.home-page .contact-home__description, +.home-page .keyfeatures-modern__lead, +.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__text, +.webapps-project-card__text, +.webapps-project-detail-card__text, +.webapps-archived-entry__text, +.contribute-channel__text, +.contribute-track__text, +.contribute-way__text, +.news-home__card-summary, +.contact-home__card-text, +.contact-page__path-desc { + color: var(--openms-text-muted, var(--home-body-color, var(--olib-text-muted))); +} + +/* ── Meta / captions / authors / dates ──────────────────────────────────── */ +.news-home__card-authors, +.news-article__meta, +.news-card__date, +.news-card__date-day, +.news-card__date-month, +.contact-home__meta, +.contact-area__meta, +.publications-cite-card__meta, +.publications-cite-card__authors, +.publications-cite-card__journal, +.publications-cite-card__year, +.community-events-home__card-dates, +.community-events-home__date-month, +.community-events-home__date-year, +.community-events-home__category, +.governance-hero__meta, +.events-past-card__meta, +.members .role { + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-meta-weight, 600) !important; + color: var(--openms-text-soft, var(--pro-text-soft)); +} + +/* ── Tags / badges (compact labels inside cards) ────────────────────────── */ +.openms-lib-resources__item-tag, +.openms-lib-developers__card-tag, +.openms-lib-developers__route .openms-lib-developers__card-tag, +.contribute-channel__tag, +.webapps-project-card__badge, +.webapps-archived__notice-label, +.openms-step__tag, +.governance-membership__tag, +.governance-tile__tag { + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-label-weight, 700) !important; + letter-spacing: 0.1em !important; + text-transform: uppercase !important; + color: var(--pro-text-soft, var(--openms-text-soft)) !important; +} + +.ecosystem-home__card-tag { + font-size: 0.625rem !important; + font-weight: var(--openms-label-weight, 700) !important; + letter-spacing: 0.08em !important; + text-transform: uppercase !important; + color: var(--openms-white) !important; +} + +.news-banner__label { + font-weight: var(--openms-label-weight, 600) !important; +} + +/* ── Text CTAs (Read more →) — color already in brand-palette ───────────── */ +.openms-cta-link, +.webapps-project-card__cta, +.news-home__card-cta, +.contact-home__card-cta, +.community-events-home__card-cta, +.events-past-card__cta, +.contribute-channel__link, +.contribute-track__cta, +.contribute-way__link, +.openms-lib-about__tile-link, +.openms-lib-developers__card-link, +.openms-lib-developers__platform-link, +.coc-report__link, +.privacy-overview__note-link, +.contact-page__path-link, +.webapps-featured__extra-link, +.ecosystem-home__card-link, +.home-pathways__step-go, +.publications-cite-card__action { + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-cta-link-weight, 700) !important; +} + +/* Arrow nudge on hover — same motion for every text CTA */ +.openms-cta-link, +.webapps-project-card__cta, +.news-home__card-cta, +.contact-home__card-cta, +.community-events-home__card-cta, +.events-past-card__cta, +.contribute-channel__link, +.contribute-track__cta, +.contribute-way__link, +.openms-lib-about__tile-link, +.openms-lib-developers__card-link, +.openms-lib-developers__platform-link, +.openms-lib-resources__examples-link, +.openms-lib-resources__explore-link, +.openms-lib-list__link, +.openms-lib-topp__cta, +.coc-report__link, +.privacy-overview__note-link, +.contact-page__path-link, +.webapps-featured__extra-link, +.webapps-featured__show-all, +.ecosystem-home__card-link, +.community-news-events__view-all, +.community-events-home__view-all--inline, +.publications-cite-card__action, +.news-entry__action, +.trusted-by__wall-cta, +.openms-lib-resources__item-link { + gap: 0.35rem; + transition: gap 0.2s ease; +} + +.openms-cta-link span[aria-hidden="true"], +.webapps-project-card__cta-icon, +.news-home__card-cta span[aria-hidden="true"], +.contact-home__card-cta span[aria-hidden="true"], +.community-events-home__card-cta-icon, +.events-past-card__cta span[aria-hidden="true"], +.contribute-channel__link span[aria-hidden="true"], +.contribute-track__cta span[aria-hidden="true"], +.contribute-way__link span[aria-hidden="true"], +.openms-lib-about__tile-link span[aria-hidden="true"], +.openms-lib-developers__card-link span[aria-hidden="true"], +.openms-lib-developers__platform-link span[aria-hidden="true"], +.openms-lib-resources__examples-link span[aria-hidden="true"], +.openms-lib-resources__explore-link span[aria-hidden="true"], +.openms-lib-list__link span[aria-hidden="true"], +.openms-lib-topp__cta span[aria-hidden="true"], +.openms-step__cta-arrow, +.coc-report__link span[aria-hidden="true"], +.privacy-overview__note-link span[aria-hidden="true"], +.contact-page__path-link span[aria-hidden="true"], +.webapps-featured__extra-link span[aria-hidden="true"], +.webapps-featured__show-all-icon, +.ecosystem-home__card-link-icon, +.community-news-events__view-all-icon, +.publications-cite-card__action span[aria-hidden="true"], +.news-entry__action span[aria-hidden="true"], +.trusted-by__card-action-icon, +.openms-lib-resources__item-link span[aria-hidden="true"], +.home-pathways__step-go { + display: inline-block; + transition: transform 0.2s ease; +} + +.openms-cta-link:hover, +.openms-cta-link:focus-visible, +.webapps-project-card__surface:hover .webapps-project-card__cta, +.webapps-project-card__surface:focus-visible .webapps-project-card__cta, +.news-home__card-link:hover .news-home__card-cta, +.news-home__card-link:focus-visible .news-home__card-cta, +.contact-home__card:hover .contact-home__card-cta, +.contact-home__card:focus-visible .contact-home__card-cta, +.community-events-home__card-link:hover .community-events-home__card-cta, +.community-events-home__card-link:focus-visible .community-events-home__card-cta, +.contribute-channel:hover .contribute-channel__link, +.contribute-channel__link:hover, +.contribute-channel__link:focus-visible, +.contribute-track__cta:hover, +.contribute-track__cta:focus-visible, +.contribute-way:hover .contribute-way__link, +.contribute-way__link:hover, +.contribute-way__link:focus-visible, +.openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-about__tile-link:hover, +.openms-lib-about__tile-link:focus-visible, +.openms-lib-developers__card-link:hover, +.openms-lib-developers__card-link:focus-visible, +.openms-lib-developers__platform-link:hover, +.openms-lib-developers__platform-link:focus-visible, +.openms-lib-resources__examples-link:hover, +.openms-lib-resources__examples-link:focus-visible, +.openms-lib-resources__explore-item:hover .openms-lib-resources__explore-link, +.openms-lib-resources__explore-link:hover, +.openms-lib-list__link:hover, +.openms-lib-list__link:focus-visible, +.openms-lib-topp__cta:hover, +.openms-lib-topp__cta:focus-visible, +.coc-report__link:hover, +.coc-report__link:focus-visible, +.privacy-overview__note-link:hover, +.privacy-overview__note-link:focus-visible, +.contact-page__path-link:hover, +.contact-page__path-link:focus-visible, +.webapps-featured__extra-link:hover, +.webapps-featured__extra-link:focus-visible, +.webapps-featured__show-all:hover, +.webapps-featured__show-all:focus-visible, +.ecosystem-home__card:hover .ecosystem-home__card-link, +.ecosystem-home__card-link:hover, +.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, +.publications-cite-card__action:hover, +.publications-cite-card__action:focus-visible, +.news-entry__action:hover, +.news-entry__action:focus-visible, +.trusted-by__wall-card:hover .trusted-by__wall-cta, +.openms-lib-resources__item:hover .openms-lib-resources__item-link { + gap: 0.5rem; +} + +.openms-cta-link:hover span[aria-hidden="true"], +.openms-cta-link:focus-visible span[aria-hidden="true"], +.webapps-project-card__surface:hover .webapps-project-card__cta-icon, +.webapps-project-card__surface:focus-visible .webapps-project-card__cta-icon, +.news-home__card-link:hover .news-home__card-cta span[aria-hidden="true"], +.contact-home__card:hover .contact-home__card-cta span[aria-hidden="true"], +.community-events-home__card-link:hover .community-events-home__card-cta-icon, +.contribute-channel:hover .contribute-channel__link span[aria-hidden="true"], +.contribute-channel__link:hover span[aria-hidden="true"], +.contribute-track__cta:hover span[aria-hidden="true"], +.contribute-way:hover .contribute-way__link span[aria-hidden="true"], +.contribute-way__link:hover span[aria-hidden="true"], +.openms-lib-about__tile:hover .openms-lib-about__tile-link span[aria-hidden="true"], +.openms-lib-about__tile-link:hover span[aria-hidden="true"], +.openms-lib-developers__card-link:hover span[aria-hidden="true"], +.openms-lib-developers__platform-link:hover span[aria-hidden="true"], +.openms-lib-resources__examples-link:hover span[aria-hidden="true"], +.openms-lib-resources__examples-link:focus-visible span[aria-hidden="true"], +.openms-lib-resources__explore-item:hover .openms-lib-resources__explore-link span[aria-hidden="true"], +.openms-lib-resources__explore-link:hover span[aria-hidden="true"], +.openms-lib-list__link:hover span[aria-hidden="true"], +.openms-lib-topp__cta:hover span[aria-hidden="true"], +.openms-step__cta:hover .openms-step__cta-arrow, +.openms-step__cta:focus-visible .openms-step__cta-arrow, +.coc-report__link:hover span[aria-hidden="true"], +.privacy-overview__note-link:hover span[aria-hidden="true"], +.contact-page__path-link:hover span[aria-hidden="true"], +.webapps-featured__extra-link:hover span[aria-hidden="true"], +.webapps-featured__show-all:hover .webapps-featured__show-all-icon, +.ecosystem-home__card:hover .ecosystem-home__card-link-icon, +.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, +.publications-cite-card__action:hover span[aria-hidden="true"], +.news-entry__action:hover span[aria-hidden="true"], +.trusted-by__wall-card:hover .trusted-by__card-action-icon, +.openms-lib-resources__item:hover .openms-lib-resources__item-link span[aria-hidden="true"], +.home-pathways__step:hover .home-pathways__step-go, +.home-pathways__step:focus-within .home-pathways__step-go { + transform: translateX(2px); +} + +/* One text-link colour everywhere (not buttons, nav, or dark-band copy) */ +.community-news-events__view-all, +.community-events-home__view-all--inline, +.openms-lib-resources__examples-link, +.publications-cite-card__title a, +.openms-lib-cite a:not(.openms-lib-btn), +.openms-lib-block__lead a, +.openms-lib-list__bullets a, +.openms-lib-block__note a, +.openms-lib-list__link, +.keyfeatures-modern__note a, +.keyfeatures:not(.keyfeatures-modern) a, +.casestudies a, +.governance-jump-links a, +.infrastructure-card h2 a, +.publication-title-link, +.fellowship-project-card__title a, +.news-article__toc a, +.news-entry__action, +.sponsor-faq__answer a, +.contribute-way__text a, +.contribute-outreach__contact a, +.privacy-details__rich a, +.webapps-catalog__contact a { + color: var(--openms-content-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-content-link, var(--openms-navy)) !important; +} + +.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, +.openms-lib-resources__examples-link:hover, +.openms-lib-resources__examples-link:focus-visible, +.publications-cite-card__title a:hover, +.publications-cite-card__title a:focus-visible, +.openms-lib-cite a:not(.openms-lib-btn):hover, +.openms-lib-cite a:not(.openms-lib-btn):focus-visible, +.openms-lib-block__lead a:hover, +.openms-lib-block__lead a:focus-visible, +.openms-lib-list__bullets a:hover, +.openms-lib-list__bullets a:focus-visible, +.openms-lib-block__note a:hover, +.openms-lib-block__note a:focus-visible, +.openms-lib-list__link:hover, +.openms-lib-list__link:focus-visible, +.keyfeatures-modern__note a:hover, +.keyfeatures-modern__note a:focus-visible, +.keyfeatures:not(.keyfeatures-modern) a:hover, +.casestudies a:hover, +.governance-jump-links a:hover, +.infrastructure-card h2 a:hover, +.publication-title-link:hover, +.fellowship-project-card__title a:hover, +.news-article__toc a:hover, +.news-entry__action:hover, +.sponsor-faq__answer a:hover, +.contribute-way__text a:hover, +.contribute-outreach__contact a:hover, +.privacy-details__rich a:hover, +.webapps-catalog__contact a:hover, +.openms-cta-link:hover, +.openms-cta-link:focus-visible, +.webapps-project-card__surface:hover .webapps-project-card__cta, +.news-home__card-link:hover .news-home__card-cta, +.contact-home__card:hover .contact-home__card-cta, +.community-events-home__card-link:hover .community-events-home__card-cta, +.contribute-channel__link:hover, +.contribute-track__cta:hover, +.contribute-way__link:hover, +.openms-lib-about__tile-link:hover, +.openms-lib-developers__card-link:hover, +.openms-lib-developers__platform-link:hover, +.coc-report__link:hover, +.privacy-overview__note-link:hover, +.contact-page__path-link:hover, +.webapps-featured__extra-link:hover, +.ecosystem-home__card:hover .ecosystem-home__card-link, +.home-pathways__step:hover .home-pathways__step-go { + color: var(--openms-content-link-hover, var(--openms-blue)) !important; + -webkit-text-fill-color: var(--openms-content-link-hover, var(--openms-blue)) !important; +} + +/* No underline on link hover — arrow nudge is the hover cue */ +a:hover, +a:focus-visible, +a:hover * { + text-decoration: none !important; +} + +/* ── Disabled / status helpers ──────────────────────────────────────────── */ +[disabled], +:disabled, +.is-disabled, +.news-pager__btn:disabled { + color: var(--openms-text-disabled); +} + +.is-success, +.text-success { + color: var(--openms-text-success); +} + +.is-warning, +.text-warning { + color: var(--openms-text-warning); +} + +.is-error, +.is-danger, +.text-error, +.text-danger { + color: var(--openms-text-error); +} + +/* Non-catalog app names stay compact; homepage catalog matches Ecosystem titles */ +.webapps-project-card:not(.webapps-project-card--catalog) .webapps-project-card__name, +.webapps-project-detail-card__name { + font-size: 0.9375rem !important; /* 15px */ + font-weight: 500 !important; + line-height: 1.3 !important; +} + +/* Mobile — text links a step larger for tap readability */ +@media (max-width: 720px) { + .openms-cta-link, + .webapps-project-card__cta, + .news-home__card-cta, + .contact-home__card-cta, + .community-events-home__card-cta, + .events-past-card__cta, + .contribute-channel__link, + .contribute-track__cta, + .contribute-way__link, + .openms-lib-about__tile-link, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .coc-report__link, + .privacy-overview__note-link, + .contact-page__path-link, + .webapps-featured__extra-link, + .ecosystem-home__card-link, + .home-pathways__step-go, + .footer-link-group ul li a, + .footer-link-group ul li a.footer-link-contact-us, + .openms-content-link, + .openms-lib-layout :where(p, li, dd, td, .content) > a:not([class]):not(.openms-lib-btn), + .home-page :where(p, li, dd, td) > a:not([class]):not(.openms-lib-btn):not(.navbar-item), + .contribute-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn), + .news-page-layout :where(p, li) > a:not([class]):not(.openms-lib-btn), + .community-calendar-layout :where(p, li) > a:not([class]):not(.openms-lib-btn), + [class$="-page-layout"] :where(p, li) > a:not([class]):not(.openms-lib-btn) { + font-size: var(--openms-body-size) !important; + } +} + +/* For Developers / Contribute — text links, not pills */ +#for-developers .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__platform-link, +#for-developers .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-link, +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__card-link, +.openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__platform-link { + display: inline-flex !important; + align-items: center; + align-self: flex-start; + flex: 0 0 auto !important; + gap: 0.35rem !important; + width: fit-content !important; + max-width: 100% !important; + min-height: 0 !important; + height: auto !important; + margin-top: auto; + padding: 0 !important; + border: none !important; + border-radius: 0 !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + transform: none !important; + overflow: visible !important; + white-space: normal !important; + overflow-wrap: anywhere; + opacity: 1 !important; + visibility: visible !important; + pointer-events: auto !important; + color: var(--openms-cta-link, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-cta-link, var(--openms-navy)) !important; + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-cta-link-weight, 700) !important; + line-height: 1.3 !important; + text-decoration: none !important; +} + +#for-developers .openms-lib-developers__platforms { + display: flex !important; + flex-wrap: wrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 0.55rem 1rem !important; + width: 100%; +} + +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms { + flex-wrap: nowrap !important; + flex-direction: row !important; +} + +#for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn { + flex: 1 1 0 !important; + white-space: nowrap !important; +} + +#for-developers .openms-lib-developers__card-link:hover, +#for-developers .openms-lib-developers__card-link:focus-visible, +#for-developers .openms-lib-developers__platform-link:hover, +#for-developers .openms-lib-developers__platform-link:focus-visible, +#for-developers .openms-lib-developers__platform-btn:hover, +#for-developers .openms-lib-developers__platform-btn:focus-visible { + background: transparent !important; + border: none !important; + box-shadow: none !important; + transform: none !important; + color: var(--openms-cta-link-hover, var(--openms-blue)) !important; + gap: 0.5rem !important; + text-decoration: none !important; +} + +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card--interactive:focus-visible .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-link, +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-link, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-link, +#for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +#for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__card-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-link, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-link { + background: transparent !important; + border: none !important; + box-shadow: none !important; + transform: none !important; + opacity: 1 !important; + pointer-events: auto !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +#for-developers .openms-lib-developers__platform-link i, +#for-developers .openms-lib-developers__platform-link .fab, +#for-developers .openms-lib-developers__platform-link .fas, +#for-developers .openms-lib-developers__platform-link .svg-inline--fa, +#for-developers .openms-lib-developers__platform-btn i, +#for-developers .openms-lib-developers__platform-btn .fab, +#for-developers .openms-lib-developers__platform-btn .fas, +#for-developers .openms-lib-developers__platform-btn .svg-inline--fa { + color: inherit !important; +} + +#for-developers .openms-lib-developers__platform-link .svg-inline--fa path, +#for-developers .openms-lib-developers__platform-btn .svg-inline--fa path { + fill: currentColor !important; +} diff --git a/assets/css/zzzzzzz-no-hover-underline.css b/assets/css/zzzzzzz-no-hover-underline.css new file mode 100644 index 00000000..78bc86c8 --- /dev/null +++ b/assets/css/zzzzzzz-no-hover-underline.css @@ -0,0 +1,25 @@ +/* Last-loaded: never underline links on hover/focus, any page */ +html body a:hover, +html body a:focus-visible, +html body a:active, +html body a:hover *, +html body a:focus-visible *, +html body a:active *, +html body [href]:hover, +html body [href]:focus-visible, +html body [href]:hover *, +html body [href]:focus-visible *, +html body :hover > a, +html body a:hover::before, +html body a:hover::after, +html body a:focus-visible::before, +html body a:focus-visible::after { + text-decoration: none !important; + text-decoration-line: none !important; +} + +.casestudies-underline:hover::before, +.casestudies-underline:focus::before, +.casestudies-underline:active::before { + right: 100% !important; +} diff --git a/assets/css/zzzzzzzz-page-solution-unify.css b/assets/css/zzzzzzzz-page-solution-unify.css new file mode 100644 index 00000000..a005f409 --- /dev/null +++ b/assets/css/zzzzzzzz-page-solution-unify.css @@ -0,0 +1,1685 @@ +/* Unify remaining pages with the /openms-lib/ solution design. + Loads last so page-specific leftovers inherit the same canvas, + type, prose, and component language without a second system. */ + +.openms-lib-page--solution, +.openms-lib-page--solution.openms-lib-page--hub, +.openms-lib-page--solution.openms-lib-page--openms-lib { + --sol-radius: 1rem; + --sol-radius-lg: 1.25rem; + --sol-canvas: #f8f8f9; + --sol-soft: #f2f3f5; + --sol-line: rgba(var(--openms-navy-rgb), 0.1); + --sol-ink: rgba(var(--openms-dark-rgb), 0.72); + --sol-title: rgba(var(--openms-dark-rgb), 0.72); + --openms-page-hero-title-color: rgba(var(--openms-dark-rgb), 0.72); + --openms-section-title-color: rgba(var(--openms-dark-rgb), 0.72); + --sol-body: rgba(var(--openms-dark-rgb), 0.72); + --sol-muted: rgba(var(--openms-dark-rgb), 0.55); + --sol-eyebrow: rgba(var(--openms-dark-rgb), 0.55); + --sol-accent: var(--openms-blue); + --sol-section-y: clamp(3.5rem, 7vw, 5.25rem); + --pro-section-y: var(--sol-section-y); + --olib-section-y: var(--sol-section-y); + --sol-stack-eyebrow: var(--openms-stack-eyebrow, 12px); + --sol-stack-lead: var(--openms-stack-lead, 20px); + --openms-page-hero-title-size: clamp(1.65rem, 1.05rem + 2.6vw, 3.25rem); + background: var(--sol-canvas); +} + +/* Our Sponsors hero — white canvas behind About us / title / lead */ +.openms-lib-page--our-sponsors.openms-lib-page--solution, +.openms-lib-page--our-sponsors.openms-lib-page--solution .openms-lib-page__intro, +.openms-lib-page--our-sponsors.openms-lib-page--solution .openms-lib-hero--solution, +.openms-lib-page--our-sponsors.openms-lib-page--solution .openms-lib-hero--pro { + background: var(--openms-white, #fff) !important; +} + +/* Page-specific section titles share the solution H2 treatment */ +.openms-lib-page--solution .contribute-channels__title, +.openms-lib-page--solution .contribute-ways__title, +.openms-lib-page--solution .contribute-conduct__title, +.openms-lib-page--solution .governance-section h2, +.openms-lib-page--solution .governance-links h2, +.openms-lib-page--solution .about-section h2, +.openms-lib-page--solution .developer-retreat-highlights__title, +.openms-lib-page--solution .developer-retreat-upcoming__title, +.openms-lib-page--solution .events-past-toolbar__title, +.openms-lib-page--solution .community-events-page__title, +.openms-lib-page--solution .sponsor-logos__title, +.openms-lib-page--solution .publications-key__title, +.openms-lib-page--solution .fellowship-page__section-head h2, +.openms-lib-page--solution .sponsor-section__head h2, +.openms-lib-page--solution .sponsor-us-page .sponsor-donations h2, +.openms-lib-page--solution .openms-lib-prose h2 { + font-family: var(--openms-font-heading) !important; + font-size: var(--openms-section-title-size) !important; + font-weight: 700 !important; + letter-spacing: -0.02em !important; + line-height: 1.2 !important; + text-transform: uppercase !important; + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; +} + +.openms-lib-page--solution .contribute-channels__eyebrow, +.openms-lib-page--solution .contribute-ways__eyebrow, +.openms-lib-page--solution .contribute-track__eyebrow, +.openms-lib-page--solution .contribute-support__eyebrow, +.openms-lib-page--solution .contribute-outreach__eyebrow, +.openms-lib-page--solution .governance-card__eyebrow, +.openms-lib-page--solution .openms-lib-prose__toc-title { + display: inline-flex !important; + align-items: center; + gap: 0.4rem; + font-family: var(--openms-font-body) !important; + font-size: 0.75rem !important; + font-weight: 650 !important; + letter-spacing: 0.16em !important; + line-height: 1.3 !important; + text-transform: uppercase !important; + color: var(--sol-eyebrow) !important; + -webkit-text-fill-color: var(--sol-eyebrow) !important; +} + +.openms-lib-page--solution .contribute-channel__title, +.openms-lib-page--solution .contribute-way__title, +.openms-lib-page--solution .contribute-track__title, +.openms-lib-page--solution .contribute-support__title, +.openms-lib-page--solution .contribute-outreach__title, +.openms-lib-page--solution .coc-principle__title, +.openms-lib-page--solution .governance-card h2, +.openms-lib-page--solution .donate-impact-card__title, +.openms-lib-page--solution .openms-lib-prose h3, +.openms-lib-page--solution .openms-lib-prose h4 { + font-family: var(--openms-font-heading) !important; + font-size: var(--openms-card-title-size) !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; + line-height: 1.3 !important; + text-transform: uppercase !important; + color: var(--sol-title) !important; +} + +/* ── Documentation / leftover markdown pages ─────────────────────────── */ + +.openms-lib-page--doc .openms-lib-prose-section { + padding-block: 0; +} + +.openms-lib-page--doc .openms-lib-page__body > .openms-lib-page__anchor:last-child, +.openms-lib-page--help .openms-lib-page__body > .openms-lib-page__anchor:last-child, +.openms-lib-page--news-article .openms-lib-page__body > .openms-lib-page__anchor:last-child { + padding-bottom: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)); +} + +.openms-lib-page--doc .openms-lib-resources__inner { + display: grid; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)); +} + +.openms-lib-prose { + max-width: none; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg, 1rem); + font-weight: var(--openms-body-weight); + line-height: 1.65; + color: var(--sol-body, rgba(var(--openms-dark-rgb), 0.72)); +} + +.openms-lib-prose > *:first-child { + margin-top: 0; +} + +.openms-lib-prose h1, +.openms-lib-prose h2, +.openms-lib-prose h3, +.openms-lib-prose h4, +.openms-lib-prose h5, +.openms-lib-prose h6 { + margin: 1.75rem 0 0.75rem; + color: var(--sol-title, rgba(var(--openms-dark-rgb), 0.92)); + scroll-margin-top: 6rem; +} + +.openms-lib-prose h1 { + font-family: var(--openms-font-heading); + font-size: var(--openms-section-title-size); + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.2; + text-transform: uppercase; +} + +.openms-lib-prose p, +.openms-lib-prose li, +.openms-lib-prose dd, +.openms-lib-prose dt { + font-family: var(--openms-font-body); + color: var(--sol-body, rgba(var(--openms-dark-rgb), 0.72)); +} + +.openms-lib-prose p { + margin: 0 0 1rem; +} + +.openms-lib-prose p + p { + margin-top: var(--openms-stack-paragraph, 16px); +} + +.openms-lib-prose a { + color: var(--openms-content-link, var(--openms-blue)); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; + text-underline-offset: var(--openms-content-link-underline-offset, 0.12em); +} + +.openms-lib-prose a:hover, +.openms-lib-prose a:focus-visible { + color: var(--openms-content-link-hover, var(--openms-blue)); +} + +.openms-lib-prose ul, +.openms-lib-prose ol { + margin: 0 0 1rem; + padding-left: 1.25rem; +} + +.openms-lib-prose li { + margin-bottom: 0.4rem; +} + +.openms-lib-prose li > ul, +.openms-lib-prose li > ol { + margin: 0.35rem 0 0; +} + +.openms-lib-prose hr { + margin: 2rem 0; + border: 0; + border-top: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)); +} + +.openms-lib-prose strong { + font-weight: 600; + color: var(--sol-title, rgba(var(--openms-dark-rgb), 0.92)); +} + +.openms-lib-prose img, +.openms-lib-prose figure, +.openms-lib-prose iframe { + max-width: 100%; + height: auto; +} + +.openms-lib-prose img, +.openms-lib-prose figure { + border-radius: var(--sol-radius, 1rem); +} + +.openms-lib-prose figure { + margin: 1.5rem 0; +} + +.openms-lib-prose figcaption { + margin-top: 0.5rem; + font-size: var(--openms-text-min); + color: var(--sol-muted); +} + +.openms-lib-prose table { + width: 100%; + margin: 0 0 1.25rem; + border-collapse: collapse; + overflow: hidden; + border: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--sol-radius, 1rem); +} + +.openms-lib-prose th, +.openms-lib-prose td { + padding: 0.7rem 0.85rem; + border-bottom: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)); + text-align: left; + vertical-align: top; +} + +.openms-lib-prose th { + font-weight: 700; + color: var(--sol-title); + background: var(--sol-soft, #f2f3f5); +} + +.openms-lib-prose pre, +.openms-lib-prose code { + font-family: var(--openms-font-mono, "JetBrains Mono", ui-monospace, monospace); +} + +.openms-lib-prose code { + padding: 0.12em 0.35em; + border-radius: 0.4rem; + background: var(--sol-soft, #f2f3f5); + font-size: 0.92em; + color: var(--sol-ink); +} + +.openms-lib-prose pre { + margin: 0 0 1.25rem; + padding: 1rem 1.15rem; + overflow-x: auto; + border: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--sol-radius, 1rem); + background: var(--sol-soft, #f2f3f5); +} + +.openms-lib-prose pre code { + padding: 0; + background: none; +} + +.openms-lib-prose blockquote, +.openms-lib-prose .notice { + margin: 0 0 1.25rem; + padding: 1rem 1.15rem; + border: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)); + border-left: 3px solid var(--sol-accent, var(--openms-blue)); + border-radius: var(--sol-radius, 1rem); + background: var(--sol-soft, #f2f3f5); +} + +.openms-lib-prose blockquote p:last-child, +.openms-lib-prose .notice p:last-child { + margin-bottom: 0; +} + +.openms-lib-prose__toc { + padding: 1rem 1.25rem; + border: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--sol-radius, 1rem); + background: rgba(var(--openms-navy-rgb), 0.03); +} + +.openms-lib-prose__toc-title { + margin: 0 0 0.5rem !important; +} + +.openms-lib-prose__toc ul { + margin: 0; + padding: 0; + list-style: none; +} + +.openms-lib-prose__toc ul ul { + margin-top: 0.3rem; + padding-left: 0.9rem; +} + +.openms-lib-prose__toc li { + margin: 0 0 0.3rem; +} + +.openms-lib-prose__toc a { + color: var(--openms-content-link, var(--openms-blue)); + font-weight: 600; + text-decoration: none; +} + +/* Help + news article content sit on the same rail */ +.openms-lib-page--help .governance-section, +.openms-lib-page--help .help-page__resources, +.openms-lib-page--news-article .news-page { + width: 100%; +} + +.openms-lib-page--help .governance-section h2 { + margin-top: 0; +} + +.openms-lib-page--help .governance-card, +.openms-lib-page--solution .governance-card { + border: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)); + border-radius: var(--sol-radius, 1rem); + background: var(--openms-white, #fff); +} + +.openms-lib-page--news-article .news-article__content, +.openms-lib-page--news-article .openms-lib-prose { + color: var(--sol-body, rgba(var(--openms-dark-rgb), 0.72)); +} + +.openms-lib-page--news-article .news-page-hero--article .openms-lib-hero__title { + max-width: min(28ch, 100%); +} + +@media (max-width: 720px) { + .openms-lib-prose table { + display: block; + overflow-x: auto; + } +} + +/* ============================================================================ + Links + buttons — one color/layout language from /openms-lib/ + ============================================================================ */ + +.openms-lib-page :is(p, li, dd, td, figcaption):not(.governance-card__link) a:not(.openms-lib-btn):not(.navbar-item):not(.community-news-events__press-link), +.openms-lib-page .openms-lib-prose :is(p, li, dd, td) a:not(.openms-lib-btn), +.openms-lib-page .news-article__content :is(p, li) a:not(.openms-lib-btn), +.openms-lib-page .privacy-pro__rich :is(p, li) a:not(.openms-lib-btn), +.openms-lib-page .openms-lib-prose__toc a, +.openms-lib-page .news-article__toc a, +.openms-lib-page .news-article__back-link, +.openms-lib-page .contribute-channel__link, +.openms-lib-page .contribute-way__link, +.openms-lib-page .contribute-track__cta, +.openms-lib-page .contribute-project-link, +.openms-lib-page .contribute-outreach__contact a, +.openms-lib-page .contribute-outreach__social-link, +.openms-lib-page .openms-lib-developers__card-link, +.openms-lib-page .openms-lib-developers__platform-link, +.openms-lib-page .openms-lib-resources__explore-link, +.openms-lib-page .openms-lib-resources__item-link, +.openms-lib-page .openms-lib-about__tile-link, +.openms-lib-page .openms-lib-topp-split__card-link, +.openms-lib-page .openms-lib-list__link, +.openms-lib-page .openms-cta-link, +.openms-lib-page .publications-cite-card__title a, +.openms-lib-page .publications-cite-card__action, +.home-page :is(p, li, .keyfeatures-modern__note, .community-home__lead) a:not(.openms-lib-btn):not(.navbar-item), +.home-page .openms-cta-link, +.home-page .news-home__card-cta, +.home-page .contact-home__card-cta, +.home-page .community-events-home__card-cta, +.home-page .ecosystem-home__card-link, +.home-page .webapps-project-card__cta, +.home-page .community-news-events__view-all { + color: var(--openms-content-link, var(--openms-blue)) !important; + -webkit-text-fill-color: var(--openms-content-link, var(--openms-blue)) !important; + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none !important; +} + +.openms-lib-page .contribute-channel__link, +.openms-lib-page .contribute-way__link, +.openms-lib-page .contribute-track__cta, +.openms-lib-page .openms-lib-developers__card-link, +.openms-lib-page .openms-lib-developers__platform-link, +.openms-lib-page .openms-lib-resources__explore-link, +.openms-lib-page .openms-lib-resources__item-link, +.openms-lib-page .openms-lib-about__tile-link, +.openms-lib-page .openms-cta-link, +.openms-lib-page .news-article__back-link { + font-weight: var(--openms-cta-link-weight, 700) !important; +} + +.openms-lib-page :is(p, li):not(.governance-card__link) a:not(.openms-lib-btn):hover, +.openms-lib-page :is(p, li):not(.governance-card__link) a:not(.openms-lib-btn):focus-visible, +.openms-lib-page .contribute-channel__link:hover, +.openms-lib-page .contribute-channel:hover .contribute-channel__link, +.openms-lib-page .contribute-way__link:hover, +.openms-lib-page .contribute-way:hover .contribute-way__link, +.openms-lib-page .contribute-track__cta:hover, +.openms-lib-page .contribute-project-link:hover, +.openms-lib-page .openms-lib-developers__card-link:hover, +.openms-lib-page .openms-lib-developers__platform-link:hover, +.openms-lib-page .openms-lib-resources__item:hover .openms-lib-resources__item-link, +.openms-lib-page .openms-lib-about__tile:hover .openms-lib-about__tile-link, +.openms-lib-page .news-article__back-link:hover, +.home-page .news-home__card-link:hover .news-home__card-cta, +.home-page .contact-home__card:hover .contact-home__card-cta { + color: var(--openms-content-link-hover, var(--openms-blue)) !important; + -webkit-text-fill-color: var(--openms-content-link-hover, var(--openms-blue)) !important; + background: transparent !important; + border-color: transparent !important; + box-shadow: none !important; +} + +/* Text CTAs share one layout: blue label, no chip/pill chrome */ +.openms-lib-page .contribute-channel__link, +.openms-lib-page .contribute-way__link, +.openms-lib-page .contribute-track__cta, +.openms-lib-page .contribute-project-link, +.openms-lib-page .openms-lib-resources__item-link, +.openms-lib-page .openms-lib-about__tile-link, +.openms-lib-page .openms-lib-resources__explore-link, +.openms-lib-page .openms-lib-topp-split__card-link, +.openms-lib-page .openms-lib-developers__card-link, +.openms-lib-page .openms-lib-developers__platform-link, +.openms-lib-page .openms-cta-link, +.home-page .news-home__card-cta, +.home-page .contact-home__card-cta, +.home-page .community-events-home__card-cta, +.home-page .ecosystem-home__card-link, +.home-page .webapps-project-card__cta, +.home-page .community-news-events__view-all { + display: inline-flex !important; + align-items: center; + align-self: flex-start; + width: fit-content; + min-height: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + font-weight: var(--openms-cta-link-weight, 700) !important; + text-decoration: none !important; +} + +/* Card link rows are wrappers, not buttons */ +.openms-lib-page .governance-card__link { + display: flex !important; + flex-wrap: wrap; + align-items: center; + gap: 0.65rem 0.75rem; + width: 100%; + max-width: none; + min-height: 0; + margin-top: 1rem; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + color: inherit !important; + -webkit-text-fill-color: inherit !important; +} + +.openms-lib-page p.governance-card__link a, +.openms-lib-page .governance-card__link > a { + display: inline-flex !important; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-height: 2.75rem; + padding: var(--openms-btn-padding, 0.55rem 1.1rem); + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + border-radius: var(--openms-btn-pill-radius, 999px); + background: transparent !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + 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, transparent); + transition: var(--openms-btn-motion, 0.18s ease); +} + +.openms-lib-page .governance-card__link a:hover, +.openms-lib-page .governance-card__link a:focus-visible { + border-color: var(--openms-blue) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + background: transparent !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); +} + +/* Official buttons — always painted and unclipped */ +.openms-lib-page .openms-lib-btn, +.home-page .openms-lib-btn, +[class$="-page-layout"] .openms-lib-btn { + opacity: 1 !important; + visibility: visible !important; + overflow: visible !important; + pointer-events: auto !important; +} + +.openms-lib-page .openms-lib-btn--primary, +.openms-lib-page a.openms-lib-btn--primary, +.home-page .openms-lib-btn--primary, +[class$="-page-layout"] .openms-lib-btn--primary { + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + border: 2px solid var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page .openms-lib-btn--primary .openms-lib-btn__label, +.openms-lib-page .openms-lib-btn--primary i, +.openms-lib-page .openms-lib-btn--primary .fab, +.openms-lib-page .openms-lib-btn--primary .fas, +.openms-lib-page .openms-lib-btn--primary .svg-inline--fa { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +.openms-lib-page .openms-lib-btn--ghost, +.openms-lib-page a.openms-lib-btn--ghost, +.openms-lib-page .openms-lib-page__cite a.openms-lib-btn--ghost, +.openms-lib-page .openms-lib-cite a.openms-lib-btn--ghost, +.home-page .openms-lib-btn--ghost, +[class$="-page-layout"] .openms-lib-btn--ghost { + background: transparent !important; + background-color: transparent !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page .openms-lib-btn--ghost .openms-lib-btn__label, +.openms-lib-page .openms-lib-btn--ghost i, +.openms-lib-page .openms-lib-btn--ghost .fab, +.openms-lib-page .openms-lib-btn--ghost .fas, +.openms-lib-page .openms-lib-btn--ghost .svg-inline--fa { + color: inherit !important; + -webkit-text-fill-color: inherit !important; + fill: currentColor !important; +} + +/* Sponsorship level cards — same outline pill as navbar “Sponsor Us” */ +.openms-lib-page--sponsor-us .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tier__cta.openms-lib-btn, +.openms-lib-page--sponsor-us .sponsor-tier__cta.openms-lib-btn--ghost, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured.sponsor-tier--active .sponsor-tier__cta { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + align-self: flex-start !important; + width: fit-content !important; + max-width: 100% !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + height: auto !important; + margin-top: auto !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + font-family: var(--openms-font-body) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: nowrap !important; + box-shadow: none !important; + transform: none !important; +} + +.openms-lib-page--sponsor-us .sponsor-tier__cta .sponsor-tier__cta-label, +.openms-lib-page--sponsor-us .sponsor-tier__cta .openms-lib-btn__label { + color: inherit !important; + -webkit-text-fill-color: inherit !important; +} + +.openms-lib-page--sponsor-us .sponsor-tier:hover .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tier:focus-within .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:focus-visible .sponsor-tier__cta, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured .sponsor-tier__cta:hover, +.openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta:hover { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-navy-rgb), 0.72) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) var(--openms-btn-glow) !important; +} + +/* Assist primary stays the navbar primary recipe; ghost/platform stay ghost */ + +/* Dark bands: inverted primary (white pill, navy label) so text stays visible */ +.openms-lib-page .contribute-coc-band .openms-lib-btn--primary, +.openms-lib-page .contribute-coc-band a.openms-lib-btn--primary, +.openms-lib-page .governance-cta-band .openms-lib-btn--primary, +.openms-lib-page .governance-cta-band a.openms-lib-btn--primary, +.openms-lib-page--contribute .contribute-coc-band__actions .openms-lib-btn--primary, +.openms-lib-page--governance .governance-cta-band__actions .openms-lib-btn--primary { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + border: 2px solid var(--openms-white) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page .contribute-coc-band .openms-lib-btn--primary .openms-lib-btn__label, +.openms-lib-page .contribute-coc-band .openms-lib-btn--primary i, +.openms-lib-page .governance-cta-band .openms-lib-btn--primary .openms-lib-btn__label, +.openms-lib-page .governance-cta-band .openms-lib-btn--primary i { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +/* Dark bands keep white ghost buttons readable */ +.openms-lib-page .contribute-coc-band .openms-lib-btn--ghost, +.openms-lib-page .contribute-coc-band a.openms-lib-btn--ghost, +.openms-lib-page .governance-cta-band .openms-lib-btn--ghost, +.openms-lib-page .governance-cta-band a.openms-lib-btn--ghost, +.openms-lib-page .webapps-archived__revival .openms-lib-btn--ghost, +.openms-lib-page .webapps-archived__revival a.openms-lib-btn--ghost { + background: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page .contribute-coc-band .openms-lib-btn--ghost .openms-lib-btn__label, +.openms-lib-page .governance-cta-band .openms-lib-btn--ghost .openms-lib-btn__label, +.openms-lib-page .webapps-archived__revival .openms-lib-btn--ghost .openms-lib-btn__label { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* ============================================================================ + Titles — one gray, one size per role + ============================================================================ */ + +.openms-lib-page--solution, +.home-page { + --openms-page-hero-title-color: rgba(var(--openms-dark-rgb), 0.72); + --openms-section-title-color: rgba(var(--openms-dark-rgb), 0.72); + --sol-title: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--solution .openms-lib-hero__title, +.openms-lib-page--solution .openms-lib-hero__accent, +.openms-lib-page--solution .openms-lib-hero__accent--warm, +.openms-lib-page--solution :is( + .openms-lib-resources__title, + .openms-lib-about__title, + .openms-lib-topp-split__title, + .openms-lib-developers__title, + .openms-lib-cite__title, + .openms-lib-block__title, + .community-events-page__title, + .community-news-events__column-title, + .community-news-events__column-title-accent, + .contribute-channels__title, + .contribute-ways__title, + .contribute-conduct__title, + .events-past-toolbar__title, + .fellowship-page__section-head h2, + .sponsor-section__head h2, + .developer-retreat-highlights__title, + .developer-retreat-upcoming__title +), +.openms-lib-page--solution :is( + .openms-lib-developers__card-title, + .openms-lib-developers__card-title span, + .community-news-events__press-title, + .news-home__card-title, + .community-events-home__card-title, + .governance-card h2, + .contribute-channel__title, + .contribute-track__title, + .contribute-way__title +):not(.openms-lib-resources__explore-title) { + color: var(--sol-title) !important; + -webkit-text-fill-color: var(--sol-title) !important; +} + +.openms-lib-page--solution :is( + .openms-lib-resources__title, + .openms-lib-about__title, + .openms-lib-topp-split__title, + .openms-lib-developers__title, + .openms-lib-cite__title, + .openms-lib-block__title, + .community-events-page__title, + .contribute-channels__title, + .contribute-ways__title, + .contribute-conduct__title +) { + font-size: var(--openms-section-title-size) !important; +} + +.home-page :is( + .home-section-head__title, + .ecosystem-home__title, + .community-home__title, + .community-news-events__column-title, + .community-news-events__column-title-accent, + .keyfeatures-modern__title, + .contact-home__title, + .uni-partners__title +) { + color: var(--sol-title, rgba(var(--openms-dark-rgb), 0.72)) !important; + -webkit-text-fill-color: var(--sol-title, rgba(var(--openms-dark-rgb), 0.72)) !important; + font-size: var(--openms-section-title-size) !important; +} + +.home-page__hero .hero-home__title, +.home-page__hero .hero-home__title-accent, +.contribute-coc-band__text strong, +.governance-cta-band__text strong, +.webapps-archived__revival-text strong { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* ============================================================================ + Forms — one centered stack (fellowship / support / contact / partnerships / donate) + ============================================================================ */ + +.openms-lib-page--fellowship .fellowship-application, +.openms-lib-page--services-support .services-support-application, +.openms-lib-page--research-partnerships .rp-application, +.openms-lib-page--donate .donate-application, +.openms-lib-page--contact .contact-application { + padding-block: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; +} + +.openms-lib-page--fellowship #fellowship-application, +.openms-lib-page--fellowship .fellowship-application, +.openms-lib-page--services-support #quote, +.openms-lib-page--services-support .services-support-application, +.openms-lib-page--research-partnerships #partnership-form, +.openms-lib-page--research-partnerships .rp-application, +.openms-lib-page--donate #donate-form, +.openms-lib-page--donate .donate-application, +.openms-lib-page--contact #contact-form, +.openms-lib-page--contact .contact-application { + background: var(--openms-white, #fff) !important; +} + +.openms-lib-page--fellowship .fellowship-application__inner, +.openms-lib-page--services-support .services-support-application__inner, +.openms-lib-page--research-partnerships .rp-application__inner, +.openms-lib-page--donate .donate-application__inner, +.openms-lib-page--contact .contact-application__inner { + display: flex !important; + flex-direction: column; + align-items: center; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; + width: 100%; + max-width: var(--pro-max, 75rem); + margin-inline: auto; +} + +.openms-lib-page--fellowship .fellowship-application__head, +.openms-lib-page--services-support .services-support-application__head, +.openms-lib-page--research-partnerships .rp-application .openms-lib-resources__head, +.openms-lib-page--donate .donate-application .openms-lib-resources__head, +.openms-lib-page--contact .contact-application__head { + display: grid !important; + justify-items: center; + gap: 0; + width: 100%; + max-width: 42rem; + margin-inline: auto; + text-align: center; +} + +.openms-lib-page--fellowship .fellowship-application__head :is(.openms-lib-resources__eyebrow, .openms-lib-resources__title, .openms-lib-resources__lead), +.openms-lib-page--services-support .services-support-application__head :is(.openms-lib-resources__eyebrow, .openms-lib-resources__title, .openms-lib-resources__lead), +.openms-lib-page--research-partnerships .rp-application .openms-lib-resources__head :is(.openms-lib-resources__eyebrow, .openms-lib-resources__title, .openms-lib-resources__lead), +.openms-lib-page--donate .donate-application .openms-lib-resources__head :is(.openms-lib-resources__eyebrow, .openms-lib-resources__title, .openms-lib-resources__lead) { + width: 100%; + max-width: none; + margin-inline: auto; + text-align: center; + justify-self: center; +} + +.openms-lib-page--fellowship .fellowship-application__form-card, +.openms-lib-page--fellowship .fellowship-page__form-body, +.openms-lib-page--services-support .services-support-application__form, +.openms-lib-page--services-support .services-page__form-body, +.openms-lib-page--research-partnerships .rp-application__form, +.openms-lib-page--donate .donate-application__form, +.openms-lib-page--contact .contact-application__form, +.openms-lib-page--contact .contact-page__form-body { + width: 100% !important; + + margin-inline: auto !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: var(--openms-white, #fff) !important; + box-shadow: none !important; + overflow: visible !important; +} + +.openms-lib-page--fellowship .fellowship-page__tally-iframe, +.openms-lib-page--services-support .services-page__tally-iframe, +.openms-lib-page--research-partnerships .rp-application__tally-iframe, +.openms-lib-page--contact .contact-page__tally-iframe, +.openms-lib-page--donate .donate-page__zeffy-iframe { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.openms-lib-page--donate .donate-application__note { + width: 100%; + max-width: 48rem; + margin-inline: auto; + text-align: center; +} + +/* ============================================================================ + Dark / blue card hover — keep copy readable + ============================================================================ */ + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--box:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--box:focus-within { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover :is( + .openms-lib-developers__card-title, + .openms-lib-developers__card-title span, + .openms-lib-developers__card-subtitle, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .openms-lib-developers__platform-btn, + .openms-lib-btn, + .openms-lib-btn__label, + h3, + p, + a, + span +), +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within :is( + .openms-lib-developers__card-title, + .openms-lib-developers__card-title span, + .openms-lib-developers__card-subtitle, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .openms-lib-developers__platform-btn, + .openms-lib-btn, + .openms-lib-btn__label, + h3, + p, + a, + span +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-btn--ghost, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-btn--ghost, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within .openms-lib-developers__platform-btn { + background: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* ============================================================================ + Buttons — navbar pair only (primary fill / ghost outline) + ============================================================================ */ + +.openms-lib-page .openms-lib-btn, +.openms-lib-page a.openms-lib-btn, +.home-page .openms-lib-btn, +.home-page .openms-btn-primary, +.home-page .hero-home__btn, +[class$="-page-layout"] .openms-lib-btn { + box-sizing: border-box; + display: inline-flex !important; + align-items: center; + justify-content: center; + min-height: 2.75rem !important; + padding: 0.7rem 1.25rem !important; + border-radius: 999px !important; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min, 11pt) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + text-decoration: none !important; +} + +.openms-lib-page .openms-lib-resources__assist .openms-lib-btn--primary, +.openms-lib-page a.openms-lib-btn--primary.openms-lib-resources__assist-btn { + background: var(--openms-blue) !important; + border: 2px solid var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page .openms-lib-resources__assist .openms-lib-btn--ghost, +.openms-lib-page a.openms-lib-btn--ghost.openms-lib-resources__assist-btn, +.openms-lib-page a.openms-lib-btn--ghost.openms-lib-developers__platform-btn, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist a.openms-lib-btn--ghost { + background: transparent !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost .openms-lib-btn__label, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost i, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost .fab, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost .fas { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers a.openms-lib-btn--ghost.openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn { + background: transparent !important; + background-color: transparent !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .openms-lib-btn__label, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn i, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .fab, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .fas, +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn .svg-inline--fa { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: currentColor !important; +} + +/* Getting-started navy band — eyebrow, title, and lead stay white */ +.openms-lib-page--solution #getting-started .openms-lib-resources__title, +.openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__title { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__lead, +.openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__lead { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__eyebrow, +.openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__eyebrow { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* Dark navy/blue cards — readable copy at rest and on hover (wins last) */ +.openms-lib-page--solution .openms-lib-resources__explore-card, +.openms-lib-page--solution .openms-lib-resources__explore-card :is( + .openms-lib-resources__explore-title, + .openms-lib-resources__explore-text, + .openms-lib-resources__explore-link, + h3, + p, + span +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution .openms-lib-resources__explore-card .openms-lib-resources__explore-text { + color: rgba(255, 255, 255, 0.72) !important; + -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card:focus-within, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:focus-within, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--box:hover, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--box:focus-within, +.openms-lib-page--solution #for-developers .openms-lib-developers__card--link:hover { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card:hover :is( + .openms-lib-developers__card-title, + .openms-lib-developers__card-title span, + .openms-lib-developers__card-subtitle, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .openms-lib-developers__platform-btn, + .openms-lib-btn, + .openms-lib-btn__label, + h3, + p, + a, + span, + i +), +.openms-lib-page--solution #for-developers .openms-lib-developers__card:focus-within :is( + .openms-lib-developers__card-title, + .openms-lib-developers__card-title span, + .openms-lib-developers__card-subtitle, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .openms-lib-developers__platform-btn, + .openms-lib-btn, + .openms-lib-btn__label, + h3, + p, + a, + span, + i +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +.openms-lib-page--solution #for-developers .openms-lib-developers__card:hover .openms-lib-btn--ghost, +.openms-lib-page--solution #for-developers .openms-lib-developers__card:focus-within .openms-lib-btn--ghost, +.openms-lib-page--solution #for-developers .openms-lib-developers__card:hover .openms-lib-developers__platform-btn, +.openms-lib-page--solution #for-developers .openms-lib-developers__card:focus-within .openms-lib-developers__platform-btn { + background: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* ============================================================================ + Phone / small tablet — keep leftover multi-column layouts on one rail + ============================================================================ */ + +@media (max-width: 720px) { + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid, + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(5):last-child), + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(4):last-child), + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid:has(> :nth-child(3):last-child), + .openms-lib-page--solution.openms-lib-page--webapps #getting-started .openms-lib-resources__explore-grid, + .openms-lib-page--solution.openms-lib-page--pyopenms-pro #getting-started .openms-lib-resources__explore-grid, + .openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro #getting-started .openms-lib-resources__explore-grid, + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid, + .openms-lib-page--solution.openms-lib-page--hub .openms-lib-developers__cards-grid, + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(7):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(3):last-child), + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(2):last-child) { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + } + + .openms-lib-page--solution #getting-started .openms-lib-resources__explore-grid > *, + .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-grid > * { + grid-column: auto !important; + min-width: 0 !important; + max-width: 100% !important; + } + + .openms-lib-page--solution #for-developers .openms-lib-developers__platforms, + .openms-lib-page--solution #for-developers .openms-lib-developers__card-cta, + .openms-lib-page--solution #for-developers .openms-lib-developers__card-cta.openms-lib-developers__platforms, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platforms, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive .openms-lib-developers__platforms, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--build-src .openms-lib-developers__platforms, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms, + .openms-lib-page .contribute-coc-band__actions, + .openms-lib-page .governance-cta-band__actions, + .openms-lib-page .openms-lib-resources__assist-actions, + .openms-lib-page .openms-lib-cite__actions, + .home-page .hero-home__actions { + display: flex !important; + flex-wrap: wrap !important; + flex-direction: column !important; + align-items: stretch !important; + width: 100% !important; + max-width: 100% !important; + } + + .openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn, + .openms-lib-page--solution #for-developers .openms-lib-developers__card-cta .openms-lib-developers__platform-btn, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn, + .openms-lib-page--solution #for-developers .openms-lib-developers__card--review.openms-lib-developers__card--interactive .openms-lib-developers__platform-btn, + .openms-lib-page .contribute-coc-band__actions .openms-lib-btn, + .openms-lib-page .governance-cta-band__actions .openms-lib-btn, + .openms-lib-page .openms-lib-resources__assist-actions .openms-lib-btn, + .openms-lib-page .openms-lib-cite__actions .openms-lib-btn { + flex: none !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + white-space: normal !important; + } + + .openms-lib-page iframe, + .openms-lib-page img, + .home-page img { + max-width: 100% !important; + } + + .openms-lib-page--fellowship .fellowship-application__inner, + .openms-lib-page--services-support .services-support-application__inner, + .openms-lib-page--research-partnerships .rp-application__inner, + .openms-lib-page--donate .donate-application__inner, + .openms-lib-page--contact .contact-application__inner { + padding-inline: var(--openms-page-gutter, 0.9rem) !important; + max-width: 100% !important; + } +} + +/* ============================================================================ + Step / overview numbers — same light-blue watermark as /openms-lib/ + ============================================================================ */ + +.openms-lib-page--solution, +.openms-lib-page--hub, +.home-page { + --openms-step-num-color: rgba(var(--openms-blue-rgb), 0.38); + --openms-step-num-color-hover: rgba(var(--openms-blue-rgb), 0.55); +} + +.openms-lib-page--solution .openms-lib-about__benefit-num, +.openms-lib-page--solution .openms-lib-about__num, +.openms-lib-page--solution .openms-lib-about__list-num, +.openms-lib-page--solution .contribute-channel__index, +.openms-lib-page--solution .coc-principle__num, +.openms-lib-page--solution .coc-summary__num, +.openms-lib-page--solution .privacy-overview__num, +.openms-lib-page--solution .openms-step__index, +.openms-lib-page--solution .openms-lib-list__index, +.openms-lib-page--solution .governance-note__index, +.openms-lib-page--solution .webapps-archived__notice-index, +.home-page .home-pathways__step-num, +.home-page .openms-step__index, +.home-page .openms-lib-list__index { + display: block !important; + font-family: var(--openms-font-heading) !important; + font-size: var(--openms-step-num-size) !important; + font-weight: 800 !important; + line-height: 1 !important; + letter-spacing: -0.04em !important; + color: rgba(var(--openms-blue-rgb), 0.38) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.38) !important; + margin: 0 0 -0.18em !important; + background: transparent !important; + border: none !important; +} + +.openms-lib-page--solution .openms-lib-about__benefit:hover .openms-lib-about__benefit-num, +.openms-lib-page--solution .openms-lib-about__benefit:focus-within .openms-lib-about__benefit-num, +.openms-lib-page--solution .openms-lib-about__tile:hover .openms-lib-about__num, +.openms-lib-page--solution .openms-lib-about__tile:focus-within .openms-lib-about__num, +.openms-lib-page--solution .contribute-channel:hover .contribute-channel__index, +.openms-lib-page--solution .contribute-channel:focus-within .contribute-channel__index, +.openms-lib-page--solution .coc-principle:hover .coc-principle__num, +.openms-lib-page--solution .coc-principle:focus-within .coc-principle__num, +.openms-lib-page--solution .privacy-overview__item:hover .privacy-overview__num, +.home-page .home-pathways__step:hover .home-pathways__step-num, +.home-page .home-pathways__step:focus-within .home-pathways__step-num { + color: rgba(var(--openms-blue-rgb), 0.55) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.55) !important; +} + +/* Publications — titles match /openms-lib/: gray H1/H2, blue eyebrows */ +.openms-lib-page--publications.openms-lib-page--solution, +.openms-lib-page--publications.openms-lib-page--solution.openms-lib-page--hub { + --openms-page-hero-title-color: rgba(var(--openms-dark-rgb), 0.72); +} + +.openms-lib-page--publications .openms-lib-hero__eyebrow, +.openms-lib-page--publications #key-publications .openms-lib-resources__eyebrow, +.openms-lib-page--publications .publications-featured .openms-lib-resources__eyebrow, +.openms-lib-page--publications #publications-list .openms-lib-resources__eyebrow, +.openms-lib-page--publications .publications-bibliography .openms-lib-resources__eyebrow { + color: rgba(var(--openms-blue-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.72) !important; +} + +.openms-lib-page--publications .publications-featured .publications-cite-card, +.openms-lib-page--publications .publications-featured .publications-cite-card--primary, +.openms-lib-page--publications .publications-featured .publications-cite-card--secondary, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within { + background: var(--openms-white) !important; + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)) !important; + box-shadow: none !important; + color: inherit !important; +} + +.openms-lib-page--publications #key-publications .openms-lib-resources__lead, +.openms-lib-page--publications .publications-featured .openms-lib-resources__lead, +.openms-lib-page--publications .publications-cite-card__title, +.openms-lib-page--publications .publications-cite-card__title a, +.openms-lib-page--publications .publications-cite-card__title a:not(.openms-lib-btn), +.openms-lib-page--publications #key-publications li .publications-cite-card__title a:not(.openms-lib-btn):not(.navbar-item), +.openms-lib-page--publications .publications-cite-card__topic, +.openms-lib-page--publications .publications-cite-card__meta, +.openms-lib-page--publications .publications-cite-card__journal, +.openms-lib-page--publications .publications-cite-card__year, +.openms-lib-page--publications .publications-cite-card__authors, +.openms-lib-page--publications .publications-cite-card__authors-more, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__title, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__title, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__title a, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__title a, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__meta, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__meta, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__journal, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__journal, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__year, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__year, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__authors, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__authors { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +.openms-lib-page--publications .publications-cite-card__badge, +.openms-lib-page--publications .publications-cite-card--secondary .publications-cite-card__badge, +.openms-lib-page--publications .publications-cite-card__action, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__badge, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__badge, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__action, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__action { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +.openms-lib-page--publications .publications-cite-card__badge, +.openms-lib-page--publications .publications-cite-card--secondary .publications-cite-card__badge, +.openms-lib-page--publications .publications-featured .publications-cite-card:hover .publications-cite-card__badge, +.openms-lib-page--publications .publications-featured .publications-cite-card:focus-within .publications-cite-card__badge { + background: rgba(var(--openms-blue-rgb), 0.1) !important; +} + +/* Archive / All publications — section title + copy gray; eyebrow stays blue */ +.openms-lib-page--publications #publications-list .openms-lib-resources__title, +.openms-lib-page--publications #publications-list .openms-lib-resources__lead, +.openms-lib-page--publications .publications-bibliography .openms-lib-resources__title, +.openms-lib-page--publications .publications-bibliography .openms-lib-resources__lead, +.openms-lib-page--publications .publications-year__title, +.openms-lib-page--publications .publication-title, +.openms-lib-page--publications .publication-meta, +.openms-lib-page--publications .publication-journal, +.openms-lib-page--publications .publication-year, +.openms-lib-page--publications .publication-authors, +.openms-lib-page--publications #publications-list .publication-title a.publication-title-link, +.openms-lib-page--publications #publications-list p.publication-title a:not(.openms-lib-btn), +.openms-lib-page--publications #publications-list li .publication-title-link { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +.openms-lib-page--publications #publications-list .publication-title a.publication-title-link:hover, +.openms-lib-page--publications #publications-list .publication-title a.publication-title-link:focus-visible, +.openms-lib-page--publications #publications-list p.publication-title a:not(.openms-lib-btn):hover, +.openms-lib-page--publications #publications-list p.publication-title a:not(.openms-lib-btn):focus-visible, +.openms-lib-page--publications #publications-list .publication-entry:hover .publication-title a.publication-title-link, +.openms-lib-page--publications #publications-list .publication-entry:focus-within .publication-title a.publication-title-link, +.openms-lib-page--publications #publications-list .publication-entry:hover p.publication-title a:not(.openms-lib-btn), +.openms-lib-page--publications #publications-list .publication-entry:focus-within p.publication-title a:not(.openms-lib-btn) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +.openms-lib-page--publications #publications-list .publication-entry:has(.publication-title-link) { + position: relative; + cursor: pointer; +} + +.openms-lib-page--publications #publications-list .publication-title-link::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; +} + +/* ============================================================================ + Navy surfaces → white copy; button icons match the button label + ============================================================================ */ + +.openms-lib-page :is( + .contribute-coc-band, + .contribute-coc-band__panel, + .governance-cta-band, + .governance-cta-band__panel, + .webapps-archived__revival, + .openms-lib-resources__explore-card +), +.home-page :is( + .keyfeatures-modern__panel--dark, + .contact-home--navy, + .community-events-home__cta +) { + color: var(--openms-white) !important; +} + +.openms-lib-page :is( + .contribute-coc-band, + .governance-cta-band, + .webapps-archived__revival, + .openms-lib-resources__explore-card +) :is( + .contribute-coc-band__kicker, + .contribute-coc-band__text, + .contribute-coc-band__note, + .contribute-coc-band__text strong, + .governance-cta-band__kicker, + .governance-cta-band__text, + .governance-cta-band__text strong, + .openms-lib-resources__explore-title, + .openms-lib-resources__explore-text, + .openms-lib-resources__explore-link, + .openms-lib-resources__explore-tag, + h2, + h3, + p, + span, + strong +):not(.openms-lib-btn):not(.openms-lib-btn__label) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* Ghost / navy-outline buttons: icons are navy like the label */ +.openms-lib-page .openms-lib-btn--ghost :is( + i, + .fab, + .fas, + .far, + .fa-brands, + .svg-inline--fa, + .svg-inline--fa path, + svg, + svg path, + .openms-lib-btn__icon, + .openms-lib-btn__icon svg, + .openms-lib-btn__icon svg path, + .openms-lib-btn__platforms, + .openms-lib-btn__platforms i, + .openms-lib-btn__platforms .svg-inline--fa, + .openms-lib-btn__platforms .svg-inline--fa path +), +.openms-lib-page a.openms-lib-btn--ghost :is( + i, + .fab, + .fas, + .svg-inline--fa, + .svg-inline--fa path, + svg, + svg path, + .openms-lib-btn__icon, + .openms-lib-btn__icon svg, + .openms-lib-btn__icon svg path +), +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost :is( + i, .fab, .fas, .svg-inline--fa, .svg-inline--fa path, svg, svg path, .openms-lib-btn__label +), +.openms-lib-page--solution #for-developers .openms-lib-developers__platform-btn :is( + i, .fab, .fas, .svg-inline--fa, .svg-inline--fa path, svg, svg path, .openms-lib-btn__label +), +.openms-lib-page--solution #for-developers .openms-lib-developers__card--review .openms-lib-developers__platform-btn :is( + i, .fab, .fas, .fa-github, .fa-book-open, .svg-inline--fa, .svg-inline--fa path, svg, svg path +), +.openms-lib-page--contribute .contribute-os-buttons .openms-lib-btn--ghost :is( + i, .fab, .fas, .svg-inline--fa, .svg-inline--fa path, svg, svg path +), +.home-page .openms-lib-btn--ghost :is( + i, .fab, .fas, .svg-inline--fa, .svg-inline--fa path, svg, svg path +) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: var(--openms-navy) !important; +} + +/* Filled primary buttons: icons stay white like the label */ +.openms-lib-page .openms-lib-btn--primary :is( + i, + .fab, + .fas, + .far, + .svg-inline--fa, + .svg-inline--fa path, + svg, + svg path, + .openms-lib-btn__icon, + .openms-lib-btn__icon svg, + .openms-lib-btn__icon svg path, + .openms-lib-btn__platforms, + .openms-lib-btn__platforms i, + .openms-lib-btn__platforms .svg-inline--fa, + .openms-lib-btn__platforms .svg-inline--fa path +), +.home-page .openms-lib-btn--primary :is( + i, .fab, .fas, .svg-inline--fa, .svg-inline--fa path, svg, svg path +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +/* Dark navy bands invert the pair: white ghost icons, navy icons on the white pill */ +.openms-lib-page :is(.contribute-coc-band, .governance-cta-band, .webapps-archived__revival) .openms-lib-btn--ghost :is( + i, .fab, .fas, .svg-inline--fa, .svg-inline--fa path, svg, svg path, .openms-lib-btn__icon, .openms-lib-btn__icon svg, .openms-lib-btn__icon svg path, .openms-lib-btn__label +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +.openms-lib-page :is(.contribute-coc-band, .governance-cta-band, .webapps-archived__revival) .openms-lib-btn--primary :is( + i, .fab, .fas, .svg-inline--fa, .svg-inline--fa path, svg, svg path, .openms-lib-btn__icon, .openms-lib-btn__icon svg, .openms-lib-btn__icon svg path, .openms-lib-btn__label +) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: var(--openms-navy) !important; +} + +/* Fellowship form — left-aligned column, card, no clipped iframe */ +.openms-lib-page--fellowship .fellowship-application { + padding-inline: var(--openms-page-inline, clamp(1.25rem, 3.5vw, 2.5rem)) !important; + box-sizing: border-box; +} + +.openms-lib-page--fellowship .fellowship-application__inner { + align-items: stretch !important; + gap: var(--pro-head-to-content, clamp(1.5rem, 3vw, 2.25rem)) !important; +} + +.openms-lib-page--fellowship .fellowship-application__head, +.openms-lib-page--fellowship .fellowship-application__head :is( + .openms-lib-resources__eyebrow, + .openms-lib-resources__title, + .openms-lib-resources__lead +) { + justify-items: start !important; + justify-self: start !important; + width: 100%; + max-width: min(100%, 42rem) !important; + margin-inline: 0 !important; + text-align: left !important; +} + +.openms-lib-page--fellowship .fellowship-application__form-card, +.openms-lib-page--fellowship .fellowship-page__form-body { + width: 100% !important; + + margin-inline: 0 !important; + padding: clamp(1.15rem, 2.6vw, 1.75rem) !important; + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)) !important; + border-radius: var(--pro-radius, 1.25rem) !important; + background: var(--openms-white) !important; + box-shadow: none !important; + overflow: visible !important; +} + +.openms-lib-page--fellowship .fellowship-page__form-body { + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; +} + +.openms-lib-page--fellowship .fellowship-page__tally-iframe, +.openms-lib-page--fellowship .fellowship-application__form-card .fellowship-page__tally-iframe { + margin-top: 0 !important; + margin-bottom: 0 !important; + min-height: 0 !important; + overflow: visible !important; +} + +@media (max-width: 720px) { + .openms-lib-page--fellowship .fellowship-application { + padding-inline: var(--openms-page-gutter, 0.75rem) !important; + } + + .openms-lib-page--fellowship .fellowship-application__form-card { + padding: 1rem !important; + } +} + +/* News + event cards — gray copy; blue labels; titles turn link-blue on hover */ +.openms-lib-page--calendar .community-news-events__press-link, +.openms-lib-page--news .community-news-events__press-link, +.home-page .community-news-events__press-link, +.openms-lib-page--calendar .community-news-events__press-link :is( + .community-news-events__press-title, + .community-news-events__press-summary, + .community-news-events__press-date, + .community-news-events__press-sep, + .community-news-events__press-location, + .community-news-events__press-meta, + .news-home__card-title, + .news-home__card-summary, + .news-home__card-authors +), +.openms-lib-page--news .community-news-events__press-link :is( + .community-news-events__press-title, + .community-news-events__press-summary, + .community-news-events__press-date, + .community-news-events__press-sep, + .community-news-events__press-location, + .community-news-events__press-meta, + .news-home__card-title, + .news-home__card-summary, + .news-home__card-authors +), +.home-page .community-news-events__press-link :is( + .community-news-events__press-title, + .community-news-events__press-summary, + .community-news-events__press-date, + .community-news-events__press-sep, + .community-news-events__press-location, + .community-news-events__press-meta, + .news-home__card-title, + .news-home__card-summary, + .community-events-home__card-title +) { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +.openms-lib-page--calendar .community-news-events__press-label, +.openms-lib-page--news .community-news-events__press-label, +.home-page .community-news-events__press-label, +.openms-lib-page--calendar a.community-news-events__press-link:hover .community-news-events__press-label, +.openms-lib-page--news a.community-news-events__press-link:hover .community-news-events__press-label, +.home-page a.community-news-events__press-link:hover .community-news-events__press-label { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +.openms-lib-page--calendar a.community-news-events__press-link:hover .community-news-events__press-title, +.openms-lib-page--calendar a.community-news-events__press-link:focus-visible .community-news-events__press-title, +.openms-lib-page--news a.community-news-events__press-link:hover .community-news-events__press-title, +.openms-lib-page--news a.community-news-events__press-link:focus-visible .community-news-events__press-title, +.openms-lib-page--news a.community-news-events__press-link:hover .news-home__card-title, +.openms-lib-page--news a.community-news-events__press-link:focus-visible .news-home__card-title, +.home-page a.community-news-events__press-link:hover .community-news-events__press-title, +.home-page a.community-news-events__press-link:focus-visible .community-news-events__press-title, +.home-page a.community-news-events__press-link:hover .news-home__card-title, +.home-page a.community-news-events__press-link:focus-visible .news-home__card-title, +.home-page a.community-news-events__press-link:hover .community-events-home__card-title, +.home-page a.community-news-events__press-link:focus-visible .community-events-home__card-title { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +/* Fellowship form — left-aligned column, card, no clipped iframe */ +.openms-lib-page--fellowship .fellowship-application { + padding-inline: var(--openms-page-inline, clamp(1.25rem, 3.5vw, 2.5rem)) !important; + box-sizing: border-box; +} + +.openms-lib-page--fellowship .fellowship-application__inner { + align-items: stretch !important; + gap: var(--pro-head-to-content, clamp(1.5rem, 3vw, 2.25rem)) !important; +} + +.openms-lib-page--fellowship .fellowship-application__head, +.openms-lib-page--fellowship .fellowship-application__head :is( + .openms-lib-resources__eyebrow, + .openms-lib-resources__title, + .openms-lib-resources__lead +) { + justify-items: start !important; + justify-self: start !important; + width: 100%; + max-width: min(100%, 42rem) !important; + margin-inline: 0 !important; + text-align: left !important; +} + +.openms-lib-page--fellowship .fellowship-application__form-card { + width: 100% !important; + + margin-inline: 0 !important; + padding: clamp(1.15rem, 2.6vw, 1.75rem) !important; + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.12)) !important; + border-radius: var(--pro-radius, 1.25rem) !important; + background: var(--openms-white) !important; + box-shadow: none !important; + overflow: visible !important; +} + +.openms-lib-page--fellowship .fellowship-page__form-body { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + overflow: visible !important; +} + +.openms-lib-page--fellowship .fellowship-page__tally-iframe, +.openms-lib-page--fellowship .fellowship-application__form-card .fellowship-page__tally-iframe { + margin-top: 0 !important; + margin-bottom: 0 !important; + min-height: 0 !important; + overflow: visible !important; +} + +@media (max-width: 720px) { + .openms-lib-page--fellowship .fellowship-application { + padding-inline: var(--openms-page-gutter, 0.75rem) !important; + } + + .openms-lib-page--fellowship .fellowship-application__form-card { + padding: 1rem !important; + } +} + +/* Code of Conduct — full-width policy dropdowns */ +.openms-lib-page--code-of-conduct .coc-details__list, +.openms-lib-page--code-of-conduct .coc-details__item { + width: 100% !important; + max-width: none !important; +} + +.openms-lib-page--code-of-conduct .coc-details__index { + color: var(--openms-blue) !important; +} + +.openms-lib-page--code-of-conduct .coc-details__question-title { + color: var(--sol-title, rgba(var(--openms-dark-rgb), 0.72)) !important; + text-transform: none !important; +} + +.openms-lib-page--code-of-conduct .coc-details__summary-text, +.openms-lib-page--code-of-conduct .coc-details__answer :is(p, li) { + color: var(--sol-body, rgba(var(--openms-dark-rgb), 0.72)) !important; +} diff --git a/assets/css/zzzzzzzzz-text-gray.css b/assets/css/zzzzzzzzz-text-gray.css new file mode 100644 index 00000000..6604328c --- /dev/null +++ b/assets/css/zzzzzzzzz-text-gray.css @@ -0,0 +1,1905 @@ +/* Gray body. Blue titles. Navy navbar. White on navy/blue fills and blue-hover cards. */ + +:root, +.openms-lib-page--solution, +.home-page { + --openms-text: rgba(var(--openms-dark-rgb), 0.72); + --openms-text-body: rgba(var(--openms-dark-rgb), 0.72); + --openms-text-muted: rgba(var(--openms-dark-rgb), 0.72); + --openms-text-eyebrow: var(--openms-blue); + --openms-page-hero-title-color: rgba(var(--openms-dark-rgb), 0.72); + --openms-section-title-color: rgba(var(--openms-dark-rgb), 0.72); + --openms-card-title-color: rgba(var(--openms-dark-rgb), 0.72); + --openms-content-link: rgba(var(--openms-dark-rgb), 0.72); + --openms-content-link-hover: rgba(var(--openms-dark-rgb), 0.72); + --home-body-color: rgba(var(--openms-dark-rgb), 0.72); + --home-eyebrow-color: var(--openms-blue); + --home-title-color: rgba(var(--openms-dark-rgb), 0.72); + --home-card-title-color: rgba(var(--openms-dark-rgb), 0.72); + --pro-text: rgba(var(--openms-dark-rgb), 0.72); + --pro-eyebrow: var(--openms-blue); + --sol-ink: rgba(var(--openms-dark-rgb), 0.72); + --sol-title: rgba(var(--openms-dark-rgb), 0.72); + --sol-body: rgba(var(--openms-dark-rgb), 0.72); + --sol-eyebrow: var(--openms-blue); +} + +html body, +html body :is(p, li, dd, dt, td, th, label, figcaption, blockquote, cite) { + color: rgba(var(--openms-dark-rgb), 0.72); +} + +/* Main big titles — gray */ +html body :is(h1, h2, h3, h4, .title):not(.home-page__hero *):not(.home-page__block--ecosystem *):not(.community-home *):not(.about-hero *):not(.governance-hero *), +html body :is( + .openms-lib-hero__title, + .openms-lib-hero__accent, + .openms-lib-hero__accent--warm, + .openms-lib-block__title, + .openms-lib-topp-split__title, + .openms-lib-topp__title, + .openms-lib-cite__title, + .openms-lib-explore__title, + .openms-lib-resources__title, + .openms-lib-developers__title, + .openms-lib-cta-band__title, + .home-section-head__title, + .hero-home__title, + .hero-modern__title, + .keyfeatures-modern__title, + .contact-home__title, + .contact-area__title, + .news-home__title, + .community-events-home__title, + .openms-lib-about__tile-title, + .openms-lib-developers__card-title, + .openms-lib-resources__item-title, + .openms-lib-topp-split__card-title, + .openms-step__title, + .webapps-project-card__title, + .webapps-project-card__name, + .news-home__card-title, + .contact-home__card-title, + .ecosystem-home__card-title, + .community-events-home__card-title, + .contribute-channel__title, + .contribute-way__title, + .contribute-track__title +):not(.home-page__hero *):not(.about-hero *):not(.governance-hero *) { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; + background: none !important; + -webkit-background-clip: unset !important; + background-clip: unset !important; +} + +/* Top titles (eyebrows / kickers) — blue on every page */ +html body :is( + .openms-lib-hero__eyebrow, + .openms-lib-block__eyebrow, + .openms-lib-about__eyebrow, + .openms-lib-topp-split__eyebrow, + .openms-lib-resources__eyebrow, + .openms-lib-cite__eyebrow, + .openms-lib-developers__cite-kicker, + .openms-lib-cta-band__eyebrow, + .openms-steps__eyebrow, + .keyfeatures-modern__eyebrow, + .contact-home__eyebrow, + .contact-area__eyebrow, + .contact-page__section-eyebrow, + .news-home__eyebrow, + .community-events-home__eyebrow, + .trusted-by__eyebrow, + .trusted-by__home-eyebrow, + .home-pathways__eyebrow, + .uni-partners__eyebrow, + .hero-sponsors__label, + .about-hero__eyebrow, + .governance-hero__eyebrow, + .governance-card__eyebrow, + .sponsor-eyebrow, + .sponsor-section-eyebrow, + .publications-key__eyebrow, + .webapps-featured__eyebrow, + .webapps-affiliates__eyebrow, + .webapps-archived__eyebrow, + .webapps-contribute__eyebrow, + .contribute-channels__eyebrow, + .contribute-ways__eyebrow, + .contribute-outreach__eyebrow, + .contribute-conduct__eyebrow, + .developer-retreat-highlights__eyebrow, + .developer-retreat-upcoming__eyebrow +):not(.contribute-coc-band *):not(.governance-cta-band *):not(.webapps-archived__revival *) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body :is( + .openms-lib-hero__lead, + .openms-lib-block__lead, + .home-section-head__lead +):not(.home-page__hero *):not(.about-hero *) { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +/* Inline links gray; arrow/icon CTAs blue */ +html body a:not([class*="btn"]):not(.navbar-item):not(.navbar-link):not(.openms-cta-link) { + color: rgba(var(--openms-dark-rgb), 0.72); +} + +html body :is( + .openms-cta-link, + .webapps-project-card__cta, + .news-home__card-cta, + .contact-home__card-cta, + .community-events-home__card-cta, + .events-past-card__cta, + .contribute-channel__link, + .contribute-track__cta, + .contribute-way__link, + .openms-lib-about__tile-link, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .openms-lib-resources__examples-link, + .openms-lib-resources__explore-link, + .openms-lib-list__link, + .openms-lib-topp__cta, + .openms-lib-resources__item-link, + .coc-report__link, + .privacy-overview__note-link, + .contact-page__path-link, + .webapps-featured__extra-link, + .webapps-featured__show-all, + .ecosystem-home__card-link, + .community-news-events__view-all, + .community-events-home__view-all--inline, + .publications-cite-card__action, + .news-entry__action, + .trusted-by__wall-cta, + .home-pathways__step-go +) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body :is( + .section-eyebrow-icon, + .openms-lib-about__tile-icon, + .openms-lib-resources__item-icon, + .openms-lib-developers__card-icon, + .keyfeatures-modern__topic-icon, + .contact-home__card-icon, + .ecosystem-home__card-icon, + .home-pathways__step-icon, + .contribute-channel__icon, + .webapps-project-card__icon +) { + color: var(--openms-blue) !important; +} + +/* Navbar — navy links on the light bar */ +html body .navbar.is-fresh, +html body .navbar.is-fresh .navbar-item, +html body .navbar.is-fresh .navbar-link, +html body .navbar.is-fresh .navbar-dropdown, +html body .navbar.is-fresh .navbar-dropdown a, +html body .navbar.is-fresh .navbar-dropdown .navbar-item, +html body .navbar.is-fresh .navbar-cta-label { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary, +html body .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta, +html body .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary .navbar-cta-label, +html body .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta .navbar-cta-label { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate, +html body .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate .navbar-cta-label { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +/* Navy / dark surfaces — white copy */ +html body :is( + .news-banner, + .news-banner *, + .footer-redesign, + .footer-redesign a, + .home-page__hero .hero-home__title, + .home-page__hero .hero-home__title-accent, + .home-page__hero .hero-home__description, + .about-hero__title, + .about-hero__description, + .governance-hero__title, + .keyfeatures-modern__panel--dark, + .keyfeatures-modern__topic-card, + .keyfeatures-modern__topic-title, + .keyfeatures-modern__topic-text, + .contact-home--navy, + .community-events-home__cta, + .contribute-coc-band, + .governance-cta-band, + .webapps-archived__revival, + .openms-lib-resources__explore-card +), +html body :is( + .contribute-coc-band, + .governance-cta-band, + .webapps-archived__revival, + .openms-lib-resources__explore-card, + .keyfeatures-modern__panel--dark, + .keyfeatures-modern__topic-card, + .contact-home--navy +) :is(h1, h2, h3, h4, p, span, strong, a, .contribute-coc-band__kicker, .governance-cta-band__kicker):not(.openms-lib-btn):not(.openms-lib-btn__label) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* Filled blue / navy buttons stay readable */ +html body :is( + .openms-btn-primary, + .openms-step__cta, + .about-cta-btn--sponsor, + .footer-redesign .footer-sponsor-btn, + .openms-lib-btn--primary, + .openms-lib-btn--navy +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body :is( + .openms-btn-primary, + .openms-step__cta, + .openms-lib-btn--primary, + .openms-lib-btn--navy +) :is(i, .fab, .fas, .far, svg, .svg-inline--fa, path, span, .openms-lib-btn__label, .openms-lib-btn__icon) { + color: inherit !important; + -webkit-text-fill-color: inherit !important; + fill: currentColor !important; +} + +html body .about-cta-btn--donate, +html body .openms-lib-btn--ghost, +html body .openms-lib-btn--outline { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body :is(.about-cta-btn--donate, .openms-lib-btn--ghost, .openms-lib-btn--outline) :is(i, .fab, .fas, svg, .svg-inline--fa, path, span) { + color: inherit !important; + -webkit-text-fill-color: inherit !important; + fill: currentColor !important; +} + +/* Featured / affiliated app cards — blue fill = white; outline = navy */ +html body :is( + .openms-lib-page--featured-pro, + .openms-lib-page--featured, + .openms-lib-page--affiliated +) .webapps-project-links__item:first-child .webapps-project-links__btn, +html body :is( + .openms-lib-page--featured-pro, + .openms-lib-page--featured, + .openms-lib-page--affiliated +) .webapps-project-links__item:first-child .webapps-project-links__btn :is(i, .fab, .fas, span, svg, .svg-inline--fa) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body :is( + .openms-lib-page--featured-pro, + .openms-lib-page--featured, + .openms-lib-page--affiliated +) .webapps-project-links__item:not(:first-child) .webapps-project-links__btn, +html body :is( + .openms-lib-page--featured-pro, + .openms-lib-page--featured, + .openms-lib-page--affiliated +) .webapps-project-links__item:not(:first-child) .webapps-project-links__btn :is(i, .fab, .fas, span, svg, .svg-inline--fa) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: currentColor !important; +} + +html body .home-page__hero .hero-home__btn--secondary, +html body .home-page__hero .hero-home__btn--secondary.about-cta-btn--donate, +html body .home-page__hero .hero-home__btn--secondary :is(i, svg, span), +html body .home-page__hero .hero-home__btn--secondary.about-cta-btn--donate :is(i, svg, span) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* White cards that fill blue/navy on hover — all copy + buttons go white */ +html body :is( + .openms-lib-developers__card, + .openms-lib-developers__card--interactive, + .openms-lib-developers__card--box, + .openms-lib-developers__card--link, + .contact-home__card +):is(:hover, :focus-within, :focus-visible) :is( + h1, h2, h3, h4, p, span, strong, a, i, small, em, + .openms-lib-developers__card-title, + .openms-lib-developers__card-subtitle, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .openms-lib-developers__platform-btn, + .openms-lib-btn, + .openms-lib-btn__label, + .openms-lib-btn--ghost, + .openms-lib-btn--outline, + .openms-lib-btn--primary, + .openms-cta-link, + .contact-home__card-title, + .contact-home__card-text, + .contact-home__card-cta, + .openms-lib-about__tile-title, + .openms-lib-about__tile-text, + .openms-lib-about__tile-link +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body :is( + .openms-lib-developers__card, + .openms-lib-developers__card--interactive, + .openms-lib-developers__card--box, + .contact-home__card +):is(:hover, :focus-within, :focus-visible) :is( + .openms-lib-btn, + .openms-lib-btn--ghost, + .openms-lib-btn--outline, + .openms-lib-btn--primary, + .openms-lib-developers__platform-btn, + .openms-lib-developers__platform-link, + .openms-lib-developers__card-link +) { + background: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + opacity: 1 !important; + visibility: visible !important; +} + +html body :is( + .openms-lib-developers__card, + .contact-home__card +):is(:hover, :focus-within) :is(svg, .svg-inline--fa, path) { + color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Get started / Explore OpenMS-lib — white on the navy band */ +html body .openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__eyebrow, +html body .openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__title, +html body .openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__lead, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__eyebrow, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__title, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__lead, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__head .section-eyebrow-icon, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__head svg { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Need help? — gray copy on the light band */ +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist-title, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist-text { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +/* How to cite / Key publications — arrow links match site CTAs */ +html body .openms-lib-page--publications #key-publications .publications-cite-card__action, +html body .openms-lib-page--publications .publications-cite-card__action, +html body .publications-cite-card__action, +html body .publications-more__btn, +html body .openms-lib-page--publications .publications-more__btn { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-cta-link-weight, 700) !important; +} + +html body .openms-lib-page--publications .publications-more__btn { + min-height: 0 !important; + padding: 0 !important; + border: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +/* Contact / Ways to reach us — smaller section + top-right card tags */ +html body .openms-lib-page--contact #contact-paths .openms-lib-resources__eyebrow { + font-size: 0.7rem !important; +} + +html body .openms-lib-page--contact #contact-paths .openms-lib-resources__title { + font-size: calc(var(--openms-section-title-size) * 0.82) !important; +} + +html body .openms-lib-page--contact #contact-paths .openms-lib-resources__item-tag, +html body .openms-lib-page--contact .contact-paths-grid .openms-lib-resources__item-tag { + font-size: 0.625rem !important; + letter-spacing: 0.08em !important; +} + +/* Discord / GitHub — same outline pill as navbar Sponsor Us */ +html body .openms-lib-page--contact .contact-path-socials { + display: flex !important; + flex-wrap: wrap; + align-items: center; + gap: var(--openms-btn-gap, 0.75rem); +} + +html body .openms-lib-page--contact a.contact-path-social, +html body .openms-lib-page--contact a.openms-lib-btn.contact-path-social { + display: inline-flex !important; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border-radius: var(--openms-btn-pill-radius, 999px) !important; + border: 2px solid rgba(var(--openms-navy-rgb), 0.72) !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + font-family: var(--openms-font-body) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + line-height: 1.3 !important; + white-space: nowrap; + text-decoration: none !important; +} + +html body .openms-lib-page--contact a.contact-path-social :is(i, .fab, .fas, span, .openms-lib-btn__label) { + color: inherit !important; + -webkit-text-fill-color: inherit !important; +} + +html body .openms-lib-page--contact a.contact-path-social:hover, +html body .openms-lib-page--contact a.contact-path-social:focus-visible { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + background: rgba(var(--openms-navy-rgb), 0.08) !important; + border-color: rgba(var(--openms-navy-rgb), 0.78) !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)); + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-navy-rgb), 0.18) !important; +} + +/* Governance Structure tiles — blue arrow links, more space from copy */ +html body .openms-lib-page--governance #governance-bodies .openms-lib-about__tile-link, +html body .openms-lib-page--governance .openms-lib-about__tile-link { + display: inline-flex !important; + align-items: center; + gap: 0.35rem !important; + width: fit-content !important; + min-height: 0 !important; + margin-top: auto !important; + padding: 1.5rem 0 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-cta-link-weight, 700) !important; + text-decoration: none !important; +} + +html body .openms-lib-page--governance .openms-lib-about__tile-link:hover, +html body .openms-lib-page--governance .openms-lib-about__tile-link:focus-visible, +html body .openms-lib-page--governance .openms-lib-about__tile:hover .openms-lib-about__tile-link { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + background: transparent !important; + border: 0 !important; + box-shadow: none !important; +} + +/* Clarity / Core developers — smaller top-right tags */ +html body .openms-lib-page--governance #responsibilities .openms-lib-resources__item-tag, +html body .openms-lib-page--governance #core-developers .openms-lib-resources__item-tag { + font-size: 0.625rem !important; + letter-spacing: 0.08em !important; +} + +/* Hover — all copy and icons go white */ +html body .openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:is(:hover, :focus-within), +html body .openms-lib-page--governance #responsibilities .openms-lib-resources__item--static:is(:hover, :focus-within) :is( + h3, + p, + span, + strong, + i, + .openms-lib-resources__item-tag, + .openms-lib-resources__item-title, + .openms-lib-resources__item-text, + .openms-lib-resources__item-icon, + .fab, + .fas, + .svg-inline--fa +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Sponsor Us — About OpenMS Inc. arrow link: blue and lower */ +html body .openms-lib-page--sponsor-us .openms-lib-about__tile-link { + display: inline-flex !important; + align-items: center; + gap: 0.35rem !important; + width: fit-content !important; + min-height: 0 !important; + margin-top: auto !important; + padding: 1.5rem 0 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + font-size: var(--openms-text-min) !important; + font-weight: var(--openms-cta-link-weight, 700) !important; + text-decoration: none !important; +} + +html body .openms-lib-page--sponsor-us .openms-lib-about__tile-link:hover, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile-link:focus-visible, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile:hover .openms-lib-about__tile-link { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + background: transparent !important; + border: 0 !important; + box-shadow: none !important; +} + +/* Research partnerships — thin border around the form */ +html body .openms-lib-page--research-partnerships .rp-application__form { + border: 1px solid rgba(var(--openms-navy-rgb), 0.16) !important; + border-radius: 1rem !important; + padding: clamp(1rem, 2.4vw, 1.5rem) !important; + background: var(--openms-white, #fff) !important; + box-sizing: border-box; +} + +/* Scientific & technical support — thin border around the quote form */ +html body .openms-lib-page--services-support .services-support-application__form, +html body .openms-lib-page--services-support .services-page__form-body { + border: 1px solid rgba(var(--openms-navy-rgb), 0.16) !important; + border-radius: 1rem !important; + padding: 0.75rem 1rem 0.5rem !important; + background: var(--openms-white, #fff) !important; + box-sizing: border-box; + height: auto !important; + min-height: 0 !important; + overflow: visible !important; +} + +html body .openms-lib-page--services-support .services-page__form-body { + border: 0 !important; + padding: 0 !important; + background: transparent !important; +} + +html body .openms-lib-page--services-support .services-page__tally-iframe { + display: block !important; + width: 100% !important; + min-height: 960px !important; + max-height: none !important; + overflow: visible !important; + margin: 0 !important; +} + +/* Calendar — one white surface (inner link), wrappers stay clear */ +html body .openms-lib-page--calendar .community-events-home__item, +html body .openms-lib-page--calendar .community-events-home__card, +html body .openms-lib-page--calendar .community-events-home__card:hover, +html body .openms-lib-page--calendar .community-events-home__card:focus-within, +html body .openms-lib-page--calendar .community-news-events__press-card, +html body .openms-lib-page--calendar .community-news-events__press-card:hover { + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + border: none !important; + min-height: 0 !important; + height: auto !important; + max-height: none !important; +} + +html body .openms-lib-page--calendar .events-past-toolbar__hint { + display: none !important; +} + +html body .openms-lib-page--calendar .events-past-toolbar { + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: space-between !important; + gap: 0.75rem !important; + min-height: 0 !important; + height: auto !important; +} + +html body .openms-lib-page--calendar .events-past-toolbar__intro { + display: flex !important; + align-items: center !important; + min-width: 0 !important; +} + +html body .openms-lib-page--calendar .events-past-toolbar__select { + min-height: 0 !important; + height: 2rem !important; + padding: 0.2rem 1.75rem 0.2rem 0.65rem !important; + font-size: 0.8125rem !important; + box-shadow: none !important; + background-color: transparent !important; +} + +@media (min-width: 901px) { + html body .openms-lib-page--calendar .community-events-page { + display: grid !important; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; + grid-template-rows: auto 1fr !important; + align-items: start !important; + column-gap: clamp(1.5rem, 3vw, 2.75rem) !important; + row-gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; + } + + html body .openms-lib-page--calendar .community-events-page__section { + display: grid !important; + grid-template-rows: subgrid !important; + grid-row: 1 / span 2 !important; + gap: 0 !important; + align-items: start !important; + } + + html body .openms-lib-page--calendar .community-events-page__header, + html body .openms-lib-page--calendar .events-past-toolbar { + grid-row: 1 !important; + align-self: end !important; + margin: 0 !important; + } + + html body .openms-lib-page--calendar .community-events-page__grid, + html body .openms-lib-page--calendar .community-events-page__empty, + html body .openms-lib-page--calendar .events-past-panel__entries { + grid-row: 2 !important; + } +} + +html body .openms-lib-page--calendar a.community-news-events__press-link, +html body .openms-lib-page--calendar a.community-news-events__press-link:hover, +html body .openms-lib-page--calendar a.community-news-events__press-link:focus-visible, +html body .openms-lib-page--calendar a.community-news-events__press-link:focus-within, +html body .openms-lib-page--calendar .community-news-events__press-link, +html body .openms-lib-page--calendar .community-news-events__press-link--static, +html body .openms-lib-page--calendar .community-news-events__press-link--static:hover, +html body .openms-lib-page--calendar .community-events-home__card-link, +html body .openms-lib-page--calendar .community-events-home__card-link:hover, +html body .openms-lib-page--calendar .community-events-home__card-link:focus-visible, +html body .openms-lib-page--calendar .community-events-home__card-link:focus-within, +html body .openms-lib-page--calendar .community-events-upcoming-layout .community-events-home__card-link:hover, +html body .openms-lib-page--calendar .community-events-upcoming-layout .community-events-home__card-link:focus-visible, +html body .openms-lib-page--calendar .events-past-card, +html body .openms-lib-page--calendar .events-past-card:hover, +html body .openms-lib-page--calendar .events-past-card:focus-within { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + transform: none !important; + box-shadow: 0 0.25rem 1rem rgba(var(--openms-navy-rgb), 0.06) !important; + border-color: rgba(var(--openms-navy-rgb), 0.1) !important; + border-radius: 1.25rem !important; +} + +html body .openms-lib-page--calendar :is( + a.community-news-events__press-link, + .community-events-home__card-link, + .events-past-card +):is(:hover, :focus-visible, :focus-within) :is( + .community-news-events__press-title, + .community-events-home__card-title, + .events-past-card__title, + .events-past-card__title-link +) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +/* Calendar cards + headers match homepage Latest news */ +html body .openms-lib-page--calendar .community-events-page__header, +html body .openms-lib-page--calendar .events-past-toolbar { + display: flex !important; + align-items: flex-end !important; + justify-content: space-between !important; + gap: 1rem 1.25rem !important; + padding-bottom: 0.85rem !important; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1) !important; + background: transparent !important; +} + +html body .openms-lib-page--calendar .community-events-page__title, +html body .openms-lib-page--calendar .events-past-toolbar__title { + margin: 0 !important; + font-size: var(--home-section-head-title-size, var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15))) !important; + font-weight: var(--openms-heading-lg-weight, 800) !important; + line-height: 1.3 !important; + letter-spacing: normal !important; + text-transform: uppercase !important; +} + +html body .openms-lib-page--calendar .community-events-home__grid { + gap: clamp(1.15rem, 2.2vw, 1.5rem) !important; +} + +html body .openms-lib-page--calendar .community-news-events__press-link, +html body .openms-lib-page--calendar .community-news-events__press-link--static, +html body .openms-lib-page--calendar .community-events-home__card-link { + display: block !important; + padding: clamp(1.6rem, 2.8vw, 1.85rem) !important; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1) !important; + border-radius: 1.25rem !important; + overflow: hidden !important; + background: var(--openms-white) !important; + box-shadow: 0 0.25rem 1rem rgba(var(--openms-navy-rgb), 0.06) !important; + transform: none !important; +} + +html body .openms-lib-page--calendar .community-events-upcoming-layout .community-events-home__card-link, +html body .openms-lib-page--calendar .community-events-upcoming-layout .community-events-home__card-link--split { + display: block !important; + grid-template-columns: none !important; +} + +html body .openms-lib-page--calendar .community-news-events__press-meta { + margin: 0 0 0.75rem !important; +} + +html body .openms-lib-page--calendar .community-news-events__press-title { + margin: 0 0 0.75rem !important; + font-size: var(--openms-card-title-size, clamp(1rem, 1.4vw, 1.1rem)) !important; + font-weight: var(--openms-card-title-weight, 700) !important; + line-height: 1.3 !important; +} + +html body .openms-lib-page--calendar .community-news-events__press-summary { + margin: 0 !important; +} + +/* News listing — same card hover as /calendar/ */ +html body .openms-lib-page--news .community-events-home__card, +html body .openms-lib-page--news .community-events-home__card:hover, +html body .openms-lib-page--news .community-events-home__card:focus-within, +html body .openms-lib-page--news .community-news-events__press-card, +html body .openms-lib-page--news .community-news-events__press-card:hover, +html body .openms-lib-page--news .news-entry:hover { + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + border: none !important; +} + +html body .openms-lib-page--news a.community-news-events__press-link, +html body .openms-lib-page--news a.community-news-events__press-link:hover, +html body .openms-lib-page--news a.community-news-events__press-link:focus-visible, +html body .openms-lib-page--news a.community-news-events__press-link:focus-within, +html body .openms-lib-page--news .community-news-events__press-link, +html body .openms-lib-page--news .news-home__card-link, +html body .openms-lib-page--news .news-home__card-link:hover, +html body .openms-lib-page--news .news-home__card-link:focus-visible, +html body .openms-lib-page--news .news-home__card-link:focus-within { + display: block !important; + padding: clamp(1.6rem, 2.8vw, 1.85rem) !important; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1) !important; + border-radius: 1.25rem !important; + overflow: hidden !important; + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + background-image: none !important; + box-shadow: 0 0.25rem 1rem rgba(var(--openms-navy-rgb), 0.06) !important; + border-color: rgba(var(--openms-navy-rgb), 0.1) !important; + transform: none !important; +} + +html body .openms-lib-page--news :is( + a.community-news-events__press-link, + .news-home__card-link +):is(:hover, :focus-visible, :focus-within) :is( + .community-news-events__press-title, + .news-home__card-title +) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page--calendar .community-events-page__section { + gap: 2.25rem !important; +} + +@media (min-width: 901px) { + html body .openms-lib-page--calendar .community-events-page__section { + gap: 0 !important; + } + + html body .openms-lib-page--calendar .community-events-page__grid, + html body .openms-lib-page--calendar .community-events-page__empty, + html body .openms-lib-page--calendar .events-past-panel__entries { + padding-top: 2.25rem !important; + padding-bottom: 2.5rem !important; + } +} + +html body .openms-lib-page--calendar .community-events-page__grid, +html body .openms-lib-page--calendar .community-events-page__empty, +html body .openms-lib-page--calendar .events-past-panel__entries { + padding-bottom: 2.5rem !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--calendar), +html body .content-padding:has(.openms-lib-page--calendar) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--calendar) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--calendar) + #footer.footer-redesign { + margin-top: 0 !important; + padding-top: 0 !important; +} + +/* Get involved / Ways to contribute — all copy white on card hover */ +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within), +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within) :is( + h3, + p, + span, + a, + i, + strong, + .contribute-track__title, + .contribute-track__text, + .contribute-track__cta, + .contribute-track__icon, + .contribute-project-link, + .contribute-project-link__name, + .openms-lib-btn, + .openms-lib-btn__label, + .fab, + .fas, + .svg-inline--fa +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within) :is( + .contribute-track__cta, + .contribute-project-link, + .openms-lib-btn, + .openms-lib-btn--ghost +) { + background: transparent !important; + border-color: var(--openms-white) !important; + box-shadow: none !important; +} + +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within) .contribute-track__icon :is( + i, + .fas, + .svg-inline--fa, + .svg-inline--fa path, + svg, + svg path +), +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn :is( + i, + .fab, + .fas, + .fa-windows, + .fa-apple, + .fa-linux, + .svg-inline--fa, + .svg-inline--fa path, + svg, + svg path +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +/* Outreach / Community coordination — links gray; icons blue on hover */ +html body .openms-lib-page--contribute .contribute-outreach__contact a, +html body .openms-lib-page--contribute .contribute-outreach__social-link, +html body .openms-lib-page--contribute .contribute-outreach__social-link :is( + .contribute-outreach__social-label, + .contribute-outreach__social-hint, + .contribute-outreach__social-arrow, + .contribute-outreach__social-icon, + i, + .fab, + .fas, + .fa-discord, + .fa-github, + .fa-linkedin-in, + .svg-inline--fa +) { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--contribute .contribute-outreach__social-link:hover .contribute-outreach__social-icon, +html body .openms-lib-page--contribute .contribute-outreach__social-link:focus-visible .contribute-outreach__social-icon, +html body .openms-lib-page--contribute .contribute-outreach__social-link:hover .contribute-outreach__social-icon :is(i, .fab, .fas, .svg-inline--fa), +html body .openms-lib-page--contribute .contribute-outreach__social-link:focus-visible .contribute-outreach__social-icon :is(i, .fab, .fas, .svg-inline--fa) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--contribute .contribute-channels__eyebrow, +html body .openms-lib-page--contribute .contribute-ways__eyebrow, +html body .openms-lib-page--contribute .contribute-support__kicker, +html body .openms-lib-page--contribute .contribute-outreach__eyebrow, +html body .openms-lib-page--contribute .contribute-coc-band__kicker, +html body .openms-lib-page--contribute .openms-lib-hero__eyebrow { + font-size: var(--home-eyebrow-size, 0.75rem) !important; + font-weight: var(--home-eyebrow-weight, 650) !important; + letter-spacing: var(--home-eyebrow-tracking, 0.16em) !important; + line-height: 1.3 !important; + text-transform: uppercase !important; +} + +html body .openms-lib-page--contribute .openms-lib-hero__title, +html body .openms-lib-page--contribute .openms-lib-hero__title .openms-lib-hero__accent { + display: inline !important; + white-space: nowrap !important; + max-width: none !important; + text-wrap: nowrap !important; +} + +@media (max-width: 520px) { + html body .openms-lib-page--contribute .openms-lib-hero__title, + html body .openms-lib-page--contribute .openms-lib-hero__title .openms-lib-hero__accent { + white-space: normal !important; + text-wrap: balance !important; + } +} + +html body .openms-lib-page--contribute .contribute-channels__title, +html body .openms-lib-page--contribute .contribute-ways__title, +html body .openms-lib-page--contribute .contribute-support__title, +html body .openms-lib-page--contribute .contribute-outreach__title, +html body .openms-lib-page--contribute .contribute-coc-band__text strong { + font-size: var(--home-section-head-title-size, var(--openms-section-title-size, calc(var(--openms-heading-lg-size) * 1.15))) !important; + font-weight: var(--openms-heading-lg-weight, 800) !important; + line-height: 1.3 !important; + letter-spacing: normal !important; + text-transform: uppercase !important; +} + +html body .openms-lib-page--contribute .contribute-channel__link, +html body .openms-lib-page--contribute .contribute-channel__link:link, +html body .openms-lib-page--contribute .contribute-channel__link:visited, +html body .openms-lib-page--contribute .contribute-channel__link:hover, +html body .openms-lib-page--contribute .contribute-channel__link:focus-visible, +html body .openms-lib-page--contribute .contribute-channel__link:active, +html body .openms-lib-page--contribute .contribute-channel:hover .contribute-channel__link, +html body .openms-lib-page--contribute .contribute-channel:focus-within .contribute-channel__link, +html body .openms-lib-page--contribute .contribute-channel__link span, +html body .openms-lib-page--contribute .contribute-channel:hover .contribute-channel__link span, +html body .openms-lib-page--contribute .contribute-channel:focus-within .contribute-channel__link span { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page--contribute .contribute-outreach__text, +html body .openms-lib-page--contribute .contribute-outreach__contact, +html body .openms-lib-page--contribute .contribute-support__text, +html body .openms-lib-page--contribute .contribute-channels__lead { + font-size: var(--openms-body-size-lg) !important; + line-height: 1.65 !important; +} + +html body .openms-lib-page--contribute .contribute-support__copy, +html body .openms-lib-page--contribute .contribute-support__text { + max-width: none !important; +} + +html body .openms-lib-page--contribute .contribute-support__text { + white-space: nowrap !important; + text-wrap: nowrap !important; +} + +@media (max-width: 900px) { + html body .openms-lib-page--contribute .contribute-support__text { + white-space: normal !important; + text-wrap: pretty !important; + } +} + +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__icon, +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__icon :is(.fab, .fas, .svg-inline--fa) { + font-size: clamp(1.65rem, 2.6vw, 2.05rem) !important; + width: 1em !important; + height: 1em !important; +} + +/* pyOpenMS For Developers — cards hug their content */ +/* WebApps Examples — eyebrow + Browse all apps stay blue */ +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__eyebrow, +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__eyebrow .section-eyebrow-icon, +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-link, +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-link span, +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-link:hover, +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-link:focus-visible, +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-link:hover span, +html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-link:focus-visible span { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__cards-grid { + align-items: start !important; + grid-auto-rows: auto !important; +} + +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card--box, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card--interactive, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card--link, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__cards-grid > .openms-lib-developers__card, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card:hover, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card:focus-visible, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card:focus-within { + height: auto !important; + min-height: 0 !important; + max-height: none !important; + align-self: start !important; + align-content: start !important; + grid-template-rows: auto !important; +} + +/* For Developers — keep Linux / macOS / Windows pills visible on blue hover */ +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src:is(:hover, :focus-within) { + overflow: visible !important; + max-height: none !important; +} + +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__platforms, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src:is(:hover, :focus-within) .openms-lib-developers__platforms { + display: flex !important; + flex-wrap: wrap !important; + opacity: 1 !important; + visibility: visible !important; + overflow: visible !important; + pointer-events: auto !important; + transform: none !important; + max-height: none !important; +} + +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__platform-btn, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:is(:hover, :focus-within) .openms-lib-developers__platform-btn, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src:is(:hover, :focus-within) .openms-lib-developers__platform-btn { + display: inline-flex !important; + flex: 0 0 auto !important; + opacity: 1 !important; + visibility: visible !important; + pointer-events: auto !important; + background: var(--openms-white) !important; + border: 2px solid var(--openms-white) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + padding: 0.45rem 0.85rem !important; + min-height: 2.25rem !important; + white-space: nowrap !important; +} + +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__platform-btn :is( + i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, span +) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: currentColor !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* Home hero — “Open-source · Free forever” on the dark band */ +html body .home-page .home-page__hero p.hero-home__eyebrow, +html body .home-page .home-page__hero .hero-home__eyebrow, +html body .home-page .hero-home__eyebrow { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* Home Ecosystem — header + platform tags in white */ +html body .home-page .home-page__block--ecosystem { + background: var(--openms-navy) !important; +} + +html body .home-page .home-page__block--ecosystem .ecosystem-home__eyebrow, +html body .home-page .home-page__block--ecosystem .ecosystem-home__eyebrow-icon, +html body .home-page .home-page__block--ecosystem .ecosystem-home__title, +html body .home-page .home-page__block--ecosystem .ecosystem-home__title-accent, +html body .home-page .home-page__block--ecosystem .ecosystem-home__lead, +html body .home-page .ecosystem-home__card-tag { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Home Community — copy on the photo/navy band */ +html body .home-page .community-home .community-home__eyebrow, +html body .home-page .community-home .community-home__eyebrow-icon, +html body .home-page .community-home .community-home__title, +html body .home-page .community-home .community-home__title-accent, +html body .home-page .community-home .community-home__lead, +html body .home-page .community-home .community-home__lead :is(p, a, strong, em, span), +html body .home-page .community-home .community-home__note, +html body .home-page .community-home .community-home__note :is(p, a, strong, em, span) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Latest news + Upcoming events — same card-title size */ +html body .home-page .community-events-home--with-news .community-news-events__column-title, +html body .home-page .community-events-home--with-news .community-news-events__column-title-accent { + font-size: var(--news-events-title-size, clamp(1.35rem, 2.4vw, 1.75rem)) !important; +} + +html body .home-page .community-events-home--with-news .community-news-events__press-title, +html body .home-page .community-events-home--with-news .news-home__card-title, +html body .home-page .community-events-home--with-news .community-events-home__card-title { + font-size: var(--openms-card-title-size) !important; +} + +@media (min-width: 900px) { + html body .home-page .community-events-home--with-news .community-news-events__column-header { + display: flex !important; + flex-wrap: nowrap !important; + align-items: flex-end !important; + align-self: stretch !important; + min-height: 100% !important; + } + + html body .home-page .community-events-home--with-news .community-news-events__view-all { + flex: 0 0 auto !important; + align-self: flex-end !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + white-space: nowrap !important; + } +} + +/* Calendar — same content rail as other solution pages */ +html body .openms-lib-page--calendar { + --calendar-max: var(--pro-max, 75rem); +} + +html body .openms-lib-page--calendar .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block, +html body .openms-lib-page--calendar .community-calendar-block, +html body .openms-lib-page--calendar .community-events-page { + width: 100% !important; + max-width: var(--pro-max, 75rem) !important; +} + +/* Scientific & technical support — white surfaces, readable copy, form hugs height */ +html body .openms-lib-page--services-support .openms-lib-page__intro, +html body .openms-lib-page--services-support .openms-lib-hero, +html body .openms-lib-page--services-support .openms-lib-hero--pro, +html body .openms-lib-page--services-support .openms-lib-hero--solution, +html body .openms-lib-page--services-support .openms-lib-hero__panel, +html body .openms-lib-page--services-support #quote, +html body .openms-lib-page--services-support .services-support-application { + background: var(--openms-white, #fff) !important; + background-color: var(--openms-white, #fff) !important; +} + +html body .openms-lib-page--services-support .openms-lib-hero__title, +html body .openms-lib-page--services-support .openms-lib-hero__accent, +html body .openms-lib-page--services-support .openms-lib-hero__lead, +html body .openms-lib-page--services-support .services-support-application__head .openms-lib-resources__title, +html body .openms-lib-page--services-support .services-support-application__head .openms-lib-resources__lead { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +html body .openms-lib-page--services-support .openms-lib-hero__eyebrow, +html body .openms-lib-page--services-support .openms-lib-hero__eyebrow .section-eyebrow-icon, +html body .openms-lib-page--services-support .services-support-application__head .openms-lib-resources__eyebrow, +html body .openms-lib-page--services-support .services-support-application__head .section-eyebrow-icon { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--services-support .services-page__tally-iframe { + display: block !important; + width: 100% !important; + min-height: 960px !important; + max-height: none !important; + overflow: visible !important; + margin: 0 !important; +} + +/* Sponsor Us — “About OpenMS Inc.” stays blue */ +html body .openms-lib-page--sponsor-us .openms-lib-about__tile-link, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile-link span, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile:hover .openms-lib-about__tile-link, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile:hover .openms-lib-about__tile-link span, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile-link:hover, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile-link:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +/* Research partnerships — hero title on three lines */ +html body .openms-lib-page--research-partnerships .openms-lib-hero__title { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + white-space: normal !important; + text-wrap: unset !important; +} + +html body .openms-lib-page--research-partnerships .openms-lib-hero__title-line { + display: block !important; + white-space: nowrap !important; +} + +html body .openms-lib-page--research-partnerships .openms-lib-hero, +html body .openms-lib-page--research-partnerships .openms-lib-hero__panel, +html body .openms-lib-page--research-partnerships .openms-lib-hero__content { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + text-align: center !important; + margin-inline: auto !important; + width: 100% !important; +} + +html body .openms-lib-page--research-partnerships .openms-lib-hero__eyebrow, +html body .openms-lib-page--research-partnerships .openms-lib-hero__title, +html body .openms-lib-page--research-partnerships .openms-lib-hero__title-line, +html body .openms-lib-page--research-partnerships .openms-lib-hero__lead { + text-align: center !important; + margin-inline: auto !important; + justify-content: center !important; +} + +html body .openms-lib-page--research-partnerships .openms-lib-hero__actions { + justify-content: center !important; + margin-inline: auto !important; +} + +/* Governance — hero title on two lines */ +html body .openms-lib-page--governance .openms-lib-hero__title { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + white-space: normal !important; + text-wrap: unset !important; + max-width: none !important; + width: 100% !important; +} + +html body .openms-lib-page--governance .openms-lib-hero__title-line { + display: block !important; + width: auto !important; + white-space: nowrap !important; +} + +html body .openms-lib-page--governance .openms-lib-hero__lead { + max-width: 52rem !important; +} + +html body .openms-lib-page--governance .openms-lib-hero__lead-line { + display: block !important; +} + +html body .openms-lib-page--governance .governance-membership__cards::before { + left: calc(32% + 0.75rem) !important; + right: calc(32% + 0.75rem) !important; +} + +html body .openms-lib-page--governance #responsibilities .openms-lib-about__head, +html body .openms-lib-page--governance #responsibilities .openms-lib-about__head-copy, +html body .openms-lib-page--governance #responsibilities .openms-lib-about__lead { + max-width: min(48rem, 100%) !important; +} + +html body .openms-lib-page--sponsor-us .openms-lib-hero__lead { + max-width: max-content !important; + width: 100% !important; + text-wrap: unset !important; +} + +html body .openms-lib-page--sponsor-us .openms-lib-hero__lead-line { + display: block !important; + white-space: nowrap !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--sponsor-us .openms-lib-hero__lead-line { + white-space: normal !important; + } +} + +html body .openms-lib-page--sponsor-us .sponsor-faq-pro__lead { + max-width: min(48rem, 100%) !important; +} + +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__lead { + max-width: max-content !important; + text-wrap: unset !important; +} + +html body .openms-lib-page--sponsor-us #why-sponsor .sponsor-lead-line { + display: block !important; + white-space: nowrap !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--sponsor-us #why-sponsor .sponsor-lead-line { + white-space: normal !important; + } +} + +/* Governance — How Core Developers Fit In navy cards */ +html body .openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item, +html body .openms-lib-page--governance #core-developers .governance-pillars-grid .openms-lib-resources__item :is( + h3, + p, + span, + .openms-lib-resources__item-title, + .openms-lib-resources__item-tag, + .openms-lib-resources__item-icon, + i, + .fas, + .svg-inline--fa, + .svg-inline--fa path +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Home Ecosystem — title and lead white on the navy band */ +html body .home-page .home-page__block--ecosystem h2.ecosystem-home__title, +html body .home-page .home-page__block--ecosystem .ecosystem-home__title, +html body .home-page .home-page__block--ecosystem .ecosystem-home__title-accent, +html body .home-page .home-page__block--ecosystem p.ecosystem-home__lead, +html body .home-page .home-page__block--ecosystem .ecosystem-home__lead { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* Home Community — eyebrow and title white on the photo band */ +html body .home-page .community-home p.community-home__eyebrow, +html body .home-page .community-home .community-home__eyebrow, +html body .home-page .community-home .community-home__eyebrow-icon, +html body .home-page .community-home h2.community-home__title, +html body .home-page .community-home .community-home__title, +html body .home-page .community-home .community-home__title-accent { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Footer — all labels and links white on navy */ +html body #footer.footer-redesign, +html body #footer.footer-redesign :is( + h1, h2, h3, h4, p, li, a, span, strong, small, + .footer-group-heading, + .footer-tagline, + .footer-title, + .footer-copyright, + .footer-nav a +), +html body #footer.footer-redesign a:visited, +html body #footer.footer-redesign a:hover, +html body #footer.footer-redesign a:focus-visible { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* Contribute — same section rhythm as /openms-lib/ */ +html body .openms-lib-page--contribute { + --contribute-section-y: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)); +} + +html body .openms-lib-page--contribute .openms-lib-page__body > .openms-lib-page__anchor, +html body .openms-lib-page--contribute #communication-channels.openms-lib-page__anchor, +html body .openms-lib-page--contribute #ways-to-contribute.openms-lib-page__anchor, +html body .openms-lib-page--contribute #code-of-conduct.openms-lib-page__anchor, +html body .openms-lib-page--contribute .openms-lib-page__outro > .openms-lib-page__anchor { + padding-block: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; +} + +html body .openms-lib-page--contribute #communication-channels.openms-lib-page__anchor { + padding-top: clamp(5rem, 10vw, 7.5rem) !important; + padding-bottom: clamp(5rem, 10vw, 7.5rem) !important; +} + +html body .openms-lib-page--contribute .contribute-ways { + padding-block: 0 !important; + gap: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; +} + +html body .openms-lib-page--contribute .contribute-channels__head, +html body .openms-lib-page--contribute .contribute-ways__head { + margin-bottom: 0 !important; + padding-bottom: 0 !important; +} + +html body .openms-lib-page--contribute .contribute-channels { + display: grid !important; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; + padding-top: clamp(3.5rem, 7vw, 5.25rem) !important; + padding-bottom: clamp(3.5rem, 7vw, 5.25rem) !important; +} + +html body .openms-lib-page--contribute .contribute-track { + padding-block: 0 !important; +} + +html body .openms-lib-page--contribute .contribute-support { + margin-top: 0 !important; +} + +html body .openms-lib-page--contribute .contribute-outreach { + padding-block: 0 !important; + margin-top: 0 !important; +} + +/* Code of Conduct — Overview cards: all copy gray */ +html body .openms-lib-page--code-of-conduct .coc-principle, +html body .openms-lib-page--code-of-conduct .coc-principle :is( + h3, + p, + span, + .coc-principle__num, + .coc-principle__title, + .coc-principle__text +), +html body .openms-lib-page--code-of-conduct .coc-principle:is(:hover, :focus-within) :is( + h3, + p, + span, + .coc-principle__num, + .coc-principle__title, + .coc-principle__text +) { + color: rgba(var(--openms-dark-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.72) !important; +} + +/* Code of Conduct — Full policy: drop the index numbers */ +html body .openms-lib-page--code-of-conduct .coc-details__index { + display: none !important; +} + +/* Developer retreat hero — center on the page */ +html body .openms-lib-page--developer-retreat .openms-lib-page__intro, +html body .openms-lib-page--developer-retreat .openms-lib-hero, +html body .openms-lib-page--developer-retreat .openms-lib-hero__panel, +html body .openms-lib-page--developer-retreat .openms-lib-hero__content { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + text-align: center !important; + margin-inline: auto !important; + width: 100% !important; +} + +html body .openms-lib-page--developer-retreat .openms-lib-hero__eyebrow, +html body .openms-lib-page--developer-retreat .openms-lib-hero__title, +html body .openms-lib-page--developer-retreat .openms-lib-hero__title-line, +html body .openms-lib-page--developer-retreat .openms-lib-hero__lead { + text-align: center !important; + margin-inline: auto !important; + margin-left: auto !important; + margin-right: auto !important; +} + +html body .openms-lib-page--developer-retreat .openms-lib-hero__title { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + max-width: none !important; + width: 100% !important; +} + +html body .openms-lib-page--developer-retreat .openms-lib-hero__title-line { + display: block !important; + margin-left: auto !important; + margin-right: auto !important; + white-space: nowrap !important; +} + +html body .openms-lib-page--developer-retreat .openms-lib-hero__lead { + max-width: min(42rem, 100%) !important; +} + +@media (min-width: 721px) { + html body .openms-lib-page--developer-retreat .openms-lib-hero__title-line { + display: block !important; + white-space: nowrap !important; + } +} + +/* Contributors — Executive Committee stays 2 columns on phones */ +@media (max-width: 960px) { + html body .openms-lib-page--contributors #executive-committee .members, + html body .openms-lib-page--contributors .contributors-exec-gallery .members { + display: grid !important; + justify-items: center; + grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; + } +} + +/* Sponsor Us — About OpenMS Inc. text link stays blue */ +html body .openms-lib-page--sponsor-us a.openms-lib-about__tile-link, +html body .openms-lib-page--sponsor-us a.openms-cta-link, +html body .openms-lib-page--sponsor-us a.openms-lib-about__tile-link span, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile:hover a.openms-lib-about__tile-link, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile:hover a.openms-lib-about__tile-link span, +html body .openms-lib-page--sponsor-us a.openms-lib-about__tile-link:visited { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .home-page .home-page__hero p.hero-home__eyebrow, +html body .home-page .home-page__hero .hero-home__eyebrow { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .navbar.is-fresh .navbar-dropdown a.navbar-item:hover, +html body .navbar.is-fresh .navbar-dropdown a.navbar-item:focus-visible, +html body .navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:hover, +html body .navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:focus-visible, +html body #navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item:hover, +html body #navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item:focus-visible, +html body #navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:hover, +html body #navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item.is-nested:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .home-page .home-page__block--ecosystem p.ecosystem-home__eyebrow, +html body .home-page .home-page__block--ecosystem .ecosystem-home__eyebrow, +html body .home-page .home-page__block--ecosystem .ecosystem-home__eyebrow-icon, +html body .home-page .home-page__block--ecosystem .ecosystem-home__eyebrow-icon svg, +html body .home-page .home-page__block--ecosystem .ecosystem-home__eyebrow-icon svg path, +html body .home-page .home-page__block--ecosystem h2.ecosystem-home__title, +html body .home-page .home-page__block--ecosystem .ecosystem-home__title, +html body .home-page .home-page__block--ecosystem .ecosystem-home__title-accent { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body .home-page .home-page__block--ecosystem .ecosystem-home { + padding-top: calc(var(--home-section-pad, var(--pro-section-y, 4rem)) - 1.25rem) !important; +} + +html body .home-page .home-page__block--projects .webapps-featured--home { + padding-top: calc(var(--home-projects-pad-y, var(--pro-section-y, 4rem)) - 1.25rem) !important; +} + +html body .home-page .community-home p.community-home__eyebrow, +html body .home-page .community-home .community-home__eyebrow, +html body .home-page .community-home .community-home__eyebrow-icon, +html body .home-page .community-home .community-home__eyebrow-icon svg, +html body .home-page .community-home .community-home__eyebrow-icon svg path, +html body .home-page .community-home h2.community-home__title, +html body .home-page .community-home .community-home__title, +html body .home-page .community-home .community-home__title-accent { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* Narrow blue text/arrow links stay blue on hover (not filled buttons) */ +html body :is( + .openms-cta-link, + .webapps-project-card__cta, + .webapps-project-card__cta-label, + .webapps-project-card__cta-icon, + .news-home__card-cta, + .contact-home__card-cta, + .community-events-home__card-cta, + .community-events-home__card-cta-icon, + .contribute-channel__link, + .contribute-track__cta, + .contribute-way__link, + .contribute-project-link, + .contribute-project-link__name, + .openms-lib-about__tile-link, + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .openms-lib-resources__examples-link, + .openms-lib-resources__explore-link, + .openms-lib-list__link, + .openms-lib-topp__cta, + .openms-lib-topp-split__card-link, + .openms-lib-resources__item-link, + .coc-report__link, + .privacy-overview__note-link, + .contact-page__path-link, + .webapps-featured__extra-link, + .webapps-featured__show-all, + .webapps-featured__show-all-icon, + .ecosystem-home__card-link, + .ecosystem-home__card-link-icon, + .community-news-events__view-all, + .community-news-events__view-all-icon, + .community-events-home__view-all--inline, + .publications-cite-card__action, + .news-entry__action, + .trusted-by__wall-cta, + .home-pathways__step-go, + .events-past-card__title-link +):is(:hover, :focus-visible, :visited), +html body :is( + .webapps-project-card__surface, + .news-home__card, + .community-events-home__card, + .community-news-events__press-link, + .contribute-channel, + .contribute-track__item, + .openms-lib-about__tile, + .openms-lib-resources__item, + .ecosystem-home__card, + .trusted-by__wall-card, + .home-pathways__step +):is(:hover, :focus-within) :is( + .openms-cta-link, + .webapps-project-card__cta, + .webapps-project-card__cta-label, + .webapps-project-card__cta-icon, + .news-home__card-cta, + .community-events-home__card-cta, + .community-events-home__card-cta-icon, + .contribute-channel__link, + .contribute-track__cta, + .contribute-project-link, + .contribute-project-link__name, + .openms-lib-about__tile-link, + .openms-lib-resources__item-link, + .openms-lib-list__link, + .openms-lib-topp__cta, + .webapps-featured__show-all, + .ecosystem-home__card-link, + .ecosystem-home__card-link-icon, + .community-news-events__view-all, + .trusted-by__wall-cta, + .home-pathways__step-go +) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body :is( + .openms-lib-developers__card, + .openms-lib-developers__card--interactive, + .openms-lib-developers__card--box, + .contact-home__card +):is(:hover, :focus-within) :is( + .openms-lib-developers__card-link, + .openms-lib-developers__platform-link, + .contact-home__card-cta +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page--contact #contact-paths .openms-lib-resources__item-link, +html body .openms-lib-page--contact #contact-paths .openms-lib-resources__item:is(:hover, :focus-visible, :focus-within) .openms-lib-resources__item-link, +html body .openms-lib-page--contact #contact-paths a.openms-lib-resources__item:is(:hover, :focus-visible) .openms-lib-resources__item-link { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page--solution #getting-started .openms-lib-resources__explore-card { + background: #1c3d78 !important; +} + +html body .openms-lib-page--solution #getting-started .openms-lib-resources__explore-card:hover, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__explore-card:focus-visible { + background: #2550a0 !important; +} + +/* Partnerships include — numbered columns like OpenMS-lib Overview */ +html body .openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__inner { + gap: var(--pro-head-to-content, 3.25rem) !important; +} + +html body .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic, +html body .openms-lib-page--research-partnerships .rp-include__mosaic { + display: grid !important; + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + gap: 0 !important; + width: 100% !important; + border: none !important; + background: transparent !important; +} + +html body .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic > .openms-lib-about__tile, +html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: 0.1rem !important; + width: 100% !important; + height: auto !important; + min-height: 0 !important; + margin: 0 !important; + padding-block: 0.35rem !important; + padding-inline: clamp(0.75rem, 1.6vw, 1.25rem) !important; + border: none !important; + border-right: 1px solid var(--sol-line, rgba(18, 36, 72, 0.12)) !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + transform: none !important; + grid-column: auto !important; +} + +html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:first-child { + padding-left: 0 !important; +} + +html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:last-child { + border-right: none !important; + padding-right: 0 !important; +} + +html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:hover, +html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:focus-within { + background: transparent !important; + transform: none !important; + box-shadow: none !important; +} + +@media (max-width: 960px) { + html body .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic, + html body .openms-lib-page--research-partnerships .rp-include__mosaic { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile, + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:first-child, + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(4n), + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(n + 5), + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:last-child { + border-right: none !important; + border-bottom: 1px solid var(--sol-line, rgba(18, 36, 72, 0.12)) !important; + border-top: none !important; + padding-inline: 0.85rem !important; + padding-block: 1.15rem !important; + } + + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(odd) { + padding-left: 0 !important; + padding-right: 0.85rem !important; + } + + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(even) { + padding-right: 0 !important; + padding-left: 0.85rem !important; + } + + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-last-child(-n + 1) { + border-bottom: none !important; + } +} + +@media (max-width: 700px) { + html body .openms-lib-page--research-partnerships.openms-lib-page--openms-lib .rp-include__mosaic, + html body .openms-lib-page--research-partnerships .rp-include__mosaic { + grid-template-columns: 1fr !important; + } + + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile, + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(odd), + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:nth-child(even) { + border-right: none !important; + border-bottom: 1px solid var(--sol-line, rgba(18, 36, 72, 0.12)) !important; + padding-inline: 0 !important; + padding-block: 1.15rem !important; + } + + html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:last-child { + border-bottom: none !important; + } +} + +/* Contributors — Executive Committee sits flush to the footer */ +html body .openms-lib-page--contributors #executive-committee .openms-lib-resources { + padding-bottom: 0 !important; +} + +html body .openms-lib-page--contributors .contributors-exec-note { + margin-bottom: 2.5rem !important; +} + +html body .openms-lib-page--contributors .openms-lib-page__outro { + display: block !important; + margin: 0 !important; + padding: 0 !important; + background: transparent !important; +} + +html body .openms-lib-page--contributors #join-community.openms-lib-page__anchor { + display: none !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--contributors), +html body .content-padding:has(.openms-lib-page--contributors) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--contributors) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--contributors) + #footer.footer-redesign { + margin-top: 0 !important; + padding-top: 0 !important; +} + +html body .openms-lib-page--calendar :is( + .community-events-home__item, + .community-events-home__card, + .community-news-events__press-card, + .community-news-events__press-link, + .community-news-events__press-link--static, + a.community-news-events__press-link, + .community-events-home__card-link, + .community-events-home__card-link--static, + .events-past-card +):is(:hover, :focus-visible, :focus-within, :active) { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + background-image: none !important; + border-radius: 1.25rem !important; +} + +html body .openms-lib-page--news :is( + .community-events-home__card, + .community-news-events__press-card, + .community-news-events__press-link, + a.community-news-events__press-link, + .news-home__card-link +):is(:hover, :focus-visible, :focus-within, :active) { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + background-image: none !important; + border-radius: 1.25rem !important; + transform: none !important; +} diff --git a/assets/icons/anaconda.svg b/assets/icons/anaconda.svg new file mode 100644 index 00000000..6c660fd8 --- /dev/null +++ b/assets/icons/anaconda.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/google-scholar-color.svg b/assets/icons/google-scholar-color.svg new file mode 100644 index 00000000..6ab9ec78 --- /dev/null +++ b/assets/icons/google-scholar-color.svg @@ -0,0 +1,6 @@ + diff --git a/assets/icons/google-scholar.svg b/assets/icons/google-scholar.svg new file mode 100644 index 00000000..3ca9e922 --- /dev/null +++ b/assets/icons/google-scholar.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..153a617b --- /dev/null +++ b/assets/js/back-to-top.js @@ -0,0 +1,42 @@ +(function () { + var trigger = document.querySelector(".back-to-top"); + if (!trigger) return; + + var deploy = document.querySelector(".footer-deploy"); + var buttonSize = 40; + var edgeGap = 16; + var clearGap = 12; + + var nearDeploy = function () { + if (!deploy) return false; + + var d = deploy.getBoundingClientRect(); + if (d.bottom <= 0 || d.top >= window.innerHeight) return false; + + var btnLeft = window.innerWidth - edgeGap - buttonSize; + var btnTop = window.innerHeight - edgeGap - buttonSize; + var btnRight = window.innerWidth - edgeGap; + var btnBottom = window.innerHeight - edgeGap; + + return !( + d.right + clearGap < btnLeft || + d.left - clearGap > btnRight || + d.bottom + clearGap < btnTop || + d.top - clearGap > btnBottom + ); + }; + + var update = function () { + var shouldShow = window.scrollY > 320; + trigger.classList.toggle("is-visible", shouldShow); + trigger.classList.toggle("is-raised", shouldShow && nearDeploy()); + }; + + trigger.addEventListener("click", function () { + window.scrollTo({ top: 0, behavior: "smooth" }); + }); + + window.addEventListener("scroll", update, { passive: true }); + window.addEventListener("resize", update); + update(); +})(); 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..985795ea --- /dev/null +++ b/assets/js/navbar-search.js @@ -0,0 +1,279 @@ +/** + * 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(); + + document.addEventListener("keydown", function (e) { + if (!(e.key === "k" || e.key === "K")) return; + if (!(e.metaKey || e.ctrlKey)) return; + var target = e.target; + if ( + target && + (target.tagName === "INPUT" || + target.tagName === "TEXTAREA" || + target.tagName === "SELECT" || + target.isContentEditable) + ) { + return; + } + var root = + document.querySelector(".navbar-search--desktop") || + document.querySelector(".navbar-search"); + if (!root) return; + var toggle = root.querySelector(".navbar-search__toggle"); + var panel = root.querySelector(".navbar-search__panel"); + var input = root.querySelector(".navbar-search__input"); + if (!toggle || !panel || !input) return; + e.preventDefault(); + if (root.classList.contains("is-open")) { + input.focus(); + return; + } + openPanel(root, toggle, panel, input); + }); + }); +})(); diff --git a/assets/js/navbar.js b/assets/js/navbar.js new file mode 100644 index 00000000..4218c41b --- /dev/null +++ b/assets/js/navbar.js @@ -0,0 +1,467 @@ +/** + * 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" + ); + var nav = document.getElementById("nav"); + var navHeight = nav ? nav.offsetHeight : Math.max(0, header.offsetHeight - bannerHeight); + document.documentElement.style.setProperty( + "--openms-nav-bar-height", + navHeight + "px" + ); + } + + function updateScrolledState() { + var scrolled = (window.scrollY || window.pageYOffset || 0) > 16; + document.body.classList.toggle("is-scrolled", scrolled); + var header = document.querySelector(".site-header"); + if (header) header.classList.toggle("is-scrolled", scrolled); + } + + 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(); + updateScrolledState(); + + window.addEventListener("scroll", updateScrolledState, { passive: true }); + 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..eab60543 --- /dev/null +++ b/assets/js/openms-lib-hub.js @@ -0,0 +1,119 @@ +(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("#what-is-openms .openms-lib-about__list-item").forEach(function (item, index) { + markReveal(item, index + 1, index % 2 === 0 ? "scale" : "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..bf62a0af --- /dev/null +++ b/assets/js/publications-year-filter.js @@ -0,0 +1,266 @@ +(function () { + "use strict"; + + var ALL = "all"; + var PAGE_SIZE = 10; + + 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 allEntries = Array.prototype.slice.call( + root.querySelectorAll(".publication-entry") + ); + if (!allEntries.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); + }); + + var currentYear = ALL; + var visibleLimit = PAGE_SIZE; + + var entriesWrap = root.querySelector(".publications-bibliography__entries"); + var moreWrap = document.createElement("div"); + moreWrap.className = "publications-more"; + moreWrap.setAttribute("data-publications-more", ""); + moreWrap.hidden = true; + + var moreBtn = document.createElement("button"); + moreBtn.type = "button"; + moreBtn.className = "openms-cta-link publications-more__btn"; + moreBtn.setAttribute("data-publications-show-more", ""); + moreBtn.innerHTML = 'Show more'; + moreWrap.appendChild(moreBtn); + + if (entriesWrap && entriesWrap.parentNode) { + entriesWrap.parentNode.insertBefore(moreWrap, entriesWrap.nextSibling); + } else { + root.appendChild(moreWrap); + } + + 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 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 filteredEntries(year) { + var showAll = !year || year === ALL; + if (showAll) return allEntries; + return allEntries.filter(function (entry) { + var section = entry.closest("[data-publication-year]"); + return ( + section && section.getAttribute("data-publication-year") === year + ); + }); + } + + function render() { + var showAll = !currentYear || currentYear === ALL; + var matched = filteredEntries(currentYear); + var remaining = Math.max(0, matched.length - visibleLimit); + + allEntries.forEach(function (entry) { + entry.hidden = true; + }); + + matched.slice(0, visibleLimit).forEach(function (entry) { + entry.hidden = false; + }); + + allSections.forEach(function (section) { + var sectionYear = section.getAttribute("data-publication-year") || ""; + var inYear = showAll || sectionYear === currentYear; + var hasVisible = false; + if (inYear) { + section.querySelectorAll(".publication-entry").forEach(function (entry) { + if (!entry.hidden) hasVisible = true; + }); + } + var show = inYear && hasVisible; + section.hidden = !show; + section.setAttribute("aria-hidden", show ? "false" : "true"); + }); + + root.setAttribute("data-active-year", showAll ? ALL : currentYear); + updateNavActive(showAll ? ALL : currentYear); + + moreWrap.hidden = remaining <= 0; + if (remaining > 0) { + moreBtn.textContent = + remaining === 1 ? "Show 1 more" : "Show more"; + moreBtn.setAttribute( + "aria-label", + "Show more publications (" + remaining + " remaining)" + ); + } + } + + function selectYear(year) { + if (year !== ALL && allYears.indexOf(year) === -1) { + year = ALL; + } + currentYear = year; + visibleLimit = PAGE_SIZE; + selectEl.value = year; + setYearInUrl(year); + render(); + } + + function showMore() { + visibleLimit += PAGE_SIZE; + render(); + } + + function initYear() { + var fromUrl = getYearFromUrl(); + if (fromUrl === ALL) return ALL; + 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); + }); + } + + 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); + } + + addButton(ALL, selectEl.getAttribute("data-all-label") || "All years"); + 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); + }); + + moreBtn.addEventListener("click", showMore); + + function splitAuthors(raw) { + var text = (raw || "").replace(/\s+/g, " ").trim(); + if (!text) return []; + + // "Last, First; Last, First" vs "Last I, Last I, …" + var parts = text.indexOf(";") !== -1 ? text.split(";") : text.split(","); + var authors = []; + for (var i = 0; i < parts.length; i++) { + var name = parts[i].replace(/\s+/g, " ").trim(); + if (name) authors.push(name); + } + return authors; + } + + function truncateAuthors() { + var LIMIT = 7; + var nodes = root.querySelectorAll(".publication-authors"); + nodes.forEach(function (el) { + if (el.getAttribute("data-authors-truncated") === "1") return; + + var authors = splitAuthors(el.textContent); + if (authors.length <= LIMIT) { + el.setAttribute("data-authors-truncated", "1"); + return; + } + + var sep = el.textContent.indexOf(";") !== -1 ? "; " : ", "; + var last = authors[authors.length - 1]; + var rest = authors.slice(0, -1); + if (rest.length <= LIMIT) { + el.setAttribute("data-authors-truncated", "1"); + return; + } + + var visible = rest.slice(0, LIMIT); + var more = rest.length - LIMIT; + var label = more >= 10 ? "10+" : "+" + more; + + el.textContent = ""; + el.appendChild(document.createTextNode(visible.join(sep) + " ")); + + var chip = document.createElement("span"); + chip.className = "publications-cite-card__authors-more"; + chip.title = + authors.length + " authors total · " + more + " more not shown"; + chip.textContent = label; + el.appendChild(chip); + el.appendChild(document.createTextNode(sep + last)); + el.setAttribute("data-authors-truncated", "1"); + }); + } + + buildSelect(); + buildNav(); + truncateAuthors(); + 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..d7fee3bb --- /dev/null +++ b/assets/js/sponsor-tiers.js @@ -0,0 +1,67 @@ +(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 switcherBtns = Array.prototype.slice.call( + root.querySelectorAll("[data-sponsor-benefits-select]") + ); + + 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, options) { + var opts = options || {}; + 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); + }); + switcherBtns.forEach(function (btn) { + var match = btn.getAttribute("data-sponsor-benefits-select") === tierId; + btn.classList.toggle("is-active", match); + btn.setAttribute("aria-selected", match ? "true" : "false"); + btn.tabIndex = match ? 0 : -1; + }); + if (opts.open) { + benefits.open = true; + } + if (opts.scroll) { + benefits.scrollIntoView({ behavior: "smooth", block: "nearest" }); + } + } + + toggles.forEach(function (toggle) { + toggle.addEventListener("click", function () { + activate(toggle.getAttribute("data-sponsor-tier"), { + open: true, + scroll: true + }); + }); + }); + + switcherBtns.forEach(function (btn) { + btn.addEventListener("click", function (event) { + event.preventDefault(); + event.stopPropagation(); + activate(btn.getAttribute("data-sponsor-benefits-select"), { + open: true, + scroll: false + }); + }); + }); + + activate(initial, { open: false, scroll: 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..af47e8ab 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,1460 @@ 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: + - icon: fas fa-globe + text: Fully remote & unpaid + - icon: fas fa-comments + text: Biweekly mentor meetings + - icon: fas fa-award + text: 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? Email us for more information. + contactUrl: /contact/ + contactButtonText: Email Us + contactButtonUrl: mailto:fundraising@openms.de + # groupByTier: true + sponsors: + - name: LiBiS + url: https://libis.uni-heidelberg.de/ + logo: /images/logos/LiBiS-Logo.svg + alt: LiBiS — Life Science Informatics + description: 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 + description: Core Data Resource + # tier: platinum + - name: deNBI + url: https://www.denbi.de/ + logo: /images/logos/denbi.jpeg + alt: deNBI — German Network for Bioinformatics Infrastructure + description: 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 - buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html - # Hero image (from static/images/___) - image: OpenMS_transparent_blackFont.png + eyebrow: Open-source · Free forever + titleBefore: "Open science. " + titleMid: "Clear results for " + titleHighlight: "mass spectrometry" + titleAfter: "." + description: >- + An expert-crafted ecosystem of computational mass spectrometry tools — + run vetted apps, build on open algorithms, and join the community. + imageAlt: OpenMS peptide identification workflow preview + buttontext: Get started + buttonlink: /contribute/ + secondaryButtonText: Explore the library + secondaryButtonLink: /openms-lib/ + trustNote: Ready-to-use apps · Modular workflows · Built by the community + microcopy: "" + mockup: + label: Open science + labelArrow: "→" + labelAfter: clear results + brand: OPENMS + bars: [38, 55, 82, 64, 47, 90, 70, 58, 75, 40] + + + homeMetrics: + stats: + - value: 20 + suffix: "+" + label: Years active + description: Over two decades of open-source development for mass spectrometry workflows. + - value: 10000 + suffix: "+" + label: Citations + description: Peer-reviewed research citing OpenMS tools and algorithms worldwide. + - value: 180 + suffix: "+" + label: Contributors + description: Developers, researchers, and community members advancing OpenMS 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/openms-20th-anniversary.jpg + imageAlt: OpenMS community at the 20th anniversary gathering + 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: "" + title: "" + layout: benefits + 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: TOPP Tools + title: Ships with the TOPP command-line tools + lead: 150+ modular tools covering the complete mass spectrometry pipeline. + image: /images/content_images/topp-tool-list.png + imageAlt: Browse OpenMS TOPP tools such as MSFraggerAdapter, ProteinQuantifier, and OpenSwathWorkflow + features: + - title: Compose workflows + icon: fas fa-project-diagram + text: Chain TOPP tools together to build custom workflows tailored to your data. + - title: Engine integration + icon: fas fa-cogs + text: Integrates with common workflow engines like Nextflow and KNIME. + linkText: Learn more + linkUrl: https://openms.readthedocs.io/en/latest/getting-started/workflows.html + - title: Ongoing coverage + icon: fas fa-layer-group + text: 200+ modular tools for every stage of the mass spectrometry pipeline, with docs and community support. + 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: 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: Open docs + featured: true + - title: TOPP Tools + tag: Pipeline + icon: fas fa-terminal + 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: Browse 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: See 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: 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: View 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: false + 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; Kim, Jihyung; Rosenberger, George; + Bichmann, Leon; Walzer, Mathias; Veit, Johannes; Boudaud, Bertrand; + Bernt, Matthias; Patikas, Nikolaos; Pilz, Matteo; Startek, Michał Piotr; + Kutuzova, Svetlana; Heumos, Lukas; Charkow, Joshua; Sing, Justin Cyril; + Feroz, Ayesha; Siraj, Arslan; Weisser, Hendrik; Dijkstra, Tjeerd M. H.; + Perez-Riverol, Yasset; Röst, Hannes; Kohlbacher, Oliver; Sachsenberg, Timo + actionText: View on PubMed + moreUrl: /publications/ + moreText: More citations + boxes: + - title: Contributing Guidelines + tag: Contribute + icon: fas fa-hands-helping + subtitle: How to propose changes and join the community. + hoverText: Learn how to open pull requests, follow our contribution workflow, and collaborate with OpenMS maintainers. + 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 + subtitle: File bugs or request new features. + hoverText: Open a bug report, feature request, or discussion on the OpenMS GitHub tracker. + url: https://github.com/OpenMS/OpenMS/issues/new/choose + linkText: Open on GitHub + - title: Developer manual + tag: Docs + icon: fas fa-book + subtitle: Architecture and coding standards. + hoverText: Dive into OpenMS-lib architecture, coding standards, and contribution workflows. + url: https://openms.readthedocs.io/en/latest/manual/develop.html + linkText: Open docs + - title: Developer FAQ + tag: Help + icon: fas fa-question-circle + subtitle: Common build and contribute answers. + hoverText: Find answers to frequent questions about building, testing, and contributing to OpenMS. + url: https://openms.readthedocs.io/en/latest/manual/develop/developer-faq.html + linkText: Browse FAQ + - title: Add a TOPP tool + tag: Extend + icon: fas fa-puzzle-piece + subtitle: Extend the TOPP pipeline suite. + hoverText: Follow the step-by-step guide to add a new tool to the TOPP command-line pipeline suite. + url: https://openms.readthedocs.io/en/latest/manual/develop/adding-new-tool-to-topp.html + linkText: Follow the guide + - title: Building OpenMS from Source + type: links + tag: Build + icon: fas fa-hammer + subtitle: Compile locally on your platform. + hoverText: Follow the platform guide for Linux, macOS, or Windows to build the C++ core and tools. + 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: Reviewing Pull Requests + type: links + tag: Review + icon: fas fa-code-branch + subtitle: Help move contributions forward by reviewing open pull requests on GitHub. + platformsAlwaysVisible: true + 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: "" + title: "" + layout: benefits + 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 and resources to start building with pyOpenMS. + items: + - title: Read Documentation + tag: Docs + icon: fas fa-book-open + text: Tutorials and guides to help you get productive quickly. + url: https://pyopenms.readthedocs.io/ + linkText: Open docs + featured: true + - title: Installation + tag: Install + icon: fab fa-python + text: Install pyOpenMS from PyPI and verify your environment. + url: https://pyopenms.readthedocs.io/en/latest/user_guide/installation.html + linkText: Install now + - title: API Reference + tag: API + icon: fas fa-code + text: Full class and method reference for the Python bindings. + url: https://pyopenms.readthedocs.io/en/latest/apidocs/index.html + linkText: View reference + - title: Visualization + tag: pyOpenMS viz + icon: fas fa-chart-line + text: Interactive plotting and exploration for OpenMS data structures. + url: /pyopenms-viz/ + linkText: Explore viz + # TODO (Josh): Get google colab updated link (Binder removed — no longer maintained) + - title: Try Online + tag: No install needed + icon: fas fa-laptop-code + text: Run pyOpenMS in the browser without a local install. + linkText: Open in Colab + - 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 + + 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: false + 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://pubmed.ncbi.nlm.nih.gov/24420968/ + 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 + subtitle: File bugs or request new features. + url: https://github.com/OpenMS/OpenMS/issues/new/choose + linkText: Open on GitHub + - title: Build from Source + tag: Build + icon: fas fa-hammer + subtitle: Compile pyOpenMS locally on your platform. + url: https://pyopenms.readthedocs.io/en/latest/community/build_from_source.html + linkText: View build guide + - title: Wrapping New Classes + tag: Extend + icon: fas fa-puzzle-piece + subtitle: Expose new OpenMS classes to Python. + url: https://pyopenms.readthedocs.io/en/latest/community/wrapping_workflows_new_classes.html + linkText: Follow the guide + - title: Developer manual + tag: Docs + icon: fas fa-book + subtitle: Architecture and contribution workflows. + url: https://pyopenms.readthedocs.io/en/latest/community/index.html + linkText: Open docs + - title: Reviewing Pull Requests + type: links + tag: Review + icon: fas fa-code-branch + subtitle: Help move contributions forward by reviewing open pull requests on GitHub. + platformsAlwaysVisible: true + 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 + + + pyopenmsVizPage: + highlights: + eyebrow: "" + title: "" + layout: benefits + items: + - title: DataFrame-native + text: Plot directly from pandas with df.plot() + - title: Mass spec plots + text: Spectra, chromatograms, and peak maps + - title: Multiple backends + text: Matplotlib, Bokeh, and Plotly + - title: One-line API + text: Publication-ready figures from a single call + + gettingStarted: + eyebrow: Get started + title: Explore pyopenms_viz + lead: Documentation and resources to start plotting with pyopenms_viz. + items: + - title: Plotting Gallery + tag: Gallery + icon: fas fa-images + text: Browse example plots for spectra, chromatograms, and more. + url: https://pyopenms-viz.readthedocs.io/en/latest/gallery/index.html + linkText: Browse gallery + featured: true + - title: Installation + tag: Install + icon: fab fa-python + text: Install pyopenms_viz and start plotting from pandas DataFrames. + url: https://pyopenms-viz.readthedocs.io/en/latest/Installation.html + linkText: Install now + - title: Documentation + tag: Docs + icon: fas fa-book-open + text: Guides and tutorials to help you get productive quickly. + url: https://pyopenms-viz.readthedocs.io/en/latest/ + linkText: Open docs + - title: API Reference + tag: API + icon: fas fa-code + text: Full class and method reference for plot types and customization. + url: https://pyopenms-viz.readthedocs.io/en/latest/API.html + linkText: View reference + - 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: 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/pyopenms_viz/issues/new + + developers: + eyebrow: For Developers + title: Contribute + lead: Help improve visualization for the OpenMS ecosystem — report issues, extend plot types, and share examples. + citeSeparate: false + citeText: Used pyopenms_viz in your work? If so, please cite. + citation: + variant: primary + topic: pyOpenMS-viz + title: >- + pyOpenMS-viz: Streamlining Mass Spectrometry Data Visualization + with pandas + url: https://pubmed.ncbi.nlm.nih.gov/40019346/ + journal: Journal of Proteome Research + year: "2025" + authors: >- + Sing, Justin Cyril; Charkow, Joshua; Walter, Axel; Gao, Mingxuan; + Müller, Tom David; Bittremieux, Wout; Sachsenberg, Timo; Röst, Hannes Luc + actionText: View on PubMed + moreUrl: /publications/ + moreText: More citations + boxes: + - title: Report an Issue + tag: GitHub + icon: fab fa-github + subtitle: Report bugs or request new plot types on GitHub. + url: https://github.com/OpenMS/pyopenms_viz/issues/new + linkText: Open on GitHub + - title: Contribute on GitHub + tag: Source + icon: fab fa-github + subtitle: Browse the source, open pull requests, and share examples. + url: https://github.com/OpenMS/pyopenms_viz + linkText: View repository + - title: Reviewing Pull Requests + type: links + tag: Review + icon: fas fa-code-branch + subtitle: Help move contributions forward by reviewing open pull requests on GitHub. + platformsAlwaysVisible: true + badge: + src: https://img.shields.io/github/issues-pr/OpenMS/pyopenms_viz?label=open%20PRs&color=1a56db&style=flat-square + alt: Number of open pyopenms_viz pull requests + url: https://github.com/OpenMS/pyopenms_viz/pulls + platforms: + - name: View open PRs + icon: fab fa-github + url: https://github.com/OpenMS/pyopenms_viz/pulls + - name: How to review PRs + icon: fas fa-book-open + url: https://github.com/ParadiseSS13/Paradise/discussions/19410 + + webappsPage: + highlights: + eyebrow: "" + title: "" + layout: benefits + 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: Open docs + featured: true + - 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 + - tag: Windows + title: Windows executable + icon: fab fa-windows + text: Package your WebApp as a standalone Windows executable. + url: https://github.com/OpenMS/streamlit-template/releases/latest + linkText: Download installer + - 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/streamlit-template/issues/new + + examples: + eyebrow: Examples + title: Featured WebApps + lead: 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 + logoSize: large + 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: false + citeText: Used OpenMS WebApps in your work? If so, please cite. + citation: + variant: primary + topic: OpenMS WebApps + title: "OpenMS WebApps: Building User-Friendly Solutions for MS Analysis" + journal: Journal of Proteome Research + year: "2025" + url: https://www.ncbi.nlm.nih.gov/pubmed/39881492 + actionText: View on PubMed + moreUrl: /publications/ + moreText: More citations + boxes: + - title: Report an Issue + tag: GitHub + icon: fab fa-github + subtitle: Report bugs or suggest features for the Streamlit template. + url: https://github.com/OpenMS/streamlit-template/issues/new + linkText: Open on GitHub + - title: Template repository + tag: Source + icon: fas fa-code-branch + subtitle: Explore the Streamlit template, fork it, and open a pull request. + url: https://github.com/OpenMS/streamlit-template + linkText: View repository + - title: Reviewing Pull Requests + type: links + tag: Review + icon: fas fa-code-branch + subtitle: Help move contributions forward by reviewing open pull requests on GitHub. + platformsAlwaysVisible: true + badge: + src: https://img.shields.io/github/issues-pr/OpenMS/streamlit-template?label=open%20PRs&color=1a56db&style=flat-square + alt: Number of open streamlit-template pull requests + url: https://github.com/OpenMS/streamlit-template/pulls + platforms: + - name: View open PRs + icon: fab fa-github + url: https://github.com/OpenMS/streamlit-template/pulls + - name: How to review PRs + icon: fas fa-book-open + url: https://github.com/ParadiseSS13/Paradise/discussions/19410 + + 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 + logoSize: wide + 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: + eyebrow: Developer tools + title: Ecosystem + description: Build your own pipelines using our ecosystem + items: + - name: OpenMS-lib + url: /openms-lib/ + tag: C++ library + accent: openms-lib + size: wide + icon: /images/logos/OpenMS_transparent_blackFont.svg + 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 + icon: /images/pyopenms-logo.png + 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 + icon: /images/logos/openms-webapps-logo.png + 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 + icon: /images/logos/pyopenms-viz-logo.png + 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 + - link: https://scholar.google.ca/citations?user=tQ26gxIAAAAJ&hl + icon: google-scholar 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/ + - text: Code of Conduct + link: /code-of-conduct/ 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: Research Partnerships + link: /research-partnerships/ + - text: Publications + link: /publications + - text: Leadership + 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 +1524,87 @@ 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: Dave Tabb’s Tutorials + url: https://pickingupthetabb.wordpress.com/building-a-bioinformaticist/free-online-training-in-bioinformatics-and-biostatistics/ + 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: Code of Conduct + url: /code-of-conduct/ + - 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: Research Partnerships + url: /research-partnerships/ - title: Publications url: /publications - - title: Help Request - url: /help-request + - title: Leadership + url: /contributors/ + - title: Contact + url: /contact/ + - title: Sponsor Us + url: /sponsor-us/ + button: true + - 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..6f15f3f8 --- /dev/null +++ b/content/en/affiliated-apps.md @@ -0,0 +1,30 @@ +--- +title: Affiliated Apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+
+
+
+

{{< section-eyebrow-icon people >}}Partner ecosystem

+

+ Affiliated Apps +

+

+ These projects are not directly maintained by the OpenMS team but are dependent on OpenMS infrastructure or funding. +

+
+
+
+
+ +
+
+ {{< webapps-affiliate-catalog >}} +
+
+
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..2913e126 --- /dev/null +++ b/content/en/archived-apps.md @@ -0,0 +1,30 @@ +--- +title: Archived Apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+
+
+
+

{{< section-eyebrow-icon code >}}Legacy

+

+ Archived Apps +

+

+ These projects are kept for reference. They still work, but are no longer updated or supported by the community. +

+
+
+
+
+ +
+
+ {{< webapps-archived-catalog >}} +
+
+
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..73dad174 100644 --- a/content/en/code-of-conduct.md +++ b/content/en/code-of-conduct.md @@ -1,91 +1,8 @@ --- title: OpenMS Code of Conduct sidebar: false +hidePageTitle: true +hideShortcuts: true aliases: - - /conduct.html + - /conduct.html --- - -### Code of Conduct (Summary View) - -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: - -- 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. - -### Code of Conduct (Detailed View) - -#### 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. - -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. - -#### 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. - -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 - -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 - -Note: See the four [social rules](https://www.recurse.com/manual#sub-sec-social-rules) for further recommendations. - -#### Part 2.2 - Unacceptable behaviour - -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 - -#### 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. - -### Incident reporting resolution & Code of Conduct enforcement - -_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). - -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: - -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. - -### 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 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..adb798d6 100644 --- a/content/en/contributors.md +++ b/content/en/contributors.md @@ -1,15 +1,6 @@ --- -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" >}})! - -{{< include-html "static/gallery/members.html" >}} - -# Governance - -For information about the Executive Committee, please see the [Executive Committee page]({{< relref "/exec_committee" >}}). - 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..f8786fcb --- /dev/null +++ b/content/en/featured-apps.md @@ -0,0 +1,30 @@ +--- +title: Featured Apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+
+
+
+

{{< section-eyebrow-icon grid >}}Community tools

+

+ Featured Apps +

+

+ GUI or Command Line Apps actively maintained by the OpenMS core development team. +

+
+
+
+
+ +
+
+ {{< webapps-featured-catalog >}} +
+
+
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. +

+

+ Join the mailing list + · + Search the archive +

+

+ Please use bottom posting, reply to the list (rather than to another sender), + and do not reply to digests. +

+
+
+

Development

+

GitHub issue tracker

+

+ Use the tracker for bug reports, documentation issues (e.g. unclear sections), + and feature requests (e.g. new interpolation methods). +

+

+ Open issues on GitHub +

+
+
+

C++ / OpenMS

+

OpenMS documentation

+

+ Documentation for the newest release — all classes, functions, and build + instructions for several operating systems. Includes an introduction to core + data structures and algorithms for new developers. +

+

+ Browse the docs + · + Developer tutorial +

+
+
+

Python

+

pyOpenMS documentation

+

+ Documentation on how to use OpenMS in Python. +

+

+ Read pyOpenMS docs +

+
+
diff --git a/content/en/news/_index.md b/content/en/news/_index.md new file mode 100644 index 00000000..1ea2f362 --- /dev/null +++ b/content/en/news/_index.md @@ -0,0 +1,6 @@ +--- +title: News +subtitle: Announcements, releases, workshops, and community updates from OpenMS. +hidePageTitle: true +hideShortcuts: true +--- diff --git a/content/en/news/gsoc2025.md b/content/en/news/gsoc2025.md index c545adb1..4cef78a8 100644 --- a/content/en/news/gsoc2025.md +++ b/content/en/news/gsoc2025.md @@ -3,6 +3,7 @@ title: GSoC 2025 – Two Projects Accepted! authors: ["Matteo Pilz, Timo Sachsenberg"] date: 2025-05-20 summary: We're thrilled to announce that two OpenMS projects have been accepted for Google Summer of Code 2025! 🚀 +type: news --- 🎉 OpenMS is part of GSoC 2025 – Two Projects Accepted! diff --git a/content/en/openms-lib.md b/content/en/openms-lib.md new file mode 100644 index 00000000..3ce2ead9 --- /dev/null +++ b/content/en/openms-lib.md @@ -0,0 +1,30 @@ +--- +title: OpenMS-lib +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+ {{< openms-lib-hero >}} +
+ +
+
+ {{< openms-lib-highlights >}} +
+
+ {{< openms-lib-topp >}} +
+
+ {{< openms-lib-getting-started >}} +
+
+
+ {{< openms-lib-developers >}} +
+
+ {{< openms-lib-cite >}} +
+
diff --git a/content/en/our-sponsors.md b/content/en/our-sponsors.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/content/en/our-sponsors.md @@ -0,0 +1 @@ + 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 9644b5dd..ecb6e6e7 100644 --- a/content/en/publications.md +++ b/content/en/publications.md @@ -1,232 +1,219 @@ -# List of OpenMS Publications - -## 2025 - - -- Damiani T, Jarmusch AK, Aron AT, Petras D, Phelan VV, Zhao HN, Bittremieux W, Acharya DD, Ahmed MMA, Bauermeister A, Bertin MJ, Boudreau PD, Borges RM, Bowen BP, Brown CJ, Chagas FO, Clevenger KD, Correia MSP, Crandall WJ, Crüsemann M, Fahy E, Fiehn O, Garg N, Gerwick WH, Gilbert JR, Globisch D, Gomes PWP, Heuckeroth S, James CA, Jarmusch SA, Kakhkhorov SA, Kang KB, Kessler N, Kersten RD, Kim H, Kirk RD, Kohlbacher O, Kontou EE, Liu K, Lizama-Chamu I, Luu GT, Luzzatto Knaan T, Mannochio-Russo H, Marty MT, Matsuzawa Y, McAvoy AC, McCall LI, Mohamed OG, Nahor O, Neuweger H, Niedermeyer THJ, Nishida K, Northen TR, Overdahl KE, Rainer J, Reher R, Rodriguez E, Sachsenberg TT, Sanchez LM, Schmid R, Stevens C, Subramaniam S, Tian Z, Tripathi A, Tsugawa H, van der Hooft JJJ, Vicini A, Walter A, Weber T, Xiong Q, Xu T, Pluskal T, Dorrestein PC, Wang M *A universal language for finding mass spectrometry data patterns*. Nature methods. 2025 [Link](https://www.ncbi.nlm.nih.gov/pubmed/40355727) - -- Zheng P, Audain E, Webel H, Dai C, Klein J, Hitz MP, Sachsenberg T, Bai M, Perez-Riverol Y *Ibaqpy: A scalable Python package for baseline quantification in proteomics leveraging SDRF metadata*. Journal of proteomics. 2025 [Link](https://www.ncbi.nlm.nih.gov/pubmed/40268243) - -- Scheid J, Lemke S, Hoenisch-Gravel N, Dengler A, Sachsenberg T, Declerq A, Gabriels R, Bauer J, Wacker M, Bichmann L, Martens L, Dubbelaar ML, Nahnsen S, Walz JS *MHCquant2 refines immunopeptidomics tumor antigen discovery*. Genome biology. 2025 [Link](https://www.ncbi.nlm.nih.gov/pubmed/40983925) - -- Perez-Riverol Y, Bittremieux W, Noble WS, Martens L, Bilbao A, Lazear MR, Grüning B, Katz DS, MacCoss MJ, Dai C, Eng JK, Bouwmeester R, Shortreed MR, Audain E, Sachsenberg T, Van Goey J, Wallmann G, Wen B, Käll L, Fondrie WE *Open-Source and FAIR Research Software for Proteomics*. Journal of proteome research. 2025 [Link](https://www.ncbi.nlm.nih.gov/pubmed/40267229) - -- Müller TD, Siraj A, Walter A, Kim J, Wein S, von Kleist J, Feroz A, Pilz M, Jeong K, Sing JC, Charkow J, Röst HL, Sachsenberg T *OpenMS WebApps: Building User-Friendly Solutions for MS Analysis*. Journal of proteome research. 2025 [Link](https://www.ncbi.nlm.nih.gov/pubmed/39881492) - -- Sachsenberg T, Pino LK, Brunet M, Bludau I, Kohlbacher O, Vizcaino JA, Bittremieux W *Perspectives in computational mass spectrometry: recent developments and key challenges*. Bioinformatics advances. 2025 [Link](https://www.ncbi.nlm.nih.gov/pubmed/41425651) - -- Van Den Bossche T, Alexandrov T, Bilbao A, Bittremieux W, Brigante FI, Chambers MC, Charkow J, Deutsch E, Dowsey AW, El Abiead Y, Gabriels R, Hecht H, Heuckeroth S, Klein JA, Knierman M, Martens L, Moritz RL, McCall LI, Neumann S, Perez-Riverol Y, Röst HL, Price EJ, Shofstahl J, Tabb DL, Uszkoreit J, Vizcaíno JA, Wang M, Willems S, Winkelhardt D, Kohlbacher O, Wein SP *mzPeak: Designing a Scalable, Interoperable, and Future-Ready Mass Spectrometry Data Format*. Journal of proteome research. 2025 [Link](https://www.ncbi.nlm.nih.gov/pubmed/41037468) - -- Sing JC, Charkow J, Walter A, Gao M, Müller TD, Bittremieux W, Sachsenberg T, Röst HL *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 J, Jeong K, Kaulich PT, Winkels K, Tholey A, Kohlbacher O *FLASHQuant: A Fast Algorithm for Proteoform Quantification in Top-Down Proteomics*. Analytical chemistry. 2024 [Link](https://www.ncbi.nlm.nih.gov/pubmed/39424290) - -- Siraj A, Bouwmeester R, Declercq A, Welp L, Chernev A, Wulf A, Urlaub H, Martens L, Degroeve S, Kohlbacher O, Sachsenberg T *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 J, Bielow C, Wein S, Jeong K, Netz E, Walter A, Alka O, Nilse L, Colaianni PD, McCloskey D, Kim J, Rosenberger G, Bichmann L, Walzer M, Veit J, Boudaud B, Bernt M, Patikas N, Pilz M, Startek MP, Kutuzova S, Heumos L, Charkow J, Sing JC, Feroz A, Siraj A, Weisser H, Dijkstra TMH, Perez-Riverol Y, Röst H, Kohlbacher O, Sachsenberg T *OpenMS 3 enables reproducible analysis of large-scale mass spectrometry data*. Nature methods. 2024 [Link](https://www.ncbi.nlm.nih.gov/pubmed/38366242) - -- Jeong K, Kaulich PT, Jung W, Kim J, Tholey A, Kohlbacher O *Precursor deconvolution error estimation: The missing puzzle piece in false discovery rate in top-down proteomics*. Proteomics. 2024 [Link](https://www.ncbi.nlm.nih.gov/pubmed/37997224) - -- Dai C, Pfeuffer J, Wang H, Zheng P, Käll L, Sachsenberg T, Demichev V, Bai M, Kohlbacher O, Perez-Riverol Y *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 EE, Walter A, Alka O, Pfeuffer J, Sachsenberg T, Mohite OS, Nuhamunada M, Kohlbacher O, Weber T *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 W, Levitsky L, Pilz M, Sachsenberg T, Huber F, Wang M, Dorrestein PC *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 X, Bittremieux W, Griss J, Deutsch EW, Sachsenberg T, Levitsky LI, Ivanov MV, Bubis JA, Gabriels R, Webel H, Sanchez A, Bai M, Käll L, Perez-Riverol Y *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 K, Babović M, Gorshkov V, Kim J, Jensen ON, Kohlbacher O *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 HM, Audain E, Zhu Y, Pfeuffer J, Sachsenberg T, Lehtiö J, Branca RM, Perez-Riverol Y *Generation of ENSEMBL-based proteogenomics databases boosts the identification of non-canonical peptides*. Bioinformatics (Oxford, England). 2022 [Link](https://www.ncbi.nlm.nih.gov/pubmed/34904638) - -- Jeong K, Kim J, Kohlbacher O *Mass Deconvolution of Top-Down Mass Spectrometry Datasets by FLASHDeconv*. Methods in molecular biology (Clifton, N.J.). 2022 [Link](https://www.ncbi.nlm.nih.gov/pubmed/35657592) -*** -## 2021 - - -- Dai C, Füllgrabe A, Pfeuffer J, Solovyeva EM, Deng J, Moreno P, Kamatchinathan S, Kundu DJ, George N, Fexova S, Grüning B, Föll MC, Griss J, Vaudel M, Audain E, Locard-Paulet M, Turewicz M, Eisenacher M, Uszkoreit J, Van Den Bossche T, Schwämmle V, Webel H, Schulze S, Bouyssié D, Jayaram S, Duggineni VK, Samaras P, Wilhelm M, Choi M, Wang M, Kohlbacher O, Brazma A, Papatheodorou I, Bandeira N, Deutsch EW, Vizcaíno JA, Bai M, Sachsenberg T, Levitsky LI, Perez-Riverol Y *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 L, Gupta S, Rosenberger G, Kuchenbecker L, Sachsenberg T, Ewels P, Alka O, Pfeuffer J, Kohlbacher O, Röst H *DIAproteomics: A Multifunctional Data Analysis Pipeline for Data-Independent Acquisition Proteomics and Peptidomics*. Journal of proteome research. 2021 [Link](https://www.ncbi.nlm.nih.gov/pubmed/34153189) - -- Marcu A, Bichmann L, Kuchenbecker L, Kowalewski DJ, Freudenmann LK, Backert L, Mühlenbruch L, Szolek A, Lübke M, Wagner P, Engler T, Matovina S, Wang J, Hauri-Hohl M, Martin R, Kapolou K, Walz JS, Velz J, Moch H, Regli L, Silginer M, Weller M, Löffler MW, Erhard F, Schlosser A, Kohlbacher O, Stevanović S, Rammensee HG, Neidert MC *HLA Ligand Atlas: a benign reference of HLA-presented peptides to improve T-cell-based cancer immunotherapy*. Journal for immunotherapy of cancer. 2021 [Link](https://www.ncbi.nlm.nih.gov/pubmed/33858848) -*** -## 2020 - - -- Wein S, Andrews B, Sachsenberg T, Santos-Rosa H, Kohlbacher O, Kouzarides T, Garcia BA, Weisser H *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 A, Welp LM, Raabe M, Sachsenberg T, Kappert C, Wulf A, Lau AM, David SS, Chernev A, Kramer K, Politis A, Kohlbacher O, Fischle W, Urlaub H *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) - -- Pfeuffer J, Sachsenberg T, Dijkstra TMH, Serang O, Reinert K, Kohlbacher O *EPIFANY: A Method for Efficient High-Confidence Protein Inference*. Journal of proteome research. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/31975601) - -- Jeong K, Kim J, Gaikwad M, Hidayah SN, Heikaus L, Schlüter H, Kohlbacher O *FLASHDeconv: Ultrafast, High-Quality Feature Deconvolution for Top-Down Proteomics*. Cell systems. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/32078799) - -- Nothias LF, Petras D, Schmid R, Dührkop K, Rainer J, Sarvepalli A, Protsyuk I, Ernst M, Tsugawa H, Fleischauer M, Aicheler F, Aksenov AA, Alka O, Allard PM, Barsch A, Cachet X, Caraballo-Rodriguez AM, Da Silva RR, Dang T, Garg N, Gauglitz JM, Gurevich A, Isaac G, Jarmusch AK, Kameník Z, Kang KB, Kessler N, Koester I, Korf A, Le Gouellec A, Ludwig M, Martin H C, McCall LI, McSayles J, Meyer SW, Mohimani H, Morsy M, Moyne O, Neumann S, Neuweger H, Nguyen NH, Nothias-Esposito M, Paolini J, Phelan VV, Pluskal T, Quinn RA, Rogers S, Shrestha B, Tripathi A, van der Hooft JJJ, Vargas F, Weldon KC, Witting M, Yang H, Zhang Z, Zubeil F, Kohlbacher O, Böcker S, Alexandrov T, Bandeira N, Wang M, Dorrestein PC *Feature-based molecular networking in the GNPS analysis environment*. Nature methods. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/32839597) - -- Rurik M, Alka O, Aicheler F, Kohlbacher O *Metabolomics Data Processing Using OpenMS*. Methods in molecular biology (Clifton, N.J.). 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/31953812) - -- Netz E, Dijkstra TMH, Sachsenberg T, Zimmermann L, Walzer M, Monecke T, Ficner R, Dybkov O, Urlaub H, Kohlbacher O *OpenPepXL: An Open-Source Tool for Sensitive Identification of Cross-Linked Peptides in XL-MS*. Molecular & cellular proteomics : MCP. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/33067342) - -- Scheidt T, Alka O, Gonczarowska-Jorge H, Gruber W, Rathje F, Dell'Aica M, Rurik M, Kohlbacher O, Zahedi RP, Aberger F, Huber CG *Phosphoproteomics of short-term hedgehog signaling in human medulloblastoma cells*. Cell communication and signaling : CCS. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/32576205) - -- Kutuzova S, Colaianni P, Röst H, Sachsenberg T, Alka O, Kohlbacher O, Burla B, Torta F, Schrübbers L, Kristensen M, Nielsen L, Herrgård MJ, McCloskey D *SmartPeak Automates Targeted and Quantitative Metabolomics Data Processing*. Analytical chemistry. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/33269929) - -- Hulstaert N, Shofstahl J, Sachsenberg T, Walzer M, Barsnes H, Martens L, Perez-Riverol Y *ThermoRawFileParser: Modular, Scalable, and Cross-Platform RAW File Conversion*. Journal of proteome research. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/31755270) - -- Starke R, Oliphant K, Jehmlich N, Schäpe SS, Sachsenberg T, Kohlbacher O, Allen-Vercoe E, von Bergen M *Tracing incorporation of heavy water into proteins for species-specific metabolic activity in complex communities*. Journal of proteomics. 2020 [Link](https://www.ncbi.nlm.nih.gov/pubmed/32335296) -*** -## 2019 - - -- Cain N, Alka O, Segelke T, von Wuthenau K, Kohlbacher O, Fischer M *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 L, Nelde A, Ghosh M, Heumos L, Mohr C, Peltzer A, Kuchenbecker L, Sachsenberg T, Walz JS, Stevanović S, Rammensee HG, Kohlbacher O *MHCquant: Automated and Reproducible Data Analysis for Immunopeptidomics*. Journal of proteome research. 2019 [Link](https://www.ncbi.nlm.nih.gov/pubmed/31589052) - -- Löffler MW, Mohr C, Bichmann L, Freudenmann LK, Walzer M, Schroeder CM, Trautwein N, Hilke FJ, Zinser RS, Mühlenbruch L, Kowalewski DJ, Schuster H, Sturm M, Matthes J, Riess O, Czemmel S, Nahnsen S, Königsrainer I, Thiel K, Nadalin S, Beckert S, Bösmüller H, Fend F, Velic A, Maček B, Haen SP, Buonaguro L, Kohlbacher O, Stevanović S, Königsrainer A, Rammensee HG *Multi-omics discovery of exome-derived neoantigens in hepatocellular carcinoma*. Genome medicine. 2019 [Link](https://www.ncbi.nlm.nih.gov/pubmed/31039795) - -- Licha D, Vidali S, Aminzadeh-Gohari S, Alka O, Breitkreuz L, Kohlbacher O, Reischl RJ, Feichtinger RG, Kofler B, Huber CG *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) - -- Hoffmann N, Rein J, Sachsenberg T, Hartler J, Haug K, Mayer G, Alka O, Dayalan S, Pearce JTM, Rocca-Serra P, Qi D, Eisenacher M, Perez-Riverol Y, Vizcaíno JA, Salek RM, Neumann S, Jones AR *mzTab-M: A Data Standard for Sharing Quantitative Results in Mass Spectrometry Metabolomics*. Analytical chemistry. 2019 [Link](https://www.ncbi.nlm.nih.gov/pubmed/30688441) -*** -## 2018 - - -- Kahles A, Lehmann KV, Toussaint NC, Hüser M, Stark SG, Sachsenberg T, Stegle O, Kohlbacher O, Sander C, Rätsch G *Comprehensive Analysis of Alternative Splicing Across Tumors from 8,705 Patients*. Cancer cell. 2018 [Link](https://www.ncbi.nlm.nih.gov/pubmed/30078747) - -- Gruening B, Sallou O, Moreno P, da Veiga Leprevost F, Ménager H, Søndergaard D, Röst H, Sachsenberg T, O'Connor B, Madeira F, Dominguez Del Angel V, Crusoe MR, Varma S, Blankenberg D, Jimenez RC, Perez-Riverol Y *Recommendations for the packaging and containerizing of bioinformatics software*. F1000Research. 2018 [Link](https://www.ncbi.nlm.nih.gov/pubmed/31543945) -*** -## 2017 - - -- Röst HL, Aebersold R, Schubert OT *Automated SWATH Data Analysis Using Targeted Extraction of Ion Chromatograms*. Methods in molecular biology (Clifton, N.J.). 2017 [Link](https://www.ncbi.nlm.nih.gov/pubmed/28188537) - -- da Veiga Leprevost F, Grüning BA, Alves Aflitos S, Röst HL, Uszkoreit J, Barsnes H, Vaudel M, Moreno P, Gatto L, Weber J, Bai M, Jimenez RC, Sachsenberg T, Pfeuffer J, Vera Alvarez R, Griss J, Nesvizhskii AI, Perez-Riverol Y *BioContainers: an open-source and community-driven framework for software standardization*. Bioinformatics (Oxford, England). 2017 [Link](https://www.ncbi.nlm.nih.gov/pubmed/28379341) - -- Audain E, Uszkoreit J, Sachsenberg T, Pfeuffer J, Liang X, Hermjakob H, Sanchez A, Eisenacher M, Reinert K, Tabb DL, Kohlbacher O, Perez-Riverol Y *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 J, Sachsenberg T, Alka O, Walzer M, Fillbrunn A, Nilse L, Schilling O, Reinert K, Kohlbacher O *OpenMS - A platform for reproducible analysis of mass spectrometry data*. Journal of biotechnology. 2017 [Link](https://www.ncbi.nlm.nih.gov/pubmed/28559010) - -- Weisser H, Choudhary JS *Targeted Feature Detection for Data-Dependent Shotgun Proteomics*. Journal of proteome research. 2017 [Link](https://www.ncbi.nlm.nih.gov/pubmed/28673088) - -- Vizcaíno JA, Mayer G, Perkins S, Barsnes H, Vaudel M, Perez-Riverol Y, Ternent T, Uszkoreit J, Eisenacher M, Fischer L, Rappsilber J, Netz E, Walzer M, Kohlbacher O, Leitner A, Chalkley RJ, Ghali F, Martínez-Bartolomé S, Deutsch EW, Jones AR *The mzIdentML Data Standard Version 1.2, Supporting Advances in Proteome Informatics*. Molecular & cellular proteomics : MCP. 2017 [Link](https://www.ncbi.nlm.nih.gov/pubmed/28515314) -*** -## 2016 - - -- Navarro P, Kuharev J, Gillet LC, Bernhardt OM, MacLean B, Röst HL, Tate SA, Tsou CC, Reiter L, Distler U, Rosenberger G, Perez-Riverol Y, Nesvizhskii AI, Aebersold R, Tenzer S *A multicenter study benchmarks software tools for label-free proteome quantification*. Nature biotechnology. 2016 [Link](https://www.ncbi.nlm.nih.gov/pubmed/27701404) - -- Weisser H, Wright JC, Mudge JM, Gutenbrunner P, Choudhary JS *Flexible Data Analysis Pipeline for High-Confidence Proteogenomics*. Journal of proteome research. 2016 [Link](https://www.ncbi.nlm.nih.gov/pubmed/27786492) - -- Veit J, Sachsenberg T, Chernev A, Aicheler F, Urlaub H, Kohlbacher O *LFQProfiler and RNP(xl): 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 HL, Sachsenberg T, Aiche S, Bielow C, Weisser H, Aicheler F, Andreotti S, Ehrlich HC, 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 WE, Schilling O, Choudhary JS, Malmström L, Aebersold R, Reinert K, Kohlbacher O *OpenMS: a flexible open-source software platform for mass spectrometry data analysis*. Nature methods. 2016 [Link](https://www.ncbi.nlm.nih.gov/pubmed/27575624) -*** -## 2015 - - -- Sharma K, Hrle A, Kramer K, Sachsenberg T, Staals RH, Randau L, Marchfelder A, van der Oost J, Kohlbacher O, Conti E, Urlaub H *Analysis of protein-RNA interactions in CRISPR proteins and effector complexes by UV-induced cross-linking and mass spectrometry*. Methods (San Diego, Calif.). 2015 [Link](https://www.ncbi.nlm.nih.gov/pubmed/26071038) - -- Röst HL, Rosenberger G, Aebersold R, Malmström L *Efficient visualization of high-throughput targeted proteomics experiments: TAPIR*. Bioinformatics (Oxford, England). 2015 [Link](https://www.ncbi.nlm.nih.gov/pubmed/25788625) - -- Röst HL, Schmitt U, Aebersold R, Malmström L *Fast and Efficient XML Data Access for Next-Generation Mass Spectrometry*. PloS one. 2015 [Link](https://www.ncbi.nlm.nih.gov/pubmed/25927999) - -- Sachsenberg T, Herbst FA, Taubert M, Kermer R, Jehmlich N, von Bergen M, Seifert J, Kohlbacher O *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 C, Rurik M, Limonciel A, Ruzek S, Reischl R, Wilmes A, Jennings P, Hewitt P, Dekant W, Kohlbacher O, Huber CG *Nephron Toxicity Profiling via Untargeted Metabolome Analysis Employing a High Performance Liquid Chromatography-Mass Spectrometry-based Experimental and Computational Pipeline*. The Journal of biological chemistry. 2015 [Link](https://www.ncbi.nlm.nih.gov/pubmed/26055719) - -- Aicheler F, Li J, Hoene M, Lehmann R, Xu G, Kohlbacher O *Retention Time Prediction Improves Identification in Nontargeted Lipidomics Approaches*. Analytical chemistry. 2015 [Link](https://www.ncbi.nlm.nih.gov/pubmed/26145158) - -- Nilse L, Sigloch FC, Biniossek ML, Schilling O *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 S, Sachsenberg T, Kenar E, Walzer M, Wiswedel B, Kristl T, Boyles M, Duschl A, Huber CG, Berthold MR, Reinert K, Kohlbacher O *Workflows for automated downstream data analysis and visualization in large-scale computational mass spectrometry*. Proteomics. 2015 [Link](https://www.ncbi.nlm.nih.gov/pubmed/25604327) -*** -## 2014 - - -- Kenar E, Franken H, Forcisi S, Wörmann K, Häring HU, Lehmann R, Schmitt-Kopplin P, Zell A, Kohlbacher O *Automated label-free quantification of metabolites from liquid chromatography-mass spectrometry data*. Molecular & cellular proteomics : MCP. 2014 [Link](https://www.ncbi.nlm.nih.gov/pubmed/24176773) - -- Röst HL, Rosenberger G, Navarro P, Gillet L, Miladinović SM, Schubert OT, Wolski W, Collins BC, Malmström J, Malmström L, Aebersold R *OpenSWATH enables automated, targeted analysis of data-independent acquisition MS data*. Nature biotechnology. 2014 [Link](https://www.ncbi.nlm.nih.gov/pubmed/24727770) - -- Kramer K, Sachsenberg T, Beckmann BM, Qamar S, Boon KL, Hentze MW, Kohlbacher O, Urlaub H *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 J, Jones AR, Sachsenberg T, Walzer M, Gatto L, Hartler J, Thallinger GG, Salek RM, Steinbeck C, Neuhauser N, Cox J, Neumann S, Fan J, Reisinger F, Xu QW, Del Toro N, Pérez-Riverol Y, Ghali F, Bandeira N, Xenarios I, Kohlbacher O, Vizcaíno JA, Hermjakob H *The mzTab data exchange format: communicating mass-spectrometry-based proteomics and metabolomics experimental results to a wider audience*. Molecular & cellular proteomics : MCP. 2014 [Link](https://www.ncbi.nlm.nih.gov/pubmed/24980485) - -- Röst HL, Schmitt U, Aebersold R, Malmström L *pyOpenMS: a Python-based interface to the OpenMS mass-spectrometry algorithm library*. Proteomics. 2014 [Link](https://www.ncbi.nlm.nih.gov/pubmed/24420968) - -- Walzer M, Pernas LE, Nasso S, Bittremieux W, Nahnsen S, Kelchtermans P, Pichler P, van den Toorn HW, Staes A, Vandenbussche J, Mazanek M, Taus T, Scheltema RA, Kelstrup CD, Gatto L, van Breukelen B, Aiche S, Valkenborg D, Laukens K, Lilley KS, Olsen JV, Heck AJ, Mechtler K, Aebersold R, Gevaert K, Vizcaíno JA, Hermjakob H, Kohlbacher O, Martens L *qcML: an exchange format for quality control metrics from mass spectrometry experiments*. Molecular & cellular proteomics : MCP. 2014 [Link](https://www.ncbi.nlm.nih.gov/pubmed/24760958) -*** -## 2013 - - -- Weisser H, Nahnsen S, Grossmann J, Nilse L, Quandt A, Brauer H, Sturm M, Kenar E, Kohlbacher O, Aebersold R, Malmström L *An automated pipeline for high-throughput label-free quantitative proteomics*. Journal of proteome research. 2013 [Link](https://www.ncbi.nlm.nih.gov/pubmed/23391308) - -- Walzer M, Qi D, Mayer G, Uszkoreit J, Eisenacher M, Sachsenberg T, Gonzalez-Galarza FF, Fan J, Bessant C, Deutsch EW, Reisinger F, Vizcaíno JA, Medina-Aunon JA, Albar JP, Kohlbacher O, Jones AR *The mzQuantML data standard for mass spectrometry-based quantitative studies in proteomics*. Molecular & cellular proteomics : MCP. 2013 [Link](https://www.ncbi.nlm.nih.gov/pubmed/23599424) - -- Nahnsen S, Bielow C, Reinert K, Kohlbacher O *Tools for label-free peptide quantification*. Molecular & cellular proteomics : MCP. 2013 [Link](https://www.ncbi.nlm.nih.gov/pubmed/23250051) -*** -## 2012 - - -- Nahnsen S, Kohlbacher O *In silico design of targeted SRM-based experiments*. BMC bioinformatics. 2012 [Link](https://www.ncbi.nlm.nih.gov/pubmed/23176520) - -- Junker J, Bielow C, Bertsch A, Sturm M, Reinert K, Kohlbacher O *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 AR, Eisenacher M, Mayer G, Kohlbacher O, Siepen J, Hubbard SJ, Selley JN, Searle BC, Shofstahl J, Seymour SL, Julian R, Binz PA, Deutsch EW, Hermjakob H, Reisinger F, Griss J, Vizcaíno JA, Chambers M, Pizarro A, Creasy D *The mzIdentML data standard for mass spectrometry-based proteomics results*. Molecular & cellular proteomics : MCP. 2012 [Link](https://www.ncbi.nlm.nih.gov/pubmed/22375074) -*** -## 2011 - - -- Bielow C, Aiche S, Andreotti S, Reinert K *MSSimulator: Simulation of mass spectrometry data*. Journal of proteome research. 2011 [Link](https://www.ncbi.nlm.nih.gov/pubmed/21526843) - -- Nahnsen S, Bertsch A, Rahnenführer J, Nordheim A, Kohlbacher O *Probabilistic consensus scoring improves tandem mass spectrometry peptide identification*. Journal of proteome research. 2011 [Link](https://www.ncbi.nlm.nih.gov/pubmed/21644507) -*** -## 2010 - - -- Reinert K, Kohlbacher O *OpenMS and TOPP: open source software for LC-MS data analysis*. Methods in molecular biology (Clifton, N.J.). 2010 [Link](https://www.ncbi.nlm.nih.gov/pubmed/20013373) - -- Bertsch A, Jung S, Zerck A, Pfeifer N, Nahnsen S, Henneges C, Nordheim A, Kohlbacher O *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) -*** -## 2009 - - -- Bertsch A, Leinenbach A, Pervukhin A, Lubeck M, Hartmer R, Baessmann C, Elnakady YA, Müller R, Böcker S, Huber CG, Kohlbacher O *De novo peptide sequencing by tandem MS using complementary CID and electron transfer dissociation*. Electrophoresis. 2009 [Link](https://www.ncbi.nlm.nih.gov/pubmed/19862751) - -- Pfeifer N, Leinenbach A, Huber CG, Kohlbacher O *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) - -- Sturm M, Kohlbacher O *TOPPView: an open-source viewer for mass spectrometry data*. Journal of proteome research. 2009 [Link](https://www.ncbi.nlm.nih.gov/pubmed/19425593) -*** -## 2008 - - -- Schulz-Trieglaff O, Hussong R, Gröpl C, Leinenbach A, Hildebrandt A, Huber C, Reinert K *Computational quantification of peptides from LC-MS data*. Journal of computational biology : a journal of computational molecular cell biology. 2008 [Link](https://www.ncbi.nlm.nih.gov/pubmed/18707556) - -- Lange E, Tautenhahn R, Neumann S, Gröpl C *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 O, Pfeifer N, Gröpl C, Kohlbacher O, Reinert K *LC-MSsim--a simulation software for liquid chromatography mass spectrometry data*. BMC bioinformatics. 2008 [Link](https://www.ncbi.nlm.nih.gov/pubmed/18842122) - -- Sturm M, Bertsch A, Gröpl C, Hildebrandt A, Hussong R, Lange E, Pfeifer N, Schulz-Trieglaff O, Zerck A, Reinert K, Kohlbacher O *OpenMS - an open-source software framework for mass spectrometry*. BMC bioinformatics. 2008 [Link](https://www.ncbi.nlm.nih.gov/pubmed/18366760) -*** -## 2007 - - -- Lange E, Gröpl C, Schulz-Trieglaff O, Leinenbach A, Huber C, Reinert K *A geometric approach for the alignment of liquid chromatography-mass spectrometry data*. Bioinformatics (Oxford, England). 2007 [Link](https://www.ncbi.nlm.nih.gov/pubmed/17646306) - -- Kohlbacher O, Reinert K, Gröpl C, Lange E, Pfeifer N, Schulz-Trieglaff O, Sturm M *TOPP--the OpenMS proteomics pipeline*. Bioinformatics (Oxford, England). 2007 [Link](https://www.ncbi.nlm.nih.gov/pubmed/17237091) -*** -## 2006 - - -- Mayr BM, Kohlbacher O, Reinert K, Sturm M, Gröpl C, Lange E, Klein C, Huber CG *Absolute myoglobin quantitation in serum by combining two-dimensional liquid chromatography-electrospray ionization mass spectrometry and novel data analysis algorithms*. Journal of proteome research. 2006 [Link](https://www.ncbi.nlm.nih.gov/pubmed/16457608) - -- Lange E, Gröpl C, Reinert K, Kohlbacher O, Hildebrandt A *High-accuracy peak picking of proteomics data using wavelet techniques*. Pacific Symposium on Biocomputing. Pacific Symposium on Biocomputing. 2006 [Link](https://www.ncbi.nlm.nih.gov/pubmed/17094243) -*** +--- +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 >}} +
+
+

2025

+ +
+
+

2024

+ +
+
+

2023

+ +
+
+

2022

+ +
+
+

2021

+ +
+
+

2020

+ +
+
+

2019

+ +
+
+

2018

+ +
+
+

2017

+ +
+
+

2016

+ +
+
+

2015

+ +
+
+

2014

+ +
+
+

2013

+ +
+
+

2012

+ +
+
+

2011

+ +
+
+

2010

+
    +

  • Optimal de novo design of MRM experiments for rapid assay development in targeted proteomics

    Journal of proteome research2010

    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 Computing2010

    Gesing, Sandra; van Hemert, Jano; Koetsier, Jos; Bertsch, Andreas; Kohlbacher, Oliver

    • +
+
+
+

2009

+ +
+
+

2008

+ +
+
+

2007

+
    +

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

    Schulz-Trieglaff, Ole; Hussong, Rene; Gröpl, Clemens; Hildebrandt, Andreas; Reinert, Knut

    • +

  • A geometric approach for the alignment of liquid chromatography—mass spectrometry data

    Bioinformatics2007

    Lange, Eva; Gröpl, Clemens; Schulz-Trieglaff, Ole; Leinenbach, Andreas; Huber, Christian; Reinert, Knut

    • +

  • TOPP The OpenMS Proteomics Pipeline

    Proceedings of the 5th European2007

    Sturm, Marc

    • +

  • TOPP—the OpenMS proteomics pipeline

    Bioinformatics2007

    Kohlbacher, Oliver; Reinert, Knut; Gröpl, Clemens; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Sturm, Marc

    • +
+
+
+

2006

+ +
+
+

2005

+
    +

  • Absolute quantification of myoglobin content in blood serum using HPLC/MS through automatic bioinformatics analysis

    MOLECULAR & CELLULAR PROTEOMICS2005

    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 12005

    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 Proteomics2005

    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 Spectrometry2005

    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..c3f88aa4 --- /dev/null +++ b/content/en/pyopenms-viz.md @@ -0,0 +1,27 @@ +--- +title: pyopenms_viz +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+ {{< pyopenms-viz-hero >}} +
+ +
+
+ {{< pyopenms-viz-highlights >}} +
+
+ {{< pyopenms-viz-getting-started >}} +
+
+
+ {{< pyopenms-viz-developers >}} +
+
+ {{< pyopenms-viz-cite >}} +
+
diff --git a/content/en/pyopenms.md b/content/en/pyopenms.md new file mode 100644 index 00000000..fc9da50b --- /dev/null +++ b/content/en/pyopenms.md @@ -0,0 +1,27 @@ +--- +title: pyOpenMS +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+ {{< pyopenms-hero >}} +
+ +
+
+ {{< pyopenms-highlights >}} +
+
+ {{< pyopenms-getting-started >}} +
+
+
+ {{< pyopenms-developers >}} +
+
+ {{< pyopenms-cite >}} +
+
diff --git a/content/en/research-partnerships.md b/content/en/research-partnerships.md new file mode 100644 index 00000000..1ee32bdb --- /dev/null +++ b/content/en/research-partnerships.md @@ -0,0 +1,6 @@ +--- +title: Research Partnerships +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- diff --git a/content/en/scientific-and-technical-support.md b/content/en/scientific-and-technical-support.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/content/en/scientific-and-technical-support.md @@ -0,0 +1 @@ + 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..def6b85d --- /dev/null +++ b/content/en/webapps.md @@ -0,0 +1,30 @@ +--- +title: OpenMS-Web apps +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+ {{< webapps-hero >}} +
+ +
+
+ {{< webapps-highlights >}} +
+
+ {{< webapps-using-template >}} +
+
+ {{< webapps-examples >}} +
+
+
+ {{< webapps-developers >}} +
+
+ {{< webapps-cite >}} +
+
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..14752364 --- /dev/null +++ b/layouts/partials/ecosystem-home.html @@ -0,0 +1,79 @@ +{{- $cfg := site.Params.ecosystemSection | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "" -}} +{{- $title := index $cfg "title" | default "Ecosystem" -}} +{{- $titleHighlight := index $cfg "titleHighlight" | default "" -}} +{{- $description := index $cfg "description" | default "" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- if gt (len $items) 0 }} +
+
+
+
+ {{- with $eyebrow }} +

+ + {{ . }} +

+ {{- end }} +

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

+ {{- with $description }} +

{{ . }}

+ {{- end }} +
+
+ +
+
+{{- end }} diff --git a/layouts/partials/events-year-select.html b/layouts/partials/events-year-select.html new file mode 100644 index 00000000..55a7b283 --- /dev/null +++ b/layouts/partials/events-year-select.html @@ -0,0 +1,24 @@ +{{- $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..e2d3f7c9 --- /dev/null +++ b/layouts/partials/fellowship-form-embed.html @@ -0,0 +1,75 @@ +{{- $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..f99cff08 --- /dev/null +++ b/layouts/partials/fellowship-main.html @@ -0,0 +1,64 @@ +{{- $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" -}} +
+
+
+
+
+
+

{{ partial "section-eyebrow-icon.html" "spark" }}{{ $eyebrow }}

+

Gain hands-on experience in open-source science.

+ {{- if $blurb -}} +

{{ $blurb | safeHTML }}

+ {{- end -}} +
+
+
+ {{- with $chips }} +
    + {{- range $i, $chip := . }} + {{- $text := "" -}} + {{- $icon := "" -}} + {{- if reflect.IsMap $chip -}} + {{- $text = index $chip "text" | default "" -}} + {{- $icon = index $chip "icon" | default "" -}} + {{- else -}} + {{- $text = $chip -}} + {{- end -}} + {{- if not $icon -}} + {{- if eq $i 0 }}{{ $icon = "fas fa-globe" }} + {{- else if eq $i 1 }}{{ $icon = "fas fa-comments" }} + {{- else }}{{ $icon = "fas fa-award" }} + {{- end -}} + {{- end -}} +
  • + + {{ $text }} +
    • + {{- end }} +
+ {{- end }} +
+ +
+
+
+
+
+

{{ partial "section-eyebrow-icon.html" "spark" }}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..c3e6be23 --- /dev/null +++ b/layouts/partials/governance-main.html @@ -0,0 +1,199 @@ +{{- $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." -}} +
+
+
+
+
+
+

{{ partial "section-eyebrow-icon.html" "shield" }}{{ $eyebrow }}

+

+ Built for stability, + guided by community. +

+

+ OpenMS combines a nonprofit corporation for legal and financial stewardship with an Executive Committee that leads technical direction and community governance. +

+
+ + Executive committee + + + Contribute + +
+
+
+
+
+ +
+
+
+
+
+
+

Structure

+

Two layers of governance

+

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

+
+
+ +
+
+ +

OpenMS Inc.

+

A U.S. 501(c)(3) nonprofit that holds the project’s legal entity, compliance, and financial continuity.

+
    +
  • Board of Directors oversees fiduciary and legal duties
    • +
  • Supports fundraising, grants, and organizational continuity
    • +
+ See board of directors +
+ +
+ +

Executive Committee

+

Core developers who set the software roadmap, community policies, and day-to-day technical decisions.

+
    +
  • Defines project direction and technical priorities
    • +
  • Maintains governance policies and core developer membership
    • +
  • Handles Code of Conduct escalations and process decisions
    • +
+ See executive committee +
+
+
+
+
+ +
+
+
+
+

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

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

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.

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

See also

+

+ Ready to get involved? + For guidance on getting started as a contributor, see the Contributing Guide. +

+
+
+ Contributing Guide +
+
+
+
+
+
+
diff --git a/layouts/partials/help-main.html b/layouts/partials/help-main.html new file mode 100644 index 00000000..cf99a875 --- /dev/null +++ b/layouts/partials/help-main.html @@ -0,0 +1,41 @@ +{{- $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." -}} +
+ +
diff --git a/layouts/partials/hero-workflow-mockup.html b/layouts/partials/hero-workflow-mockup.html new file mode 100644 index 00000000..dbccb137 --- /dev/null +++ b/layouts/partials/hero-workflow-mockup.html @@ -0,0 +1,45 @@ +{{- $hero := .Site.Params.hero }} +{{- $mockup := index $hero "mockup" | default dict }} +{{- $label := index $mockup "label" | default "Open science" }} +{{- $labelArrow := index $mockup "labelArrow" | default "→" }} +{{- $labelAfter := index $mockup "labelAfter" | default "clear results" }} +{{- $brand := index $mockup "brand" | default "OPENMS" }} +{{- $bars := index $mockup "bars" | default (slice 38 55 82 64 47 90 70 58 75 40) }} +{{- $metrics := index $mockup "metrics" }} + + diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html new file mode 100644 index 00000000..4b7110f3 --- /dev/null +++ b/layouts/partials/hero.html @@ -0,0 +1,90 @@ +{{- $hero := .Site.Params.hero }} +{{- $eyebrow := index $hero "eyebrow" }} +{{- $titleBefore := index $hero "titleBefore" | default "Open science. " }} +{{- $titleMid := index $hero "titleMid" | default "Clear results for " }} +{{- $titleHighlight := index $hero "titleHighlight" | default "mass spectrometry" }} +{{- $titleAfter := index $hero "titleAfter" | default "." }} +{{- $description := index $hero "description" }} +{{- $buttonText := index $hero "buttontext" }} +{{- $buttonLink := index $hero "buttonlink" }} +{{- $secondaryText := index $hero "secondaryButtonText" }} +{{- $secondaryLink := index $hero "secondaryButtonLink" }} +{{- $microcopy := index $hero "microcopy" }} +{{- $trustNote := index $hero "trustNote" }} + +
+
+
+
+
+
+ {{- with $eyebrow }} +

+ + {{ . }} +

+ {{- end }} +

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

+ {{- with $description }} +

{{ . }}

+ {{- end }} +
+ +
+
+
+ {{- if $buttonText }} + {{ $buttonText }} + {{- end }} + {{- if and $secondaryText $secondaryLink }} + {{ $secondaryText }} + {{- end }} +
+
+
+
+ +
+ {{ partial "hero-workflow-mockup.html" . }} + {{- with $trustNote }} +

+ {{- range $i, $item := split . " · " }} + + + {{ trim $item " " }} + + {{- end }} +

+ {{- end }} + {{- with $microcopy }} +
    + {{- range $i, $item := split . " · " }} +
  • + + {{ trim $item " " }} +
    • + {{- 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..e4cc0517 --- /dev/null +++ b/layouts/partials/home-metrics.html @@ -0,0 +1,17 @@ +{{- $metrics := .Site.Params.homeMetrics | default dict -}} +{{- $stats := $metrics.stats | default (index .Site.Params.hero "stats") -}} +{{- $supportNote := $metrics.supportNote -}} +{{- with $stats }} +
+
+
+ {{- range . }} + {{ partial "home-metric-card.html" (dict "stat" .) }} + {{- end }} +
+ {{- with $supportNote }} +

{{ . }}

+ {{- 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..c2bd008a --- /dev/null +++ b/layouts/partials/navbar-clone.html @@ -0,0 +1,83 @@ +{{- $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 -}} +
+ {{- range $navbar }} + {{- if .button }} + {{ partial "navbar-cta.html" . }} + {{- end }} + {{- end }} +
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..5fa8729d --- /dev/null +++ b/layouts/partials/navbar-sublinks.html @@ -0,0 +1,9 @@ +{{- 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..ca330e72 --- /dev/null +++ b/layouts/partials/navbar.html @@ -0,0 +1,84 @@ +{{- $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..8b137891 --- /dev/null +++ b/layouts/partials/news-date-badge.html @@ -0,0 +1 @@ + diff --git a/layouts/partials/news-entry.html b/layouts/partials/news-entry.html new file mode 100644 index 00000000..6f342c88 --- /dev/null +++ b/layouts/partials/news-entry.html @@ -0,0 +1,35 @@ +{{- $page := .page -}} +{{- $summary := $page.Summary -}} +{{- with $page.Params.summary -}} + {{- $summary = . -}} +{{- end -}} +{{- $label := $page.Params.category | default "News" -}} +
  • + +
    • diff --git a/layouts/partials/news-home.html b/layouts/partials/news-home.html new file mode 100644 index 00000000..ef89c7fa --- /dev/null +++ b/layouts/partials/news-home.html @@ -0,0 +1,74 @@ +{{- $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/" -}} +{{- $defaultLimit := index $cfg "homeLimit" | default 4 -}} +{{- $limit := $defaultLimit -}} +{{- with . -}} + {{- if reflect.IsMap . -}} + {{- with index . "limit" -}} + {{- if gt . 0 -}}{{- $limit = . -}}{{- end -}} + {{- end -}} + {{- end -}} +{{- end -}} +{{- $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..065468af --- /dev/null +++ b/layouts/partials/news-single-main.html @@ -0,0 +1,84 @@ +{{- $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 }} +{{- $toc := .TableOfContents }} +{{- $hasToc := and $toc (in (printf "%s" $toc) "]*>(.*)\s*$` "$1" (printf "%s" $toc) | safeHTML }} +
    +
    +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "news" }}{{ $eyebrow }} · News

    +

    {{ .Title }}

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

    {{ . }}

    + {{- end }} +
    + + {{ $backLabel }} + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "news-date-badge.html" . }} + {{- with or .Params.authors .Params.Authors }} +

    + + {{- range $i, $author := . }}{{ if $i }}, {{ end }}{{ $author }}{{ end }} + +

    + {{- 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..d62578ce --- /dev/null +++ b/layouts/partials/news-year-select.html @@ -0,0 +1,14 @@ +{{- $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-cite.html b/layouts/partials/openms-lib-cite.html new file mode 100644 index 00000000..fc137209 --- /dev/null +++ b/layouts/partials/openms-lib-cite.html @@ -0,0 +1,80 @@ +{{- $cfg := site.Params.openmsLibDevelopers | default dict -}} +{{- $citeId := "openms-lib-cite-title" -}} +{{- $citeFallback := "Used OpenMS-lib in your work? If so, please cite." -}} +{{- if reflect.IsMap . -}} + {{- with index . "cfg" -}}{{- $cfg = . -}}{{- end -}} + {{- with index . "id" -}}{{- $citeId = . -}}{{- end -}} + {{- with index . "fallback" -}}{{- $citeFallback = . -}}{{- end -}} +{{- end -}} +{{- $citeText := index $cfg "citeText" -}} +{{- $citation := index $cfg "citation" | default dict -}} +{{- $citeVariant := index $citation "variant" | default "primary" -}} +{{- if or $citeText $citation }} +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "quote" }}Research impact

    +

    + {{- with $citeText -}} + {{ . }} + {{- else -}} + {{ $citeFallback }} + {{- end -}} +

    +
    + + {{- with $citation }} + {{- $pubUrl := .url -}} + {{- $actionText := .actionText | default "View on PubMed" -}} + {{- $moreUrl := .moreUrl -}} + {{- $moreText := .moreText | default "More citations" -}} +
    + {{- if or .badge .topic }} +
    + {{- with .badge }} + {{ . }} + {{- end }} + {{- with .topic }} + {{ . }} + {{- end }} +
    + {{- end }} + {{- with .title }} +

    + {{- if $pubUrl }} + {{ . }} + {{- else }} + {{ . }} + {{- end }} +

    + {{- end }} + {{- if or .journal .year }} +

    + {{- with .journal }} + {{ . }} + {{- end }} + {{- with .year }} + {{ . }} + {{- end }} +

    + {{- end }} + {{- with .authors }} +

    {{ partial "cite-authors.html" . }}

    + {{- end }} +
    + {{- with $pubUrl }} + {{ $actionText }} + {{- end }} + {{- with $moreUrl }} + {{ $moreText }} + {{- end }} +
    +
    + {{- end }} +
    +
    +{{- end }} diff --git a/layouts/partials/openms-lib-developers.html b/layouts/partials/openms-lib-developers.html new file mode 100644 index 00000000..8bd523d4 --- /dev/null +++ b/layouts/partials/openms-lib-developers.html @@ -0,0 +1,97 @@ +{{- $cfg := index . "cfg" | default site.Params.openmsLibDevelopers | default dict -}} +{{- $sectionId := index . "id" | default "openms-lib-developers-title" -}} +{{- $eyebrow := index $cfg "eyebrow" | default "For Developers" -}} +{{- $title := index $cfg "title" | default "Contribute" -}} +{{- $lead := index $cfg "lead" -}} +{{- $allBoxes := index $cfg "boxes" | default (slice) -}} +{{- $boxes := slice -}} +{{- range $allBoxes -}} + {{- if ne (.type | default "link") "build" -}} + {{- $boxes = $boxes | append . -}} + {{- end -}} +{{- end -}} +{{- $citeText := index $cfg "citeText" -}} +{{- $citation := index $cfg "citation" | default dict -}} +{{- $citeVariant := index $citation "variant" | default "primary" -}} +{{- $citeSeparate := index $cfg "citeSeparate" | default false -}} +{{- $hasCite := and $citeSeparate (or $citeText $citation) -}} +{{- $citeLabel := index $cfg "citeLabel" | default (printf "Cite %s" (index $citation "topic" | default "OpenMS")) -}} +
    +
    +

    {{ partial "section-eyebrow-icon.html" "people" }}{{ $eyebrow }}

    +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + + {{- with $boxes }} +
    + {{- range . }} + {{- $type := .type | default "link" -}} + {{- $subtitle := .subtitle | default .text -}} + {{- if eq $type "links" }} + + {{- else }} + + {{- with .icon }} + + {{- end }} +
    +

    {{ .title }}

    + {{- with $subtitle }} +

    {{ . }}

    + {{- end }} + + {{ .linkText | default "Learn more" }} + +
    +     + {{- end }} + {{- end }} +
    + {{- end }} + + {{- if $hasCite }} + {{ partial "product-developers-cite.html" (dict "citeText" $citeText "citation" $citation "citeVariant" $citeVariant "citeLabel" $citeLabel "separate" true) }} + {{- end }} +
    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..1612bb9f --- /dev/null +++ b/layouts/partials/openms-lib-getting-started.html @@ -0,0 +1,107 @@ +{{- $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" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- $catalog := slice -}} +{{- $support := false -}} +{{- range $item := $items -}} + {{- if and $item.links (not $item.url) -}} + {{- $support = $item -}} + {{- else -}} + {{- $catalog = $catalog | append $item -}} + {{- end -}} +{{- end -}} +
    +
    +
    +
    + {{- with $eyebrow }} +

    {{ partial "section-eyebrow-icon.html" "grid" }}{{ . }}

    + {{- end }} +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    + + {{- with $catalog }} + + {{- end }} +
    +
    + + {{- with $support }} + + {{- end }} +
    diff --git a/layouts/partials/openms-lib-hero.html b/layouts/partials/openms-lib-hero.html new file mode 100644 index 00000000..69152de6 --- /dev/null +++ b/layouts/partials/openms-lib-hero.html @@ -0,0 +1,57 @@ +{{- /* + OpenMS-lib solution hero — kept in a partial so HTML is not + mistreated as a Markdown indented code block. +*/ -}} +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "code" }}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. +

    +
    + + Install OpenMS + + + + + + + + + Docker + + + + Anaconda install + +
    +
    +
    +
    diff --git a/layouts/partials/openms-lib-highlights.html b/layouts/partials/openms-lib-highlights.html new file mode 100644 index 00000000..5a0bb233 --- /dev/null +++ b/layouts/partials/openms-lib-highlights.html @@ -0,0 +1,72 @@ +{{- $cfg := .cfg | default site.Params.openmsLibHighlights | default dict -}} +{{- $id := .id | default "openms-lib-about-title" -}} +{{- $eyebrow := index $cfg "eyebrow" -}} +{{- $title := index $cfg "title" -}} +{{- $lead := index $cfg "lead" -}} +{{- $items := index $cfg "items" | default (slice) -}} +{{- $layout := index $cfg "layout" | default "mosaic" -}} +{{- $hasHead := or $eyebrow $title $lead -}} +
    +
    + {{- if $hasHead }} +
    +
    + {{- with $eyebrow }} +

    {{ . }}

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

    {{ . }}

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

    {{ . | safeHTML }}

    + {{- end }} +
    +
    + {{- end }} + + {{- with $items }} + {{- if eq $layout "benefits" }} +
      + {{- range $i, $item := . }} +
    • + {{- with $item.stat }} + {{ . }} + {{- else }} + + {{- end }} + {{- with $item.title }} +

      {{ . }}

      + {{- end }} +

      {{ $item.text | safeHTML }}

      +
      • + {{- end }} +
    + {{- else if eq $layout "list" }} +
      + {{- range $i, $item := . }} +
    • + +

      + {{- with $item.title }}{{ . }}:{{ end }} + {{ $item.text }} +

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

    {{ . }}

    {{ end }} +

    {{ $item.text }}

    +
    + {{- end }} +
    + {{- 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..8896e095 --- /dev/null +++ b/layouts/partials/openms-lib-topp.html @@ -0,0 +1,62 @@ +{{- $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" -}} +{{- $image := index $cfg "image" | default "/images/content_images/topp-tool-list.png" -}} +{{- $imageAlt := index $cfg "imageAlt" | default "OpenMS TOPP tools list" -}} +{{- $defaultIcons := slice "fas fa-project-diagram" "fas fa-cogs" "fas fa-layer-group" -}} +
    +
    + + +
    +
    + {{- with $eyebrow }} +

    {{ partial "section-eyebrow-icon.html" "terminal" }}{{ . }}

    + {{- end }} +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} + {{- with $ctaUrl }} + {{ $ctaText }} + {{- end }} +
    + + {{- with $features }} +
      + {{- range $i, $feature := . }} + {{- if lt $i 2 }} + {{- $icon := $feature.icon | default (index $defaultIcons $i) | default "fas fa-layer-group" -}} +
    • + + {{- with $feature.title }} +

      {{ . }}

      + {{- end }} +

      {{ $feature.text }}

      +
      • + {{- end }} + {{- end }} +
    + {{- end }} +
    +
    + +
    diff --git a/layouts/partials/our-sponsors-main.html b/layouts/partials/our-sponsors-main.html new file mode 100644 index 00000000..87f92531 --- /dev/null +++ b/layouts/partials/our-sponsors-main.html @@ -0,0 +1,96 @@ +{{- /* + 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/" -}} +{{- $contactButtonText := index $section "contactButtonText" | default "Email Us" -}} +{{- $contactButtonUrl := index $section "contactButtonUrl" | default "mailto:fundraising@openms.de" -}} +{{- $groupByTier := index $section "groupByTier" | default false -}} +{{- $tiers := .Site.Params.sponsorTiers.levels | default (slice) -}} +
    +
    +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "people" }}{{ $eyebrow }}

    +

    + Our Sponsors. +

    +

    {{ $intro }}

    +
    + + Sponsorship program + + + {{ $contactButtonText }} + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + {{- 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..78de6aa9 --- /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 -}} + +
    +
    +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "lock" }}{{ $eyebrow }}

    +

    + Privacy Policy +

    +

    {{ $subtitle }}

    +
    + + Browse topics + + + Contact us + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

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

    +
    +
    + + Contact OpenMS + +
    +
    +
    +
    +
    +
    +
    +
    +
    + diff --git a/layouts/partials/product-developers-cite.html b/layouts/partials/product-developers-cite.html new file mode 100644 index 00000000..809da45c --- /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..95b1ee3c --- /dev/null +++ b/layouts/partials/product-developers.html @@ -0,0 +1,162 @@ +{{- $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 -}} +{{- $omitSeparateCite := .omitSeparateCite | 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 or (eq $type "build") (eq $type "review") -}} + {{- $review = . -}} + {{- else if eq $type "links" -}} + {{- $buildLinks = . -}} + {{- else -}} + {{- $links = $links | append . -}} + {{- end -}} +{{- end -}} +{{- $routeCount := add (len $links) (cond $buildLinks 1 0) -}} +{{- $routeCount = add $routeCount (cond $review 1 0) -}} +
    +
    +
    +

    {{ $eyebrow }}

    +

    {{ $title }}

    + {{- with $lead }} +

    {{ . }}

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

    + {{ .title }} +

    + {{- with .text | default .subtitle }} +

    {{ . }}

    + {{- end }} + + {{ .linkText | default "Learn more" }} + +
    +     + {{- end }} + + {{- with $buildLinks }} +
    +
    + + {{- with .tag }} + {{ . }} + {{- else }} + Build + {{- end }} +
    +
    +

    + {{ .title }} +

    + {{- with .text }} +

    {{ . }}

    + {{- end }} +
    + {{- range .platforms }} + + {{ .name }} + + {{- end }} +
    +
    +
    + {{- end }} + + {{- with $review }} +
    +
    + {{- with .icon }} + + {{- else }} + + {{- end }} + {{- with .tag }} + {{ . }} + {{- else }} + Review + {{- end }} +
    +
    +

    + {{ .title }} +

    + {{- with .text | default .subtitle }} +

    {{ . }}

    + {{- end }} + {{- with .badge }} + + {{ .alt | default + + {{- end }} +
    + {{- range .platforms }} + + {{ .name }} + + {{- end }} +
    +
    +
    + {{- end }} +
    + + {{- if and $hasCite (not $citeSeparate) }} + {{ partial "product-developers-cite.html" $citeCtx }} + {{- end }} +
    +
    + +
    +{{- if and $hasCite $citeSeparate (not $omitSeparateCite) }} +
    + {{ partial "product-developers-cite.html" (merge $citeCtx (dict "separate" true)) }} +
    +{{- 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-key.html b/layouts/partials/publications-key.html new file mode 100644 index 00000000..c0d9bb31 --- /dev/null +++ b/layouts/partials/publications-key.html @@ -0,0 +1,37 @@ +
    +
    +

    How to cite

    +

    Key publications

    +

    Please reference these papers when you publish work that uses OpenMS or pyOpenMS.

    +
    +
      +
    • +
      + OpenMS software +
      +

      + OpenMS 3 enables reproducible analysis of large-scale mass spectrometry data +

      +

      + Nature Methods + 2024 +

      +

      {{ partial "cite-authors.html" "Pfeuffer, Julianus; Bielow, Chris; Wein, Samuel; Jeong, Kyowon; Netz, Eugen; Walter, Axel; Alka, Oliver; Nilse, Lars; Colaianni, Pasquale Domenico; McCloskey, Douglas; Kim, Jihyung; Rosenberger, George; Bichmann, Leon; Walzer, Mathias; Veit, Johannes; Boudaud, Bertrand; Bernt, Matthias; Patikas, Nikolaos; Pilz, Matteo; Startek, Michał Piotr; Kutuzova, Svetlana; Heumos, Lukas; Charkow, Joshua; Sing, Justin Cyril; Feroz, Ayesha; Siraj, Arslan; Weisser, Hendrik; Dijkstra, Tjeerd M. H.; Perez-Riverol, Yasset; Röst, Hannes; Kohlbacher, Oliver; Sachsenberg, Timo" }}

      + View on PubMed +
      • +
    • +
      + pyOpenMS +
      +

      + pyOpenMS: a Python-based interface to the OpenMS mass-spectrometry algorithm library +

      +

      + Proteomics + 2014 +

      +

      Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars

      + View on PubMed +
      • +
    +
    diff --git a/layouts/partials/publications-main.html b/layouts/partials/publications-main.html new file mode 100644 index 00000000..2cb87961 --- /dev/null +++ b/layouts/partials/publications-main.html @@ -0,0 +1,84 @@ +{{- $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" -}} +{{- $scholarIcon := resources.Get "icons/google-scholar-color.svg" -}} +
    +
    +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "quote" }}{{ $eyebrow }}

    +

    + Publications +

    +

    {{ $subtitle }}

    +
    + + {{- with $scholarIcon -}} + + {{- end -}} + {{ $scholarText }} + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + {{ partial "publications-key.html" . }} +
    +
    +
    + +
    +
    +
    + {{ .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. +

    +
    +
    + How to cite OpenMS + + {{- with $scholarIcon -}} + + {{- end -}} + {{ $scholarText }} + +
    +
    +
    +
    +
    +
    +
    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-hero.html b/layouts/partials/pyopenms-hero.html new file mode 100644 index 00000000..4223f960 --- /dev/null +++ b/layouts/partials/pyopenms-hero.html @@ -0,0 +1,39 @@ +{{- /* + pyOpenMS solution hero — kept in a partial so HTML is not + mistreated as a Markdown indented code block. +*/ -}} +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "code" }}pyOpenMS

    +

    + Python bindings for mass spectrometry. +

    +

    + Python bindings to OpenMS-lib. Write custom analysis scripts and integrate OpenMS into Python workflows. +

    +
    + + Install + + + + + + + Install guide + +
    +
    +
    +
    diff --git a/layouts/partials/pyopenms-viz-hero.html b/layouts/partials/pyopenms-viz-hero.html new file mode 100644 index 00000000..e1759d80 --- /dev/null +++ b/layouts/partials/pyopenms-viz-hero.html @@ -0,0 +1,39 @@ +{{- /* + pyopenms_viz solution hero — kept in a partial so HTML is not + mistreated as a Markdown indented code block. +*/ -}} +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "code" }}pyopenms_viz

    +

    + Seamless plotting directly from pandas dataframes. +

    +

    + Create spectra, chromatograms, and more from just a single line of code. df.plot() +

    +
    + + Install + + + + + + + Install guide + +
    +
    +
    +
    diff --git a/layouts/partials/quick-facts.html b/layouts/partials/quick-facts.html deleted file mode 100644 index 19c819d4..00000000 --- a/layouts/partials/quick-facts.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - -
    -

    Quick facts for Users...

    -
    - -
    -
    diff --git a/layouts/partials/research-partnerships-main.html b/layouts/partials/research-partnerships-main.html new file mode 100644 index 00000000..106939ef --- /dev/null +++ b/layouts/partials/research-partnerships-main.html @@ -0,0 +1,127 @@ +{{- $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." -}} +
    +
    +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "people" }}{{ $eyebrow }}

    +

    + Research partnerships + that scale with
    your science.     +

    +

    {{ $subtitle }}

    +
    + + Discuss a partnership + + + Our partners + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

    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.

    +
    + {{ partial "university-partners.html" (dict "Site" .Site "showHeader" false "staticOnly" true) }} +
    +
    +
    + +
    +
    +
    +
    +

    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/layouts/partials/scientific-and-technical-support-main.html b/layouts/partials/scientific-and-technical-support-main.html new file mode 100644 index 00000000..5fce475a --- /dev/null +++ b/layouts/partials/scientific-and-technical-support-main.html @@ -0,0 +1,70 @@ +{{- $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." -}} +
    +
    +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "wrench" }}{{ $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/section-eyebrow-icon.html b/layouts/partials/section-eyebrow-icon.html new file mode 100644 index 00000000..ec76f8f2 --- /dev/null +++ b/layouts/partials/section-eyebrow-icon.html @@ -0,0 +1,60 @@ +{{- $name := . | default "code" -}} + diff --git a/layouts/partials/single/content.html b/layouts/partials/single/content.html new file mode 100644 index 00000000..d208a593 --- /dev/null +++ b/layouts/partials/single/content.html @@ -0,0 +1,48 @@ +{{- $title := .Title -}} +{{- $subtitle := .Params.Subtitle -}} +{{- $eyebrow := .Params.eyebrow | default "OpenMS" -}} +{{- $showTitle := and (not (.Params.hidePageTitle | default false)) $title -}} +{{- $showIntro := or $showTitle $subtitle -}} +{{- $showShortcuts := not (.Params.hideShortcuts | default false) -}} +{{- $toc := .TableOfContents -}} +{{- $hasToc := and $showShortcuts $toc (in (printf "%s" $toc) "]*>(.*)\s*$` "$1" (printf "%s" $toc) | safeHTML -}} +
    +
    + {{- if $showIntro }} +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "code" }}{{ $eyebrow }}

    + {{- if $showTitle }} +

    {{ $title }}

    + {{- end }} + {{- with $subtitle }} +

    {{ . }}

    + {{- end }} +
    +
    +
    +
    + {{- end }} + +
    +
    +
    +
    + {{- if $hasToc }} + + {{- end }} +
    + {{ .Content }} +
    +
    +
    +
    +
    +
    +
    diff --git a/layouts/partials/sponsor-tiers.html b/layouts/partials/sponsor-tiers.html new file mode 100644 index 00000000..0128a366 --- /dev/null +++ b/layouts/partials/sponsor-tiers.html @@ -0,0 +1,224 @@ +{{- $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..076f476d --- /dev/null +++ b/layouts/partials/sponsor-us-main.html @@ -0,0 +1,153 @@ +{{- $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." -}} +
    +
    +
    +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "heart" }}{{ $eyebrow }}

    +

    + Our Sponsorship Program. +

    +

    + Sponsorship provides direct funding for software engineering, documentation, + community events, and the long-term sustainability of the OpenMS ecosystem. +

    +
    + + Discuss sponsorship + + + Make a donation + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

    Impact

    +

    Why sponsor OpenMS

    +

    + + +

    +
    +
    + +
    +
    + +

    Your sponsorship enables

    + +
    +
    + +

    How sponsorship works

    +

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

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

    Get started

    +

    + Become a sponsor + + + + + +

    +
    +
    + Contact us + Make a donation +
    +
    +
    +
    +
    +
    +
    diff --git a/layouts/partials/tally-form-embed.html b/layouts/partials/tally-form-embed.html new file mode 100644 index 00000000..74edb405 --- /dev/null +++ b/layouts/partials/tally-form-embed.html @@ -0,0 +1,56 @@ +
    + +
    + 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..3c3bca15 --- /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..85e91d12 --- /dev/null +++ b/layouts/partials/university-partners.html @@ -0,0 +1,85 @@ +{{- $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" }} +
    +
    +

    + Adopted by labs and institutions 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) }} + {{- $rowA := slice -}} + {{- $rowB := slice -}} + {{- range $i, $p := $partners -}} + {{- if modBool $i 2 -}} + {{- $rowB = $rowB | append $p -}} + {{- else -}} + {{- $rowA = $rowA | append $p -}} + {{- end -}} + {{- end -}} + + {{- end }} + + {{- if gt (len $partners) 0 }} +
    + {{- range $partners }} + {{ partial "university-partner-item.html" . }} + {{- end }} +
    + {{- end }} +
    +
    diff --git a/layouts/partials/visualization.html b/layouts/partials/visualization.html deleted file mode 100644 index e3aff219..00000000 --- a/layouts/partials/visualization.html +++ /dev/null @@ -1,28 +0,0 @@ - -{{- $visualization := .Site.Params.visualization }} -{{- $content := index $visualization "content" }} -{{- $images := index $visualization "images" }} -
  • -
    -
    -
    - {{- range $images }} -
    - - {{ .alttext }} - -
    - {{- end }} -
    -
    -
    - {{- range $content }} -

    - {{ .text | markdownify }} -

    - {{- end }} -
    -
    -
    -
    -
    • diff --git a/layouts/partials/webapps-affiliates.html b/layouts/partials/webapps-affiliates.html new file mode 100644 index 00000000..ceb23f41 --- /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--featured") }} +
      • + {{- 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 }} +
    +
    +
    + {{- with $project.tag }} +

    {{ . }}

    + {{- end }} + Reference only +
    +

    {{ $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..d99e827b --- /dev/null +++ b/layouts/partials/webapps-archived.html @@ -0,0 +1,85 @@ +{{- $section := site.Params.archivedSection | default dict -}} +{{- $projects := site.Params.archivedProjects | default (slice) -}} +{{- $projectCount := len $projects -}} +{{- if $projects }} +
    +
    +
    + {{- with index $section "notice" }} + {{- $notice := . -}} + {{- with .points }} + + {{- end }} + {{- end }} +
      + {{- range $projects }} +
    • + {{ partial "webapps-archived-project.html" . }} +
      • + {{- 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 }} +

    +
    +
    + {{ $contactText }} + {{ $sponsorText }} +
    +
    + {{- end }} +
    +
    +{{- end }} diff --git a/layouts/partials/webapps-examples.html b/layouts/partials/webapps-examples.html new file mode 100644 index 00000000..6e84b052 --- /dev/null +++ b/layouts/partials/webapps-examples.html @@ -0,0 +1,60 @@ +{{- $cfg := .cfg | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Examples" -}} +{{- $title := index $cfg "title" | default "Featured WebApps" -}} +{{- $lead := index $cfg "lead" | default "Community apps built on the OpenMS WebApps framework." -}} +{{- $url := index $cfg "url" -}} +{{- $linkText := index $cfg "linkText" | default "Browse all apps" -}} +{{- $apps := index $cfg "apps" | default (slice) -}} +{{- $id := .id | default "webapps-examples-title" -}} +
    +
    +
    +
    + {{- with $eyebrow }} +

    {{ partial "section-eyebrow-icon.html" "grid" }}{{ . }}

    + {{- end }} +

    {{ $title }}

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

    {{ . }}

    + {{- end }} + {{- with $url }} + {{ $linkText }} + {{- end }} +
    +
    + + {{- with $apps }} + + {{- end }} +
    +
    diff --git a/layouts/partials/webapps-hero.html b/layouts/partials/webapps-hero.html new file mode 100644 index 00000000..a67555bc --- /dev/null +++ b/layouts/partials/webapps-hero.html @@ -0,0 +1,36 @@ +{{- /* + OpenMS WebApps solution hero — kept in a partial so HTML is not + mistreated as a Markdown indented code block. +*/ -}} +
    +
    +
    +

    {{ partial "section-eyebrow-icon.html" "code" }}OpenMS WebApps

    +

    + Build a WebApp to showcase your pipeline. +

    +

    + A Streamlit template for interactive apps on top of OpenMS pipelines — from local demos to shareable deployments. +

    +
    + + Live Demo + + + + GitHub + +
    +
    +
    +
    diff --git a/layouts/partials/webapps-project-card.html b/layouts/partials/webapps-project-card.html new file mode 100644 index 00000000..5ad46f9f --- /dev/null +++ b/layouts/partials/webapps-project-card.html @@ -0,0 +1,48 @@ +{{- $project := .project }} +{{- $embed := .embed | default "" }} +{{- $ctaText := .ctaText | default "View project" }} +{{- $url := $project.url }} +{{- $isExternal := in $url "://" }} +{{- $ariaLabel := $project.name }} +{{- $logo := $project.logo | default "" }} +{{- $useTextLogo := or (not $logo) (eq $project.logoKind "text") }} +{{- $isHomeCatalog := eq $embed "home" }} +{{- 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..ae0468b7 --- /dev/null +++ b/layouts/partials/webapps-project-detail-card.html @@ -0,0 +1,39 @@ +{{- $project := .project -}} +{{- $class := .class | default "" -}} +{{- $hideName := .hideName | default false -}} +{{- $logo := $project.logo | default "" -}} +{{- $useTextLogo := or (not $logo) (eq $project.logoKind "text") -}} + diff --git a/layouts/partials/webapps-project-links.html b/layouts/partials/webapps-project-links.html new file mode 100644 index 00000000..f8d2fb95 --- /dev/null +++ b/layouts/partials/webapps-project-links.html @@ -0,0 +1,61 @@ +{{- $links := .links | default (slice) -}} +{{- if $links }} +{{- $ordered := slice -}} +{{- $github := slice -}} +{{- range $links }} + {{- if eq (.type | default "link") "github" }} + {{- $github = $github | append . -}} + {{- else }} + {{- $ordered = $ordered | append . -}} + {{- end }} +{{- end }} +{{- $ordered = $ordered | append $github -}} +
      + {{- range $ordered }} + {{- $type := .type | default "link" -}} + {{- $label := .label -}} + {{- if not $label }} + {{- if eq $type "demo" }} + {{- $label = "Demo" }} + {{- else if eq $type "github" }} + {{- $label = "GitHub" }} + {{- else if eq $type "install" }} + {{- $label = "Install" }} + {{- else if eq $type "homepage" }} + {{- $label = "Homepage" }} + {{- else if eq $type "pypi" }} + {{- $label = "PyPI" }} + {{- else if eq $type "nfcore" }} + {{- $label = "NF Core" }} + {{- else }} + {{- $label = "Link" }} + {{- end }} + {{- end }} + {{- $icon := "fas fa-external-link-alt" -}} + {{- if eq $type "demo" }} + {{- $icon = "fas fa-play-circle" }} + {{- else if eq $type "github" }} + {{- $icon = "fab fa-github" }} + {{- else if eq $type "install" }} + {{- $icon = "fab fa-windows" }} + {{- else if eq $type "homepage" }} + {{- $icon = "fas fa-home" }} + {{- else if eq $type "pypi" }} + {{- $icon = "fab fa-python" }} + {{- else if eq $type "nfcore" }} + {{- $icon = "fas fa-project-diagram" }} + {{- end }} +
    • + + + {{ $label }} + +
      • + {{- end }} +
    +{{- end }} diff --git a/layouts/partials/webapps-using-template.html b/layouts/partials/webapps-using-template.html new file mode 100644 index 00000000..d87a878d --- /dev/null +++ b/layouts/partials/webapps-using-template.html @@ -0,0 +1,128 @@ +{{- $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 }} + {{- if and $item.url $item.linkText }} + + {{ $item.linkText }} + + {{- end }} +
    + {{- else if eq $type "featured-apps" }} + {{- $featuredId := printf "%s-featured" $id -}} + + {{- 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..d9e72502 100644 --- a/layouts/partials/webapps.html +++ b/layouts/partials/webapps.html @@ -1,22 +1,141 @@ -{{- $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" -}} +
    +
    +
    + {{- if eq $embed "home" }} +
    +
    + {{- with $eyebrow }} +

    + + {{ . }} +

    + {{- end }} +

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

    + {{- with $description }} +

    {{ . }}

    + {{- end }} +
    + {{- with $showAll }} +
    + {{ .text }} +
    + {{- end }} +
    + {{- else if not $isPage }} +
    +
    + {{- with $eyebrow }} +

    + + {{ . }} +

    + {{- end }} +

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

    + {{- with $description }} +

    {{ . }}

    + {{- end }} +
    +
    + {{- end }} -
    - -

    New: WebApps

    - -
    -
    - {{- range $index, $webapp := $webapps}} -
    - -

    {{ $webapp.description | safeHTML}}

    -
    - {{- end}} +
      + {{- range $webapps }} +
    • + {{- if $isPage }} + {{ partial "webapps-project-detail-card.html" (dict "project" . "class" "webapps-project-detail-card--featured") }} + {{- else }} + {{ partial "webapps-project-card.html" (merge $cardCtx (dict "project" . "embed" $embed)) }} + {{- end }} +
      • + {{- end }} +
    + {{- if $isPage }} + {{- with $contactNote }} +

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

    + {{- end }} + {{- else if or $extraLinks (and $showAll (ne $embed "home")) }} +
    + {{- if $extraLinks }} +
    + {{- range $extraLinks }} +
    + {{ .text }} + {{- with .description }} +

    {{ . }}

    + {{- end }} +
    + {{- end }}
    - -
    -
    + {{- end }} + {{- if and $showAll (ne $embed "home") }} + {{ $showAll.text }} + {{- end }}
    - -
    + {{- end }} +
    +
    +
    +{{- end }} 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-cite.html b/layouts/shortcodes/openms-lib-cite.html new file mode 100644 index 00000000..e4319523 --- /dev/null +++ b/layouts/shortcodes/openms-lib-cite.html @@ -0,0 +1 @@ +{{ partial "openms-lib-cite.html" (dict) }} diff --git a/layouts/shortcodes/openms-lib-developers.html b/layouts/shortcodes/openms-lib-developers.html new file mode 100644 index 00000000..bdf783f7 --- /dev/null +++ b/layouts/shortcodes/openms-lib-developers.html @@ -0,0 +1 @@ +{{ partial "openms-lib-developers.html" (dict) }} 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-hero.html b/layouts/shortcodes/openms-lib-hero.html new file mode 100644 index 00000000..0576a8c5 --- /dev/null +++ b/layouts/shortcodes/openms-lib-hero.html @@ -0,0 +1 @@ +{{ partial "openms-lib-hero.html" . }} 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 @@ -
    - - Logo of UC Berkeley - - - Logo of Quansight - - - Logo of Quansight - - - Logo of Quansight - -
    -
    - - Logo of Quansight - - - Logo of Quansight - - - Logo of Quansight - - - Logo of Quansight - -
    - - \ 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-cite.html b/layouts/shortcodes/pyopenms-cite.html new file mode 100644 index 00000000..b0f007f2 --- /dev/null +++ b/layouts/shortcodes/pyopenms-cite.html @@ -0,0 +1,2 @@ +{{- $cfg := site.Params.pyopenmsPage.developers | default dict -}} +{{ partial "openms-lib-cite.html" (dict "cfg" $cfg "id" "pyopenms-cite-title" "fallback" "Used pyOpenMS in your work? If so, please cite.") }} diff --git a/layouts/shortcodes/pyopenms-developers.html b/layouts/shortcodes/pyopenms-developers.html new file mode 100644 index 00000000..35c8258c --- /dev/null +++ b/layouts/shortcodes/pyopenms-developers.html @@ -0,0 +1,2 @@ +{{- $cfg := site.Params.pyopenmsPage.developers | default dict -}} +{{ partial "openms-lib-developers.html" (dict "cfg" $cfg "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-hero.html b/layouts/shortcodes/pyopenms-hero.html new file mode 100644 index 00000000..56fcb05b --- /dev/null +++ b/layouts/shortcodes/pyopenms-hero.html @@ -0,0 +1 @@ +{{ partial "pyopenms-hero.html" . }} 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-cite.html b/layouts/shortcodes/pyopenms-viz-cite.html new file mode 100644 index 00000000..4822017d --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-cite.html @@ -0,0 +1,2 @@ +{{- $cfg := site.Params.pyopenmsVizPage.developers | default dict -}} +{{ partial "openms-lib-cite.html" (dict "cfg" $cfg "id" "pyopenms-viz-cite-title" "fallback" "Used pyopenms_viz in your work? If so, please cite.") }} diff --git a/layouts/shortcodes/pyopenms-viz-developers.html b/layouts/shortcodes/pyopenms-viz-developers.html new file mode 100644 index 00000000..63eb74a3 --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-developers.html @@ -0,0 +1,2 @@ +{{- $cfg := site.Params.pyopenmsVizPage.developers | default dict -}} +{{ partial "openms-lib-developers.html" (dict "cfg" $cfg "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.html b/layouts/shortcodes/pyopenms-viz-hero.html new file mode 100644 index 00000000..5c86ece3 --- /dev/null +++ b/layouts/shortcodes/pyopenms-viz-hero.html @@ -0,0 +1 @@ +{{ partial "pyopenms-viz-hero.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/section-eyebrow-icon.html b/layouts/shortcodes/section-eyebrow-icon.html new file mode 100644 index 00000000..88af0bd7 --- /dev/null +++ b/layouts/shortcodes/section-eyebrow-icon.html @@ -0,0 +1 @@ +{{ partial "section-eyebrow-icon.html" (.Get 0 | default "code") }} 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 @@ -
    @@ -64,11 +50,6 @@
    Members
    Tjeerd Dijkstra -
    - Docs Team - Executive Team - Funding Team -
    @@ -82,9 +63,6 @@
    Members
    Ayesha Feroz -
    - Maintainer -
    @@ -98,10 +76,6 @@
    Members
    Oliver Kohlbacher -
    - Executive Team - Funding Team -
    @@ -115,9 +89,6 @@
    Members
    Christina Kumar -
    - Docs Team -
    @@ -131,10 +102,6 @@
    Members
    Kyowon Jeong -
    - Executive Team - Maintainer -
    @@ -148,10 +115,6 @@
    Members
    Peter J. Jones -
    - Executive Team - Maintainer -
    @@ -165,10 +128,6 @@
    Members
    Tom D. Müller -
    - Executive Team - Maintainer -
    @@ -182,10 +141,6 @@
    Members
    Julianus Pfeuffer -
    - Executive Team - Maintainer -
    @@ -199,10 +154,6 @@
    Members
    Matteo Pilz -
    - Maintainer - Docs Team -
    @@ -216,9 +167,6 @@
    Members
    Hannes Roest -
    - Executive Team -
    @@ -232,11 +180,6 @@
    Members
    Timo Sachsenberg -
    - Executive Team - Funding Team - Maintainer -
    @@ -250,10 +193,6 @@
    Members
    Axel Walter -
    - Executive Team - Maintainer -
    @@ -267,10 +206,6 @@
    Members
    Samuel Wein -
    - Executive Team - Maintainer -
    @@ -284,9 +219,6 @@
    Members
    Hendrik Weisser -
    - Maintainer -
    diff --git a/static/images/community/community-tech-bg.svg b/static/images/community/community-tech-bg.svg new file mode 100644 index 00000000..91911082 --- /dev/null +++ b/static/images/community/community-tech-bg.svg @@ -0,0 +1,111 @@ + + OpenMS technology background + Abstract mass spectrometry data visualization with spectral peaks, analysis nodes, and connected workflows. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + mzML pipeline + feature detection + OpenMS TOPP + workflow engine + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + signal trace + + diff --git a/static/images/community/openms-20th-anniversary.jpg b/static/images/community/openms-20th-anniversary.jpg new file mode 100644 index 00000000..424ea9b5 Binary files /dev/null and b/static/images/community/openms-20th-anniversary.jpg differ diff --git a/static/images/content_images/knime-logo-black.svg b/static/images/content_images/knime-logo-black.svg deleted file mode 100644 index f197a2c0..00000000 --- a/static/images/content_images/knime-logo-black.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - -KNIME_Logo_CB_NT - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/images/content_images/sc_dom_img/GIS.svg b/static/images/content_images/sc_dom_img/GIS.svg deleted file mode 100644 index f90288c7..00000000 --- a/static/images/content_images/sc_dom_img/GIS.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/astronomy_processes.svg b/static/images/content_images/sc_dom_img/astronomy_processes.svg deleted file mode 100644 index cb5cc6dc..00000000 --- a/static/images/content_images/sc_dom_img/astronomy_processes.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/bayesian_inference.svg b/static/images/content_images/sc_dom_img/bayesian_inference.svg deleted file mode 100644 index 54c741fa..00000000 --- a/static/images/content_images/sc_dom_img/bayesian_inference.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/chemistry.svg b/static/images/content_images/sc_dom_img/chemistry.svg deleted file mode 100644 index b9e3f29b..00000000 --- a/static/images/content_images/sc_dom_img/chemistry.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/geoscience.svg b/static/images/content_images/sc_dom_img/geoscience.svg deleted file mode 100644 index e0709c70..00000000 --- a/static/images/content_images/sc_dom_img/geoscience.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/graph.py b/static/images/content_images/sc_dom_img/graph.py deleted file mode 100644 index 8b06348a..00000000 --- a/static/images/content_images/sc_dom_img/graph.py +++ /dev/null @@ -1,42 +0,0 @@ -import networkx as nx -import matplotlib as mpl -import matplotlib.pyplot as plt -import matplotlib.patches as patches -import matplotlib.lines as lines - -mpl.rcParams['patch.antialiased'] = True -mpl.rcParams['lines.antialiased'] = True - -# create graph -G = nx.Graph() -G.add_edge(1, 2) -G.add_edge(1, 3) -G.add_edge(1, 5) -G.add_edge(2, 3) -G.add_edge(3, 4) -G.add_edge(4, 5) - -# set node positions and drawing options -pos = {1: (0, 0), 2: (-1, 0.3), 3: (2, 0.17), 4: (4, 0.255), 5: (5, 0.03)} -options = { - "node_size": 4000, - "node_color": "white", - "edge_color": "black", - "edgecolors": "black", - "linewidths": 20, - "width": 20, -} - -# draw graph -nx.draw(G, pos, **options) -ax = plt.gca() -ax.margins(0.10) -plt.axis("off") -plt.savefig("sd6-large.svg") - -# set the width to 130 pixels with the following command: -# $ rsvg-convert -a -w 160 -f svg sd6-large.svg -o sd6.svg - -# if you want to blur the lines -# $ convert sd6-large.svg -blur 0x8 sd6-blur.svg -# $ rsvg-convert -a -w 160 -f svg sd6-blur.svg -o sd6.svg diff --git a/static/images/content_images/sc_dom_img/image_processing.svg b/static/images/content_images/sc_dom_img/image_processing.svg deleted file mode 100644 index 0695b629..00000000 --- a/static/images/content_images/sc_dom_img/image_processing.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/mathematical_analysis.svg b/static/images/content_images/sc_dom_img/mathematical_analysis.svg deleted file mode 100644 index 46d5878d..00000000 --- a/static/images/content_images/sc_dom_img/mathematical_analysis.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/static/images/content_images/sc_dom_img/robotics.svg b/static/images/content_images/sc_dom_img/robotics.svg deleted file mode 100644 index 1938492e..00000000 --- a/static/images/content_images/sc_dom_img/robotics.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/signal_processing.svg b/static/images/content_images/sc_dom_img/signal_processing.svg deleted file mode 100644 index f68245d7..00000000 --- a/static/images/content_images/sc_dom_img/signal_processing.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/static/images/content_images/sc_dom_img/statistical_computing.svg b/static/images/content_images/sc_dom_img/statistical_computing.svg deleted file mode 100644 index 1243aea6..00000000 --- a/static/images/content_images/sc_dom_img/statistical_computing.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/images/dev_retreat_2026.jpeg b/static/images/dev_retreat_2026.jpeg new file mode 100644 index 00000000..6b996f82 Binary files /dev/null and b/static/images/dev_retreat_2026.jpeg differ diff --git a/static/images/dev_retreat_2027_poster.png b/static/images/dev_retreat_2027_poster.png new file mode 100644 index 00000000..c4270d3d Binary files /dev/null and b/static/images/dev_retreat_2027_poster.png differ diff --git a/static/images/icons/anaconda.svg b/static/images/icons/anaconda.svg new file mode 100644 index 00000000..6c660fd8 --- /dev/null +++ b/static/images/icons/anaconda.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/leadership_photos/joshua_charkow.jpeg b/static/images/leadership_photos/joshua_charkow.jpeg new file mode 100644 index 00000000..88777fb3 Binary files /dev/null and b/static/images/leadership_photos/joshua_charkow.jpeg differ diff --git a/static/images/leadership_photos/oliver_kohlbacher.jpg b/static/images/leadership_photos/oliver_kohlbacher.jpg new file mode 100644 index 00000000..804fd260 Binary files /dev/null and b/static/images/leadership_photos/oliver_kohlbacher.jpg differ diff --git a/static/images/leadership_photos/sam_wein.jpeg b/static/images/leadership_photos/sam_wein.jpeg new file mode 100644 index 00000000..64fc484d Binary files /dev/null and b/static/images/leadership_photos/sam_wein.jpeg differ diff --git a/static/images/leadership_photos/timo_sachsenberg.jpeg b/static/images/leadership_photos/timo_sachsenberg.jpeg new file mode 100644 index 00000000..a3cf3aa1 Binary files /dev/null and b/static/images/leadership_photos/timo_sachsenberg.jpeg differ diff --git a/static/images/leadership_photos/tjeerd_dijkstra.jpeg b/static/images/leadership_photos/tjeerd_dijkstra.jpeg new file mode 100644 index 00000000..abc40faa Binary files /dev/null and b/static/images/leadership_photos/tjeerd_dijkstra.jpeg differ diff --git a/static/images/leadership_photos/tom_muller.jpeg b/static/images/leadership_photos/tom_muller.jpeg new file mode 100644 index 00000000..ba317975 Binary files /dev/null and b/static/images/leadership_photos/tom_muller.jpeg differ diff --git a/static/images/logos/DTU-logo.png b/static/images/logos/DTU-logo.png index 4a8054fd..8e1fe6f3 100644 Binary files a/static/images/logos/DTU-logo.png and b/static/images/logos/DTU-logo.png differ diff --git a/static/images/logos/OpenMS_transparent_whiteFont.svg b/static/images/logos/OpenMS_transparent_whiteFont.svg new file mode 100644 index 00000000..38e5ce33 --- /dev/null +++ b/static/images/logos/OpenMS_transparent_whiteFont.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/logos/berkeley-color.svg b/static/images/logos/berkeley-color.svg deleted file mode 100644 index 57e73b64..00000000 --- a/static/images/logos/berkeley-color.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - Imported Layers Copy 5 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/images/logos/emblebi.png b/static/images/logos/emblebi.png index 0e4ed5b6..e9f92bda 100644 Binary files a/static/images/logos/emblebi.png and b/static/images/logos/emblebi.png differ diff --git a/static/images/logos/hupo-psi.png b/static/images/logos/hupo-psi.png new file mode 100644 index 00000000..cddfc893 Binary files /dev/null and b/static/images/logos/hupo-psi.png differ diff --git a/static/images/logos/immatics.png b/static/images/logos/immatics.png new file mode 100644 index 00000000..ed2295d4 Binary files /dev/null and b/static/images/logos/immatics.png differ diff --git a/static/images/logos/logo-compomics.png b/static/images/logos/logo-compomics.png new file mode 100644 index 00000000..cc034320 Binary files /dev/null and b/static/images/logos/logo-compomics.png differ diff --git a/static/images/logos/logo-fullseeomics.png b/static/images/logos/logo-fullseeomics.png new file mode 100644 index 00000000..7b475f13 Binary files /dev/null and b/static/images/logos/logo-fullseeomics.png differ diff --git a/static/images/logos/logo-stockholm-university.png b/static/images/logos/logo-stockholm-university.png new file mode 100644 index 00000000..4fb0c68b Binary files /dev/null and b/static/images/logos/logo-stockholm-university.png differ diff --git a/static/images/logos/logo-uni-tuebingen.png b/static/images/logos/logo-uni-tuebingen.png index 204e6782..49937ed7 100644 Binary files a/static/images/logos/logo-uni-tuebingen.png and b/static/images/logos/logo-uni-tuebingen.png differ diff --git a/static/images/logos/logo-university-cambridge.png b/static/images/logos/logo-university-cambridge.png new file mode 100644 index 00000000..44a125cd Binary files /dev/null and b/static/images/logos/logo-university-cambridge.png differ diff --git a/static/images/logos/logo-university-groningen.png b/static/images/logos/logo-university-groningen.png new file mode 100644 index 00000000..2a5dcf46 Binary files /dev/null and b/static/images/logos/logo-university-groningen.png differ diff --git a/static/images/logos/logo-vib-ghent.png b/static/images/logos/logo-vib-ghent.png new file mode 100644 index 00000000..3a787698 Binary files /dev/null and b/static/images/logos/logo-vib-ghent.png differ diff --git a/static/images/logos/moore.svg b/static/images/logos/moore.svg deleted file mode 100644 index 037b72ee..00000000 --- a/static/images/logos/moore.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - Imported Layers - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/images/logos/openms-webapps-logo.png b/static/images/logos/openms-webapps-logo.png new file mode 100644 index 00000000..80a8f40e Binary files /dev/null and b/static/images/logos/openms-webapps-logo.png differ diff --git a/static/images/logos/pyopenms-viz-logo.png b/static/images/logos/pyopenms-viz-logo.png new file mode 100644 index 00000000..420e983a Binary files /dev/null and b/static/images/logos/pyopenms-viz-logo.png differ diff --git a/static/images/logos/sloan.svg b/static/images/logos/sloan.svg deleted file mode 100644 index d720ae77..00000000 --- a/static/images/logos/sloan.svg +++ /dev/null @@ -1,162 +0,0 @@ - - - - Imported Layers - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/images/logos/toronto.jpeg b/static/images/logos/toronto.jpeg index 4b1a0e12..72956176 100644 Binary files a/static/images/logos/toronto.jpeg and b/static/images/logos/toronto.jpeg differ diff --git a/static/images/logos/ziblogo.png b/static/images/logos/ziblogo.png index 18d04d8c..ac73f319 100644 Binary files a/static/images/logos/ziblogo.png and b/static/images/logos/ziblogo.png differ diff --git a/static/images/webapp/logo/affiliate/casanovo.svg b/static/images/webapp/logo/affiliate/casanovo.svg new file mode 100644 index 00000000..2d51c30e --- /dev/null +++ b/static/images/webapp/logo/affiliate/casanovo.svg @@ -0,0 +1,44 @@ + + + + + + + + + + diff --git a/static/images/webapp/logo/affiliate/easypqp.svg b/static/images/webapp/logo/affiliate/easypqp.svg new file mode 100644 index 00000000..ec901442 --- /dev/null +++ b/static/images/webapp/logo/affiliate/easypqp.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/webapp/logo/affiliate/mzpeak.png b/static/images/webapp/logo/affiliate/mzpeak.png new file mode 100644 index 00000000..ec7c5852 Binary files /dev/null and b/static/images/webapp/logo/affiliate/mzpeak.png differ diff --git a/static/images/webapp/logo/affiliate/pyprophet.png b/static/images/webapp/logo/affiliate/pyprophet.png new file mode 100644 index 00000000..d7345fb1 Binary files /dev/null and b/static/images/webapp/logo/affiliate/pyprophet.png differ diff --git a/static/images/webapp/logo/affiliate/quantms.svg b/static/images/webapp/logo/affiliate/quantms.svg new file mode 100644 index 00000000..4e9090c0 --- /dev/null +++ b/static/images/webapp/logo/affiliate/quantms.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/images/webapp/logo/mhcquant.svg b/static/images/webapp/logo/mhcquant.svg index 2a8896f1..72d92457 100644 --- a/static/images/webapp/logo/mhcquant.svg +++ b/static/images/webapp/logo/mhcquant.svg @@ -1,9 +1,12 @@ - - MHCquant + + + + + + + + + MHCquant - diff --git a/static/images/webapp/logo/nf-core.png b/static/images/webapp/logo/nf-core.png new file mode 100644 index 00000000..361b8d82 Binary files /dev/null and b/static/images/webapp/logo/nf-core.png differ diff --git a/static/images/webapp/logo/openDDA.svg b/static/images/webapp/logo/openDDA.svg index 20920a19..7379d9b8 100644 --- a/static/images/webapp/logo/openDDA.svg +++ b/static/images/webapp/logo/openDDA.svg @@ -1,8 +1,13 @@ - - OpenDDA + + + + + + + + + + OpenDDA