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/Makefile b/Makefile index 69ad576a..784e8d92 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,11 @@ # type `make help` to see all options -BASEURL ?= +BASEURL ?= +PORT ?= 1313 ifdef BASEURL BASEURLARG=-b $(BASEURL) -endif +endif .PHONY: help prepare teams-clean teams serve clean @@ -35,7 +36,7 @@ teams-clean: prepare teams: | teams-clean $(patsubst %,$(TEAMS_DIR)/%.md,$(TEAMS)) ## generates openms.org team gallery pages serve: prepare ## serve the website - hugo $(BASEURLARG) --printI18nWarnings server -D + hugo $(BASEURLARG) --printI18nWarnings server -D --port $(PORT) html: prepare ## build the website in ./public hugo $(BASEURLARG) 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/brand-palette.css b/assets/css/brand-palette.css new file mode 100644 index 00000000..12a543c1 --- /dev/null +++ b/assets/css/brand-palette.css @@ -0,0 +1,502 @@ +/* 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); + --openms-title-transform: uppercase; + --openms-title-letter-spacing: 0.015em; + --openms-eyebrow-letter-spacing: 0.08em; + + /* 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 */ + --openms-stack-cards: clamp(1.2rem, 2.5vw, 1.75rem); /* title block → cards */ + --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(--openms-stack-cards); + --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/coc-charter.css b/assets/css/coc-charter.css new file mode 100644 index 00000000..4447d0e1 --- /dev/null +++ b/assets/css/coc-charter.css @@ -0,0 +1,39 @@ +/* Code of Conduct — governance-style hero header, then a plain, "wall of + text" body like a legal document (e.g. + apache.org/foundation/how-it-works/). Reuses the site's base + .openms-lib-prose typography for headings/paragraphs/lists. */ + +/* The hero already ends with its own breathing room below the lead line, + so cancel the sitewide "first anchor after hero" top padding to avoid + stacking two gaps in a row. */ +.openms-lib-page--code-of-conduct .openms-lib-page__body > .openms-lib-page__anchor:first-child { + padding-top: clamp(1.5rem, 4vw, 2.5rem) !important; +} + +/* Compound with .openms-lib-prose so this beats the sitewide + .openms-lib-prose { max-width: none } rule regardless of stylesheet + load order (equal-specificity single-class rules lose to whichever + loads last, which isn't always us). Padding-inline is set here too, + rather than relying on the parent anchor, since a page-specific + override elsewhere strips that padding for this page. */ +.coc-charter__inner.openms-lib-prose { + box-sizing: border-box; + max-width: 46rem; + margin-inline: auto; + padding-inline: var(--openms-page-inline, 1.5rem); + padding-bottom: clamp(3.5rem, 9vw, 6.5rem); +} + +/* A site-wide reset hides list markers by default; a plain document page + needs visible bullets/numbers like any normal prose list. */ +.coc-charter__inner ul { + list-style: disc; +} + +.coc-charter__inner ol { + list-style: decimal; +} + +.coc-charter__inner li { + list-style: inherit; +} diff --git a/assets/css/community-calendar.css b/assets/css/community-calendar.css new file mode 100644 index 00000000..d87a9b78 --- /dev/null +++ b/assets/css/community-calendar.css @@ -0,0 +1,730 @@ +/* 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: flex; + flex-direction: column; + gap: var(--pro-section-y, clamp(3rem, 6vw, 4.5rem)); + align-items: stretch; +} + +@media (max-width: 900px) { + .community-events-page { + 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..2d46cbdd --- /dev/null +++ b/assets/css/community-events-news-home.css @@ -0,0 +1,401 @@ +/* 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: fit-content; + + 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; +} + +/* Upcoming events — dates match blue category labels (and Latest news dates) */ +.home-page .community-news-events__column--events .community-news-events__press-date, +.home-page .community-news-events__column--events a.community-news-events__press-link:hover .community-news-events__press-date, +.home-page .community-news-events__column--events a.community-news-events__press-link:focus-visible .community-news-events__press-date, +.openms-lib-page--calendar .community-news-events__press-date, +.openms-lib-page--calendar a.community-news-events__press-link:hover .community-news-events__press-date, +.openms-lib-page--calendar a.community-news-events__press-link:focus-visible .community-news-events__press-date { + color: var(--openms-blue); +} + +.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..9aaa6e7a --- /dev/null +++ b/assets/css/contact-page.css @@ -0,0 +1,62 @@ +/* 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: nowrap; + align-items: stretch; + align-self: stretch; + width: 100%; + gap: 0.65rem 0.85rem; + margin-top: auto; + padding-top: 0.35rem; + box-sizing: border-box; +} + +.openms-lib-page--contact .contact-path-social { + flex: 1 1 0; + width: 100%; + min-width: 0; + justify-content: center; + box-sizing: border-box; +} + +.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..fda13d0e --- /dev/null +++ b/assets/css/ecosystem-home.css @@ -0,0 +1,469 @@ +/* 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: center; + 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: center; + 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 var(--ecosystem-logo-box, 7.5rem); + 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-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/exec-charter.css b/assets/css/exec-charter.css new file mode 100644 index 00000000..a258f105 --- /dev/null +++ b/assets/css/exec-charter.css @@ -0,0 +1,47 @@ +/* Executive Committee Charter — governance-style hero header, then a + plain, "wall of text" body like a legal document (e.g. + apache.org/foundation/how-it-works/). Reuses the site's base + .openms-lib-prose typography for headings/paragraphs/lists. */ +/* The hero already ends with its own breathing room below the lead line, + so cancel the sitewide "first anchor after hero" top padding to avoid + stacking two gaps in a row. */ +.openms-lib-page--exec-committee .openms-lib-page__body > .openms-lib-page__anchor:first-child { + padding-top: clamp(1.5rem, 4vw, 2.5rem) !important; +} + +/* Compound with .openms-lib-prose so this beats the sitewide + .openms-lib-prose { max-width: none } rule regardless of stylesheet + load order (equal-specificity single-class rules lose to whichever + loads last, which isn't always us). Padding-inline is set here too, + rather than relying on the parent anchor, since page-specific anchor + overrides elsewhere strip that padding for some of these pages. */ +.exec-charter__inner.openms-lib-prose { + box-sizing: border-box; + width: 100%; + max-width: var(--pro-max, 75rem); + margin-inline: auto; + padding-inline: var(--openms-page-inline, 1.5rem); + padding-bottom: clamp(1.5rem, 3vw, 2.25rem); + overflow: hidden; +} + +/* This page has no outro/CTA band, so the sitewide .openms-lib-layout + bottom padding (meant to give room above a following band) just + leaves a large dead gap before the footer here. */ +.openms-lib-layout:has(.openms-lib-page--exec-committee) { + padding-bottom: 0; +} + +/* A site-wide reset hides list markers by default; a plain document page + needs visible bullets/numbers like any normal prose list. */ +.exec-charter__inner ul { + list-style: disc; +} + +.exec-charter__inner ol { + list-style: decimal; +} + +.exec-charter__inner li { + list-style: inherit; +} 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..830eaddd --- /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: var(--openms-white) !important; + background-color: var(--openms-white) !important; + border-color: var(--openms-white); + color: var(--openms-navy) !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-white, rgba(255, 255, 255, 0.22)); + 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: 0.35rem; + box-sizing: border-box; + width: 100%; + height: var(--hero-diagram-height, 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..bee6285b --- /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, var(--openms-stack-cards, clamp(1.2rem, 2.5vw, 1.75rem))); + --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..4ea9f8dc --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,3127 @@ +/* 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); + /* Fixed diagram size at every viewport (shrinks only if the rail is narrower) */ + --hero-diagram-max: 34rem; + --hero-diagram-height: 11.5rem; + --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 — fluid */ + --openms-body-size-lg: clamp(1.05rem, 0.98rem + 0.28vw, 1.25rem); + --openms-page-hero-title-size: clamp(1.95rem, 0.85rem + 3.2vw, 3.35rem); + --hero-home-title-size: var(--openms-page-hero-title-size); + 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: start; + align-self: end; + box-sizing: border-box; + width: min(100%, var(--hero-diagram-max)); + max-width: var(--hero-diagram-max); + min-width: 0; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: stretch; + overflow: visible; + } + + .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: var(--hero-diagram-height); + } + + .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 { + --hero-col-gap: clamp(1rem, 2vw, 1.5rem); + --hero-diagram-max: 40rem; + --hero-lead-width: min(100%, 36ch); + } + + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr); + 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.1; + max-width: min(100%, 22rem); + } + + .home-page__hero .hero-home__description { + width: max-content; + max-width: 100%; + line-height: 1.55; + } + + .home-page__hero .hero-home__visual { + justify-self: stretch; + width: min(100%, var(--hero-diagram-max)); + max-width: var(--hero-diagram-max); + min-width: 0; + overflow: visible; + } + + .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-diagram-max: 34rem; + --hero-diagram-height: 11.5rem; + --hero-col-gap: 1.25rem; + } + + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 36rem) var(--hero-diagram-max); + justify-content: start; + align-items: center; + column-gap: var(--hero-col-gap); + } + + .home-page__hero .hero-home__visual { + justify-self: start; + align-self: center; + width: var(--hero-diagram-max); + max-width: var(--hero-diagram-max); + overflow: visible; + } + + .home-page__hero .hero-home__copy { + max-width: 36rem; + } +} + +@media (min-width: 1440px) { + .home-page__hero { + --hero-diagram-max: 36rem; + --hero-diagram-height: 12rem; + --hero-col-gap: 1.5rem; + } + + .home-page__hero .hero-home__hero-grid { + grid-template-columns: minmax(0, 38rem) var(--hero-diagram-max); + } + + .home-page__hero .hero-home__copy { + max-width: 38rem; + } +} + +.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-white); + 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__diagram { + display: flex; + flex-direction: column; + align-items: stretch; + width: min(100%, var(--hero-diagram-max)); + max-width: var(--hero-diagram-max); + min-width: 0; + container-type: inline-size; + container-name: hero-diagram; +} + +.home-page__hero .hero-home__diagram .hero-mockup__chart { + height: var(--hero-diagram-height); + gap: 0.35rem; +} + +.home-page__hero .hero-home__diagram .hero-mockup, +.home-page__hero .hero-home__diagram .hero-mockup__stage, +.home-page__hero .hero-home__diagram .hero-mockup__chart, +.home-page__hero .hero-home__diagram .hero-home__note { + width: 100%; + max-width: 100%; + min-width: 0; + box-sizing: border-box; +} + +.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); + display: flex; + flex-direction: column; + align-items: flex-start; + width: max-content; + max-width: 100%; + margin: var(--openms-stack-lead, 20px) 0 0; + text-align: left; + font-size: var(--openms-body-size-lg); + line-height: 1.55; + overflow-wrap: normal; +} + +.home-page__hero .hero-home__description-line { + display: block; + white-space: nowrap; +} + +@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 */ + container-type: inline-size; + container-name: hero-copy; + --openms-page-hero-title-size: clamp(1.95rem, 0.85rem + 3.2vw, 3.35rem); +} + +@supports (font-size: 1cqi) { + .home-page__hero .hero-home__copy { + --openms-page-hero-title-size: clamp(1.95rem, 0.85rem + 3.2vw, 3.35rem); + } +} + +.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: space-between; + gap: clamp(0.35rem, 1.4cqi, 0.85rem); + width: 100%; + max-width: 100%; + margin: 0; + color: var(--openms-white); + text-align: left; + white-space: nowrap; + font-size: clamp(0.875rem, 2.9cqi, 1.0625rem); + line-height: 1.35; + box-sizing: border-box; +} + +.home-page__hero .hero-home__visual .hero-home__note--under-graphic, +.home-page__hero .hero-home__diagram .hero-home__note--under-graphic { + flex-wrap: nowrap; + width: 100%; + max-width: 100%; + margin: clamp(0.85rem, 1.8vh, 1.25rem) 0 0; + white-space: nowrap; +} + +.home-page__hero .hero-home__note-item { + display: inline-flex; + align-items: center; + flex: 0 1 auto; + gap: clamp(0.28rem, 0.9cqi, 0.45rem); + min-width: 0; + white-space: nowrap; +} + +.home-page__hero .hero-home__title-accent { + background: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--openms-white); + -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: 0; + } + + .home-page__hero .hero-home__hero-grid { + gap: clamp(1.35rem, 3.2vh, 1.85rem); + } + + /* Stacked: graphic under the copy; copy uses full content width */ + .home-page__hero { + --hero-lead-width: 100%; + } + + .home-page__hero .hero-home__visual { + justify-content: flex-start; + align-items: stretch; + width: min(100%, var(--hero-diagram-max)); + max-width: var(--hero-diagram-max); + margin-inline: 0; + margin-top: 0.15rem; + } + + .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: var(--hero-diagram-height); + } + + .home-page__hero .hero-home__visual .hero-home__highlights { + display: none; + } + + .home-page__hero .hero-home__main { + padding: clamp(4.5rem, 8vh, 5.75rem) var(--home-pad-x) + clamp(2rem, 4.5vh, 2.85rem); + } + + .home-page__hero .hero-home__inner { + gap: clamp(1.25rem, 3vh, 1.75rem); + } + + .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.55; + } + + .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) { + /* Empty microcopy chips stay off; chrome/trust handled in z-hero-sm.css */ + .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 .hero-home__main { + padding-top: clamp(4.75rem, 7.5vh, 6rem); + padding-bottom: clamp(2.25rem, 4vh, 3rem); + } + + .home-page__hero .hero-home { + min-height: 0; + } + + .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: min(100%, 46ch); + text-wrap: pretty; + } + + .home-page__hero .hero-home__visual { + margin-top: 0.15rem; + } +} + +/* 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(--openms-white, #fff); +} + +.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: var(--home-section-gap); +} + +.home-page__block--overview:has(+ .home-page__block--ecosystem) .keyfeatures-modern--home { + padding-bottom: var(--home-section-gap); + 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; + display: flex; + align-items: flex-start; + gap: 0.85rem; + max-width: none; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.07); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: var(--pro-radius, 0.85rem); + box-shadow: 0 0.15rem 0.65rem rgba(var(--openms-navy-rgb), 0.04); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note-icon { + display: grid; + flex-shrink: 0; + place-items: center; + width: 2.25rem; + height: 2.25rem; + border-radius: 50%; + background: rgba(var(--openms-blue-rgb), 0.14); + color: var(--openms-blue); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note-icon svg { + width: 1.05rem; + height: 1.05rem; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note-text { + min-width: 0; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note-text p { + margin: 0; + line-height: 1.6; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note a { + color: var(--openms-blue); + font-weight: 700; + text-decoration: underline; + text-underline-offset: 0.15em; +} + +/* ═══════════════════════════════════════════ + 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: 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: 6.5rem; + --projects-logo-slot: 8.25rem; + 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: 4.25rem; + max-width: min(10rem, 100%); + max-height: 4.25rem; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="openDDA"] { + height: 8.25rem; + max-width: min(22rem, 100%); + max-height: 8.25rem; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="mhcquant"] { + height: 8.25rem; + max-width: min(22rem, 100%); + max-height: 8.25rem; +} + +.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 1.5rem; + 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: 6.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; +} + +@media (max-width: 900px) { + .home-page__hero .hero-home { + min-height: 0; + } +} + +.home-page__hero .hero-home__title { + color: var(--openms-white); +} + +.home-page__hero .hero-home__title-accent { + display: inline; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--openms-white); + -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/impressum.css b/assets/css/impressum.css new file mode 100644 index 00000000..9710c943 --- /dev/null +++ b/assets/css/impressum.css @@ -0,0 +1,26 @@ +/* Impressum — short, centered address block. No outro/CTA band follows + it, so the sitewide .openms-lib-layout bottom padding (meant to give + room above a following band) just reads as dead whitespace here. */ +.impressum-layout.openms-lib-layout { + padding-bottom: 0; +} + +.openms-lib-page--impressum .openms-lib-resources__inner { + text-align: center; +} + +.openms-lib-page--impressum .openms-lib-prose { + margin-inline: auto; +} + +.openms-lib-page--impressum .openms-lib-prose p { + margin: 0 0 0.35rem; +} + +.openms-lib-page--impressum .openms-lib-prose p + p { + margin-top: 0; +} + +.openms-lib-page--impressum .openms-lib-page__body > .openms-lib-page__anchor { + padding-bottom: clamp(1.5rem, 3vw, 2.25rem) !important; +} 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..d678134e 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.48rem; + font-weight: 400; + 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..8f60b32f --- /dev/null +++ b/assets/css/news-section.css @@ -0,0 +1,856 @@ +/* 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: var(--pro-max, 75rem); + --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; + margin-bottom: clamp(2.75rem, 6vw, 4.25rem); +} + +.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: inherit; +} + +.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: row; + align-items: center; + justify-content: flex-end; + } + + .news-toolbar__filter, + .news-toolbar__select { + width: auto; + max-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 (editorial, not product-hub hero) --- */ + +.news-story { + width: 100%; + padding: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) var(--openms-page-inline, clamp(1.25rem, 4vw, 2rem)); + background: var(--sol-canvas, #f8f8f9); +} + +.news-story__inner { + width: min(100%, var(--pro-max, 75rem)); + margin-inline: auto; + padding-inline: 0; +} + +.news-story__toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1.85rem; +} + +@media (max-width: 520px) { + .news-story__toolbar { + flex-wrap: wrap; + } +} + +.news-story__kicker { + display: inline-flex; + align-items: center; + gap: 0.45rem; + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: var(--openms-eyebrow-letter-spacing, 0.08em); + text-transform: uppercase; + color: var(--openms-blue); +} + +.news-story__back { + display: inline-flex; + align-items: center; + width: fit-content; + padding: 0; + border: 0; + background: transparent; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: var(--openms-cta-link-weight, 700); + color: var(--openms-blue); + text-decoration: none; + white-space: nowrap; +} + +.news-story__back:hover, +.news-story__back:focus-visible { + color: var(--openms-blue); + text-decoration: none; +} + +.news-story__header { + margin-bottom: 1.75rem; + padding-bottom: 1.25rem; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.news-story__title { + margin: 0.35rem 0 0.75rem; + max-width: none; + font-family: var(--openms-font-heading); + font-size: var(--openms-heading-xl-size); + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)); + letter-spacing: var(--openms-title-letter-spacing, 0.015em); + line-height: 1.25; + text-transform: var(--openms-title-transform, uppercase); + hyphens: none; + overflow-wrap: anywhere; + word-break: normal; + color: var(--openms-page-hero-title-color, var(--openms-navy)); +} + +.news-story__lead { + margin: 0 0 0.85rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: var(--openms-body-weight); + line-height: 1.6; + color: var(--openms-text-muted); +} + +.news-story__meta { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: var(--openms-body-weight); + line-height: 1.45; + color: var(--openms-text-muted); +} + +.news-story__meta-sep { + margin: 0 0.4rem; +} + +.news-story__toc { + margin: 0 0 1.75rem; + padding: 1rem 1.15rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 0.75rem; + background: var(--openms-white); +} + +.news-story__toc-title { + margin: 0 0 0.45rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-body-size, 0.9375rem); + font-weight: 700; + color: var(--openms-navy); +} + +.news-story__toc ul { + margin: 0; + padding: 0; + list-style: none; +} + +.news-story__toc li { + margin: 0 0 0.3rem; +} + +.news-story__toc a { + font-family: var(--openms-font-body); + font-size: var(--openms-text-min, 0.8125rem); + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.72); + text-decoration: none; +} + +.news-story__body { + max-width: none; +} + +.news-story__body :is(p, li) { + 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(--openms-text-muted); +} + +.news-story__body a { + color: var(--openms-content-link); + font-weight: var(--openms-content-link-weight, 600); + text-decoration: none; +} + +.news-story__body a:hover, +.news-story__body a:focus-visible { + color: var(--openms-content-link-hover); + text-decoration: none; +} + +.news-story__body p { + margin: 0 0 1.05rem; +} + +.news-story__body p:last-child { + margin-bottom: 0; +} + +.news-story__body :is(h2, h3, h4) { + margin: 1.75rem 0 0.7rem; + font-family: var(--openms-font-heading); + font-weight: var(--openms-heading-lg-weight, 700); + letter-spacing: var(--openms-title-letter-spacing, 0.015em); + text-transform: var(--openms-title-transform, uppercase); + color: var(--openms-section-title-color, var(--openms-navy)); +} + +.news-story__body h2 { + font-size: var(--openms-secondary-heading-size-lg); +} + +.news-story__body h3, +.news-story__body h4 { + font-size: var(--openms-secondary-heading-size); +} + +.news-story__body img { + display: inline-block; + vertical-align: middle; + width: auto; + height: auto; + max-width: min(100%, 18rem); + max-height: 5.5rem; + object-fit: contain; + margin: 0.35rem 1.5rem 0.35rem 0; + border-radius: 0.35rem; +} + +.news-story__body a:has(> img) { + display: inline-block; + vertical-align: middle; +} + +.news-story__body img ~ br, +.news-story__body a:has(> img) ~ br { + display: none; +} + +.news-story__body blockquote { + margin: 1.25rem 0; + padding: 0.15rem 0 0.15rem 1rem; + border-left: 3px solid var(--openms-blue); + color: rgba(var(--openms-dark-rgb), 0.72); +} + +/* --- Single news article (legacy classes) --- */ + +.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..3433cbbb --- /dev/null +++ b/assets/css/openms-buttons.css @@ -0,0 +1,547 @@ +/* Shared CTA system — Framer-style pill + glow ring on hover (no fill/color shift) */ + +:root { + --openms-btn-pill-radius: 999px; + --openms-btn-border-width: 2px; + --openms-btn-glow: rgba(var(--openms-blue-rgb), 0.22); + --openms-btn-glow-white: rgba(255, 255, 255, 0.22); + --openms-btn-glow-navy: rgba(var(--openms-navy-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-icon-gap: 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-family: var(--openms-font-body); + --openms-btn-font-size: var(--openms-text-min); + --openms-btn-weight: 600; + --openms-btn-line-height: 1.3; + --openms-btn-outline: rgba(var(--openms-navy-rgb), 0.72); + --openms-btn-compact-min-height: 2.35rem; + --openms-btn-compact-padding: 0.4rem 0.5rem; + --openms-btn-compact-font-size: 0.75rem; + --openms-btn-compact-gap: 0.3rem; + --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: var(--openms-btn-icon-gap); + width: fit-content; + min-height: var(--openms-btn-min-height); + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + border: var(--openms-btn-border-width) solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; + font-family: var(--openms-btn-font-family); + font-size: var(--openms-btn-font-size); + font-weight: var(--openms-btn-weight); + line-height: var(--openms-btn-line-height); + 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 { + 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; +} + +/* Homepage hero “Explore the library” — white fill hover (clear on navy) */ +.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: var(--openms-white) !important; + background-color: var(--openms-white) !important; + border-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) var(--openms-btn-glow-white, rgba(255, 255, 255, 0.22)) !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: var(--openms-btn-icon-gap); + 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: var(--openms-btn-border-width) solid transparent; + font-family: var(--openms-btn-font-family); + font-size: var(--openms-btn-font-size); + font-weight: var(--openms-btn-weight); + line-height: var(--openms-btn-line-height); + 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: rgba(var(--openms-navy-rgb), 0.08); + background-color: rgba(var(--openms-navy-rgb), 0.08); + border-color: rgba(var(--openms-navy-rgb), 0.78); + 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.18); + 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/openms-overrides.css b/assets/css/openms-overrides.css new file mode 100644 index 00000000..50dea728 --- /dev/null +++ b/assets/css/openms-overrides.css @@ -0,0 +1,37610 @@ +/* Combined former z-prefixed sheets. + Loaded last by layouts/partials/css.html so these rules still win over + page CSS. Keep this file last in the cascade; do not rename it to sort + earlier than privacy/sponsor/webapps sheets unless css.html still appends it. +*/ + +/* ===== z-contribute-page.css ===== */ +/* 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; + } +} + +/* ===== z-openms-lib-hub.css ===== */ +/* 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:not(.openms-lib-page--webapps):not(.openms-lib-page--webapps-pro) .openms-lib-developers__card--link:hover, +.openms-lib-page--hub:not(.openms-lib-page--webapps):not(.openms-lib-page--webapps-pro) .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); + } +} + +/* ===== z-openms-lib-pro.css ===== */ +.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(--openms-stack-eyebrow, 12px); + --pro-stack-lead:var(--openms-stack-lead, 20px); + --pro-stack-actions:var(--pro-space-5); + --pro-head-to-content:var(--openms-stack-cards, clamp(1.2rem, 2.5vw, 1.75rem)); + --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(--openms-stack-eyebrow, 12px); + --pro-stack-lead:var(--openms-stack-lead, 20px); + --pro-stack-actions:var(--pro-space-5); + --pro-head-to-content:var(--openms-stack-cards, clamp(1.2rem, 2.5vw, 1.75rem)); + --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-developers__platform-btn:hover, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--hub.openms-lib-page--openms-lib .openms-lib-developers__platform-btn:active, +.openms-lib-page--openms-lib .openms-lib-developers__platform-btn:hover, +.openms-lib-page--openms-lib .openms-lib-developers__platform-btn:focus-visible, +.openms-lib-page--openms-lib .openms-lib-developers__platform-btn:active { + transform: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 + .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{ + 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; +} + +@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-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--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-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 +} +@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-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{ + overflow: visible !important; + max-height: none !important; + height: auto !important; + } + + + + +} +/* 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-navy)!important; + background:var(--openms-navy)!important; + color:var(--openms-white)!important; + transform:none; + 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:var(--openms-white)!important; + color:var(--openms-blue)!important; + transform:none; + 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:none + } + .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) { + + +} +@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 */ + + +/* 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: none; + 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: minmax(0, 1fr) auto; + grid-template-areas: + "name logo" + "text logo" + "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; + margin-left: auto; + justify-self: end; + 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: minmax(0, 1fr) auto; + grid-template-areas: + "name logo" + "text logo" + "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; + margin-left: auto; + justify-self: end; + 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%; +} + +/* Card(s) left, Good to know right */ +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + gap: 1.15rem 1.75rem; + width: 100%; +} +.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: min(100%, 32rem); + flex: 1 1 22rem; + max-width: 32rem; + justify-items: center; +} +.openms-lib-page--archived .webapps-archived__grid--solo > .webapps-archived__item { + width: 100%; + max-width: none; +} +.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 heading" + "text text" + "maintainers maintainers" + "actions actions"; + align-items: start; + column-gap: clamp(1rem, 2.5vw, 1.45rem); + row-gap: 0.12rem; + 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: 7.5rem; + min-width: 7.5rem; + max-width: 7.5rem; + height: 7.5rem; + min-height: 7.5rem; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + background-image: none; + box-shadow: none; + place-items: center; + align-self: start; + box-sizing: border-box; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__heading { + grid-area: heading; + display: grid; + gap: 0.15rem; + align-content: start; + align-self: start; + min-width: 0; +} + +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__heading .webapps-archived-entry__meta, +.openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__heading .webapps-archived-entry__name { + grid-area: auto; +} + +.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:.06rem .34rem; + 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:.5rem; + font-weight:700; + letter-spacing:.06em; + 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: 6.75rem; + min-width: 6.75rem; + max-width: 6.75rem; + height: 6.75rem; + min-height: 6.75rem; + padding: 0; + border: none; + background: transparent; + } + .openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__logo { + max-width: 100%; + max-height: none; + } + .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(--pro-max, 75rem); + margin-inline:auto +} +.openms-lib-page--calendar .community-events-page { + gap:var(--pro-section-y); + width:100%; + max-width:var(--pro-max, 75rem); + 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: var(--pro-max, 75rem); +} +.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(--pro-max, 75rem); + 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(--pro-max, 75rem); + 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--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), +.openms-lib-layout:has(.openms-lib-page--services-support), +.content-padding:has(.openms-lib-page--services-support) { + padding-bottom: 0; +} + +.openms-lib-layout:has(.openms-lib-page--fellowship) + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--fellowship) + #footer.footer-redesign, +.openms-lib-layout:has(.openms-lib-page--services-support) + #footer.footer-redesign, +.content-padding:has(.openms-lib-page--services-support) + #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 #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__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__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__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__sponsor a { + color:var(--openms-navy); + font-weight:600; + text-decoration:underline; + text-underline-offset:.14em +} + + +.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-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:nowrap; + 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:560px +} +/* 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--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--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 +} + +/* 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 +} + +@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__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:.48rem; + font-weight:400; + 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); + padding-inline:var(--openms-page-inline); + 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 { + border-color:var(--openms-white) !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-white, rgba(255,255,255,.28)) !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>.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>.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) +} + + +@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 #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-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 .rp-application__form { + width:100%; + max-width:48rem; + margin-inline:auto; + padding:0; + border:none; + background:0 0; + box-shadow:none +} + +@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-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__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__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-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 +} + + +@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, +.openms-lib-page--privacy #related-pages.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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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, +.openms-lib-page--privacy .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 #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 #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%; +} + + +/* 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; +} + + +/* 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%; +} + + +/* 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-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 #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 .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 +} + +/* 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 .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+.sponsors-tier { + margin-top:var(--pro-space-5) +} + + +.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 #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 +} +html body .openms-lib-page--sponsor-us .openms-lib-about__mosaic .openms-lib-about__tile-title { + margin: 0 0 1.5rem !important; +} +.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 .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:block; + margin:var(--pro-stack-lead, .75rem) 0 0; + max-width:max-content; + width:auto; + 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-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--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--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) { + + +} +@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-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: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 #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__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__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__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__img[src*=Elixir] { + max-width:7.5rem; + max-height:4.75rem +} + +.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 .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 .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__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__list { + display:grid; + gap:.75rem; + margin:0; + min-width:0 +} + +.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 .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: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:1.75rem 1.15rem 1.2rem; + border-top:1px solid var(--pro-line) +} +.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--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) { + +} +@media (max-width: 560px) { + +} + +.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 */ + + +/* 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{ + 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; +} + +@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-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)); + } + + + + +} + +/* 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: 0.72rem; + font-weight: 600; + letter-spacing: 0.06em; + 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: 1100px) { + .openms-lib-page--contributors .members { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 860px) { + .openms-lib-page--contributors .leadership-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 720px) { + .openms-lib-page--contributors .members { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + +@media (max-width: 560px) { + .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(--sol-section-y, var(--pro-section-y)); +} + +.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: 640px; + 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 .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: block; + margin: var(--pro-stack-lead, 0.75rem) 0 0; + max-width: min(63.5rem, 100%); + width: auto; + 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) { + +} + +@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; + } +} + +/* ===== zz-code-of-conduct-page.css ===== */ +/* 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%, 54rem); + 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%, 54rem); +} + +.openms-lib-page--code-of-conduct .coc-overview .coc-overview__lead-line { + display: block; +} + +/* —— 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 { + color: 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); + overflow-wrap: anywhere; +} + +.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-report__text a:focus-visible { + color: var(--openms-blue); + text-decoration: none; +} + +.openms-lib-page--code-of-conduct .coc-details__answer a:hover, +.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-blue); + 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-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); + } +} + +/* ===== zz-contribute-page.css ===== */ +/* 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-white) !important; + background: transparent !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-white) !important; + background: rgba(var(--openms-white-rgb), 0.12) !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:hover .contribute-os-buttons .openms-lib-btn--ghost .openms-lib-btn__label, +.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, +.openms-lib-page--contribute .contribute-track__item:focus-within .contribute-os-buttons .openms-lib-btn--ghost .openms-lib-btn__label { + color: var(--openms-white) !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 4; +} + +.contribute-track__item--design { + grid-column: span 4; +} + +.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); + 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: none; + 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: start; + row-gap: 0.4rem; + column-gap: 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: contents; +} + +.contribute-support__kicker { + grid-column: 1; + 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 { + grid-column: 1; + 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 { + grid-column: 1; + align-self: center; + margin: 0; + max-width: 42ch; + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--openms-text-muted) !important; +} + +.contribute-support__cta { + grid-column: 2; + grid-row: 3; + justify-self: end; + align-self: center; + 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__copy { + display: grid; + gap: 0.4rem; + justify-items: start; + text-align: left; + } + + .contribute-support__cta { + grid-column: 1; + grid-row: auto; + 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; + } +} + +/* ===== zz-openms-buttons.css ===== */ +/* 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; + } +} + +@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 outline hover without scale; + filled Demo / NF Core keep scale + glow like other primary blue CTAs. */ +@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--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--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; + } + + .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__item:first-child .webapps-project-links__btn:hover, + .openms-lib-page--featured-pro .webapps-project-links__item:first-child .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--archived .webapps-archived-entry .webapps-project-links__btn--demo:hover, + .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:focus-visible, + .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:hover, + .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:focus-visible { + 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; + } +} + +/* 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: var(--openms-btn-icon-gap); + width: fit-content; + min-width: clamp(10rem, 22vw, 14rem); + max-width: 100%; + min-height: var(--openms-btn-min-height) !important; + height: auto !important; + padding: var(--openms-btn-padding) !important; + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-btn-font-family); + font-size: var(--openms-btn-font-size) !important; + font-weight: var(--openms-btn-weight) !important; + line-height: var(--openms-btn-line-height) !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 var(--openms-btn-glow-white) !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) var(--openms-btn-glow-white) !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, +.openms-lib-page--sponsor-us #become-a-sponsor .contribute-coc-band__actions .openms-lib-btn--ghost, +.openms-lib-page--sponsor-us #become-a-sponsor .contribute-coc-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: var(--openms-btn-border-width) 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-btn-font-family) !important; + font-size: var(--openms-btn-font-size) !important; + font-weight: var(--openms-btn-weight) !important; + line-height: var(--openms-btn-line-height) !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, +.openms-lib-page--sponsor-us #become-a-sponsor .contribute-coc-band__actions .openms-lib-btn--ghost:hover, +.openms-lib-page--sponsor-us #become-a-sponsor .contribute-coc-band__actions .openms-lib-btn--ghost:focus-visible, +.openms-lib-page--sponsor-us #become-a-sponsor .contribute-coc-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 *)):not(:has(.openms-lib-page--privacy *)), +.openms-lib-page--privacy #privacy-help.openms-lib-page__anchor { + 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):not(.openms-lib-page--privacy) + .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):not(.openms-lib-page--privacy) .governance-cta-band { + margin-bottom: 0 !important; +} + +/* Full-bleed navy into footer — rounded top only (inset pages excluded). + Privacy's band is inset (padding-inline via its #related-pages anchor, + same as governance/our-sponsors/sponsor-us), not full-bleed, so it's + excluded here too and keeps all four corners rounded. */ +.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):not(.openms-lib-page--privacy) .governance-cta-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 rgba(var(--openms-navy-rgb), 0.72) !important; + background: transparent !important; + color: var(--openms-navy) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + min-height: var(--openms-btn-min-height, 2.75rem) !important; + height: auto !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; + gap: 0.35rem !important; + transition: var(--openms-btn-motion); +} + +/* Build-from-source OS icons — match ghost label color */ + +#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 { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !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; +} + +#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 { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !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; +} + +/* Platform pills — compact side-by-side (Build from Source + Review PRs) */ + +/* Always show platform CTAs (Build from Source / Review PRs) so hover is usable */ + +/* Platform pills stay on one row; size comes from the shared button tokens */ + + +/* ── 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, +.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, +.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{ + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 0.45rem !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, +.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 { + 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; +} + +/* ===== zz-page-shell.css ===== */ +/* 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; +} + +/* ===== zz-publications-layout.css ===== */ +/* 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); + } +} + +/* ===== zzz-cards-mobile.css ===== */ +/* 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: none !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: none !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; + } +} + +/* ===== zzz-hero-mobile.css ===== */ +/* 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: empty highlight chips stay off on phones. + Chrome labels + trust line are managed in z-hero-sm.css. */ + .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; +} + +html body .home-page__hero { + --hero-diagram-max: 34rem; + --hero-diagram-height: 11.5rem; +} + +html body .home-page__hero .hero-home__diagram { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + width: min(100%, var(--hero-diagram-max)) !important; + max-width: var(--hero-diagram-max) !important; + min-width: 0 !important; + container-type: inline-size !important; + container-name: hero-diagram; +} + +html body .home-page__hero .hero-home__diagram .hero-mockup, +html body .home-page__hero .hero-home__diagram .hero-mockup__stage, +html body .home-page__hero .hero-home__diagram .hero-mockup__chart, +html body .home-page__hero .hero-home__diagram .hero-home__note, +html body .home-page__hero .hero-home__diagram .hero-home__note--under-graphic { + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; +} + +html body .home-page__hero .hero-mockup__chart, +html body .home-page__hero .hero-home__diagram .hero-mockup__chart { + height: var(--hero-diagram-height) !important; + gap: 0.35rem !important; +} + +html body .home-page__hero .hero-home__note, +html body .home-page__hero .hero-home__note--under-graphic { + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: space-between !important; + gap: clamp(0.4rem, 1.5cqi, 0.95rem) !important; + font-size: clamp(0.875rem, 2.9cqi, 1.0625rem) !important; + line-height: 1.35 !important; + white-space: nowrap !important; + overflow: visible !important; +} + +html body .home-page__hero .hero-home__note-item { + display: inline-flex !important; + align-items: center !important; + flex: 0 1 auto !important; + gap: clamp(0.28rem, 0.9cqi, 0.45rem) !important; + min-width: 0 !important; + white-space: nowrap !important; +} + +html body .home-page__hero .hero-home__note-dot { + width: clamp(0.35rem, 1cqi, 0.5rem) !important; + height: clamp(0.35rem, 1cqi, 0.5rem) !important; + flex-shrink: 0 !important; +} + +.home-page__hero .hero-home__eyebrow, +.home-page__hero .hero-home__actions, +.home-page__hero .hero-home__highlights { + justify-content: flex-start !important; + margin-inline: 0 !important; +} + +.home-page__hero .hero-home__note { + margin-inline: 0 !important; +} + +/* ===== zzz-num-strip.css ===== */ +/* 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, +.privacy-pro__summary-index, +.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, +.privacy-pro__item:hover .privacy-pro__summary-index, +.privacy-pro__item:focus-within .privacy-pro__summary-index, +.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; + } +} + +/* ===== zzzz-form-embeds.css ===== */ +/* 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 { + min-height: 560px; +} + +.rp-application__tally-iframe, +.openms-lib-page--research-partnerships .rp-application__tally-iframe { + min-height: 640px !important; + max-height: none !important; + overflow: visible !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; + } + + .services-page__tally-iframe, + .openms-lib-page--services-support .services-page__tally-iframe { + min-height: 620px !important; + max-height: none !important; + overflow: visible !important; + } + + .rp-application__tally-iframe, + .openms-lib-page--research-partnerships .rp-application__tally-iframe { + min-height: 720px !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; + } +} + +/* ===== zzzz-mobile-gutters.css ===== */ +/* 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; + } +} + +/* ===== zzzz-openms-lib-solution.css ===== */ +/* ========================================================================== + 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: clamp(1.1rem, 2.4vw, 1.75rem) !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, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist a.openms-lib-btn--ghost { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: auto !important; + max-width: 100% !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; + 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; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + white-space: nowrap !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 { + color: inherit !important; + -webkit-text-fill-color: inherit !important; + fill: currentColor !important; +} + +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary .fab, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary .fas, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary .openms-lib-btn__label, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary:hover .fab, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary:hover .fas, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary:hover .openms-lib-btn__label, +.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, +.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:hover .fab, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:hover .fas, +.openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:hover .openms-lib-btn__label { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !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: last Contribute card (two buttons) is wider on the right */ +.openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3) { + grid-column: span 4 !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(4) { + grid-column: span 5 !important; +} + +.openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(5) { + grid-column: span 7 !important; +} + +/* 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: nowrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: var(--openms-btn-gap, 0.75rem) !important; + width: 100%; + min-height: 2.75rem; +} + +/* 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{ + 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 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-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__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{ + color: inherit !important; + -webkit-text-fill-color: inherit !important; + fill: currentColor !important; +} + +/* Always show Review CTA icons (pro CSS hides GitHub until card hover) */ + +/* 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{ + 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{ + border-color: var(--openms-blue) !important; + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !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 #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{ + 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: none !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; + } + + .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; + } + + .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3) { + grid-column: span 4 !important; + } + + .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(4) { + grid-column: span 5 !important; + } + + .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(5) { + grid-column: span 7 !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; + } + + +} + +/* ── 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: flex-start !important; + align-items: center !important; + width: auto !important; + gap: 0.3rem 0.5rem !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: 0 !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; + 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: 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; +} + +.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: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-navy-rgb), 0.18) !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: 1fr !important; + gap: 0.9rem !important; + align-items: stretch !important; + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + background: transparent !important; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-head { + display: inline-flex; + align-items: center; + gap: 0.45rem; + 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: 0.95rem; + height: 0.95rem; +} + +.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-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(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !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: repeat(2, minmax(0, 1fr)) !important; + gap: 0.85rem !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.85rem !important; + align-items: start !important; + margin: 0 !important; + padding: 1.05rem 1.15rem !important; + min-height: 100% !important; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1) !important; + border-radius: 1rem !important; + background: var(--openms-white, #fff) !important; + box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.03); +} + +.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: var(--openms-white, #fff) !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-mark { + display: none !important; + content: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-index { + display: inline-flex !important; + align-items: center; + justify-content: center; + min-width: 1.85rem; + height: 1.85rem; + margin: 0.1rem 0 0; + padding: 0; + border-radius: 0.5rem; + background: rgba(var(--openms-blue-rgb), 0.1); + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + font-family: var(--openms-font-heading); + font-size: 0.72rem !important; + font-weight: 700 !important; + letter-spacing: 0.04em; + line-height: 1; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-copy { + margin: 0 !important; + padding: 0 !important; + min-width: 0; + display: grid; + gap: 0.25rem; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-heading { + margin: 0 !important; + color: rgba(var(--openms-dark-rgb), 0.82) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.82) !important; + font-family: var(--openms-font-heading) !important; + font-size: 0.95rem !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; + line-height: 1.3 !important; + text-transform: none !important; +} + +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived__notice-text { + max-width: none !important; + margin: 0 !important; +} + +@media (max-width: 700px) { + .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 { + grid-template-columns: 1fr !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--archived.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__revival { + width: 100% !important; + max-width: none !important; + padding: clamp(2.5rem, 5vw, 3.5rem) var(--pro-card-pad-lg, clamp(1.25rem, 3vw, 2rem)) !important; + border-radius: var(--pro-radius, 0.85rem) !important; + background: + radial-gradient(circle at 100% 0%, rgba(var(--openms-blue-rgb), 0.28), transparent 42%), + var(--openms-navy) !important; + background-image: radial-gradient(circle at 100% 0%, rgba(var(--openms-blue-rgb), 0.28), transparent 42%) !important; + background-color: var(--openms-navy) !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 name" + "logo text" + "maintainers maintainers" + "actions actions" !important; + grid-template-rows: auto auto auto auto !important; + align-items: start !important; + column-gap: 1.25rem !important; + row-gap: 0.55rem !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.openms-lib-page--featured-pro .webapps-project-detail-card__body, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__body { + display: contents !important; +} + +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__name, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__name { + grid-area: name !important; + align-self: start !important; + min-width: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__text, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__text { + grid-area: text !important; + display: block !important; + -webkit-line-clamp: unset !important; + line-clamp: unset !important; + overflow: visible !important; + max-width: none !important; + min-width: 0 !important; +} + +.openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers, +.openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers { + grid-area: maintainers !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; + justify-self: stretch !important; + margin-top: 0.15rem !important; +} + +.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; + width: 100%; + margin-top: 0.15rem; +} + +.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: minmax(0, 1fr) auto !important; + grid-template-areas: + "name logo" + "text logo" + "maintainers maintainers" + "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-start !important; + justify-items: start !important; + width: 100% !important; + margin-left: 0 !important; + margin-right: auto !important; + } + + .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links__item { + flex: 0 0 auto !important; + } +} + +/* ===== zzzzz-type-scale.css ===== */ +/* ============================================================================ + 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: var(--openms-title-transform) !important; + letter-spacing: var(--openms-title-letter-spacing) !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: var(--openms-title-transform) !important; + letter-spacing: var(--openms-title-letter-spacing) !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: var(--openms-title-transform) !important; + letter-spacing: var(--openms-title-letter-spacing) !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); +} + +/* ===== zzzzzz-type-roles.css ===== */ +/* ============================================================================ + 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: var(--openms-eyebrow-letter-spacing) !important; + text-transform: var(--openms-title-transform) !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, +.news-story__back { + 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: var(--openms-btn-icon-gap); + 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:not(.openms-cta-link):not(.sponsor-faq__link), +.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:not(.openms-cta-link):not(.sponsor-faq__link):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, +.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: nowrap !important; + flex-direction: row !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 0.45rem !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 { + 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.35rem !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, +.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; +} + +/* ===== zzzzzzz-no-hover-underline.css ===== */ +/* 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; +} + +/* ===== zzzzzzzz-page-solution-unify.css ===== */ +/* 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 { + padding-bottom: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)); +} + +.openms-lib-page--news-article .openms-lib-page__body > .openms-lib-page__anchor:last-child { + padding-bottom: 0; +} + +.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 .openms-lib-prose { + color: var(--sol-body, rgba(var(--openms-dark-rgb), 0.72)); +} + +html body .openms-lib-page--news-article .openms-lib-prose__toc ul ul ul { + display: none; +} + +@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):not(.openms-cta-link):not(.sponsor-faq__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):not(.openms-cta-link):not(.sponsor-faq__link):not(.webapps-project-links__btn):hover, +.openms-lib-page :is(p, li):not(.governance-card__link) a:not(.openms-lib-btn):not(.openms-cta-link):not(.sponsor-faq__link):not(.webapps-project-links__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, +.openms-lib-page--news-article .news-story__back { + 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; +} + +/* 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--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: 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 #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-white) !important; + -webkit-text-fill-color: var(--openms-white) !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{ + 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 .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 .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 #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--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; +} + +.openms-lib-page--fellowship .fellowship-application__form-card, +.openms-lib-page--fellowship .fellowship-page__form-body { + width: 100% !important; + max-width: 42rem !important; + margin-inline: auto !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; +} + + +@media (max-width: 720px) { + + + +} + +/* 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, +.openms-lib-page--news .community-news-events__press-date, +.openms-lib-page--news a.community-news-events__press-link:hover .community-news-events__press-date, +.openms-lib-page--news a.community-news-events__press-link:focus-visible .community-news-events__press-date, +.openms-lib-page--calendar .community-news-events__press-date, +.openms-lib-page--calendar a.community-news-events__press-link:hover .community-news-events__press-date, +.openms-lib-page--calendar a.community-news-events__press-link:focus-visible .community-news-events__press-date, +.home-page .community-news-events__column--events .community-news-events__press-date, +.home-page .community-news-events__column--events a.community-news-events__press-link:hover .community-news-events__press-date, +.home-page .community-news-events__column--events a.community-news-events__press-link:focus-visible .community-news-events__press-date { + 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 — centered 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: center !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: center !important; + justify-self: center !important; + width: 100%; + max-width: min(100%, 42rem) !important; + margin-inline: auto !important; + text-align: center !important; +} + +.openms-lib-page--fellowship .fellowship-application__form-card { + width: 100% !important; + max-width: 42rem !important; + margin-inline: auto !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; +} + +/* ===== zzzzzzzzz-text-gray.css ===== */ +/* 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); +} + +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--primary, +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--primary:hover, +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--primary:focus-visible, +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--primary .openms-lib-btn__label, +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--primary :is(i, .fas, .fab, svg, .svg-inline--fa, path) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--ghost, +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--ghost:hover, +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--ghost:focus-visible, +html body .openms-lib-page--news-article .openms-lib-hero__actions .openms-lib-btn--ghost .openms-lib-btn__label { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .openms-lib-page--news-article .openms-lib-hero__actions { + justify-content: center; +} + +/* 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 .webapps-archived__revival .openms-lib-btn--ghost, +html body .webapps-archived__revival .openms-lib-btn--ghost:hover, +html body .webapps-archived__revival .openms-lib-btn--ghost:focus-visible, +html body .webapps-archived__revival .openms-lib-btn--ghost:active, +html body .contribute-coc-band .openms-lib-btn--ghost, +html body .contribute-coc-band .openms-lib-btn--ghost:hover, +html body .contribute-coc-band .openms-lib-btn--ghost:focus-visible, +html body .governance-cta-band .openms-lib-btn--ghost, +html body .governance-cta-band .openms-lib-btn--ghost:hover, +html body .governance-cta-band .openms-lib-btn--ghost:focus-visible { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + border-color: rgba(var(--openms-white-rgb), 0.45) !important; + background: transparent !important; + background-color: transparent !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; +} + +/* Need help? — copy + Discord/GitHub buttons in one row on OpenMS-lib */ +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist { + display: flex !important; + flex-direction: column !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: center !important; + gap: 1.15rem !important; + text-align: center !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-copy { + justify-items: center !important; + text-align: center !important; + width: 100% !important; + max-width: min(100%, 38rem) !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-title, +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-text { + text-align: center !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-actions { + justify-content: center !important; + margin-inline: auto !important; +} + +@media (max-width: 800px) { + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist { + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + text-align: center !important; + } + + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-copy { + justify-items: center !important; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + } + + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-title, + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-text { + text-align: center !important; + } + + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-actions { + justify-content: center !important; + margin-inline: auto !important; + } +} + +/* Need help? — Report an issue matches navbar Sponsor us */ +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist-actions { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: flex-start !important; + width: auto !important; + max-width: 100% !important; + margin-inline: 0 !important; + gap: var(--openms-btn-gap, 0.75rem) !important; +} + +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--primary, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:hover, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:focus-visible, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost:active { + display: inline-flex !important; + width: auto !important; + min-height: var(--openms-btn-min-height, 2.75rem) !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: 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-btn-font-size, var(--openms-text-min)) !important; + font-weight: 600 !important; + white-space: nowrap !important; +} + +html body .openms-lib-page--solution #getting-started .openms-lib-resources__assist .openms-lib-btn--ghost :is( + i, .fab, .fas, .fa-github, .svg-inline--fa, .openms-lib-btn__label +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !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 { + display: inline-flex !important; + align-items: center; + gap: 0.85rem !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; +} + +html body .openms-lib-page--publications #key-publications .publications-cite-card__action:hover, +html body .openms-lib-page--publications #key-publications .publications-cite-card__action:focus-visible, +html body .openms-lib-page--publications .publications-cite-card__action:hover, +html body .openms-lib-page--publications .publications-cite-card__action:focus-visible, +html body .publications-cite-card__action:hover, +html body .publications-cite-card__action:focus-visible { + gap: 1rem !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; +} + +html body .openms-lib-page--publications .publications-more { + margin-top: 0.75rem !important; + margin-bottom: clamp(2.75rem, 7vw, 4.5rem) !important; +} + +html body .openms-lib-page--publications .publications-toolbar { + flex-direction: row !important; + align-items: center !important; + justify-content: flex-end !important; +} + +html body .openms-lib-page--publications .publications-toolbar__filter { + width: auto !important; + min-width: 0 !important; + max-width: 100% !important; + flex-direction: row !important; + align-items: center !important; + margin-left: auto !important; +} + +html body .openms-lib-page--publications .publications-toolbar__select { + width: auto !important; + min-width: 128px !important; + max-width: 100% !important; + min-height: 0 !important; + height: 2rem !important; + padding: 0.2rem 1.75rem 0.2rem 0.65rem !important; + font-size: 0.8125rem !important; + line-height: 1.25 !important; + background-position: right 0.55rem center !important; + background-size: 0.625rem 0.4375rem !important; +} + +html body .openms-lib-layout:has(> .openms-lib-page--news:not(.openms-lib-page--news-article)), +html body .content-padding:has(.openms-lib-page--news:not(.openms-lib-page--news-article)) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; + background: var(--sol-canvas, #f8f8f9) !important; +} + +html body .openms-lib-layout:has(> .openms-lib-page--news:not(.openms-lib-page--news-article)) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--news:not(.openms-lib-page--news-article)) + #footer.footer-redesign { + margin-top: 0 !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-pager { + margin-top: 1.25rem !important; + margin-bottom: clamp(2.75rem, 6vw, 4.25rem) !important; + padding-bottom: 0 !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-toolbar { + flex-direction: row !important; + align-items: center !important; + justify-content: flex-end !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-toolbar__filter { + width: auto !important; + min-width: min(100%, 9rem) !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-toolbar__select { + width: auto !important; + min-width: 128px !important; + min-height: 40px !important; + height: 40px !important; + padding: 6px 32px 6px 14px !important; + font-size: 16px !important; + line-height: 1.25 !important; + background-position: right 12px center !important; + background-size: auto !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .openms-lib-page__body > .openms-lib-page__anchor:last-child { + padding-bottom: 0 !important; + margin-bottom: 0 !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 — outline pills spanning the card */ +html body .openms-lib-page--contact .contact-path-socials { + display: flex !important; + flex-wrap: nowrap; + align-items: stretch; + align-self: stretch; + width: 100% !important; + max-width: 100%; + gap: var(--openms-btn-gap, 0.75rem); + box-sizing: border-box; +} + +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; + flex: 1 1 0 !important; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + box-sizing: border-box !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; +} + + +/* 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: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: var(--pro-section-y, clamp(3rem, 6vw, 4.5rem)) !important; + } + + html body .openms-lib-page--calendar .community-events-page__section { + display: grid !important; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; + align-items: start !important; + width: 100% !important; + } + + html body .openms-lib-page--calendar .community-events-page__header, + html body .openms-lib-page--calendar .events-past-toolbar { + align-self: stretch !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 { + width: 100% !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; + width: 100% !important; + max-width: none !important; + min-width: 0 !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:not(.openms-lib-page--news-article) .news-entry, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-home__item, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-home__card, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .community-news-events__press-card { + width: 100% !important; + max-width: none !important; + min-width: 0 !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) :is( + .community-news-events__press-title, + .news-home__card-title, + .community-news-events__press-summary, + .news-home__card-summary, + .community-news-events__press-location, + .news-home__card-authors +) { + display: block !important; + width: 100% !important; + max-width: none !important; + min-width: 0 !important; + box-sizing: border-box !important; + text-wrap: wrap !important; + overflow-wrap: break-word !important; +} + +html body .openms-lib-page--news .community-news-events__press-link .community-news-events__press-date, +html body .openms-lib-page--news a.community-news-events__press-link:hover .community-news-events__press-date, +html body .openms-lib-page--news a.community-news-events__press-link:focus-visible .community-news-events__press-date, +html body .home-page .community-news-events__column--news .community-news-events__press-link .community-news-events__press-date, +html body .home-page .community-news-events__column--news a.community-news-events__press-link:hover .community-news-events__press-date, +html body .home-page .community-news-events__column--news a.community-news-events__press-link:focus-visible .community-news-events__press-date { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .community-news-events__press-meta { + width: 100% !important; + max-width: none !important; + min-width: 0 !important; + flex-wrap: wrap !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(--sol-title, rgba(var(--openms-dark-rgb), 0.82)) !important; + -webkit-text-fill-color: var(--sol-title, rgba(var(--openms-dark-rgb), 0.82)) !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 — links blue at rest; white on card hover */ +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__cta, +html body .openms-lib-page--contribute #ways-to-contribute .contribute-project-link, +html body .openms-lib-page--contribute #ways-to-contribute .contribute-project-link__name { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +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, + i, + strong, + .contribute-track__title, + .contribute-track__text, + .contribute-track__icon, + .fab, + .fas, + .svg-inline--fa +):not(.contribute-track__cta):not(.contribute-project-link):not(.contribute-project-link__name):not(.openms-lib-btn__label) { + 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, + .contribute-project-link__name +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.35) !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 and text 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__contact a:is(:hover, :focus-visible), +html body .openms-lib-page--contribute .contribute-outreach__social-link:is(:hover, :focus-visible), +html body .openms-lib-page--contribute .contribute-outreach__social-link:is(:hover, :focus-visible) :is( + .contribute-outreach__social-label, + .contribute-outreach__social-hint, + .contribute-outreach__social-arrow, + .contribute-outreach__social-icon, + 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: stretch !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, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__route, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__route:hover, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__route:focus-visible { + height: 100% !important; + min-height: var(--openms-equal-card-min-h, 14.5rem) !important; + max-height: none !important; + align-self: stretch !important; + transform: none !important; + top: auto !important; + margin-top: 0 !important; + box-sizing: border-box !important; +} + +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:is(:hover, :focus-within) .openms-lib-developers__card-hover { + max-height: 0 !important; + opacity: 0 !important; + overflow: hidden !important; + margin: 0 !important; + padding: 0 !important; +} + +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card: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--pyopenms-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within), +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card--box:is(:hover, :focus-within), +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card--interactive:is(:hover, :focus-within) { + border-width: 1px !important; + transform: none !important; + height: 100% !important; +} + +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__platforms { + flex-wrap: nowrap !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{ + 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; + transform: none !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; +} + +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platforms, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__card-cta, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src: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__card-cta { + display: flex !important; + flex-direction: row !important; + flex-wrap: wrap !important; + align-items: stretch !important; + align-self: stretch !important; + justify-content: flex-start !important; + gap: var(--openms-btn-gap) !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src .openms-lib-developers__platform-btn, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src a.openms-lib-btn.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, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--build-src:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn { + flex: 1 1 auto !important; + width: fit-content !important; + min-width: 0 !important; + max-width: 100% !important; + align-self: stretch !important; + box-sizing: border-box !important; + justify-content: center !important; + min-height: var(--openms-btn-min-height) !important; + height: auto !important; + padding: var(--openms-btn-padding) !important; + border-width: var(--openms-btn-border-width) !important; + border-radius: var(--openms-btn-pill-radius) !important; + font-family: var(--openms-btn-font-family) !important; + font-size: var(--openms-btn-font-size) !important; + font-weight: var(--openms-btn-weight) !important; + line-height: var(--openms-btn-line-height) !important; + white-space: nowrap !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__column--news .community-news-events__column-title, +html body .home-page .community-events-home--with-news .community-news-events__column--news .community-news-events__column-title-accent { + white-space: nowrap !important; + overflow-wrap: normal !important; + word-break: keep-all !important; + min-width: 0 !important; + max-width: none !important; + 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__column--news .news-home__item, +html body .home-page .community-events-home--with-news .community-news-events__column--news .news-home__card, +html body .home-page .community-events-home--with-news .community-news-events__column--news .community-news-events__press-card, +html body .home-page .community-events-home--with-news .community-news-events__column--news .community-news-events__press-link { + min-width: 0 !important; + max-width: 100% !important; +} + +html body .home-page .community-events-home--with-news .community-news-events__column--news .community-news-events__press-title, +html body .home-page .community-events-home--with-news .community-news-events__column--news .news-home__card-title { + display: block !important; + box-sizing: border-box !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + font-size: clamp(0.95rem, 2.6vw, 1.1rem) !important; + line-height: 1.3 !important; + white-space: normal !important; + overflow-wrap: anywhere !important; + word-break: break-word !important; + text-wrap: pretty !important; + hyphens: auto !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; + white-space: normal !important; + overflow-wrap: anywhere !important; + min-width: 0 !important; + max-width: 100% !important; +} + +html body .home-page .community-events-home--with-news .community-news-events__press-summary, +html body .home-page .community-events-home--with-news .news-home__card-summary { + white-space: normal !important; + overflow-wrap: anywhere !important; + min-width: 0 !important; + max-width: 100% !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 #quote, +html body .openms-lib-page--services-support .services-support-application { + padding-bottom: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !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: 560px !important; + max-height: none !important; + overflow: visible !important; + margin: 0 !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--services-support .services-page__tally-iframe { + min-height: 620px !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: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; +} + +html body .openms-lib-page--contribute #ways-to-contribute.openms-lib-page__anchor { + padding-top: clamp(2rem, 4.25vw, 3.25rem) !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: copy gray; numbers stay blue watermarks */ +html body .openms-lib-page--code-of-conduct .coc-principle, +html body .openms-lib-page--code-of-conduct .coc-principle :is( + h3, + p, + .coc-principle__title, + .coc-principle__text +), +html body .openms-lib-page--code-of-conduct .coc-principle:is(:hover, :focus-within) :is( + h3, + p, + .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; +} + +html body .openms-lib-page--code-of-conduct .coc-principle__num, +html body .openms-lib-page--code-of-conduct .coc-principle .coc-principle__num { + color: rgba(var(--openms-blue-rgb), 0.38) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.38) !important; +} + +html body .openms-lib-page--code-of-conduct .coc-principle:is(:hover, :focus-within) .coc-principle__num { + color: rgba(var(--openms-blue-rgb), 0.55) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.55) !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: max-content !important; + width: auto !important; + --openms-page-hero-title-size: clamp(1.65rem, 1.05rem + 3.6vw, 3.15rem) !important; + font-size: var(--openms-page-hero-title-size) !important; + line-height: 1.12 !important; + overflow-wrap: normal !important; + word-break: normal !important; + hyphens: manual; + box-sizing: border-box !important; + padding-inline: 0.25rem !important; +} + +html body .openms-lib-page--developer-retreat .openms-lib-hero__title-line { + display: block !important; + margin-left: auto !important; + margin-right: auto !important; + max-width: none !important; + white-space: nowrap !important; + text-wrap: unset !important; +} + +html body .openms-lib-page--developer-retreat .openms-lib-hero__lead { + max-width: min(42rem, 100%) !important; +} + +@media (min-width: 1100px) { + html body .openms-lib-page--developer-retreat .openms-lib-hero__title { + max-width: max-content !important; + } + + html body .openms-lib-page--developer-retreat .openms-lib-hero__title-line { + white-space: nowrap !important; + text-wrap: unset !important; + } +} + +/* Contributors — Executive Committee: 3 across on md, 2 on phones */ +@media (max-width: 1100px) { + 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(3, minmax(0px, 1fr)) !important; + } +} + +@media (max-width: 720px) { + html body .openms-lib-page--contributors #executive-committee .members, + html body .openms-lib-page--contributors .contributors-exec-gallery .members { + 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 { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + padding-inline: var(--openms-page-inline) !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--contributors #join-community .webapps-archived__revival { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; +} + +html body .openms-lib-page--contributors .openms-lib-page__body > #leadership.openms-lib-page__anchor, +html body .openms-lib-page--contributors .openms-lib-page__body > #leadership.openms-lib-page__anchor:first-child, +html body .openms-lib-page--hub.openms-lib-page--contributors .openms-lib-page__body > #leadership.openms-lib-page__anchor:first-child { + padding-top: 0 !important; + padding-block: 0 !important; +} + +html body .openms-lib-page--contributors #leadership .openms-lib-resources { + padding-top: clamp(2rem, 4vw, 2.75rem) !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; +} + +@media (max-width: 1100px) { + html body .openms-lib-page--solution #for-developers .openms-lib-developers__cards-grid, + html body .openms-lib-page--solution.openms-lib-page--hub #for-developers .openms-lib-developers__cards-grid { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + html body .openms-lib-page--solution #for-developers .openms-lib-developers__cards-grid > *, + html body .openms-lib-page--solution #for-developers .openms-lib-developers__cards-grid > :last-child{ + grid-column: auto !important; + } + + html body #for-developers .openms-lib-developers__card-subtitle { + display: block !important; + } +} + +@media (max-width: 700px) { + html body .openms-lib-page--solution #for-developers .openms-lib-developers__cards-grid, + html body .openms-lib-page--solution.openms-lib-page--hub #for-developers .openms-lib-developers__cards-grid { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +/* Sponsor FAQ — accordion questions + in-answer links */ +html body .openms-lib-page--sponsor-us .sponsor-faq-pro__inner { + grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr) !important; + align-items: start; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__list { + width: 100%; + max-width: none; + justify-self: stretch; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__item { + overflow: hidden; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__question { + display: flex !important; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + width: 100%; + margin: 0; + padding: 0.7rem 0.95rem; + list-style: none; + cursor: pointer; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size) !important; + font-weight: 700 !important; + line-height: 1.35; + text-align: left; + background: transparent; + transition: color 0.15s ease, background 0.15s ease; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__question::-webkit-details-marker { + display: none; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__question::marker { + content: ""; + font-size: 0; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__question-text { + flex: 1 1 auto; + min-width: 0; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__chevron { + flex: 0 0 auto; + width: 0.55rem; + height: 0.55rem; + margin-top: -0.2rem; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; + transform: rotate(45deg); + transition: transform 0.15s ease; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__question:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__question:focus-visible { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + background: rgba(var(--openms-blue-rgb), 0.04); + outline: none; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__question:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__question:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + background: rgba(var(--openms-blue-rgb), 0.04); +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__question { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__chevron { + transform: rotate(225deg); + margin-top: 0.15rem; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__answer { + padding: 0 0.95rem 0.9rem; + border-top: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.08)); +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__answer p { + margin: 0.9rem 0 0; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__answer a, +html body .openms-lib-page--sponsor-us .sponsor-faq__link { + display: inline-flex !important; + align-items: baseline; + gap: 0.28rem; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + font-weight: 700 !important; + text-decoration: none !important; + text-decoration-thickness: 1px; + text-underline-offset: 0.18em; + transition: gap 0.2s ease, color 0.15s ease; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__answer a span[aria-hidden="true"], +html body .openms-lib-page--sponsor-us .sponsor-faq__link span[aria-hidden="true"] { + display: inline-block !important; + color: inherit !important; + -webkit-text-fill-color: inherit !important; + font-weight: 400 !important; + text-decoration: none !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__answer a:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__answer a:focus-visible, +html body .openms-lib-page--sponsor-us .sponsor-faq__link:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__link:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + gap: 0.42rem; + outline: none; +} + +@media (max-width: 992px) { + html body .openms-lib-page--sponsor-us .sponsor-faq-pro__inner { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--sponsor-us .sponsor-faq__list { + max-width: none !important; + width: 100% !important; + justify-self: stretch; + } + + html body .openms-lib-page--sponsor-us .sponsor-faq__item, + html body .openms-lib-page--sponsor-us .sponsor-faq__question { + width: 100% !important; + } + + html body .openms-lib-page--sponsor-us .sponsor-faq-pro__cta { + width: fit-content !important; + max-width: 100% !important; + justify-content: center !important; + align-self: flex-start !important; + } + + html body .openms-lib-page--sponsor-us .sponsor-faq__answer a, + html body .openms-lib-page--sponsor-us .sponsor-faq__link { + display: inline-flex !important; + width: auto !important; + max-width: 100% !important; + justify-content: flex-start !important; + align-items: baseline !important; + gap: 0.35rem !important; + margin-top: 0 !important; + padding: 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-weight: 700 !important; + text-decoration: underline !important; + text-decoration-thickness: 1px !important; + text-underline-offset: 0.18em !important; + white-space: normal !important; + } +} + +/* Sponsorship levels — navy outline + navy label */ +html body .openms-lib-page--sponsor-us .sponsor-tier__cta, +html body .openms-lib-page--sponsor-us .sponsor-tier__cta.openms-lib-btn, +html body .openms-lib-page--sponsor-us .sponsor-tier__cta.openms-lib-btn--primary, +html body .openms-lib-page--sponsor-us .sponsor-tier__cta.openms-lib-btn--ghost, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured .sponsor-tier__cta, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta, +html body .openms-lib-page--sponsor-us .sponsor-tier:hover .sponsor-tier__cta, +html body .openms-lib-page--sponsor-us .sponsor-tier:focus-within .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) !important; + height: auto !important; + margin-top: auto !important; + padding: var(--openms-btn-padding) !important; + border: var(--openms-btn-border-width) solid var(--openms-navy) !important; + border-radius: var(--openms-btn-pill-radius) !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-btn-font-family) !important; + font-size: var(--openms-btn-font-size) !important; + font-weight: var(--openms-btn-weight) !important; + line-height: var(--openms-btn-line-height) !important; + white-space: nowrap !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow-navy) !important; + transform: none !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tier__cta .sponsor-tier__cta-label, +html body .openms-lib-page--sponsor-us .sponsor-tier__cta .openms-lib-btn__label { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:hover, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:focus-visible, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:focus-visible .sponsor-tier__cta, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured .sponsor-tier__cta:hover, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active .sponsor-tier__cta:hover { + 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; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + transform: scale(var(--openms-btn-hover-scale)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb), 0.18) !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:hover .sponsor-tier__cta-label, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:hover .openms-lib-btn__label, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:focus-visible .sponsor-tier__cta-label, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__cta:focus-visible .openms-lib-btn__label, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:focus-visible .sponsor-tier__cta .sponsor-tier__cta-label, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier__toggle:focus-visible .sponsor-tier__cta .openms-lib-btn__label { + background: transparent !important; + background-color: transparent !important; + border: 0 !important; + box-shadow: none !important; + transform: none !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +/* Navy-outline pills — same hover as navbar “Sponsor Us”. + Omit .about-cta-btn--donate: hero “Explore” + navbar CTAs use their own hovers; + a :is()+many-:not() rule out-specs late hero white-fill. */ +html body :is( + .openms-lib-btn--ghost, + .openms-lib-btn--outline, + .openms-lib-developers__platform-btn, + .sponsor-tier__cta, + a.contact-path-social +):not(.openms-lib-btn--primary):not(.footer-donate-btn):not(.openms-lib-cta-band__btn-ghost):not(.webapps-project-links__btn--demo):not(.webapps-project-links__btn--nfcore):not(.openms-lib-developers__platform-btn):is(:hover, :focus-visible, :active), +html body .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary):is(:hover, :focus-visible, :active), +html body .openms-lib-developers__card--interactive:is(:hover, :focus-within) .openms-lib-developers__platform-btn:is(:hover, :focus-visible), +html body .openms-lib-page--contact a.contact-path-social:is(:hover, :focus-visible) { + 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; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + transform: scale(var(--openms-btn-hover-scale)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size) rgba(var(--openms-navy-rgb), 0.18) !important; + outline: none; + text-decoration: none !important; +} + +html body :is( + .openms-lib-btn--ghost, + .openms-lib-btn--outline, + .openms-lib-developers__platform-btn, + .sponsor-tier__cta, + a.contact-path-social, + .contribute-os-buttons .openms-lib-btn +):not(.openms-lib-btn--primary):not(.openms-lib-cta-band__btn-ghost):not(.webapps-project-links__btn--demo):not(.webapps-project-links__btn--nfcore):is(:hover, :focus-visible, :active) :is( + i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, .sponsor-tier__cta-label, span, .navbar-cta-label +), +html body .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:is(:hover, :focus-visible, :active) :is( + i, .fab, .fas, .svg-inline--fa, span +) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: currentColor !important; +} + +/* Filled Demo / first pill: same hover as navbar “Partner with OpenMS” */ +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--affiliated .webapps-project-links__btn--demo:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore:is(:hover, :focus-visible, :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, 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; +} + +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, .fa-play-circle, svg, .svg-inline--fa, path), +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, .fa-play-circle, svg, .svg-inline--fa, path), +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived-entry--nfcore .webapps-project-links__btn--nfcore:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived-entry .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:is(:hover, :focus-visible) i::before, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:is(:hover, :focus-visible) .fa-play-circle::before { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +/* Dark bands: keep white outline; only scale + glow like Sponsor Us motion */ +html body .openms-lib-page :is( + .contribute-coc-band, + .governance-cta-band, + .webapps-archived__revival +) a.openms-lib-btn:is(.openms-lib-btn--ghost, .openms-lib-cta-band__btn-ghost):is(:hover, :focus-visible, :active) { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !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; +} + +html body .openms-lib-page :is( + .contribute-coc-band, + .governance-cta-band, + .webapps-archived__revival +) a.openms-lib-btn:is(.openms-lib-btn--ghost, .openms-lib-cta-band__btn-ghost):is(:hover, :focus-visible, :active) :is( + i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, .openms-lib-btn__icon, span +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; + opacity: 1 !important; +} + +html body .openms-lib-page--publications .openms-lib-btn--scholar:is(:hover, :focus-visible, :active), +html body .openms-lib-page--publications .openms-lib-btn--scholar:is(:hover, :focus-visible, :active) :is( + .openms-lib-btn__label, .openms-lib-btn__icon, span +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + opacity: 1 !important; +} + +html body .openms-lib-page--publications .openms-lib-hero__actions .openms-lib-btn--scholar:is(:hover, :focus-visible, :active) { + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + overflow: visible !important; +} + +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active) { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !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; +} + +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is( + .openms-lib-btn__label, span +) { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + opacity: 1 !important; +} + +html body .openms-lib-page--contact #get-help a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contact #get-help a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active) { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !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; +} + +html body .openms-lib-page--contact #get-help a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is( + .openms-lib-btn__label, span +) { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + opacity: 1 !important; +} + +html body .openms-lib-page--contribute .contribute-track__item:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn, +html body .openms-lib-page--contribute .contribute-track__item:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn--ghost, +html body .openms-lib-page--contribute .contribute-track__item:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn:is(:hover, :focus-visible, :active) { + background: transparent !important; + background-color: transparent !important; + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page--contribute .contribute-track__item:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn :is( + i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, span +) { + background: transparent !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +/* For Developers cards — same size and position at rest and hover */ +html body #for-developers .openms-lib-developers__cards-grid { + align-items: stretch !important; +} + +html body #for-developers .openms-lib-developers__card, +html body #for-developers .openms-lib-developers__card--box, +html body #for-developers .openms-lib-developers__card--interactive, +html body #for-developers .openms-lib-developers__card--link, +html body #for-developers .openms-lib-developers__card:hover, +html body #for-developers .openms-lib-developers__card:focus-visible, +html body #for-developers .openms-lib-developers__card:focus-within, +html body #for-developers .openms-lib-developers__card--interactive:hover, +html body #for-developers .openms-lib-developers__card--interactive:focus-within, +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:hover, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card:focus-within, +html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover, +html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within, +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card, +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card:hover, +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card:focus-within, +html body .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:hover, +html body .openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__card--interactive:focus-within, +html body .openms-lib-page--webapps #for-developers .openms-lib-developers__card, +html body .openms-lib-page--webapps #for-developers .openms-lib-developers__card:hover, +html body .openms-lib-page--webapps #for-developers .openms-lib-developers__card:focus-within, +html body .openms-lib-page--webapps-pro #for-developers .openms-lib-developers__card, +html body .openms-lib-page--webapps-pro #for-developers .openms-lib-developers__card:hover, +html body .openms-lib-page--webapps-pro #for-developers .openms-lib-developers__card:focus-within, +html body .openms-lib-page--webapps-pro .openms-lib-developers__card--interactive:hover, +html body .openms-lib-page--webapps-pro .openms-lib-developers__card--interactive:focus-within, +html body .openms-lib-page--webapps-pro .openms-lib-developers__route:hover, +html body .openms-lib-page--webapps-pro .openms-lib-developers__route:focus-visible { + transform: none !important; + top: auto !important; + margin-top: 0 !important; + height: 100% !important; + min-height: var(--openms-equal-card-min-h, 14.5rem) !important; + max-height: none !important; + align-self: stretch !important; + box-sizing: border-box !important; +} + +html body #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__platforms, +html body #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-cta { + max-height: none !important; +} + +/* Publications — same section rhythm as /openms-lib/ */ +html body .openms-lib-page--publications #key-publications .openms-lib-resources__inner, +html body .openms-lib-page--publications #publications-list .openms-lib-resources__inner { + width: 100% !important; + max-width: var(--pro-max, 72rem) !important; + margin-inline: auto !important; + padding-inline: var(--openms-page-inline, 1.5rem) !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--publications .openms-lib-resources__head, +html body .openms-lib-page--publications .publications-featured .openms-lib-resources__head, +html body .openms-lib-page--publications .publications-bibliography > .openms-lib-resources__head { + display: grid !important; + justify-items: start !important; + width: 100% !important; + max-width: min(100%, 36rem) !important; + margin: 0 0 var(--pro-head-to-content, clamp(2rem, 4vw, 2.75rem)) !important; + margin-inline: 0 !important; + text-align: left !important; +} + +html body .openms-lib-page--publications .openms-lib-resources__head :is( + .openms-lib-resources__eyebrow, + .openms-lib-resources__title, + .openms-lib-resources__lead +) { + justify-self: start !important; + text-align: left !important; + margin-inline: 0 !important; +} + +html body .openms-lib-page--fellowship .fellowship-application__head { + display: grid !important; + justify-items: center !important; + text-align: center !important; +} + +html body .openms-lib-page--fellowship .fellowship-application__head .openms-lib-resources__eyebrow { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: fit-content !important; + max-width: 100% !important; + justify-self: center !important; + margin-inline: auto !important; + text-align: center !important; +} + +html body .openms-lib-page--fellowship .fellowship-application__head .openms-lib-resources__title, +html body .openms-lib-page--fellowship .fellowship-application__head .openms-lib-resources__lead { + width: 100% !important; + text-align: center !important; + justify-self: center !important; + margin-inline: auto !important; +} + +html body .openms-lib-page--publications .publications-featured__list { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 0.85rem !important; + width: 100% !important; +} + +html body .openms-lib-page--publications .publications-featured .publications-cite-card, +html body .openms-lib-page--publications .publications-featured .publications-cite-card:hover, +html body .openms-lib-page--publications .publications-featured .publications-cite-card:focus-within { + display: grid !important; + align-content: start !important; + height: 100% !important; + padding: 1.5rem 1.35rem !important; + border-radius: var(--sol-radius, 1.15rem) !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; + transform: none !important; +} + +@media (max-width: 899px) { + html body .openms-lib-page--publications .publications-featured__list { + grid-template-columns: 1fr !important; + } +} + +/* Homepage projects — one logo size at every viewport */ +html body .home-page .home-page__block--projects .webapps-project-card--catalog { + --projects-logo-height: 104px; +} + +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo { + height: 104px !important; + max-height: 104px !important; + max-width: min(22rem, 100%) !important; +} + +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="naseweis" i] { + height: 68px !important; + max-height: 68px !important; +} + +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="openDDA" i], +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="mhcquant" i], +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="nuxl" i] { + height: 132px !important; + max-height: 132px !important; + max-width: min(22rem, 100%) !important; +} + +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta, +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta-label { + font-family: var(--openms-font-body) !important; + font-size: var(--openms-body-size) !important; + font-weight: 700 !important; + line-height: 1.3 !important; +} + +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta-icon { + font-size: 1.05em !important; + line-height: 1 !important; +} + +@media (max-width: 720px) { + html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="flashapp" i]) .webapps-project-card__name, + html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="OpenDIAKiosk" i]) .webapps-project-card__name, + html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="umetaflow" i]) .webapps-project-card__name, + html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="openDDA" i]) .webapps-project-card__name, + html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="mhcquant" i]) .webapps-project-card__name, + html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="nuxl" i]) .webapps-project-card__name, + html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="naseweis" i]) .webapps-project-card__name { + display: none !important; + } +} + +/* Homepage projects — OpenDDA / MHCquant / NuXL: logos sit on the left */ +html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="openDDA" i]) .webapps-project-card__logo-wrap, +html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="mhcquant" i]) .webapps-project-card__logo-wrap, +html body .home-page .home-page__block--projects .webapps-project-card--catalog:has(.webapps-project-card__logo[src*="nuxl" i]) .webapps-project-card__logo-wrap { + justify-content: flex-start !important; + align-self: stretch !important; + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + overflow: visible !important; +} + +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="openDDA" i], +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="mhcquant" i], +html body .home-page .home-page__block--projects .webapps-project-card--catalog .webapps-project-card__logo[src*="nuxl" i] { + display: block !important; + /* These three logo files carry built-in canvas whitespace around the + mark itself, so even flush-left placement (margin-left: 0) still + reads as offset from the card edge. Nudge left to compensate. */ + margin-left: -0.75rem !important; + margin-right: auto !important; + max-width: min(22rem, 100%) !important; + object-fit: contain !important; + object-position: left center !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--developer-retreat), +html body .content-padding:has(.openms-lib-page--developer-retreat) { + padding-bottom: 0 !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--developer-retreat) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--developer-retreat) + #footer.footer-redesign { + margin-top: 0 !important; + padding-top: 0 !important; +} + +html body .openms-lib-page--developer-retreat .openms-lib-page__body > .openms-lib-page__anchor:last-child, +html body .openms-lib-page--developer-retreat #past-retreat { + padding-bottom: clamp(4.5rem, 10vw, 7rem) !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__head, +html body .openms-lib-page--code-of-conduct .coc-overview .openms-lib-about__lead { + max-width: min(100%, 54rem) !important; +} + +html body .openms-lib-page--code-of-conduct .coc-overview .coc-overview__lead-line { + display: block !important; +} + +html body .openms-lib-page--code-of-conduct .coc-report__link, +html body .openms-lib-page--code-of-conduct .coc-report__link:hover, +html body .openms-lib-page--code-of-conduct .coc-report__link:focus-visible, +html body .openms-lib-page--code-of-conduct .coc-report__link span[aria-hidden="true"], +html body .openms-lib-page--code-of-conduct .coc-report__text a, +html body .openms-lib-page--code-of-conduct .coc-report__text a:hover, +html body .openms-lib-page--code-of-conduct .coc-report__text a:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:visited, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo :is(span, .openms-lib-btn__label), +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover :is(span, .openms-lib-btn__label), +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible :is(span, .openms-lib-btn__label), +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:visited :is(span, .openms-lib-btn__label), +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo :is(i, .fab, .fas, .fa-play-circle, svg, .svg-inline--fa, path), +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:visited :is(i, .fab, .fas, .fa-play-circle, svg, .svg-inline--fa, path), +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo i::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo i::after, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo .fa-play-circle::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo .fas::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:visited i::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:visited .fa-play-circle::before { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links, +html body .openms-lib-page--affiliated .webapps-project-links, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links { + overflow: visible !important; + padding: var(--openms-btn-glow-size, 6px) !important; + margin: calc(var(--openms-btn-glow-size, 6px) * -1) !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card, +html body .openms-lib-page--affiliated .webapps-project-detail-card, +html body .openms-lib-page--archived .webapps-archived-entry, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item, +html body .openms-lib-page--affiliated .webapps-affiliates__item, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail, +html body .openms-lib-page--affiliated .webapps-affiliates__grid, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured--page, +html body .openms-lib-page--featured.openms-lib-page--featured-pro section.webapps-featured, +html body .openms-lib-page--affiliated .webapps-affiliates, +html body .openms-lib-page--archived .webapps-archived, +html body .openms-lib-page--featured.openms-lib-page--featured-pro #featured-webapps, +html body .openms-lib-page--affiliated #affiliated-apps, +html body .openms-lib-page--archived #archived-apps, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .openms-lib-page__anchor:has(.webapps-featured), +html body .openms-lib-page--affiliated .openms-lib-page__anchor:has(.webapps-affiliates), +html body .openms-lib-page--archived .openms-lib-page__anchor:has(.webapps-archived) { + overflow: visible !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore { + overflow: visible !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: scale(1); + transition: var(--openms-btn-motion) !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:active, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:hover, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:focus-visible, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:active, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:hover, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:focus-visible, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:active, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:hover, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:focus-visible, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore: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, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) var(--openms-btn-glow, rgba(var(--openms-blue-rgb), 0.22)) !important; + outline: none; + text-decoration: none !important; + text-shadow: none; + z-index: 1; +} + +/* Featured / Affiliated Apps blue pills — match site primary blue CTA hover (scale + glow) */ +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--featured.openms-lib-page--featured-pro a.webapps-project-links__btn--demo:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro a.webapps-project-links__btn--demo:is(:hover, :focus-visible, :active), +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :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, 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; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, .fa-play-circle, svg, .svg-inline--fa, path), +html body .openms-lib-page--featured.openms-lib-page--featured-pro a.webapps-project-links__btn--demo:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, .fa-play-circle, svg, .svg-inline--fa, path), +html body .openms-lib-page--featured.openms-lib-page--featured-pro a.webapps-project-links__btn--demo:is(:hover, :focus-visible, :active) i::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro a.webapps-project-links__btn--demo:is(:hover, :focus-visible, :active) .fa-play-circle::before, +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:active, + html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:hover, + html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:focus-visible, + html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:active, + html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:hover, + html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:focus-visible, + html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--demo:active, + html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:hover, + html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:focus-visible, + html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--nfcore:active { + 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, rgba(var(--openms-blue-rgb), 0.22)) !important; + } +} +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible :is(i, .fab, .fas, .fa-play-circle, svg, .svg-inline--fa, path), +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover i::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover i::after, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover .fa-play-circle::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:hover .fas::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible i::before, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__btn--demo:focus-visible .fa-play-circle::before { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn, +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:hover, +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:focus-visible, +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:visited, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:hover, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:focus-visible, +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:visited, +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn :is(i, span, .fab, .fas, svg, .svg-inline--fa), +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:hover :is(i, span, .fab, .fas, svg, .svg-inline--fa), +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:focus-visible :is(i, span, .fab, .fas, svg, .svg-inline--fa), +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:visited :is(i, span, .fab, .fas, svg, .svg-inline--fa), +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo :is(i, span, .fab, .fas, svg, .svg-inline--fa), +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:hover :is(i, span, .fab, .fas, svg, .svg-inline--fa), +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:focus-visible :is(i, span, .fab, .fas, svg, .svg-inline--fa), +html body .openms-lib-page--affiliated .webapps-project-links__btn--demo:visited :is(i, span, .fab, .fas, svg, .svg-inline--fa) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--featured.openms-lib-page--featured-pro), +html body .content-padding:has(.openms-lib-page--featured.openms-lib-page--featured-pro), +html body .openms-lib-layout:has(.openms-lib-page--archived.openms-lib-page--featured-pro), +html body .content-padding:has(.openms-lib-page--archived.openms-lib-page--featured-pro) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--featured.openms-lib-page--featured-pro) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--featured.openms-lib-page--featured-pro) + #footer.footer-redesign, +html body .openms-lib-layout:has(.openms-lib-page--archived.openms-lib-page--featured-pro) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--archived.openms-lib-page--featured-pro) + #footer.footer-redesign { + margin-top: 0 !important; + padding-top: 0 !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .openms-lib-page__body, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .openms-lib-page__body > .openms-lib-page__anchor:last-child, +html body .openms-lib-page--featured.openms-lib-page--featured-pro #featured-webapps, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured--page, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-modern-wrap--page { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--archived.openms-lib-page--featured-pro .openms-lib-page__body, +html body .openms-lib-page--archived.openms-lib-page--featured-pro .openms-lib-page__body > .openms-lib-page__anchor:last-child, +html body .openms-lib-page--archived.openms-lib-page--featured-pro #archived-apps { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived, +html body .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog { + padding-bottom: clamp(3rem, 7vw, 5rem) !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--publications #publications-list, +html body .openms-lib-page--publications #publications-list.openms-lib-page__anchor, +html body .openms-lib-page--publications .openms-lib-page__body > #publications-list.openms-lib-page__anchor { + padding-bottom: clamp(4rem, 9vw, 6.5rem) !important; +} + +html body .openms-lib-page--publications #publications-list .openms-lib-resources__inner, +html body .openms-lib-page--publications .publications-bibliography { + padding-bottom: 0 !important; +} + +html body .openms-lib-page--publications .publications-more { + margin-top: 1rem !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within) :is( + .contribute-track__cta, + .contribute-project-link, + .contribute-project-link__name, + .contribute-track__cta span, + .contribute-project-link span +), +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within) .contribute-track__cta:is(:hover, :focus-visible, :visited), +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__item:is(:hover, :focus-within) .contribute-project-link:is(:hover, :focus-visible, :visited), +html body .openms-lib-page--contribute #ways-to-contribute .contribute-track__cta:is(:hover, :focus-visible) span[aria-hidden="true"] { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page--contribute #ways-to-contribute .contribute-os-buttons .openms-lib-btn, +html body .openms-lib-page--contribute #ways-to-contribute .contribute-os-buttons .openms-lib-btn--ghost, +html body .openms-lib-page--contribute #ways-to-contribute .contribute-os-buttons .openms-lib-btn :is( + i, span, .fab, .fas, .fa-windows, .fa-apple, .fa-linux, .svg-inline--fa, path, .openms-lib-btn__label +), +html body .openms-lib-page--contribute #ways-to-contribute .contribute-os-buttons .openms-lib-btn i::before, +html body .openms-lib-page--contribute #ways-to-contribute .contribute-os-buttons .openms-lib-btn .fab::before, +html body .openms-lib-page--contribute #ways-to-contribute .contribute-os-buttons .openms-lib-btn .fas::before { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__media, +html body .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__media { + width: 7.5rem !important; + min-width: 7.5rem !important; + max-width: 7.5rem !important; + height: 7.5rem !important; + min-height: 7.5rem !important; + padding: 0 !important; + border: none !important; + border-radius: 0 !important; + background: transparent !important; + background-image: none !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__logo, +html body .openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__logo, +html body .openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__logo { + width: 100% !important; + height: 100% !important; + max-width: none !important; + max-height: none !important; + padding: 0 !important; + border: none !important; + background: transparent !important; + object-fit: contain !important; +} + +html body .openms-lib-page .webapps-archived__revival a.openms-lib-btn.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--archived .webapps-archived__revival a.openms-lib-btn.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.72) !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; +} + +html body .openms-lib-page .webapps-archived__revival a.openms-lib-btn.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is( + i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, .openms-lib-btn__icon, span +), +html body .openms-lib-page--archived .webapps-archived__revival a.openms-lib-btn.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is( + i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, .openms-lib-btn__icon, span +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; + opacity: 1 !important; +} + +@media (max-width: 800px) { + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item .webapps-project-detail-card, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card { + grid-template-columns: minmax(0, 1fr) auto !important; + grid-template-areas: + "name logo" + "text logo" + "maintainers maintainers" + "actions actions" !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--large, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--xlarge, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--wide, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--large, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--xlarge, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--wide { + grid-area: logo !important; + justify-self: end !important; + margin-left: auto !important; + margin-right: 0 !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__actions, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__actions, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__actions .webapps-project-links, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-links { + display: flex !important; + flex-wrap: wrap !important; + justify-content: flex-start !important; + justify-items: start !important; + align-items: center !important; + width: 100% !important; + margin-left: 0 !important; + margin-right: auto !important; + text-align: left !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links__item, + html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-links__item { + flex: 0 0 auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + } +} + +@media (max-width: 768px) { + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(n + 3) { + margin-top: 1.35rem !important; + padding-top: 0.35rem !important; + } +} + +@media (max-width: 720px) { + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps):not(.openms-lib-page--featured):not(.openms-lib-page--featured-pro) #getting-started .openms-lib-resources__assist-actions { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: flex-start !important; + width: auto !important; + max-width: 100% !important; + } + + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-cite__actions, + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cite-actions { + display: flex !important; + flex-direction: column !important; + flex-wrap: nowrap !important; + align-items: stretch !important; + width: 100% !important; + } + + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps):not(.openms-lib-page--featured) #getting-started .openms-lib-resources__assist-actions .openms-lib-btn { + width: auto !important; + max-width: none !important; + min-width: 0 !important; + flex: 0 0 auto !important; + justify-content: center !important; + box-sizing: border-box !important; + } + + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-cite__actions .openms-lib-btn, + html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--webapps) .openms-lib-developers__cite-actions .openms-lib-btn { + width: 100% !important; + max-width: none !important; + min-width: 0 !important; + flex: 1 1 100% !important; + justify-content: center !important; + box-sizing: border-box !important; + } +} + +@media (max-width: 720px) { + html body .openms-lib-page--openms-lib #for-developers .openms-lib-developers__platforms, + html body .openms-lib-page--openms-lib #for-developers .openms-lib-developers__card .openms-lib-developers__platforms { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 0.4rem !important; + width: 100% !important; + } + + html body .openms-lib-page--openms-lib #for-developers .openms-lib-developers__platform-btn, + html body .openms-lib-page--openms-lib #for-developers a.openms-lib-developers__platform-btn { + display: inline-flex !important; + flex: 0 0 auto !important; + width: auto !important; + max-width: none !important; + min-width: 0 !important; + align-self: auto !important; + padding: 0.45rem 0.7rem !important; + white-space: nowrap !important; + } +} + +/* WebApps Examples — compact logo tiles on phones (beat solution 16rem cards) */ +@media (max-width: 800px) { + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-grid { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 0.45rem !important; + width: 100% !important; + max-width: 100% !important; + } + + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-item { + min-width: 0 !important; + } + + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-card { + min-height: 0 !important; + height: auto !important; + aspect-ratio: 1 !important; + padding: 0.2rem !important; + box-sizing: border-box !important; + } + + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-logo, + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-logo--large { + width: 100% !important; + max-width: none !important; + height: auto !important; + aspect-ratio: 1 !important; + padding: 0.15rem !important; + background: transparent !important; + } + + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-logo img, + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-logo--large img, + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-logo img[src*="openDDA"] { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + object-fit: contain !important; + } + + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources--examples .openms-lib-resources__head { + justify-items: stretch !important; + } + + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-lead-row { + width: 100% !important; + max-width: none !important; + justify-content: flex-start !important; + align-items: flex-start !important; + } + + html body .openms-lib-page--webapps-pro #examples .openms-lib-resources__examples-link { + margin: 0 !important; + margin-inline: 0 !important; + align-self: flex-start !important; + justify-content: flex-start !important; + text-align: left !important; + white-space: nowrap !important; + } + + html body .openms-lib-page--webapps .openms-lib-resources__item-link, + html body .openms-lib-page--webapps-pro .openms-lib-resources__item-link, + html body .openms-lib-page--webapps .openms-lib-resources__explore-link, + html body .openms-lib-page--webapps-pro .openms-lib-resources__explore-link, + html body .openms-lib-page--webapps .openms-lib-resources__examples-link, + html body .openms-lib-page--webapps-pro .openms-lib-resources__examples-link, + html body .openms-lib-page--webapps .openms-lib-resources__examples-link span[aria-hidden="true"], + html body .openms-lib-page--webapps-pro .openms-lib-resources__examples-link span[aria-hidden="true"], + html body .openms-lib-page--webapps .webapps-project-card__cta, + html body .openms-lib-page--webapps-pro .webapps-project-card__cta, + html body .openms-lib-page--webapps .webapps-featured__show-all, + html body .openms-lib-page--webapps-pro .webapps-featured__show-all, + html body .openms-lib-page--webapps .webapps-featured__extra-link, + html body .openms-lib-page--webapps-pro .webapps-featured__extra-link, + html body .openms-lib-page--webapps .webapps-contribute__action-cta, + html body .openms-lib-page--webapps-pro .webapps-contribute__action-cta, + html body .openms-lib-page--webapps .openms-lib-developers__card-link, + html body .openms-lib-page--webapps-pro .openms-lib-developers__card-link, + html body .openms-lib-page--webapps .openms-lib-topp__cta, + html body .openms-lib-page--webapps-pro .openms-lib-topp__cta { + font-size: var(--openms-body-size) !important; + font-weight: 700 !important; + line-height: 1.3 !important; + } + + html body .openms-lib-page--webapps .webapps-project-card__cta-icon, + html body .openms-lib-page--webapps-pro .webapps-project-card__cta-icon, + html body .openms-lib-page--webapps .webapps-featured__show-all-icon, + html body .openms-lib-page--webapps-pro .webapps-featured__show-all-icon { + font-size: 1.05em !important; + } +} + +/* Affiliated Apps — card gutters on phones, flush footer, space after contact */ +html body .openms-lib-layout:has(.openms-lib-page--affiliated), +html body .content-padding:has(.openms-lib-page--affiliated) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--affiliated) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--affiliated) + #footer.footer-redesign { + margin-top: 0 !important; + padding-top: 0 !important; +} + +html body .openms-lib-page--affiliated .openms-lib-page__body, +html body .openms-lib-page--affiliated .openms-lib-page__body > .openms-lib-page__anchor:last-child, +html body .openms-lib-page--affiliated #affiliated-apps { + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro #affiliated-apps.webapps-affiliates, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates, +html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates, +html body .openms-lib-page--affiliated .webapps-affiliates { + padding-top: calc(var(--sol-section-y, 3.5rem) + 2.5rem) !important; + padding-block-start: calc(var(--sol-section-y, 3.5rem) + 2.5rem) !important; + padding-bottom: 0 !important; + padding-block-end: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--affiliated .webapps-affiliates__item .webapps-project-detail-card, +html body .openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item .webapps-project-detail-card, +html body .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 name" + "logo text" + "maintainers maintainers" + "actions actions" !important; + grid-template-rows: auto auto auto auto !important; + align-items: start !important; +} + +html body .openms-lib-page--affiliated .webapps-project-detail-card__body, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__body { + display: contents !important; +} + +html body .openms-lib-page--affiliated .webapps-project-detail-card__logo-wrap, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap { + grid-area: logo !important; +} + +html body .openms-lib-page--affiliated .webapps-project-detail-card__name, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__name { + grid-area: name !important; +} + +html body .openms-lib-page--affiliated .webapps-project-detail-card__text, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__text { + grid-area: text !important; +} + +html body .openms-lib-page--affiliated .webapps-project-detail-card__maintainers, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers { + grid-area: maintainers !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; + justify-self: stretch !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card { + display: grid !important; + grid-template-columns: auto minmax(0, 1fr) !important; + grid-template-areas: + "logo name" + "logo text" + "maintainers maintainers" + "actions actions" !important; + grid-template-rows: auto auto auto auto !important; + align-items: start !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__body, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__body { + display: contents !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap { + grid-area: logo !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__name, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__name { + grid-area: name !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__text, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__text { + grid-area: text !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers { + grid-area: maintainers !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; + justify-self: stretch !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__actions, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__actions, +html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-links { + grid-area: actions !important; + width: 100% !important; + max-width: 100% !important; + justify-self: stretch !important; +} + +html body .openms-lib-page--affiliated .webapps-project-detail-card__actions, +html body .openms-lib-page--affiliated .webapps-project-links, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-detail-card__actions, +html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-project-links { + grid-area: actions !important; + width: 100% !important; + max-width: 100% !important; + justify-self: stretch !important; +} + +@media (max-width: 800px) { + html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates, + html body .openms-lib-page--affiliated .webapps-affiliates { + padding-inline: clamp(0.85rem, 4vw, 1.15rem) !important; + padding-top: clamp(2.75rem, 8vw, 4rem) !important; + padding-block-start: clamp(2.75rem, 8vw, 4rem) !important; + } + + html body .openms-lib-page--affiliated .webapps-affiliates__inner { + padding-inline: 0 !important; + width: 100% !important; + max-width: 100% !important; + } + + html body .openms-lib-page--affiliated .webapps-affiliates__grid { + gap: 1.35rem !important; + width: 100% !important; + max-width: 100% !important; + } + + html body .openms-lib-page--affiliated .webapps-affiliates__item .webapps-project-detail-card, + html body .openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__item .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-affiliates__grid .webapps-project-detail-card { + grid-template-columns: minmax(0, 1fr) auto !important; + grid-template-areas: + "name logo" + "text logo" + "maintainers maintainers" + "actions actions" !important; + } + + html body .openms-lib-page--affiliated .webapps-affiliates__item .webapps-project-detail-card, + html body .openms-lib-page--affiliated .webapps-affiliates__grid .webapps-project-detail-card { + padding: 1.15rem 1rem !important; + } +} + +/* Featured Apps — keep a clear gap between catalog cards */ +html body .home-page .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + gap: clamp(1.25rem, 3.2vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) !important; + row-gap: clamp(1.25rem, 3.2vw, 2rem) !important; + column-gap: clamp(1.25rem, 3vw, 2.25rem) !important; +} + +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail { + gap: 1.25rem !important; + row-gap: 1.25rem !important; + column-gap: 1.25rem !important; +} + +@media (max-width: 800px) { + html body .home-page .home-page__block--projects .webapps-featured .webapps-featured__grid--catalog { + gap: 1.75rem !important; + row-gap: 1.75rem !important; + } + + html body .home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog { + --projects-card-inset-y: 0.85rem; + --projects-card-inset-x: 0; + } + + html body .home-page .home-page__block--projects .webapps-featured__grid--catalog .webapps-project-card--catalog .webapps-project-card__surface { + padding: 0.85rem 0 !important; + gap: 1.15rem !important; + } + + html body .home-page .home-page__block--projects .webapps-featured__item::after { + display: none !important; + } + + html body .home-page .home-page__block--projects .webapps-featured__item::before { + display: block !important; + left: 0 !important; + right: 0 !important; + bottom: calc(-1.75rem / 2) !important; + height: 1px !important; + width: auto !important; + background: rgba(var(--openms-navy-rgb), 0.1) !important; + } + + html body .home-page .home-page__block--projects .webapps-featured__item:last-child::before { + display: none !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail { + gap: 1.35rem !important; + row-gap: 1.35rem !important; + } +} + +/* OpenMS-lib For Developers — white cards fill navy on hover */ +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card--box:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card--interactive:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card--link:is(:hover, :focus-visible) { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + box-shadow: 0 0.85rem 1.75rem rgba(var(--openms-navy-rgb), 0.32) !important; +} + +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :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, + .openms-lib-developers__card-icon, + .openms-lib-developers__card-icon i, + .fab, + .fas, + h3, + p, + a, + span + ) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + :is(.openms-lib-developers__platform-btn, .openms-lib-btn--ghost) { + background: transparent !important; + border-color: var(--openms-white) !important; +} + +/* Sponsor-us Benefit comparison — tier dropdown (mobile/tablet) */ +html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher { + display: none; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher-label { + display: block; + margin: 0 0 0.4rem; + font-size: var(--openms-text-min, 0.875rem); + font-weight: 700; + color: var(--openms-navy); +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher-select { + display: block; + box-sizing: border-box; + width: 100%; + max-width: 22rem; + min-height: 2.75rem; + margin: 0; + padding: 0.55rem 2.4rem 0.55rem 0.9rem; + appearance: none; + -webkit-appearance: none; + border: 1px solid rgba(var(--openms-navy-rgb), 0.16); + border-radius: 0.75rem; + background-color: var(--openms-white); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230b1f33' d='M4.2 6.2 8 10l3.8-3.8 1.1 1.1L8 12.2 3.1 7.3z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.85rem center; + background-size: 1rem; + color: var(--openms-navy); + font-family: var(--openms-font-body); + font-size: 1rem; + font-weight: 700; + line-height: 1.3; + cursor: pointer; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher-select:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: 2px; +} + +@media (max-width: 992px) { + html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + gap: 0 !important; + width: 100% !important; + max-width: none !important; + margin: 0 0 1rem !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + } + + html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher-label { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; + } + + html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher-select { + width: 100% !important; + max-width: none !important; + } +} + +@media (max-width: 800px) { + html body .openms-lib-page--sponsor-us .sponsor-benefits__switcher { + margin-top: 1.25rem !important; + } +} + +/* OpenMS-lib For Developers — card icons turn white on navy hover */ +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-visible, :focus-within) + .openms-lib-developers__card-icon, +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-visible, :focus-within) + .openms-lib-developers__card-icon + :is(i, svg, path, .fab, .fas, .far, .fa-github, .fa-code, .svg-inline--fa), +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-visible, :focus-within) + .openms-lib-developers__card-icon + i::before, +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__platform-btn + :is(i, svg, path, .fab, .fas, .far, .svg-inline--fa, .fa-linux, .fa-apple, .fa-windows, .fa-github) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + :is(.openms-lib-developers__platform-btn, .openms-lib-btn--ghost) { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* pyOpenMS For Developers — white cards fill navy on hover (match OpenMS-lib) */ +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card--box:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card--interactive:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card--link:is(:hover, :focus-visible), +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__route:is(:hover, :focus-visible) { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + box-shadow: 0 0.85rem 1.75rem rgba(var(--openms-navy-rgb), 0.32) !important; +} + +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :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, + .openms-lib-developers__card-icon, + .openms-lib-developers__card-icon i, + .fab, + .fas, + h3, + p, + a, + span + ), +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__card-icon + :is(i, svg, path, .fab, .fas, .far, .fa-github, .fa-code, .svg-inline--fa), +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__card-icon + i::before, +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__platform-btn + :is(i, svg, path, .fab, .fas, .far, .svg-inline--fa, .fa-linux, .fa-apple, .fa-windows, .fa-github) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--pyopenms-pro:not(.openms-lib-page--pyopenms-viz-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + :is(.openms-lib-developers__platform-btn, .openms-lib-btn--ghost) { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* pyOpenMS-viz For Developers — navy hover (match OpenMS-lib / pyOpenMS) */ +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card--box:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card--interactive:is(:hover, :focus-visible, :focus-within), +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card--link:is(:hover, :focus-visible), +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__split-action:is(:hover, :focus-visible) { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + box-shadow: 0 0.85rem 1.75rem rgba(var(--openms-navy-rgb), 0.32) !important; +} + +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card:is(:hover, :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, + .openms-lib-developers__card-icon, + .openms-lib-developers__card-icon i, + .fab, + .fas, + h3, + p, + a, + span + ), +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__card-icon + :is(i, svg, path, .fab, .fas, .far, .fa-github, .fa-code, .svg-inline--fa), +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__card-icon + i::before, +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__platform-btn + :is(i, svg, path, .fab, .fas, .far, .svg-inline--fa, .fa-linux, .fa-apple, .fa-windows, .fa-github), +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__split-action:is(:hover, :focus-visible) + :is( + .openms-lib-developers__split-action-title, + .openms-lib-developers__split-action-text, + .openms-lib-developers__split-action-cta, + .openms-lib-developers__split-action-icon, + h3, + p, + span, + a, + i, + svg, + path + ) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--pyopenms-viz-pro + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + :is(.openms-lib-developers__platform-btn, .openms-lib-btn--ghost) { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* WebApps For Developers — navy hover (match OpenMS-lib / pyOpenMS) */ +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-visible, :focus-within), +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card--box:is(:hover, :focus-visible, :focus-within), +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card--interactive:is(:hover, :focus-visible, :focus-within), +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card--link:is(:hover, :focus-visible) { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + box-shadow: 0 0.85rem 1.75rem rgba(var(--openms-navy-rgb), 0.32) !important; +} + +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :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, + .openms-lib-developers__card-icon, + .openms-lib-developers__card-icon i, + .fab, + .fas, + h3, + p, + a, + span + ), +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__card-icon + :is(i, svg, path, .fab, .fas, .far, .fa-github, .fa-code, .svg-inline--fa), +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__card-icon + i::before, +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + .openms-lib-developers__platform-btn + :is(i, svg, path, .fab, .fas, .far, .svg-inline--fa, .fa-linux, .fa-apple, .fa-windows, .fa-github) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body :is(.openms-lib-page--webapps, .openms-lib-page--webapps-pro) + #for-developers + .openms-lib-developers__card:is(:hover, :focus-within) + :is(.openms-lib-developers__platform-btn, .openms-lib-btn--ghost) { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* GSoC / long-form news article */ +html body .news-article--gsoc .news-article__content > p:first-of-type { + max-width: 62ch; + margin-bottom: 1.5rem; + font-size: 1.05rem; + line-height: 1.65; +} +html body .news-article--gsoc .gsoc-guide { + display: grid; + grid-template-columns: 1fr; + gap: 0.85rem; + margin: 0 0 1.75rem; +} + +@media (min-width: 720px) { + html body .news-article--gsoc .gsoc-guide { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +html body .news-article--gsoc .gsoc-step { + display: flex; + flex-direction: column; + gap: 0.65rem; + min-height: 100%; + padding: clamp(1.15rem, 2.2vw, 1.5rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 1rem; + background: var(--openms-white, #fff); + box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.03); +} + +html body .news-article--gsoc .gsoc-step__title { + margin: 0 !important; + font-size: 1.05rem !important; + font-weight: 700 !important; + line-height: 1.3 !important; +} + +html body .news-article--gsoc .gsoc-step__body, +html body .news-article--gsoc .gsoc-step__body :is(p, li) { + margin: 0; + font-size: var(--openms-body-size, 0.95rem); + line-height: 1.55; +} + +html body .news-article--gsoc .gsoc-step__body ul, +html body .news-article--gsoc .gsoc-step__body ol { + margin: 0; + padding-left: 1.15rem; +} + +html body .news-article--gsoc .gsoc-callout { + margin: 0 0 2rem; + padding: 0; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 1rem; + background: #f4f6f9; +} + +html body .news-article--gsoc .gsoc-callout__summary, +html body .news-article--gsoc .gsoc-theme__summary, +html body .news-article--gsoc .gsoc-project__summary { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 0.75rem 1rem; + padding: 1rem 1.15rem; + cursor: pointer; + list-style: none; +} + +html body .news-article--gsoc .gsoc-callout__summary::-webkit-details-marker, +html body .news-article--gsoc .gsoc-theme__summary::-webkit-details-marker, +html body .news-article--gsoc .gsoc-project__summary::-webkit-details-marker { + display: none; +} + +html body .news-article--gsoc .gsoc-callout__summary::after, +html body .news-article--gsoc .gsoc-theme__summary::after, +html body .news-article--gsoc .gsoc-project__summary::after { + content: ""; + width: 0.5rem; + height: 0.5rem; + border-right: 2px solid rgba(var(--openms-dark-rgb), 0.55); + border-bottom: 2px solid rgba(var(--openms-dark-rgb), 0.55); + transform: rotate(45deg); + transition: transform 0.15s ease; + justify-self: end; +} + +html body .news-article--gsoc .gsoc-callout[open] .gsoc-callout__summary::after, +html body .news-article--gsoc .gsoc-theme[open] .gsoc-theme__summary::after, +html body .news-article--gsoc .gsoc-project[open] .gsoc-project__summary::after { + transform: rotate(225deg); +} + +html body .news-article--gsoc .gsoc-callout__title { + margin: 0 !important; + font-size: 1.05rem !important; +} + +html body .news-article--gsoc .gsoc-callout__body { + padding: 0 1.15rem 1.2rem; +} + +html body .news-article--gsoc .gsoc-callout__body > p:has(> strong:first-child) { + margin: 0 0 0.7rem; + padding: 0.85rem 1rem; + border-radius: 0.75rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-left: 3px solid var(--openms-blue); + background: var(--openms-white, #fff); +} + +html body .news-article--gsoc .gsoc-callout__body > p:has(> strong:first-child):last-child { + margin-bottom: 0; +} + +html body .news-article--gsoc .gsoc-theme { + margin: 0.75rem 0 0; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 1rem; + background: var(--openms-white, #fff); +} + +html body .news-article--gsoc .gsoc-theme__copy, +html body .news-article--gsoc .gsoc-project__copy { + min-width: 0; + display: grid; + gap: 0.3rem; +} + +html body .news-article--gsoc .gsoc-theme__label { + display: block; + margin: 0 0 0.25rem; + font-family: var(--openms-font-body); + font-size: 0.75rem; + font-weight: 650; + letter-spacing: 0.16em; + line-height: 1.3; + text-transform: uppercase; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .news-article--gsoc .gsoc-theme__title { + display: block; + margin: 0 !important; + font-size: 1.08rem !important; + font-weight: 700 !important; +} + +html body .news-article--gsoc .gsoc-theme__projects { + display: grid; + gap: 0.65rem; + padding: 0 1rem 1rem; +} + +html body .news-article--gsoc .gsoc-project { + padding: 0; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 0.85rem; + background: var(--openms-white, #fff); + box-shadow: none; +} + +html body .news-article--gsoc .gsoc-project__title { + margin: 0 !important; + font-size: 1rem !important; + font-weight: 700 !important; + line-height: 1.3 !important; +} + +html body .news-article--gsoc .gsoc-project__summary-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.4rem 0.65rem; + font-size: 0.8rem; + color: rgba(var(--openms-dark-rgb), 0.62); +} + +html body .news-article--gsoc .gsoc-project__panel { + padding: 0 1.15rem 1.15rem; +} + +html body .news-article--gsoc .gsoc-project__facts { + display: grid; + grid-template-columns: 1fr; + gap: 0.55rem 1rem; + margin: 0 0 1rem; + padding: 0.85rem 1rem; + border-radius: 0.75rem; + background: #f4f6f9; +} + +@media (min-width: 640px) { + html body .news-article--gsoc .gsoc-project__facts { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +html body .news-article--gsoc .gsoc-project__fact { + display: grid; + gap: 0.15rem; + margin: 0; +} + +html body .news-article--gsoc .gsoc-project__fact dt { + margin: 0; + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(var(--openms-dark-rgb), 0.55) !important; +} + +html body .news-article--gsoc .gsoc-project__fact dd { + margin: 0; + font-size: var(--openms-body-size, 0.95rem); + line-height: 1.4; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +html body .news-article--gsoc .gsoc-project__level { + display: inline-flex; + align-items: center; + min-height: 1.5rem; + padding: 0.1rem 0.55rem; + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.12); + color: var(--openms-blue); + font-size: 0.8rem; + font-weight: 700; +} + +html body .news-article--gsoc .gsoc-project__body > :first-child { + margin-top: 0; +} + +html body .news-article--gsoc .gsoc-project__body > :last-child { + margin-bottom: 0; +} + +@media (min-width: 1024px) { + html body .openms-lib-page--news-gsoc .news-page--has-toc { + grid-template-columns: minmax(0, 1fr) 16.5rem; + } +} + +html body .openms-lib-page--contributors .leadership-card__role { + font-size: 0.72rem !important; + font-weight: 600 !important; + letter-spacing: 0.06em !important; + line-height: 1.25 !important; + -webkit-line-clamp: unset; + line-clamp: unset; + overflow: visible !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-title { + font-size: 0.75rem !important; + font-weight: 650 !important; + letter-spacing: 0.16em !important; + text-transform: uppercase !important; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + background: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-heading { + font-size: 0.95rem !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; + text-transform: none !important; + color: rgba(var(--openms-dark-rgb), 0.82) !important; + -webkit-text-fill-color: rgba(var(--openms-dark-rgb), 0.82) !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-index { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .home-page .ecosystem-home { + --ecosystem-logo-box: 9.25rem; + --ecosystem-logo-box-h: 6.15rem; +} + +html body .home-page .ecosystem-home__card { + display: grid !important; + grid-template-rows: auto 1fr auto !important; + align-items: stretch !important; + gap: 0.4rem !important; +} + +html body .home-page .ecosystem-home__card-head { + display: flex !important; + flex-direction: row !important; + align-items: flex-start !important; + justify-content: space-between !important; + min-height: var(--ecosystem-logo-box-h, 7rem) !important; + height: var(--ecosystem-logo-box-h, 7rem) !important; + flex-wrap: nowrap !important; +} + +html body .home-page .ecosystem-home__card-intro { + display: flex !important; + flex-direction: column !important; + justify-content: flex-start !important; + flex: 1 1 auto !important; + min-width: 8.5rem !important; + width: auto !important; +} + +html body .home-page .ecosystem-home__card-title { + overflow-wrap: normal !important; + word-break: normal !important; + white-space: nowrap !important; +} + +html body .home-page .ecosystem-home__card--webapps .ecosystem-home__card-title { + white-space: normal !important; + overflow-wrap: normal !important; + word-break: keep-all !important; + width: max-content !important; + max-width: 8.75rem !important; + line-height: 1.25 !important; +} + +html body .home-page .ecosystem-home__card-text { + margin-top: -0.15rem !important; +} + +html body .home-page .ecosystem-home__card-tag { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; + white-space: nowrap !important; + overflow-wrap: normal !important; + word-break: keep-all !important; + flex: 0 0 auto !important; + width: max-content !important; + max-width: none !important; +} + +html body .home-page .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--openms-lib .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--webapps .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--pyopenms .ecosystem-home__card-icon { + flex: 0 0 auto !important; + align-self: flex-start !important; + width: auto !important; + max-width: var(--ecosystem-logo-box, 9.25rem) !important; + height: 5.35rem !important; + max-height: 5.35rem !important; + min-width: 3.5rem !important; + margin-top: 0 !important; + margin-left: auto !important; + margin-right: 0 !important; + object-fit: contain !important; + object-position: right top !important; +} + +html body .home-page .ecosystem-home__card--viz .ecosystem-home__card-head { + height: auto !important; + min-height: 7.25rem !important; + overflow: visible !important; +} + +html body .home-page .ecosystem-home__card--viz .ecosystem-home__card-icon { + flex: 0 1 auto !important; + align-self: flex-start !important; + width: auto !important; + height: 7.25rem !important; + max-width: min(18.5rem, 70%) !important; + max-height: 7.25rem !important; + margin-top: -1.05rem !important; + margin-left: auto !important; + margin-right: 0 !important; + object-fit: contain !important; + object-position: right top !important; +} + +@media (max-width: 800px) { + html body .home-page .home-page__block--ecosystem .ecosystem-home { + --ecosystem-logo-box: 11.5rem; + --ecosystem-logo-box-h: 5.5rem; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card { + gap: 0.65rem !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__header-main, + html body .home-page .home-page__block--ecosystem .ecosystem-home__lead { + max-width: 100% !important; + width: 100% !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card, + html body .home-page .home-page__block--ecosystem .ecosystem-home__item { + width: 100% !important; + max-width: 100% !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-head, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-head { + display: flex !important; + flex-direction: row !important; + align-items: flex-start !important; + justify-content: space-between !important; + width: 100% !important; + min-height: var(--ecosystem-logo-box-h, 6.15rem) !important; + height: auto !important; + gap: 0.55rem !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-intro { + width: auto !important; + max-width: none !important; + min-width: 0 !important; + flex: 1 1 auto !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-title, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-text { + width: 100% !important; + max-width: 100% !important; + flex: 1 1 auto !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--webapps .ecosystem-home__card-title { + width: max-content !important; + max-width: 8.75rem !important; + white-space: normal !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-tag { + white-space: nowrap !important; + overflow-wrap: normal !important; + word-break: keep-all !important; + flex: 0 0 auto !important; + width: auto !important; + max-width: none !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-text { + -webkit-line-clamp: unset !important; + display: block !important; + overflow: visible !important; + margin-top: -0.55rem !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--openms-lib .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--webapps .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--pyopenms .ecosystem-home__card-icon { + flex: 0 0 auto !important; + width: auto !important; + height: 5.35rem !important; + max-width: 9.25rem !important; + max-height: 5.35rem !important; + margin: 0 0 0 auto !important; + align-self: flex-start !important; + object-fit: contain !important; + object-position: right top !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-icon { + width: auto !important; + height: 7.25rem !important; + max-width: min(14rem, 48%) !important; + max-height: 7.25rem !important; + margin-top: -1.05rem !important; + margin-left: auto !important; + margin-right: 0 !important; + object-position: right top !important; + } +} + +/* For Developers — navy card hover: ghost pills with white label text */ +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:is(:hover, :focus-within) .openms-lib-developers__platform-btn:is(:hover, :focus-visible), +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:is(:hover, :focus-within) .openms-lib-developers__platform-btn:is(:hover, :focus-visible) { + background: transparent !important; + background-color: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.7) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !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, .openms-lib-btn__icon, span +), +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card--interactive:is(:hover, :focus-within) .openms-lib-developers__platform-btn :is( + i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, .openms-lib-btn__icon, span +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-link, +html body .openms-lib-page--solution #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-hover-text { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +/* News articles — same page spacing as research-partnerships / solution hubs */ +html body .openms-lib-page--news-article { + padding-top: 0 !important; + margin-top: 0 !important; + overflow: visible !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--news-article), +html body .content-padding:has(.openms-lib-page--news-article) { + padding-bottom: 0 !important; + margin-bottom: 0 !important; + background: var(--sol-canvas, #f8f8f9) !important; +} + +html body .openms-lib-layout:has(.openms-lib-page--news-article) + #footer.footer-redesign, +html body .content-padding:has(.openms-lib-page--news-article) + #footer.footer-redesign { + margin-top: 0 !important; + padding-top: 0 !important; +} + +html body .openms-lib-page--news-article { + padding-bottom: 0 !important; + margin-bottom: 0 !important; + background: var(--sol-canvas, #f8f8f9) !important; +} + +html body .openms-lib-page--news-article .news-story { + padding: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) var(--openms-page-inline, 1.5rem) !important; + background: var(--sol-canvas, #f8f8f9) !important; +} + +html body .openms-lib-page--news-article .news-story__body > :last-child { + margin-bottom: 0 !important; +} + +html body .openms-lib-page--news-article .news-story__inner { + width: min(100%, var(--pro-max, 75rem)) !important; + max-width: var(--pro-max, 75rem) !important; + margin-inline: auto !important; + padding-inline: 0 !important; +} + +html body .openms-lib-page--news-article .news-story__toolbar { + margin-bottom: 1.85rem !important; +} + +html body .openms-lib-page--news-article .news-story__title { + margin-top: 0.35rem !important; + font-family: var(--openms-font-heading) !important; + font-size: var(--openms-heading-xl-size) !important; + font-weight: var(--openms-page-hero-title-weight, var(--openms-heading-xl-weight)) !important; + letter-spacing: var(--openms-title-letter-spacing, 0.015em) !important; + line-height: 1.25 !important; + text-transform: var(--openms-title-transform, uppercase) !important; + hyphens: none !important; + -webkit-hyphens: none !important; + overflow-wrap: anywhere !important; + word-break: normal !important; + max-width: none !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; +} + +html body .openms-lib-page--news-article .news-story__back { + display: inline-flex !important; + width: fit-content !important; + min-height: 0 !important; + padding: 0 !important; + border: 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--news-article .news-story__kicker, +html body .openms-lib-page--news-article .news-story__kicker .section-eyebrow-icon { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--news-article .news-story__body :is(h2, h3, h4, h5, h6) { + font-family: var(--openms-font-heading) !important; + font-weight: var(--openms-heading-lg-weight, 700) !important; + letter-spacing: var(--openms-title-letter-spacing, 0.015em) !important; + text-transform: var(--openms-title-transform, uppercase) !important; + color: var(--openms-section-title-color, var(--openms-navy)) !important; + -webkit-text-fill-color: var(--openms-section-title-color, var(--openms-navy)) !important; +} + +html body .openms-lib-page--news-article .news-story__body h2 { + font-size: var(--openms-secondary-heading-size-lg) !important; +} + +html body .openms-lib-page--news-article .news-story__body :is(h3, h4) { + font-size: var(--openms-secondary-heading-size) !important; +} + +html body .openms-lib-page--news-article .news-story__body :is(p, li) { + font-family: var(--openms-font-body) !important; + font-size: var(--openms-body-size-lg) !important; + font-weight: var(--openms-body-weight) !important; + line-height: 1.65 !important; + color: var(--openms-text-muted) !important; + -webkit-text-fill-color: var(--openms-text-muted) !important; +} + +html body .openms-lib-page--news-article .news-story__body a { + color: var(--openms-content-link) !important; + -webkit-text-fill-color: var(--openms-content-link) !important; + font-weight: var(--openms-content-link-weight, 600) !important; +} + +/* Research partnerships — same section rhythm as /openms-lib/ (padding on bands only) */ +html body .openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor, +html body .openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor:first-child, +html body .openms-lib-page--hub.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor, +html body .openms-lib-page--hub.openms-lib-page--research-partnerships .openms-lib-page__body > .openms-lib-page__anchor:first-child { + padding-block: 0 !important; +} + +html body .openms-lib-page--research-partnerships #partnerships-include .openms-lib-about, +html body .openms-lib-page--research-partnerships #our-partners .openms-lib-resources, +html body .openms-lib-page--research-partnerships #partnership-form .openms-lib-resources, +html body .openms-lib-page--research-partnerships #partnership-form .rp-application { + padding-block: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; +} + +html body .openms-lib-page--news-article .news-story__body img { + display: inline-block !important; + vertical-align: middle !important; + width: auto !important; + height: auto !important; + max-width: min(100%, 18rem) !important; + max-height: 5.5rem !important; + margin: 0.35rem 1.5rem 0.35rem 0 !important; +} + +html body .openms-lib-page--news-article .news-story__body a:has(> img) { + display: inline-block !important; + vertical-align: middle !important; +} + +html body .openms-lib-page--news-article .news-story__body img ~ br, +html body .openms-lib-page--news-article .news-story__body a:has(> img) ~ br { + display: none !important; +} + +html body .openms-lib-page--news-article .news-story__body p:has(> img), +html body .openms-lib-page--news-article .news-story__body p:has(> a > img) { + display: block !important; +} + +html body .openms-lib-page--news-article .news-story__body p:has(> img:only-child), +html body .openms-lib-page--news-article .news-story__body p:has(> a:only-child > img) { + display: block !important; +} + +html body .openms-lib-page--archived .webapps-archived-entry__badge, +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived-entry__badge, +html body .openms-lib-page--solution.openms-lib-page--featured-pro .webapps-archived-entry__badge, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__badge { + font-size: 0.5rem !important; + font-weight: 700 !important; + letter-spacing: 0.06em !important; + line-height: 1.15 !important; + padding: 0.06rem 0.34rem !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__projects { + display: flex !important; + flex-wrap: wrap !important; + justify-content: center !important; + align-items: flex-start !important; + gap: 1.15rem 1.75rem !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice, +html body .openms-lib-page--archived .webapps-archived__notice--callout, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice { + justify-items: start !important; + text-align: left !important; + gap: 0.7rem !important; + width: min(100%, 20rem) !important; + flex: 1 1 16rem !important; + max-width: 22rem !important; + margin: 0 !important; + padding: 0.2rem 0 0 !important; + background: transparent !important; + border: 0 !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice + .webapps-archived__grid, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice + .webapps-archived__grid { + margin-top: 1.15rem !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-head, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-head { + display: inline-flex !important; + align-items: center !important; + justify-content: flex-start !important; + width: 100% !important; + gap: 0.3rem !important; + text-align: left !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-icon, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-icon { + width: 0.8rem !important; + height: 0.8rem !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-icon svg, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-icon svg { + width: 0.8rem !important; + height: 0.8rem !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-title, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-title { + text-align: center !important; + font-size: 0.68rem !important; + letter-spacing: 0.12em !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-index, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-index { + display: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-list, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-list { + display: grid !important; + grid-template-columns: 1fr !important; + width: 100% !important; + max-width: none !important; + margin: 0 !important; + gap: 0.85rem !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + background-color: transparent !important; + overflow: visible !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-item, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + justify-items: start !important; + text-align: left !important; + margin: 0 !important; + padding: 0 !important; + min-height: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-item + .webapps-archived__notice-item, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item + .webapps-archived__notice-item { + border: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-copy, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-copy { + justify-items: start !important; + text-align: left !important; + width: 100% !important; + gap: 0.28rem !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-heading, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-heading { + text-align: left !important; + margin: 0 !important; + padding-bottom: 0.28rem !important; + border-bottom: 1.5px solid var(--openms-blue) !important; + width: fit-content !important; + max-width: 100% !important; + font-size: 0.82rem !important; + line-height: 1.25 !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-text, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-text { + text-align: left !important; + margin: 0 !important; + max-width: none !important; + font-size: 0.8rem !important; + line-height: 1.4 !important; +} + +@media (max-width: 700px) { + html body .openms-lib-page--archived .webapps-archived__notice-item + .webapps-archived__notice-item, + html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item + .webapps-archived__notice-item { + border: 0 !important; + } +} + +html body .openms-lib-page--archived .webapps-archived__revival, +html body .openms-lib-page--archived .webapps-archived__revival-actions, +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived__revival, +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived__revival-actions { + overflow: visible !important; +} + +html body .openms-lib-page--archived .webapps-archived__revival-actions .openms-lib-btn--ghost, +html body .openms-lib-page--solution.openms-lib-page--archived .webapps-archived__revival-actions .openms-lib-btn--ghost { + overflow: visible !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow-white, rgba(255, 255, 255, 0.28)) !important; + transform: scale(1); + transition: var(--openms-btn-motion) !important; +} + +html body .openms-lib-page--archived .webapps-archived__revival-actions .openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions .openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival a.openms-lib-btn.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active) { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-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-white, rgba(255, 255, 255, 0.28)) !important; + outline: none; + text-decoration: none !important; + z-index: 1; +} + +html body .openms-lib-page--archived .openms-lib-hero, +html body .openms-lib-page--archived .openms-lib-hero--pro, +html body .openms-lib-page--archived .openms-lib-hero--solution, +html body .openms-lib-page--archived .openms-lib-hero__panel, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero--pro, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero--solution, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero__panel { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .openms-lib-hero::before, +html body .openms-lib-page--archived .openms-lib-hero::after, +html body .openms-lib-page--archived .openms-lib-hero--pro::before, +html body .openms-lib-page--archived .openms-lib-hero--pro::after, +html body .openms-lib-page--archived .openms-lib-hero__panel::before, +html body .openms-lib-page--archived .openms-lib-hero__panel::after, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero::before, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero::after, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero--pro::before, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero--pro::after, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero__panel::before, +html body .openms-lib-page--solution.openms-lib-page--archived .openms-lib-hero__panel::after { + display: none !important; + content: none !important; + background: none !important; +} + +html body .openms-lib-page--sponsor-us .openms-lib-about__mosaic .openms-lib-about__tile-title { + margin-bottom: 1.5rem !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + display: block !important; + grid-template-columns: none !important; + max-width: min(63.5rem, 100%) !important; + width: auto !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-lead-col { + display: block !important; +} + +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__answer p a.openms-cta-link, +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__answer p a.sponsor-faq__link, +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__link { + display: inline-flex !important; + align-items: baseline; + gap: 0.28rem; + 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; +} + +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__answer a.openms-cta-link span[aria-hidden="true"], +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__link span[aria-hidden="true"] { + font-weight: 400 !important; + text-decoration: none !important; +} + +html body .openms-lib-page--contributors #join-community.openms-lib-page__anchor { + padding-inline: var(--openms-page-inline) !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--contributors #join-community .webapps-archived__revival { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + overflow: visible !important; +} + +html body .openms-lib-page--contributors #join-community .webapps-archived__revival-actions { + overflow: visible !important; +} + +html body .openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--ghost, +html body .openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-cta-band__btn-ghost { + overflow: visible !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow-white, rgba(255, 255, 255, 0.28)) !important; +} + +html body .openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contributors #join-community .webapps-archived__revival-actions .openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active) { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-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-white, rgba(255, 255, 255, 0.28)) !important; + outline: none; + text-decoration: none !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__inner, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__inner { + max-width: min(100%, 58rem) !important; +} + +html body .openms-lib-page--archived .webapps-archived__projects, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__projects { + display: grid !important; + grid-template-columns: minmax(0, 1fr) minmax(13.25rem, 18.75rem) !important; + gap: 1rem 1.65rem !important; + align-items: start !important; +} + +html body .openms-lib-page--archived .webapps-archived__grid, +html body .openms-lib-page--archived .webapps-archived__grid--solo, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__grid, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__grid--solo { + max-width: none !important; + width: 100% !important; + margin: 0 !important; + justify-self: stretch !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice, +html body .openms-lib-page--archived .webapps-archived__notice--callout, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout { + width: 100% !important; + max-width: none !important; + margin: 0 !important; + padding: 0.15rem 0 0 !important; + justify-items: start !important; + text-align: left !important; + gap: 0.7rem !important; + background: transparent !important; + background-color: transparent !important; + border: 0 !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-head, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-head { + justify-content: flex-start !important; + text-align: left !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-list, +html body .openms-lib-page--archived .webapps-archived__notice-item, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-list, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: 0 !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-list, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-list { + display: grid !important; + grid-template-columns: 1fr !important; + gap: 0.85rem !important; + padding: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-item, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item { + padding: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-heading, +html body .openms-lib-page--archived .webapps-archived__notice-text, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-heading, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-text { + text-align: left !important; +} + +@media (max-width: 47.99rem) { + html body .openms-lib-page--archived .webapps-archived__projects, + html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__projects { + grid-template-columns: 1fr !important; + gap: 1.15rem !important; + } +} + +html body .openms-lib-page--exec-committee .exec-meetings .exec-meetings__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--exec-committee .exec-meetings .exec-meetings__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title, +html body .openms-lib-page--exec-committee .exec-amendments .exec-amendments__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--exec-committee .exec-amendments .exec-amendments__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head h2.contribute-channels__title, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head .contribute-channels__title, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head .contribute-channels__eyebrow, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head .contribute-channels__lead { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) h3.openms-lib-about__tile-title, +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) .openms-lib-about__tile-title, +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) .openms-lib-about__tile-text, +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) .openms-lib-about__num { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__text, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__icon { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + + + + diff --git a/assets/css/posts_override.css b/assets/css/posts_override.css deleted file mode 100644 index 25da7a9e..00000000 --- a/assets/css/posts_override.css +++ /dev/null @@ -1,13 +0,0 @@ -.post-authors::before { - content: "by "; -} - -.post-list article { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.post-list .post-title h3 { - padding: 0; - margin: 0%; -} diff --git a/assets/css/press-kit.css b/assets/css/press-kit.css new file mode 100644 index 00000000..ed088bf7 --- /dev/null +++ b/assets/css/press-kit.css @@ -0,0 +1,192 @@ +/* Press Kit — logo and template download cards, plus a plain usage note. + Self-contained: this is a new page, so nothing here needs to fight an + existing page-scoped ruleset. Reuses the sitewide --pro-* tokens that + .openms-lib-page--hub.openms-lib-page--openms-lib defines. */ + +.press-kit-assets { + width: 100%; + padding-block: var(--pro-section-y); + background: var(--openms-white); +} + +/* The first anchor after the hero already gets pro-section-y of top + padding from the sitewide anchor rule (the way .openms-lib-about / + .openms-lib-resources / .openms-lib-block sections do) — don't stack + a second dose of it here. */ +.openms-lib-page--press-kit .openms-lib-page__body > .openms-lib-page__anchor:first-child > .press-kit-assets { + padding-top: 0; +} + +.press-kit-assets--soft { + background: var(--pro-band-soft, #f4f7fb); +} + +.press-kit-assets__inner { + width: 100%; + max-width: var(--pro-max); + margin-inline: auto; + padding-inline: var(--openms-page-inline); + box-sizing: border-box; +} + +.press-kit-assets__head { + display: grid; + gap: 0.5rem; + max-width: min(100%, 46rem); + margin-bottom: var(--pro-head-to-content); +} + +.press-kit-assets__eyebrow { + 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)); +} + +.press-kit-assets__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: 800; + line-height: 1.2; + letter-spacing: -0.02em; + color: var(--openms-navy); +} + +.press-kit-assets__lead { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.press-kit-assets__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--pro-card-gap); +} + +.press-kit-asset { + display: grid; + grid-template-rows: auto auto 1fr; + gap: var(--pro-space-3); + 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; +} + +.press-kit-asset:hover, +.press-kit-asset:focus-within { + border-color: var(--pro-line-strong); + box-shadow: var(--pro-shadow-hover); + transform: var(--pro-lift-sm, translateY(-2px)); +} + +.press-kit-asset__preview { + display: grid; + place-items: center; + height: 8rem; + padding: 1rem; + border-radius: calc(var(--pro-radius) - 0.35rem); + box-sizing: border-box; +} + +.press-kit-asset__preview--light { + background: var(--pro-band-soft, #f4f7fb); +} + +.press-kit-asset__preview--dark { + background: var(--openms-navy); +} + +.press-kit-asset__preview img { + display: block; + width: auto; + height: auto; + max-width: calc(100% - 2rem); + max-height: 6rem; +} + +.press-kit-asset__icon { + display: grid; + place-items: center; + height: 8rem; + border-radius: calc(var(--pro-radius) - 0.35rem); + background: var(--pro-band-soft, #f4f7fb); + color: var(--openms-blue); + font-size: 2.75rem; +} + +.press-kit-asset__body { + display: grid; + gap: 0.2rem; +} + +.press-kit-asset__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.6vw, 1.1rem); + font-weight: 700; + color: var(--openms-navy); +} + +.press-kit-asset__meta { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(var(--openms-dark-rgb), 0.5); +} + +.press-kit-asset__cta { + display: inline-flex; + align-items: center; + gap: 0.35rem; + align-self: end; + width: fit-content; + font-size: var(--openms-text-min); +} + +/* This page has no outro/CTA band, so the sitewide .openms-lib-layout + bottom padding (meant to give room above a following band) just + stacks a second, dead gap after the note's own padding-bottom below. */ +.openms-lib-layout:has(.openms-lib-page--press-kit) { + padding-bottom: 0; +} + +.press-kit-note { + width: 100%; + padding-block: clamp(2.5rem, 5vw, 3.5rem); + padding-inline: var(--openms-page-inline, 1.5rem); + box-sizing: border-box; + background: var(--pro-band-soft, #f4f7fb); +} + +.press-kit-note__inner { + width: 100%; + max-width: min(100%, 46rem); + margin-inline: auto; + padding: clamp(1.5rem, 3.5vw, 2.25rem); + box-sizing: border-box; + display: grid; + gap: 0.75rem; + font-size: var(--openms-body-size); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.72); + background: var(--openms-white); + border: 1px solid var(--pro-line); + border-radius: var(--pro-radius); + box-shadow: var(--pro-shadow); +} + +@media (max-width: 720px) { + .press-kit-assets__grid { + grid-template-columns: 1fr; + } +} diff --git a/assets/css/privacy-page.css b/assets/css/privacy-page.css new file mode 100644 index 00000000..2b474658 --- /dev/null +++ b/assets/css/privacy-page.css @@ -0,0 +1,414 @@ +/* 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; +} + +/* Note: this file predates the current privacy-main.html markup, which + now uses the same generic .openms-lib-about / .openms-lib-resources + sections as governance/contributors (rather than page-specific + .privacy-overview / .privacy-details wrappers). The rules below that + still reference those old wrapper classes no longer match anything; + left in place rather than risk deleting styling this file's other + rules may still depend on. The padding-inline:0 this used to pair + with those wrappers has been removed since nothing here restores it + any more, which was leaving the page content flush against the + viewport edge. */ +.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(--sol-canvas, #f8f8f9) !important; + padding-bottom: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); +} + +.openms-lib-page--privacy #privacy-topics { + background: var(--openms-white) !important; + padding-bottom: var(--pro-section-y, clamp(4rem, 9vw, 6.5rem)); +} + +.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%; + + 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 deleted file mode 100644 index ab77a289..00000000 --- a/assets/css/quick-facts.css +++ /dev/null @@ -1,111 +0,0 @@ -.facts { - margin: 15px 15px; - /* display: flex; */ - justify-content: center; - align-items: center; - min-height: 20vh; -} - -.facts-title { - display: flex; - justify-content: center; - letter-spacing: 1.5px; - font-size: 30px; - font-weight: bold; -} - -.facts-list { - margin: 10px; -} - -.facts-para { - margin: 0px 0px 5px 0px; - font-size: 20px; -} - -.facts-btn, facts-btn::after { - width: 380px; - height: 86px; - font-size: 36px; - font-family: 'Bebas Neue', cursive; - background: linear-gradient(45deg, transparent 5%, #FF013C 5%); - border: 0; - color: #fff; - letter-spacing: 3px; - line-height: 88px; - box-shadow: 6px 0px 0px #00E6F6; - outline: transparent; - position: relative; -} - -.facts-btn::after { - --slice-0: inset(50% 50% 50% 50%); - --slice-1: inset(80% -6px 0 0); - --slice-2: inset(50% -6px 30% 0); - --slice-3: inset(10% -6px 85% 0); - --slice-4: inset(40% -6px 43% 0); - --slice-5: inset(80% -6px 5% 0); - - content: 'AVAILABLE NOW'; - display: block; - position: absolute; - top: 0; - 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; - clip-path: var(--slice-0); -} - -.facts-btn:hover::after { - animation: 1s glitch; - animation-timing-function: steps(2, end); -} - -@keyframes glitch { - 0% { - clip-path: var(--slice-1); - transform: translate(-20px, -10px); - } - 10% { - clip-path: var(--slice-3); - transform: translate(10px, 10px); - } - 20% { - clip-path: var(--slice-1); - transform: translate(-10px, 10px); - } - 30% { - clip-path: var(--slice-3); - transform: translate(0px, 5px); - } - 40% { - clip-path: var(--slice-2); - transform: translate(-5px, 0px); - } - 50% { - clip-path: var(--slice-3); - transform: translate(5px, 0px); - } - 60% { - clip-path: var(--slice-4); - transform: translate(5px, 10px); - } - 70% { - clip-path: var(--slice-2); - transform: translate(-10px, 10px); - } - 80% { - clip-path: var(--slice-5); - transform: translate(20px, -10px); - } - 90% { - clip-path: var(--slice-1); - transform: translate(-10px, 0px); - } - 100% { - clip-path: var(--slice-1); - transform: translate(0); - } -} \ No newline at end of file diff --git a/assets/css/research-partnerships-page.css b/assets/css/research-partnerships-page.css new file mode 100644 index 00000000..41e6bc44 --- /dev/null +++ b/assets/css/research-partnerships-page.css @@ -0,0 +1,103 @@ +/* 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(--sol-section-y, var(--pro-section-y, clamp(3.5rem, 7vw, 5.25rem))); +} + +/* 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; +} + +/* 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/rhm-charter.css b/assets/css/rhm-charter.css new file mode 100644 index 00000000..41a2df37 --- /dev/null +++ b/assets/css/rhm-charter.css @@ -0,0 +1,47 @@ +/* Code of Conduct Enforcement Procedures — governance-style hero header, + then a plain, "wall of text" body like a legal document (e.g. + apache.org/foundation/how-it-works/). Reuses the site's base + .openms-lib-prose typography for headings/paragraphs/lists. */ + +/* The hero already ends with its own breathing room below the lead line, + so cancel the sitewide "first anchor after hero" top padding to avoid + stacking two gaps in a row. */ +.openms-lib-page--report-handling .openms-lib-page__body > .openms-lib-page__anchor:first-child { + padding-top: clamp(1.5rem, 4vw, 2.5rem) !important; +} + +/* Compound with .openms-lib-prose so this beats the sitewide + .openms-lib-prose { max-width: none } rule regardless of stylesheet + load order (equal-specificity single-class rules lose to whichever + loads last, which isn't always us). Padding-inline is set here too, + rather than relying on the parent anchor. */ +.rhm-charter__inner.openms-lib-prose { + box-sizing: border-box; + width: 100%; + max-width: var(--pro-max, 75rem); + margin-inline: auto; + padding-inline: var(--openms-page-inline, 1.5rem); + padding-bottom: clamp(1.5rem, 3vw, 2.25rem); + overflow: hidden; +} + +/* This page has no outro/CTA band, so the sitewide .openms-lib-layout + bottom padding (meant to give room above a following band) just + leaves a large dead gap before the footer here. */ +.openms-lib-layout:has(.openms-lib-page--report-handling) { + padding-bottom: 0; +} + +/* A site-wide reset hides list markers by default; a plain document page + needs visible bullets/numbers like any normal prose list. */ +.rhm-charter__inner ul { + list-style: disc; +} + +.rhm-charter__inner ol { + list-style: decimal; +} + +.rhm-charter__inner li { + list-style: inherit; +} diff --git a/assets/css/services-page.css b/assets/css/services-page.css new file mode 100644 index 00000000..d037e947 --- /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: 560px; + 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..2a8ce522 --- /dev/null +++ b/assets/css/sponsor-us-page.css @@ -0,0 +1,595 @@ +.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; + } +} + +html body .openms-lib-page--sponsor-us .openms-lib-about__mosaic .openms-lib-about__tile-title { + margin: 0 0 1.5rem !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__lead { + display: block !important; + grid-template-columns: none !important; + max-width: min(63.5rem, 100%) !important; + width: auto !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-lead-col { + display: block !important; +} + +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__answer p a.openms-cta-link, +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__answer p a.sponsor-faq__link, +html body .openms-lib-page.openms-lib-page--sponsor-us .sponsor-faq__link { + display: inline-flex !important; + align-items: baseline; + gap: 0.28rem; + 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; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__answer a.openms-cta-link span[aria-hidden="true"], +html body .openms-lib-page--sponsor-us .sponsor-faq__link span[aria-hidden="true"] { + font-weight: 400 !important; + text-decoration: none !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__answer a.openms-cta-link:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__answer a.openms-cta-link:focus-visible, +html body .openms-lib-page--sponsor-us .sponsor-faq__link:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__link:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + gap: 0.42rem; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__question:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__question:focus-visible { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + background: rgba(var(--openms-blue-rgb), 0.04) !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__question:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__question:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + background: rgba(var(--openms-blue-rgb), 0.04) !important; +} + +@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..3fd88a86 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,199 +692,674 @@ 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 { + display: grid; + row-gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .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: normal; + overflow-wrap: anywhere; + 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; +.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-link-group ul li a { + white-space: normal; + overflow-wrap: anywhere; + } +} + +@media (max-width: 1024px) { + /* Keep the links to the right of the logo through md-lg widths instead of + stacking - narrow the brand column and drop the nav to 2 columns + (instead of 4) so both sides still fit comfortably side by side. */ + .footer-top { + grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); + gap: clamp(1.25rem, 3vw, 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(2, minmax(0, 1fr)); + justify-content: stretch; + column-gap: clamp(0.85rem, 2vw, 1.35rem); + row-gap: 1.25rem; + padding-right: 0; + } + + .footer-links-area { + gap: 1.25rem; + padding-top: 0; + } +} + +@media (max-width: 640px) { + /* Only genuinely small/mobile screens stack the logo above the links - + below this, a 14rem brand column leaves too little room for the nav + to stay readable next to it. */ + .footer-top { + grid-template-columns: 1fr; gap: 2rem; - padding: 0 1.25rem 2rem; + } +} + +@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-brand { - flex: unset; + .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-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-group-heading { + letter-spacing: 0.06em; } - .footer-links { + .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 +1368,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 deleted file mode 100644 index a7c39bcd..00000000 --- a/assets/css/tabs.css +++ /dev/null @@ -1,147 +0,0 @@ -.uikit-tab-wrapper-mobile { - display: flex; - flex-direction: row; -} - -.tabs-section { - display: flex; - flex-direction: column; -} - -.tabs-section .container { - display: flex; - flex-direction: column; -} - -.tabs-title { - display: flex; - justify-content: center; - letter-spacing: 1.5px; - font-size: 27px; - margin: 30px 0; -} - -.visualization, .data-science, .scientific-domains, .machine-learning, .array-libraries { - max-width: 900px; - margin: 15px auto; -} - -.uk-tab > li { - padding: 0 10px; -} - -.uk-nav > li > a { - height: 35px; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 1.5px; - font-weight: 500; - color: rgb(108, 122, 137); -} - -#tabs-content > li { - width: 90vw; - max-width: 900px; - margin: 50px auto; -} - -@media only screen and (max-width: 1200px) { - .tabs-section { - margin: 30px 10px; - } - - .tabs-title { - margin: 30px; - } -} - -.grid-container { - display: grid; - grid-template-columns: auto auto; - grid-gap: 20px; -} - -.grid-container > div { - /* White, with 80% opacity */ - background-color: rgba(255, 255, 255, 0.8); - text-align: middle; -} - -@media only screen and (max-width: 600px) { - .grid-container { - display: block; - } -} - -/* Visualization */ -.visualization-images > img { - border-radius: 10px; -} - -.image-grid { - display: grid; - grid-template-columns: auto auto auto auto; - grid-gap: 10px; -} - -.image-grid > div { - background-color: rgb(238, 238, 238); - border: 2px solid rgb(255, 255, 255); - border-radius: 10px; - padding: 10px; -} - -/* Scientific Domains */ -td, th { - font-size: 0.8rem; - padding: 8px; -} - -td > a { - font-size: 0.8rem; -} - -tr.highlight-th { - border-top: 1px solid rgb(238, 238, 238); - font-size: 0.8rem; -} - -td.bold-text { - font-weight: bold; - text-align: center; -} - -img.cell-layout { - border-radius: 10px; - width: 50px; - height: 50px; - display: block; - margin-left: auto; - margin-right: auto; -} - -td.center-text { - text-align: center; - line-height: 35%; -} - -td.full-center-text { - text-align: center; - vertical-align: middle; - line-height: 45%; -} - -td.lastrow-center-text { - text-align: center; - line-height: 35%; - border-bottom: 1px solid rgb(255, 255, 255); -} - -/* Array Libraries */ -img.first-column-layout { - height: 30px; -} - -td.left-text { - vertical-align: middle; -} 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-archived-apps.css b/assets/css/z-archived-apps.css new file mode 100644 index 00000000..c904c1ca --- /dev/null +++ b/assets/css/z-archived-apps.css @@ -0,0 +1,384 @@ +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__projects { + display: block !important; + width: 100% !important; +} + +html body .openms-lib-page--archived .webapps-archived__grid, +html body .openms-lib-page--archived .webapps-archived__grid--solo, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__grid, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__grid--solo { + width: 100% !important; + max-width: none !important; + flex: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice, +html body .openms-lib-page--archived .webapps-archived__notice--callout, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout { + width: 100% !important; + max-width: none !important; + flex: none !important; + margin: 0 0 1.5rem !important; + padding: 1rem 1.25rem !important; + justify-items: start !important; + text-align: left !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-head, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-head { + justify-content: flex-start !important; + text-align: left !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-list, +html body .openms-lib-page--archived .webapps-archived__notice-item, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-list, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: 0 !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-list, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-list { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + gap: 0.85rem !important; + padding: 0 !important; + width: 100% !important; + overflow: visible !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-item, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-item { + padding: 0 !important; + justify-items: start !important; + text-align: left !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-copy, +html body .openms-lib-page--archived .webapps-archived__notice-heading, +html body .openms-lib-page--archived .webapps-archived__notice-text, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-copy, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-heading, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice-text { + text-align: left !important; + justify-items: start !important; + margin: 0 !important; + max-width: none !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__inner, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__inner { + width: 100% !important; + max-width: none !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__heading .webapps-archived-entry__meta, +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__heading .webapps-archived-entry__name, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__heading .webapps-archived-entry__meta, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__heading .webapps-archived-entry__name { + grid-area: auto !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__heading, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__heading { + display: grid !important; + grid-area: heading !important; + gap: 0.12rem !important; + align-content: start !important; + align-self: start !important; + margin: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry { + grid-template-columns: minmax(0, 1fr) auto !important; + grid-template-areas: + "heading logo" + "text text" + "maintainers maintainers" + "actions actions" !important; + row-gap: 0.3rem !important; + align-items: start !important; + padding-top: 0.7rem !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__media, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__media { + justify-self: end !important; + justify-content: flex-end !important; + align-items: flex-start !important; + align-self: start !important; + height: auto !important; + min-height: 0 !important; + max-height: none !important; + padding: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__logo, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__logo { + object-position: right top !important; + height: auto !important; + max-height: 3.25rem !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__text, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__text { + margin-top: 0 !important; + align-self: start !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__meta, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__meta { + display: flex !important; + flex-direction: column !important; + justify-content: flex-start !important; + align-items: flex-start !important; + flex-wrap: nowrap !important; + gap: 0.28rem !important; + width: auto !important; + max-width: 100% !important; + margin: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__type, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__type { + margin: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__badge, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__badge { + margin: 0 !important; + margin-left: 0 !important; + font-size: 0.5rem !important; + line-height: 1.15 !important; + letter-spacing: 0.06em !important; + padding: 0.06rem 0.34rem !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived-entry__name, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived-entry__name { + margin: 0 !important; + padding: 0 !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival, +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + background-image: none !important; + color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-kicker, +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival-kicker { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival :is(.webapps-archived__revival-text, .webapps-archived__revival-text strong, p, strong):not(.openms-lib-btn):not(.openms-lib-btn__label), +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival :is(.webapps-archived__revival-text, .webapps-archived__revival-text strong) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-note, +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival-note { + color: rgba(var(--openms-white-rgb), 0.88) !important; + -webkit-text-fill-color: rgba(var(--openms-white-rgb), 0.88) !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost:visited { + background: transparent !important; + background-color: transparent !important; + border: 2px solid var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary, +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary:is(:hover, :focus-visible, :active), +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary, +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary:is(:hover, :focus-visible, :active) { + 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; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost :is(.openms-lib-btn__label, span), +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost:visited :is(.openms-lib-btn__label, span) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary :is(.openms-lib-btn__label, span), +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span), +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary :is(.openms-lib-btn__label, span), +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +@media (max-width: 47.99rem) { + html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__projects, + html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived--catalog .webapps-archived__projects { + flex-direction: row !important; + flex-wrap: wrap !important; + justify-content: center !important; + align-items: flex-start !important; + } + + html body .openms-lib-page--archived .webapps-archived__grid, + html body .openms-lib-page--archived .webapps-archived__grid--solo, + html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__grid, + html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__grid--solo { + width: min(100%, 32rem) !important; + max-width: 32rem !important; + flex: 1 1 16rem !important; + } + + html body .openms-lib-page--archived .webapps-archived__notice, + html body .openms-lib-page--archived .webapps-archived__notice--callout, + html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice, + html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout { + width: 100% !important; + max-width: none !important; + flex: none !important; + } +} + +html body .openms-lib-page--archived .webapps-archived__notice, +html body .openms-lib-page--archived .webapps-archived__notice--callout, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice, +html body .openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout { + align-self: stretch !important; + width: 100% !important; + max-width: none !important; + margin: 0 0 1.5rem !important; + padding: 1rem 1.25rem !important; + border: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)) !important; + border-radius: var(--sol-radius, 1rem) !important; + background: rgba(var(--openms-navy-rgb), 0.03) !important; + box-shadow: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-head, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-head { + display: flex !important; + align-items: center !important; + gap: 0.5rem !important; + margin: 0 0 1rem !important; + padding: 0 0 0.85rem !important; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08) !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-icon, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-icon { + width: 1.65rem !important; + height: 1.65rem !important; + color: var(--openms-blue) !important; + background: rgba(var(--openms-blue-rgb), 0.1) !important; + border-radius: 999px !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-title, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-title { + margin: 0 !important; + color: var(--openms-blue) !important; + font-family: var(--openms-font-heading) !important; + font-size: 0.78rem !important; + font-weight: 800 !important; + letter-spacing: 0.12em !important; + text-transform: uppercase !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-list, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-list { + display: flex !important; + flex-direction: column !important; + gap: 0.85rem !important; + margin: 0 !important; + padding: 0 !important; + list-style: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-item, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-item { + display: block !important; + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + background: transparent !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-item::before, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-item::before { + display: none !important; + content: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-copy { + display: flex !important; + flex-direction: column !important; + gap: 0.2rem !important; + min-width: 0 !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-index { + display: none !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-heading, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-heading { + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + color: var(--openms-navy) !important; + font-family: var(--openms-font-heading) !important; + font-size: 1rem !important; + font-weight: 800 !important; + letter-spacing: -0.02em !important; + line-height: 1.25 !important; +} + +html body .openms-lib-page--archived .webapps-archived__notice-text, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-text { + margin: 0 !important; + color: var(--openms-grey) !important; + font-size: 0.88rem !important; + font-weight: 500 !important; + line-height: 1.5 !important; +} + +/* Push the "Available references" heading down a bit from the notice above it */ +html body .openms-lib-page--archived #archived-apps .contribute-ways { + margin-top: clamp(2rem, 5vw, 3.5rem) !important; +} + +/* Centre the "Community opportunity" revival band */ +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival, +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival { + flex-direction: column !important; + justify-content: center !important; + align-items: center !important; + text-align: center !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival-copy, +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-copy { + flex: 0 1 auto !important; + text-align: center !important; +} + +html body .openms-lib-page--archived .webapps-archived--catalog .webapps-archived__revival-actions, +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__revival-actions { + justify-content: center !important; +} diff --git a/assets/css/z-calendar-stack.css b/assets/css/z-calendar-stack.css new file mode 100644 index 00000000..fa178375 --- /dev/null +++ b/assets/css/z-calendar-stack.css @@ -0,0 +1,83 @@ +/* Calendar — Upcoming on top, Past below; full solution-page width */ + +html body .openms-lib-page--calendar { + --calendar-max: var(--pro-max, 75rem) !important; +} + +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, +html body .openms-lib-page--calendar .community-events-page__section, +html body .openms-lib-page--calendar .community-events-page__section--upcoming, +html body .openms-lib-page--calendar .community-events-page__section--past { + width: 100% !important; + max-width: var(--pro-max, 75rem) !important; +} + +html body .openms-lib-page--calendar .community-events-page { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: var(--pro-section-y, clamp(3rem, 6vw, 4.5rem)) !important; +} + +html body .openms-lib-page--calendar .community-events-page__section, +html body .openms-lib-page--calendar .community-events-page__section--upcoming, +html body .openms-lib-page--calendar .community-events-page__section--past { + display: grid !important; + grid-template-rows: none !important; + grid-row: auto !important; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; +} + +html body .openms-lib-page--calendar .community-events-page__header, +html body .openms-lib-page--calendar .events-past-toolbar, +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: auto !important; + align-self: stretch !important; + width: 100% !important; + max-width: 100% !important; +} + +/* Event cards fill the wider rail */ +html body .openms-lib-page--calendar .community-events-home__grid, +html body .openms-lib-page--calendar .community-events-page__grid, +html body .openms-lib-page--calendar .events-past-year .community-events-home__grid { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + width: 100% !important; + max-width: 100% !important; +} + +@media (min-width: 901px) { + html body .openms-lib-page--calendar .community-events-page { + display: flex !important; + flex-direction: column !important; + grid-template-columns: none !important; + grid-template-rows: none !important; + } + + html body .openms-lib-page--calendar .community-events-page__section { + display: grid !important; + grid-template-rows: none !important; + grid-row: auto !important; + } + + html body .openms-lib-page--calendar .community-events-home__grid, + html body .openms-lib-page--calendar .community-events-page__grid, + html body .openms-lib-page--calendar .events-past-year .community-events-home__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + column-gap: clamp(1.25rem, 2.5vw, 1.75rem) !important; + row-gap: clamp(1.15rem, 2.2vw, 1.5rem) !important; + } +} + +@media (min-width: 1200px) { + html body .openms-lib-page--calendar .community-events-home__grid, + html body .openms-lib-page--calendar .community-events-page__grid, + html body .openms-lib-page--calendar .events-past-year .community-events-home__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } +} diff --git a/assets/css/z-code-of-conduct.css b/assets/css/z-code-of-conduct.css new file mode 100644 index 00000000..575f4c62 --- /dev/null +++ b/assets/css/z-code-of-conduct.css @@ -0,0 +1,20 @@ +/* CoC Overview — report link alignment (card layout from z-zzz) */ +html body .openms-lib-page--code-of-conduct .coc-report { + align-items: end !important; +} + +html body .openms-lib-page.openms-lib-page--code-of-conduct aside.coc-report a.coc-report__link, +html body .openms-lib-page.openms-lib-page--code-of-conduct aside.coc-report a.coc-report__link:hover, +html body .openms-lib-page.openms-lib-page--code-of-conduct aside.coc-report a.coc-report__link:focus-visible, +html body .openms-lib-page.openms-lib-page--code-of-conduct aside.coc-report a.coc-report__link:visited, +html body .openms-lib-page.openms-lib-page--code-of-conduct aside.coc-report a.coc-report__link span[aria-hidden="true"] { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + align-self: end !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--code-of-conduct .coc-report { + align-items: start !important; + } +} diff --git a/assets/css/z-contribute-channels.css b/assets/css/z-contribute-channels.css new file mode 100644 index 00000000..260c8ac0 --- /dev/null +++ b/assets/css/z-contribute-channels.css @@ -0,0 +1,8 @@ +/* Contribute Channels — separated white cards (shared num-card pattern in z-zzz) */ + +/* No number-to-number connector lines */ +html body .openms-lib-page--contribute .contribute-channel__index::before, +html body .openms-lib-page--contribute .contribute-channel__index::after { + content: none !important; + display: none !important; +} diff --git a/assets/css/z-contribute-coc.css b/assets/css/z-contribute-coc.css new file mode 100644 index 00000000..a47b2e00 --- /dev/null +++ b/assets/css/z-contribute-coc.css @@ -0,0 +1,28 @@ +/* Contribute page reuses the Code of Conduct "We encourage" section at + the bottom (scoped via .openms-lib-page--code-of-conduct on the + #code-of-conduct anchor). The report box there gains a second action — + a "Report an incident" button alongside the report-handling-manual + link — so lay both out as a stack instead of the single inline link + the Code of Conduct page uses. */ +.openms-lib-page--code-of-conduct .coc-report__actions { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 0.65rem; + flex-shrink: 0; +} + +@media (max-width: 720px) { + .openms-lib-page--code-of-conduct .coc-report__actions { + align-items: stretch; + width: 100%; + } + + .openms-lib-page--code-of-conduct .coc-report__actions .openms-lib-btn { + width: 100%; + } + + .openms-lib-page--code-of-conduct .coc-report__actions .coc-report__link { + justify-content: center; + } +} diff --git a/assets/css/z-contribute-os.css b/assets/css/z-contribute-os.css new file mode 100644 index 00000000..aa4ea832 --- /dev/null +++ b/assets/css/z-contribute-os.css @@ -0,0 +1,208 @@ +html body .openms-lib-page--contribute #contribute-build .contribute-os-buttons .openms-lib-btn, +html body .openms-lib-page--contribute #contribute-build .contribute-os-buttons .openms-lib-btn--ghost, +html body .openms-lib-page--contribute .contribute-track__item--mid .contribute-os-buttons .openms-lib-btn, +html body .openms-lib-page--contribute .contribute-track__item--mid .contribute-os-buttons .openms-lib-btn--ghost { + border: 2px solid var(--openms-blue) !important; +} + +html body .openms-lib-page--contribute #contribute-build:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn, +html body .openms-lib-page--contribute #contribute-build:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn--ghost, +html body .openms-lib-page--contribute .contribute-track__item--mid:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn, +html body .openms-lib-page--contribute .contribute-track__item--mid:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn--ghost { + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + box-shadow: none !important; +} + +html body .openms-lib-page--contribute #contribute-build .contribute-os-buttons .openms-lib-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contribute #contribute-build .contribute-os-buttons .openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contribute .contribute-track__item--mid .contribute-os-buttons .openms-lib-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contribute .contribute-track__item--mid .contribute-os-buttons .openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contribute #contribute-build:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contribute .contribute-track__item--mid:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn:is(:hover, :focus-visible, :active) { + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + background: rgba(var(--openms-white-rgb), 0.12) !important; + background-color: rgba(var(--openms-white-rgb), 0.12) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-white-rgb), 0.22) !important; +} + +html body .openms-lib-page--contribute #contribute-build:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn:is(:hover, :focus-visible, :active) :is(i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, span), +html body .openms-lib-page--contribute .contribute-track__item--mid:is(:hover, :focus-within) .contribute-os-buttons .openms-lib-btn:is(:hover, :focus-visible, :active) :is(i, .fab, .fas, .svg-inline--fa, .openms-lib-btn__label, span) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--contribute #communication-channels.openms-lib-page__anchor { + padding-bottom: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; +} + +html body .openms-lib-page--contribute #ways-to-contribute.openms-lib-page__anchor { + padding-top: clamp(2rem, 4.25vw, 3.25rem) !important; +} + +html body .openms-lib-page--contribute .contribute-outreach__contact a:is(:hover, :focus-visible), +html body .openms-lib-page--contribute .contribute-outreach__social-link:is(:hover, :focus-visible), +html body .openms-lib-page--contribute .contribute-outreach__social-link:is(:hover, :focus-visible) :is( + .contribute-outreach__social-label, + .contribute-outreach__social-hint, + .contribute-outreach__social-arrow, + .contribute-outreach__social-icon, + i, + .fab, + .fas, + .svg-inline--fa +) { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + fill: currentColor !important; +} + +/* Ways — featured development full width; four equal cards below */ +html body .openms-lib-page--contribute .contribute-track__item--wide { + grid-column: 1 / -1 !important; + position: relative; +} + +html body .openms-lib-page--contribute .contribute-track__item--mid, +html body .openms-lib-page--contribute .contribute-track__item--docs, +html body .openms-lib-page--contribute .contribute-track__item--design, +html body .openms-lib-page--contribute .contribute-track__item--web { + grid-column: 1 / -1 !important; +} + +html body .openms-lib-page--contribute .contribute-track__badge { + position: absolute; + top: 0.95rem; + right: 0.95rem; + margin: 0; + padding: 0.28rem 0.65rem; + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.1); + color: var(--openms-blue); + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.04em; + line-height: 1.2; + text-transform: uppercase; +} + +html body .openms-lib-page--contribute .contribute-track__item--wide:is(:hover, :focus-within) .contribute-track__badge { + background: rgba(var(--openms-white-rgb), 0.16); + color: var(--openms-white); +} + +html body .openms-lib-page--contribute .contribute-track__item--mid .contribute-track__title, +html body .openms-lib-page--contribute .contribute-track__item--docs .contribute-track__title, +html body .openms-lib-page--contribute .contribute-track__item--design .contribute-track__title, +html body .openms-lib-page--contribute .contribute-track__item--web .contribute-track__title { + font-size: var(--openms-card-title-size) !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--contribute .contribute-track__item--mid, + html body .openms-lib-page--contribute .contribute-track__item--docs, + html body .openms-lib-page--contribute .contribute-track__item--design, + html body .openms-lib-page--contribute .contribute-track__item--web { + grid-column: 1 / -1 !important; + } + + html body .openms-lib-page--contribute .contribute-track__badge { + top: 0.75rem; + right: 0.75rem; + } +} + +/* Funding / Sponsor band — responsive stack */ +html body .openms-lib-page--contribute .contribute-support { + display: grid !important; + grid-template-columns: minmax(0, 1fr) auto !important; + align-items: center !important; + column-gap: clamp(1.25rem, 3vw, 2.5rem) !important; + row-gap: 1rem !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--contribute .contribute-support__copy { + display: grid !important; + grid-column: 1 !important; + gap: 0.35rem !important; + min-width: 0 !important; + max-width: none !important; +} + +html body .openms-lib-page--contribute .contribute-support__kicker, +html body .openms-lib-page--contribute .contribute-support__title, +html body .openms-lib-page--contribute .contribute-support__text { + grid-column: auto !important; + min-width: 0 !important; + max-width: none !important; +} + +html body .openms-lib-page--contribute .contribute-support__title { + font-size: var(--openms-secondary-heading-size-lg, clamp(1.25rem, 2.4vw, 1.55rem)) !important; + font-weight: 800 !important; + line-height: 1.25 !important; + letter-spacing: -0.02em !important; + text-transform: none !important; + overflow-wrap: anywhere; +} + +html body .openms-lib-page--contribute .contribute-support__text { + white-space: normal !important; + text-wrap: pretty !important; + overflow-wrap: break-word !important; + font-size: var(--openms-body-size, 1rem) !important; + line-height: 1.55 !important; +} + +html body .openms-lib-page--contribute .contribute-support__cta, +html body .openms-lib-page--contribute .contribute-support__cta.openms-lib-btn { + grid-column: 2 !important; + grid-row: 1 / -1 !important; + justify-self: end !important; + align-self: center !important; + width: fit-content !important; + max-width: 100% !important; + white-space: nowrap !important; +} + +@media (max-width: 900px) { + html body .openms-lib-page--contribute .contribute-support { + grid-template-columns: 1fr !important; + justify-items: start !important; + } + + html body .openms-lib-page--contribute .contribute-support__copy { + grid-column: 1 !important; + } + + html body .openms-lib-page--contribute .contribute-support__cta, + html body .openms-lib-page--contribute .contribute-support__cta.openms-lib-btn { + grid-column: 1 !important; + grid-row: auto !important; + justify-self: start !important; + white-space: normal !important; + text-align: center !important; + } +} + +@media (max-width: 520px) { + html body .openms-lib-page--contribute .contribute-support__cta, + html body .openms-lib-page--contribute .contribute-support__cta.openms-lib-btn { + width: 100% !important; + max-width: 100% !important; + } +} diff --git a/assets/css/z-contributors.css b/assets/css/z-contributors.css new file mode 100644 index 00000000..e57f73c4 --- /dev/null +++ b/assets/css/z-contributors.css @@ -0,0 +1,105 @@ +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + background-image: none !important; + color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-kicker { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-text, +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-text strong { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-note { + color: rgba(var(--openms-white-rgb), 0.88) !important; + -webkit-text-fill-color: rgba(var(--openms-white-rgb), 0.88) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost:visited { + background: transparent !important; + background-color: transparent !important; + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary, +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary:is(:hover, :focus-visible, :active, :visited) { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost :is(.openms-lib-btn__label, span), +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--ghost.openms-lib-cta-band__btn-ghost:visited :is(.openms-lib-btn__label, span) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary :is(.openms-lib-btn__label, span), +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors #join-community .webapps-archived__revival-actions a.openms-lib-btn.openms-lib-btn--primary:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .leadership-card { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + background-image: none !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .leadership-card__identity { + border-bottom-color: rgba(var(--openms-white-rgb), 0.18) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .leadership-card__name { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .leadership-card__role { + background: rgba(var(--openms-white-rgb), 0.12) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .leadership-card__bio, +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .leadership-card__bio p { + color: rgba(var(--openms-white-rgb), 0.88) !important; + -webkit-text-fill-color: rgba(var(--openms-white-rgb), 0.88) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .leadership-card__photo { + border-color: rgba(var(--openms-white-rgb), 0.35) !important; + box-shadow: 0 0 0 4px rgba(var(--openms-white-rgb), 0.08) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .member-tag { + margin: 0; + padding: 0.2rem 0.55rem; + border-radius: 999px; + background: rgba(var(--openms-blue-rgb), 0.1) !important; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; +} + +html body .openms-lib-page.openms-lib-page--hub.openms-lib-page--solution.openms-lib-page--contributors .member--chair { + border-color: rgba(var(--openms-blue-rgb), 0.35) !important; +} diff --git a/assets/css/z-ecosystem-cards.css b/assets/css/z-ecosystem-cards.css new file mode 100644 index 00000000..55cf0803 --- /dev/null +++ b/assets/css/z-ecosystem-cards.css @@ -0,0 +1,118 @@ +/* Ecosystem Developer tools — logos always fit inside cards */ + +html body .home-page .ecosystem-home { + --ecosystem-logo-box: clamp(5rem, 34%, 8.5rem); + --ecosystem-logo-box-h: clamp(2.75rem, 8vw, 4.5rem); +} + +html body .home-page .ecosystem-home__card-head { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: space-between !important; + gap: 0.65rem 0.85rem !important; + width: 100% !important; + min-width: 0 !important; + min-height: 0 !important; + height: auto !important; + overflow: hidden !important; +} + +html body .home-page .ecosystem-home__card-intro { + flex: 1 1 auto !important; + min-width: 0 !important; + max-width: 100% !important; +} + +html body .home-page .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--openms-lib .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--webapps .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--pyopenms .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--viz .ecosystem-home__card-icon { + flex: 0 1 auto !important; + align-self: center !important; + box-sizing: border-box !important; + width: auto !important; + min-width: 0 !important; + max-width: min(100%, var(--ecosystem-logo-box, 8.5rem)) !important; + height: auto !important; + max-height: var(--ecosystem-logo-box-h, 4.5rem) !important; + margin: 0 0 0 auto !important; + object-fit: contain !important; + object-position: right center !important; +} + +/* pyOpenMS / pyopenms_viz — same footprint in Ecosystem cards */ +html body .home-page .home-page__block--ecosystem .ecosystem-home__card--pyopenms .ecosystem-home__card-icon, +html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--pyopenms .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--viz .ecosystem-home__card-icon { + flex: 0 0 auto !important; + align-self: center !important; + width: 6.15rem !important; + height: 2.65rem !important; + max-width: min(100%, 6.15rem) !important; + max-height: 2.65rem !important; + min-width: 0 !important; + margin: 0 0 0 auto !important; + object-fit: contain !important; + object-position: right center !important; +} + +/* Square viz mark: fill the same landscape frame as pyOpenMS */ +html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-icon, +html body .home-page .ecosystem-home__card--viz .ecosystem-home__card-icon { + object-fit: cover !important; + object-position: center 62% !important; +} + +html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-head, +html body .home-page .ecosystem-home__card--viz .ecosystem-home__card-head { + height: auto !important; + min-height: 0 !important; + overflow: hidden !important; +} + +@media (max-width: 800px) { + html body .home-page .home-page__block--ecosystem .ecosystem-home { + --ecosystem-logo-box: clamp(5.5rem, 32vw, 9rem); + --ecosystem-logo-box-h: clamp(2.75rem, 10vw, 4.75rem); + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-head, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-head { + min-height: 0 !important; + height: auto !important; + overflow: hidden !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--openms-lib .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--webapps .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--pyopenms .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-icon { + flex: 0 1 auto !important; + width: auto !important; + min-width: 0 !important; + max-width: min(100%, var(--ecosystem-logo-box, 9rem)) !important; + height: auto !important; + max-height: var(--ecosystem-logo-box-h, 4.75rem) !important; + margin: 0 0 0 auto !important; + object-fit: contain !important; + object-position: right center !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--pyopenms .ecosystem-home__card-icon, + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-icon { + flex: 0 0 auto !important; + width: 6.75rem !important; + height: 2.85rem !important; + max-width: min(100%, 6.75rem) !important; + max-height: 2.85rem !important; + } + + html body .home-page .home-page__block--ecosystem .ecosystem-home__card--viz .ecosystem-home__card-icon { + object-fit: cover !important; + object-position: center 62% !important; + } +} diff --git a/assets/css/z-featured-apps.css b/assets/css/z-featured-apps.css new file mode 100644 index 00000000..93657da8 --- /dev/null +++ b/assets/css/z-featured-apps.css @@ -0,0 +1,55 @@ +@media (max-width: 800px) { + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__item .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-featured__grid--detail .webapps-project-detail-card, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card--featured { + display: grid !important; + grid-template-columns: minmax(0, 1fr) auto !important; + grid-template-areas: + "name logo" + "text logo" + "maintainers maintainers" + "actions actions" !important; + grid-template-rows: auto auto auto auto !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--large, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--xlarge, + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap--wide, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__logo-wrap { + grid-area: logo !important; + justify-self: end !important; + margin-left: auto !important; + margin-right: 0 !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__body, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__body { + display: contents !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__name, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__name { + grid-area: name !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__text, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__text { + grid-area: text !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__maintainers { + grid-area: maintainers !important; + width: 100% !important; + max-width: 100% !important; + justify-self: stretch !important; + } + + html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__actions, + html body .openms-lib-page--solution.openms-lib-page--featured.openms-lib-page--featured-pro .webapps-project-detail-card__actions { + grid-area: actions !important; + } +} diff --git a/assets/css/z-fellowship-facts.css b/assets/css/z-fellowship-facts.css new file mode 100644 index 00000000..86675e9f --- /dev/null +++ b/assets/css/z-fellowship-facts.css @@ -0,0 +1,8 @@ +/* Fellowship facts: closer under hero; card layout from z-zzz-num-strip-white.css */ +.openms-lib-page--fellowship .openms-lib-page__intro { + gap: clamp(0.65rem, 1.5vw, 1.1rem); +} + +.openms-lib-page--fellowship.openms-lib-page--solution .openms-lib-hero--solution { + padding-bottom: clamp(0.75rem, 2vw, 1.25rem) !important; +} diff --git a/assets/css/z-footer.css b/assets/css/z-footer.css new file mode 100644 index 00000000..a6fb4cb9 --- /dev/null +++ b/assets/css/z-footer.css @@ -0,0 +1,55 @@ +/* This file used to force the footer nav columns to `max-content` + `nowrap` + with its own breakpoints (64rem / 52rem / 30rem). That removed the + `minmax(0, ...)` safety net already built into `.footer-nav` in + styles_override.css, which caused real horizontal overflow around + 768-1024px (columns wider than the available row). The base rules in + styles_override.css already produce the same right-aligned, content-hugging + layout on wide screens and degrade cleanly through 1100px/1024px/768px/480px + with flexible `1fr` columns and wrapping text, so no width override is + needed here. + + The one thing added back below: at the 2-column breakpoints, the four + groups pair up as (Support, Community) then (About, Legal) in DOM order. + Support (2 links) sharing a row with Community (6 links) leaves a large + ragged gap under Support before the next row starts, since a grid row's + height follows its tallest cell. Reorder so the two long lists (Community, + About) share one row and the two short ones (Support, Legal) share the + other - only at the 2-column widths, so the desktop 4-column left-to-right + order (Support, Community, About, Legal) is unaffected. + + This now spans max-width: 1024px (not just 768px) to match + styles_override.css, where the footer nav switched to 2 columns starting + at 1024px so the links can stay to the right of the logo instead of + stacking below it through the md-lg range. */ +@media (max-width: 1024px) { + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(1) { + order: 3; /* Support */ + } + + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(2) { + order: 1; /* Community */ + } + + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(3) { + order: 2; /* About */ + } + + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(4) { + order: 4; /* Legal */ + } + + /* A separate rule (openms-overrides.css) adds top margin to DOM children + 3+ to space out what used to be the second row (About, Legal). That + margin stacked on top of the grid's own row-gap, making the space + between rows (49px) nearly double the space between columns (27px). + Zero it out on every group so the grid's row-gap - which already + equals its column-gap - is the only thing spacing the rows, matching + the column spacing everywhere. */ + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(1), + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(2), + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(3), + html body #footer.footer-redesign .footer-nav .footer-link-group:nth-child(4) { + margin-top: 0 !important; + padding-top: 0 !important; + } +} diff --git a/assets/css/z-head-to-cards.css b/assets/css/z-head-to-cards.css new file mode 100644 index 00000000..c28a72fa --- /dev/null +++ b/assets/css/z-head-to-cards.css @@ -0,0 +1,76 @@ +/* Title block → cards: one site-wide distance */ + +html body .openms-lib-page.openms-lib-page, +html body .home-page.home-page, +html body .openms-lib-page--news.openms-lib-page--news, +html body .openms-lib-page--calendar.openms-lib-page--calendar { + --openms-stack-cards: clamp(1.2rem, 2.5vw, 1.75rem) !important; + --pro-head-to-content: clamp(1.2rem, 2.5vw, 1.75rem) !important; + --home-section-head-gap: clamp(1.2rem, 2.5vw, 1.75rem) !important; +} + +html body .openms-lib-page .openms-lib-resources__inner, +html body .openms-lib-page .openms-lib-resources--explore .openms-lib-resources__inner, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__inner, +html body .openms-lib-page .openms-lib-about__inner, +html body .openms-lib-page .openms-lib-developers--cards:not(.openms-lib-developers--split) { + gap: var(--pro-head-to-content) !important; +} + +html body .openms-lib-page .openms-lib-resources__head, +html body .openms-lib-page .openms-lib-resources--explore .openms-lib-resources__head, +html body .openms-lib-page--solution #getting-started .openms-lib-resources__head, +html body .openms-lib-page--solution #getting-started .openms-lib-resources--explore .openms-lib-resources__head, +html body .openms-lib-page .openms-lib-about__head { + margin-bottom: 0 !important; +} + +html body .openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__inner { + gap: var(--pro-card-gap) clamp(1.5rem, 3vw, 2.5rem) !important; +} + +html body .openms-lib-page--webapps-pro .openms-lib-resources--examples .openms-lib-resources__inner, +html body .openms-lib-page--webapps-pro .openms-lib-resources__examples-layout { + gap: clamp(1.75rem, 4vw, 3.25rem) !important; +} + +html body .openms-lib-page .openms-lib-developers__cards-head, +html body .openms-lib-page--solution .openms-lib-developers--cards .openms-lib-developers__cards-head, +html body .openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards .openms-lib-developers__cards-head, +html body .openms-lib-page--solution.openms-lib-page--pyopenms-viz-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__cards-head, +html body .openms-lib-page--solution.openms-lib-page--webapps-pro .openms-lib-developers--cards .openms-lib-developers__cards-head { + margin-bottom: 0 !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-section__head { + margin-bottom: var(--pro-head-to-content) !important; +} + +html body .webapps-featured__header, +html body .openms-lib-page .webapps-featured__header, +html body .openms-lib-page .webapps-affiliates__header, +html body .openms-lib-page .webapps-archived__intro { + margin-bottom: var(--pro-head-to-content) !important; +} + +html body .openms-lib-page--featured .webapps-featured__header, +html body .openms-lib-page--affiliated .webapps-affiliates__header, +html body .openms-lib-page--archived .webapps-archived__intro { + margin-bottom: 0 !important; +} + +html body .community-news-events__column { + gap: var(--pro-head-to-content) !important; +} + +@media (max-width: 900px) { + html body .openms-lib-page--contribute #ways-to-contribute .openms-lib-resources__inner { + gap: var(--pro-head-to-content) !important; + } +} + +html body .openms-lib-page--publications .openms-lib-resources__head, +html body .openms-lib-page--publications .publications-featured .openms-lib-resources__head, +html body .openms-lib-page--publications .publications-bibliography > .openms-lib-resources__head { + margin-bottom: 0 !important; +} diff --git a/assets/css/z-hero-sm.css b/assets/css/z-hero-sm.css new file mode 100644 index 00000000..776be5d5 --- /dev/null +++ b/assets/css/z-hero-sm.css @@ -0,0 +1,650 @@ +/* Homepage hero — professional responsive UX/UI + Loads last (z-*). Preserves brand colors, fonts, and copy. + Goals: clear hierarchy, consistent rhythm, diagram/trust aligned, + 2-line lead, fluid type, comfortable CTAs at every breakpoint. */ + +html body .home-page__hero { + --hero-copy-max: min(38rem, 48%); + --hero-diagram-max: min(36rem, 46%); + --hero-diagram-height: clamp(9.5rem, 5.5vw + 4rem, 12rem); + --hero-lead-width: min(100%, 48ch); + --hero-col-gap: clamp(2.5rem, 5vw, 6.5rem); + --hero-stack-gap: clamp(1.25rem, 2.8vh, 1.75rem); + --hero-copy-gap: clamp(1rem, 1.4vw, 1.35rem); + --hero-note-size: clamp(0.875rem, 2.9cqi, 1.0625rem); +} + +/* ── Shared: diagram + trust one unit ─────────────────────────── */ +html body .home-page__hero .hero-home__diagram { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + width: min(100%, var(--hero-diagram-max)) !important; + max-width: var(--hero-diagram-max) !important; + min-width: 0 !important; + container-type: inline-size !important; + container-name: hero-diagram; +} + +html body .home-page__hero .hero-home__diagram .hero-mockup, +html body .home-page__hero .hero-home__diagram .hero-mockup__stage, +html body .home-page__hero .hero-home__diagram .hero-mockup__chart, +html body .home-page__hero .hero-home__diagram .hero-home__note { + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; +} + +html body .home-page__hero .hero-mockup__chart, +html body .home-page__hero .hero-home__diagram .hero-mockup__chart { + height: var(--hero-diagram-height) !important; + gap: 0.35rem !important; +} + +/* ── Shared: type ─────────────────────────────────────────────── */ +html body .home-page__hero .hero-home__title, +html body .home-page__hero .hero-home__title-accent { + font-size: clamp(1.95rem, 0.85rem + 3.2vw, 3.35rem) !important; + line-height: 1.08 !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .home-page__hero .hero-home__title { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: 0 !important; + width: max-content !important; + max-width: 100% !important; +} + +html body .home-page__hero .hero-home__title-line { + display: block !important; + width: max-content !important; + max-width: 100% !important; + white-space: nowrap !important; +} + +html body .home-page__hero .hero-home__title-accent { + white-space: nowrap !important; +} + +html body .home-page__hero .hero-home__eyebrow { + font-size: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem) !important; +} + +/* Lead: 2 lines — full mass spectrometry clause | rest */ +html body .home-page__hero .hero-home__description { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: 0.05em !important; + width: max-content !important; + max-width: 100% !important; + margin-top: 0.35rem !important; + font-size: clamp(1.05rem, 0.98rem + 0.28vw, 1.25rem) !important; + line-height: 1.5 !important; + text-wrap: unset !important; + overflow-wrap: normal !important; +} + +html body .home-page__hero .hero-home__description-line { + display: block !important; + width: max-content !important; + max-width: 100% !important; + white-space: nowrap !important; +} + +html body .home-page__hero .hero-home__description-line--1, +html body .home-page__hero .hero-home__description-line--2, +html body .home-page__hero .hero-home__description-line--3 { + display: block !important; + white-space: nowrap !important; + width: max-content !important; + max-width: 100% !important; +} + +html body .home-page__hero .hero-home__description-seg--lead { + display: inline !important; + white-space: nowrap !important; +} + +/* Trust labels under bars */ +html body .home-page__hero .hero-home__note, +html body .home-page__hero .hero-home__note--under-graphic { + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: space-between !important; + width: 100% !important; + max-width: 100% !important; + margin: 0.9rem 0 0 !important; + gap: clamp(0.4rem, 1.5cqi, 0.95rem) !important; + font-size: var(--hero-note-size) !important; + line-height: 1.35 !important; + white-space: nowrap !important; + overflow: visible !important; +} + +html body .home-page__hero .hero-home__note-item { + display: inline-flex !important; + align-items: center !important; + gap: clamp(0.32rem, 1cqi, 0.5rem) !important; + white-space: nowrap !important; +} + +html body .home-page__hero .hero-home__note-dot { + width: clamp(0.35rem, 1cqi, 0.5rem) !important; + height: clamp(0.35rem, 1cqi, 0.5rem) !important; + flex-shrink: 0 !important; +} + +html body .home-page__hero .hero-home__actions { + display: flex !important; + flex-wrap: wrap !important; + align-items: stretch !important; + justify-content: flex-start !important; + gap: calc(var(--openms-btn-glow-size, 6px) * 2 + 0.65rem) !important; +} + +html body .home-page__hero .hero-home__actions .hero-home__btn { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 2.75rem !important; + white-space: nowrap !important; +} + +html body .home-page__hero .hero-home__highlights { + display: none !important; +} + +/* ── Two-column: fluid sides + steady gap until stack ─────────── */ +@media (min-width: 901px) { + html body .home-page__hero { + --hero-copy-max: min(38rem, 48%); + --hero-diagram-max: min(36rem, 46%); + --hero-diagram-height: clamp(9.5rem, 5.5vw + 4rem, 12rem); + --hero-col-gap: clamp(2.5rem, 5vw, 6.5rem); + --hero-copy-gap: clamp(1rem, 1.4vw, 1.35rem); + --hero-note-size: clamp(0.8125rem, 2.7cqi, 1.05rem); + } + + html body .home-page__hero .hero-home { + min-height: clamp(28rem, 68svh, 42rem) !important; + } + + html body .home-page__hero .hero-home__main { + padding-top: clamp(4.5rem, 8vh, 6.5rem) !important; + padding-bottom: clamp(2rem, 4.5vh, 3.25rem) !important; + padding-inline: var(--openms-page-inline, clamp(1rem, 3.5vw, 2.5rem)) !important; + } + + html body .home-page__hero .hero-home__inner { + max-width: var(--pro-max, 75rem) !important; + width: 100% !important; + } + + /* Text left, diagram right; gap holds the distance */ + html body .home-page__hero .hero-home__hero-grid { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + justify-content: space-between !important; + align-items: flex-end !important; + gap: var(--hero-col-gap) !important; + width: 100% !important; + } + + html body .home-page__hero .hero-home__copy { + display: flex !important; + flex-direction: column !important; + justify-content: flex-end !important; + align-items: flex-start !important; + flex: 1 1 0 !important; + gap: var(--hero-copy-gap) !important; + min-width: 0 !important; + max-width: var(--hero-copy-max) !important; + width: auto !important; + container-type: inline-size !important; + container-name: hero-copy; + } + + html body .home-page__hero .hero-home__content { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: 0.7rem !important; + width: 100% !important; + min-width: 0 !important; + } + + html body .home-page__hero .hero-home__title, + html body .home-page__hero .hero-home__title-accent { + font-size: clamp(1.85rem, 0.9rem + 2.4vw, 3.35rem) !important; + max-width: 100% !important; + } + + html body .home-page__hero .hero-home__description { + font-size: clamp(0.92rem, 0.7rem + 0.45vw, 1.2rem) !important; + line-height: 1.45 !important; + gap: 0.1em !important; + margin-top: 0.15rem !important; + } + + @supports (font-size: 1cqi) { + html body .home-page__hero .hero-home__title, + html body .home-page__hero .hero-home__title-accent { + font-size: clamp(1.85rem, 0.7rem + 5.5cqi, 3.35rem) !important; + } + + html body .home-page__hero .hero-home__description { + font-size: clamp(0.92rem, 0.55rem + 1.6cqi, 1.2rem) !important; + } + } + + html body .home-page__hero .hero-home__description-line--1, + html body .home-page__hero .hero-home__description-line--2, + html body .home-page__hero .hero-home__description-line--3 { + display: block !important; + white-space: nowrap !important; + width: max-content !important; + max-width: 100% !important; + } + + html body .home-page__hero .hero-home__footer, + html body .home-page__hero .hero-home__actions-block { + width: auto !important; + max-width: 100% !important; + margin: 0 !important; + gap: 0 !important; + } + + html body .home-page__hero .hero-home__actions { + display: flex !important; + flex-wrap: nowrap !important; + gap: calc(var(--openms-btn-glow-size, 6px) * 2 + 0.75rem) !important; + } + + html body .home-page__hero .hero-home__actions .hero-home__btn { + width: auto !important; + flex: 0 0 auto !important; + } + + html body .home-page__hero .hero-home__visual { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + flex: 1 1 0 !important; + justify-content: flex-end !important; + align-self: flex-end !important; + min-width: 0 !important; + width: auto !important; + max-width: var(--hero-diagram-max) !important; + margin: 0 !important; + overflow: visible !important; + } + + html body .home-page__hero .hero-home__diagram { + width: 100% !important; + max-width: 100% !important; + margin-inline-start: auto !important; + } + + html body .home-page__hero .hero-mockup__labels { + display: flex !important; + justify-content: space-between !important; + margin: 0 0 0.55rem !important; + } + + html body .home-page__hero .hero-mockup__chrome-title, + html body .home-page__hero .hero-mockup__chrome-brand { + display: inline-flex !important; + font-size: clamp(0.65rem, 0.55rem + 0.2vw, 0.75rem) !important; + } + + html body .home-page__hero .hero-home__note, + html body .home-page__hero .hero-home__note--under-graphic { + margin-top: 0.85rem !important; + } +} + +/* ── Stacked shell (≤900) ─────────────────────────────────────── */ +@media (max-width: 900px) { + html body .home-page__hero { + --hero-diagram-max: min(100%, 36rem); + --hero-stack-gap: clamp(1.85rem, 4.2vh, 2.5rem); + --hero-note-size: clamp(0.9rem, 3.2cqi, 1.05rem); + --hero-lead-width: 100%; + --hero-chrome-size: 0.6875rem; + } + + html body .home-page__hero .hero-home { + min-height: 0 !important; + } + + html body .home-page__hero .hero-home__main { + padding-top: clamp(4.35rem, 8vh, 5.75rem) !important; + padding-bottom: clamp(1.85rem, 4.5vh, 2.75rem) !important; + padding-inline: var(--openms-page-inline, clamp(1rem, 4vw, 1.75rem)) !important; + } + + html body .home-page__hero .hero-home__hero-grid { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: var(--hero-stack-gap) !important; + } + + html body .home-page__hero .hero-home__copy { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: var(--hero-copy-gap) !important; + width: 100% !important; + max-width: 100% !important; + } + + html body .home-page__hero .hero-home__content { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + gap: 0.35rem !important; + width: 100% !important; + max-width: 100% !important; + } + + html body .home-page__hero .hero-home__eyebrow, + html body .home-page__hero .hero-mockup__chrome-title, + html body .home-page__hero .hero-mockup__chrome-brand { + margin-bottom: 0 !important; + font-size: var(--hero-chrome-size, 0.6875rem) !important; + font-weight: 700 !important; + letter-spacing: 0.06em !important; + line-height: 1.25 !important; + } + + html body .home-page__hero .hero-home__title, + html body .home-page__hero .hero-home__title-accent { + width: 100% !important; + max-width: 100% !important; + font-size: clamp(2.1rem, 5.2vw, 2.9rem) !important; + } + + html body .home-page__hero .hero-home__description { + display: block !important; + width: 100% !important; + max-width: 100% !important; + margin-top: 0.15rem !important; + white-space: normal !important; + overflow-wrap: break-word !important; + word-break: normal !important; + text-wrap: pretty !important; + font-size: clamp(1rem, 0.92rem + 0.45vw, 1.125rem) !important; + line-height: 1.55 !important; + } + + html body .home-page__hero .hero-home__description-line, + html body .home-page__hero .hero-home__description-line--1, + html body .home-page__hero .hero-home__description-line--2, + html body .home-page__hero .hero-home__description-line--3 { + display: inline !important; + white-space: normal !important; + width: auto !important; + max-width: none !important; + } + + html body .home-page__hero .hero-home__description-line--3::before { + content: " "; + } + + html body .home-page__hero .hero-home__footer, + html body .home-page__hero .hero-home__actions-block { + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + gap: 0 !important; + align-items: flex-start !important; + } + + html body .home-page__hero .hero-home__actions { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + width: 100% !important; + max-width: min(100%, 24rem) !important; + gap: 0.55rem !important; + } + + html body .home-page__hero .hero-home__actions .hero-home__btn { + width: 100% !important; + min-width: 0 !important; + flex: none !important; + justify-content: center !important; + white-space: nowrap !important; + } + + html body .home-page__hero .hero-home__visual { + display: flex !important; + flex-direction: column !important; + width: min(100%, var(--hero-diagram-max)) !important; + max-width: var(--hero-diagram-max) !important; + margin: 1.1rem 0 0 !important; + overflow: visible !important; + } + + html body .home-page__hero .hero-mockup__labels, + html body .home-page__hero .hero-mockup__chrome-title, + html body .home-page__hero .hero-mockup__chrome-brand { + display: none !important; + } +} + +/* ── Tablet stacked: wider diagram + 3-line lead ──────────────── */ +@media (min-width: 641px) and (max-width: 900px) { + html body .home-page__hero { + --hero-diagram-max: min(100%, 46rem); + --hero-diagram-height: 11rem; + --hero-stack-gap: clamp(1.9rem, 4vh, 2.6rem); + --hero-note-size: clamp(0.92rem, 2.8cqi, 1.05rem); + } + + html body .home-page__hero .hero-home__main { + padding-top: clamp(4.6rem, 7.5vh, 5.85rem) !important; + padding-bottom: clamp(2.1rem, 4vh, 2.9rem) !important; + } + + html body .home-page__hero .hero-home__description { + font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem) !important; + } +} + +@media (min-width: 481px) and (max-width: 640px) { + html body .home-page__hero { + --hero-diagram-max: min(100%, 100%); + --hero-diagram-height: 10.25rem; + --hero-note-size: clamp(0.88rem, 3cqi, 1rem); + } + + html body .home-page__hero .hero-home__visual { + width: 100% !important; + max-width: 100% !important; + } + + html body .home-page__hero .hero-mockup__labels, + html body .home-page__hero .hero-mockup__chrome-title, + html body .home-page__hero .hero-mockup__chrome-brand { + display: none !important; + } + + html body .home-page__hero .hero-home__title, + html body .home-page__hero .hero-home__title-accent { + font-size: clamp(2.15rem, 5.6vw, 2.75rem) !important; + } + + html body .home-page__hero .hero-home__description { + font-size: clamp(0.98rem, 2.8vw, 1.08rem) !important; + } +} + +/* ── Phones ───────────────────────────────────────────────────── */ +@media (max-width: 480px) { + html body .home-page__hero { + --hero-diagram-max: 100%; + --hero-diagram-height: 9.25rem; + --hero-stack-gap: 1.85rem; + --hero-copy-gap: 0.9rem; + --hero-note-size: clamp(0.85rem, 3.6cqi, 0.98rem); + } + + html body .home-page__hero .hero-home__main { + padding-top: clamp(4.1rem, 8.5vh, 5rem) !important; + padding-bottom: clamp(1.6rem, 4vh, 2.25rem) !important; + } + + /* At the old clamp, "Clear results for" and "mass spectrometry." (the + two longest of the three title lines) stop fitting their own line + width across most of this 361-480px range and wrap into two lines. */ + html body .home-page__hero .hero-home__title, + html body .home-page__hero .hero-home__title-accent { + font-size: clamp(1.65rem, 7.2vw, 2.2rem) !important; + } + + html body .home-page__hero .hero-home__title-line, + html body .home-page__hero .hero-home__title-accent { + white-space: normal !important; + overflow-wrap: break-word !important; + } + + html body .home-page__hero .hero-home__description { + font-size: clamp(0.95rem, 3.4vw, 1.05rem) !important; + line-height: 1.55 !important; + margin-top: 0.1rem !important; + } + + html body .home-page__hero .hero-mockup__labels, + html body .home-page__hero .hero-mockup__chrome-title, + html body .home-page__hero .hero-mockup__chrome-brand { + display: none !important; + } + + html body .home-page__hero .hero-home__actions { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; + max-width: min(100%, 23rem) !important; + gap: 0.55rem !important; + } + + html body .home-page__hero .hero-home__actions .hero-home__btn { + width: 100% !important; + min-height: 2.75rem !important; + padding-inline: 0.75rem !important; + } + + html body .home-page__hero .hero-home__visual, + html body .home-page__hero .hero-home__diagram { + width: 100% !important; + max-width: 100% !important; + } + + html body .home-page__hero .hero-home__note, + html body .home-page__hero .hero-home__note--under-graphic { + flex-wrap: wrap !important; + white-space: normal !important; + row-gap: 0.35rem !important; + } +} + +/* Very narrow phones */ +@media (max-width: 360px) { + /* "Clear results for" and "mass spectrometry." are the two longest + of the three title lines — at a shared size sized for "Open + science." they stop fitting their line width and wrap into two + lines instead of one, down at the narrow end of this range. Size + all three off the tightest of the three instead of leaving them + at inconsistent sizes or letting any of them wrap. */ + html body .home-page__hero .hero-home__title, + html body .home-page__hero .hero-home__title-accent { + font-size: clamp(1.4rem, 6.8vw, 2.3rem) !important; + } + + html body .home-page__hero .hero-home__description { + font-size: clamp(0.92rem, 3.6vw, 1rem) !important; + } + + /* The 2-up equal-width grid leaves "Explore the library" only a few + px of slack at this width (and none once padding/wrap is figured + in on real devices/fonts) — stack instead of continuing to shrink + text to fit two columns that keep getting narrower. */ + html body .home-page__hero .hero-home__actions:not(.__unused__) { + grid-template-columns: 1fr !important; + grid-auto-flow: row !important; + } + + html body .home-page__hero .hero-home__actions .hero-home__btn { + padding-inline: 0.75rem !important; + font-size: var(--openms-text-min, 0.8125rem) !important; + white-space: normal !important; + } +} + +@media (prefers-reduced-motion: reduce) { + html body .home-page__hero .hero-mockup__chart, + html body .home-page__hero .hero-mockup__bar { + animation: none !important; + } +} + +/* Explore the library — clear hover (was only an 8% white wash) */ +html body .home-page__hero .hero-home__btn--secondary, +html body .home-page__hero .hero-home__btn--secondary.about-cta-btn--donate { + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow-white, rgba(255, 255, 255, 0.22)) !important; + transition: var(--openms-btn-motion) !important; +} + +html body .home-page__hero .hero-home__btn--secondary:is(:hover, :focus-visible, :active), +html body .home-page__hero .hero-home__btn--secondary.about-cta-btn--donate:is(:hover, :focus-visible, :active) { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !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-white, rgba(255, 255, 255, 0.22)) !important; + outline: none; + text-decoration: none !important; +} + +html body .home-page__hero .hero-home__btn--secondary:is(:hover, :focus-visible, :active) :is(i, svg, span), +html body .home-page__hero .hero-home__btn--secondary.about-cta-btn--donate:is(:hover, :focus-visible, :active) :is(i, svg, span) { + 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:focus-visible, +html body .home-page__hero .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)) var(--openms-btn-glow-white, rgba(255, 255, 255, 0.22)) !important; +} + +@media (prefers-reduced-motion: reduce) { + html body .home-page__hero .hero-home__btn--secondary:is(:hover, :focus-visible, :active), + html body .home-page__hero .hero-home__btn--secondary.about-cta-btn--donate:is(:hover, :focus-visible, :active) { + transform: none !important; + } +} + diff --git a/assets/css/z-home-partners.css b/assets/css/z-home-partners.css new file mode 100644 index 00000000..e727c224 --- /dev/null +++ b/assets/css/z-home-partners.css @@ -0,0 +1,4 @@ +html body .home-page .uni-partners--home .uni-partners__trust-title-line { + display: block !important; + white-space: nowrap !important; +} diff --git a/assets/css/z-news-layout.css b/assets/css/z-news-layout.css new file mode 100644 index 00000000..1fc76351 --- /dev/null +++ b/assets/css/z-news-layout.css @@ -0,0 +1,43 @@ +/* News index — full solution-page width; cards stacked one under the other */ + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) { + --news-max: var(--pro-max, 75rem) !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .openms-lib-page__body > .openms-lib-page__anchor > .openms-lib-block, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-page-block, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-page, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-body, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-bibliography, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-bibliography__entries { + width: 100% !important; + max-width: var(--pro-max, 75rem) !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-bibliography, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-body { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; +} + +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .events-past-toolbar, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-year-toolbar, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-bibliography__entries, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-list, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-home__list, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .community-events-home__grid { + width: 100% !important; + max-width: 100% !important; +} + +/* Stack cards one under the other */ +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-list, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-home__list, +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .community-events-home__grid { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + column-gap: 0 !important; + row-gap: clamp(1.15rem, 2.2vw, 1.5rem) !important; +} diff --git a/assets/css/z-openms-lib-help.css b/assets/css/z-openms-lib-help.css new file mode 100644 index 00000000..7c3f44fb --- /dev/null +++ b/assets/css/z-openms-lib-help.css @@ -0,0 +1,52 @@ +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist { + display: flex !important; + flex-direction: column !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: center !important; + gap: 1.15rem !important; + text-align: center !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-copy { + justify-items: center !important; + text-align: center !important; + width: 100% !important; + max-width: min(100%, 38rem) !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-title, +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-text { + text-align: center !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #getting-started .openms-lib-resources__assist-actions { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + justify-content: center !important; + margin-inline: auto !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #for-developers.openms-lib-developers--cards { + gap: var(--pro-head-to-content) !important; +} + +html body .openms-lib-page--hub.openms-lib-page--openms-lib.openms-lib-page--solution:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #for-developers .openms-lib-developers__cards-head { + margin-bottom: 0 !important; +} + +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #for-developers a.openms-lib-btn.openms-lib-developers__platform-btn, +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #for-developers a.openms-lib-btn.openms-lib-developers__platform-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #for-developers .openms-lib-developers__card:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn, +html body .openms-lib-page--openms-lib:not(.openms-lib-page--pyopenms-pro):not(.openms-lib-page--pyopenms-viz-pro):not(.openms-lib-page--webapps) #for-developers .openms-lib-developers__card:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn:is(:hover, :focus-visible, :active) { + transform: none !important; + flex: 0 0 auto !important; + width: auto !important; + min-width: 0 !important; + max-width: none !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + height: auto !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + box-sizing: border-box !important; +} diff --git a/assets/css/z-privacy-cta-band.css b/assets/css/z-privacy-cta-band.css new file mode 100644 index 00000000..f9e60aa3 --- /dev/null +++ b/assets/css/z-privacy-cta-band.css @@ -0,0 +1,30 @@ +/* Privacy page reuses the governance-cta-band component for its bottom + "Need help with your data?" CTA (structural rules extended in + openms-overrides.css). The primary-button white-on-navy treatment for + that band lives in several page-scoped duplicate blocks there + (governance/our-sponsors/sponsor-us) that weren't worth chasing down + one-by-one — this file gives privacy the same treatment directly. */ +/* A generic "full-bleed into footer" rule elsewhere rounds only the top + corners of this band, meant for pages where the band runs edge to + edge. Privacy's version is inset (has its own side padding), so it + reads as a floating card — round the bottom too to match. */ +html body .openms-lib-page--privacy .governance-cta-band__panel:not(.__unused__):not(.__unused2__):not(.__unused3__):not(.__unused4__) { + border-radius: var(--pro-radius, 0.85rem) !important; +} + +.openms-lib-page--privacy .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--privacy .governance-cta-band__actions .openms-lib-btn--primary:hover, +.openms-lib-page--privacy .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; +} diff --git a/assets/css/z-publications.css b/assets/css/z-publications.css new file mode 100644 index 00000000..e7f8ca84 --- /dev/null +++ b/assets/css/z-publications.css @@ -0,0 +1,27 @@ +/* All years / year filters — compact label inside the same-size control */ +html body .openms-lib-page--news:not(.openms-lib-page--news-article) .news-toolbar__select, +html body .openms-lib-page--publications .publications-toolbar__select, +html body .openms-lib-page--publications .publications-year-nav__btn, +html body .openms-lib-page--calendar .events-past-toolbar__select { + font-size: 0.75rem !important; + font-weight: 600 !important; + letter-spacing: 0.01em !important; +} + +html body .openms-lib-page--publications .publications-featured { + gap: var(--pro-head-to-content) !important; +} + +html body .openms-lib-page--publications .publications-featured .openms-lib-resources__head { + margin-bottom: 0 !important; +} + +/* More space after Key publications cards before the next section */ +html body .openms-lib-page--publications #key-publications { + padding-bottom: clamp(2.75rem, 6vw, 4.5rem) !important; +} + +html body .openms-lib-page--publications #key-publications .publications-cite-card__action, +html body .openms-lib-page--publications #key-publications .publications-cite-card:is(:hover, :focus-within) .publications-cite-card__action { + margin-top: 0.85rem !important; +} diff --git a/assets/css/z-pyopenms-dev.css b/assets/css/z-pyopenms-dev.css new file mode 100644 index 00000000..7a532372 --- /dev/null +++ b/assets/css/z-pyopenms-dev.css @@ -0,0 +1,99 @@ +html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; +} + +html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3) { + grid-column: span 4 !important; +} + +html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(4) { + grid-column: span 5 !important; +} + +html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > :nth-child(5) { + grid-column: span 7 !important; +} + +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__cards-grid > :last-child .openms-lib-developers__platforms { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + gap: 0.55rem !important; +} + +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__cards-grid > :last-child .openms-lib-developers__platforms .openms-lib-btn { + flex: 0 1 auto !important; + width: auto !important; + white-space: nowrap !important; +} + +/* Keep For Developers text CTAs pinned — no hover lift / min-height jump */ +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__card-cta.openms-lib-developers__card-link, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-link, +html body .openms-lib-page--pyopenms-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-cta.openms-lib-developers__card-link { + margin-top: auto !important; + padding-top: 0.35rem !important; + min-height: 0 !important; + height: auto !important; + transform: none !important; + gap: 0.35rem !important; +} + +@media (max-width: 700px) { + html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--pyopenms-pro .openms-lib-developers--cards .openms-lib-developers__cards-grid:has(> :nth-child(5):last-child) > * { + grid-column: 1 / -1 !important; + } +} + +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card-link { + display: inline-flex !important; + align-items: center !important; + gap: 0.35rem !important; + transform: none !important; + min-height: 0 !important; + height: auto !important; + padding: 0 !important; + margin-top: auto !important; + border: 0 !important; + box-shadow: none !important; + transition: gap 0.2s ease, color 0.2s ease !important; +} + +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card-link:is(:hover, :focus-visible, :active), +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-link, +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-link:is(:hover, :focus-visible, :active) { + display: inline-flex !important; + align-items: center !important; + gap: 0.55rem !important; + transform: none !important; + min-height: 0 !important; + height: auto !important; + padding: 0 !important; + margin-top: auto !important; + border: 0 !important; + box-shadow: none !important; +} + +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card-link span[aria-hidden="true"] { + display: inline-block !important; + transform: none !important; + transition: transform 0.2s ease !important; +} + +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card-link:is(:hover, :focus-visible, :active) span[aria-hidden="true"], +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) .openms-lib-developers__card-link span[aria-hidden="true"] { + transform: translateX(0.2rem) !important; +} + +html body .openms-lib-page--pyopenms-viz-pro #for-developers a.openms-lib-btn.openms-lib-developers__platform-btn, +html body .openms-lib-page--pyopenms-viz-pro #for-developers a.openms-lib-btn.openms-lib-developers__platform-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn, +html body .openms-lib-page--pyopenms-viz-pro #for-developers .openms-lib-developers__card:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn:is(:hover, :focus-visible, :active) { + transform: none !important; +} diff --git a/assets/css/z-research-partnerships.css b/assets/css/z-research-partnerships.css new file mode 100644 index 00000000..9eea0ace --- /dev/null +++ b/assets/css/z-research-partnerships.css @@ -0,0 +1,32 @@ +/* Research partnerships form — hug Tally height; modest space under submit */ +html body .openms-lib-page--research-partnerships #partnership-form, +html body .openms-lib-page--research-partnerships .rp-application { + padding-bottom: clamp(1.75rem, 4vw, 3rem) !important; +} + +html body .openms-lib-page--research-partnerships .rp-application__form { + height: auto !important; + min-height: 0 !important; + margin-bottom: 0 !important; + padding-bottom: 0 !important; +} + +html body .openms-lib-page--research-partnerships .rp-application__tally-iframe, +html body .openms-lib-page--research-partnerships iframe.rp-application__tally-iframe { + display: block !important; + width: 100% !important; + min-height: 0 !important; + max-height: none !important; + margin: 0 !important; + padding: 0 !important; + border: 0 !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--research-partnerships .rp-application__tally-iframe, + html body .openms-lib-page--research-partnerships iframe.rp-application__tally-iframe { + min-height: 0 !important; + } +} + +/* Partnerships include numbered cards — layout from z-zzz-num-strip-white.css */ diff --git a/assets/css/z-retreat-highlights.css b/assets/css/z-retreat-highlights.css new file mode 100644 index 00000000..f9bdcdd0 --- /dev/null +++ b/assets/css/z-retreat-highlights.css @@ -0,0 +1 @@ +/* About the retreat — card layout handled in z-zzz-num-strip-white.css */ diff --git a/assets/css/z-review-pr-btns.css b/assets/css/z-review-pr-btns.css new file mode 100644 index 00000000..62cfcc19 --- /dev/null +++ b/assets/css/z-review-pr-btns.css @@ -0,0 +1,19 @@ +html body .openms-lib-page #for-developers .openms-lib-developers__card--review a.openms-lib-btn.openms-lib-developers__platform-btn, +html body .openms-lib-page #for-developers .openms-lib-developers__card--review a.openms-lib-btn.openms-lib-developers__platform-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page #for-developers .openms-lib-developers__card--review:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn, +html body .openms-lib-page #for-developers .openms-lib-developers__card--review:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page .openms-lib-developers__route--review a.openms-lib-btn.openms-lib-developers__platform-btn, +html body .openms-lib-page .openms-lib-developers__route--review a.openms-lib-btn.openms-lib-developers__platform-btn:is(:hover, :focus-visible, :active), +html body .openms-lib-page .openms-lib-developers__route--review:is(:hover, :focus-within) a.openms-lib-btn.openms-lib-developers__platform-btn { + transform: none !important; + flex: 0 0 auto !important; + flex-grow: 0 !important; + flex-shrink: 0 !important; + width: auto !important; + min-width: 0 !important; + max-width: none !important; + box-sizing: border-box !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border-width: 2px !important; + white-space: nowrap !important; +} diff --git a/assets/css/z-section-stack.css b/assets/css/z-section-stack.css new file mode 100644 index 00000000..a8802077 --- /dev/null +++ b/assets/css/z-section-stack.css @@ -0,0 +1,149 @@ +/* Site-wide section head stack: eyebrow → title → lead + Canonical: 12px after top title, 20px after title before paragraph */ +html, +body, +.home-page, +.openms-lib-page, +.openms-lib-page--solution, +.openms-lib-page--hub { + --openms-stack-eyebrow: 12px; + --openms-stack-lead: 20px; + --openms-stack-paragraph: 16px; + --pro-stack-eyebrow: var(--openms-stack-eyebrow); + --pro-stack-lead: var(--openms-stack-lead); + --sol-stack-eyebrow: var(--openms-stack-eyebrow); + --sol-stack-lead: var(--openms-stack-lead); + --home-section-head-eyebrow-gap: var(--openms-stack-eyebrow); + --home-section-head-lead-gap: var(--openms-stack-lead); +} + +/* Eyebrow / top title → title */ +html body :is( + .openms-lib-hero__eyebrow, + .openms-lib-about__eyebrow, + .openms-lib-resources__eyebrow, + .openms-lib-block__eyebrow, + .openms-lib-topp-split__eyebrow, + .openms-lib-cite__eyebrow, + .openms-lib-developers__eyebrow, + .contribute-channels__eyebrow, + .contribute-ways__eyebrow, + .contribute-support__kicker, + .contribute-outreach__eyebrow, + .contribute-coc-band__kicker, + .sponsor-eyebrow, + .publications-key__eyebrow, + .coc-overview .openms-lib-about__eyebrow, + .governance-section .sponsor-eyebrow, + .hero-home__eyebrow, + .webapps-featured__eyebrow, + .ecosystem-home__eyebrow, + .community-events-home__eyebrow, + .community-home__eyebrow, + .contact-home__eyebrow, + .keyfeatures-modern__eyebrow, + .trusted-by__home-eyebrow, + .home-pathways__eyebrow, + .uni-partners__eyebrow, + .uni-partners__trust-eyebrow, + .news-section__eyebrow, + .privacy-overview__eyebrow, + .rp-application .openms-lib-resources__eyebrow, + .fellowship-application__head .openms-lib-resources__eyebrow, + .services-support-application__head .openms-lib-resources__eyebrow, + .contact-application__head .openms-lib-resources__eyebrow +) { + margin-top: 0 !important; + margin-bottom: var(--openms-stack-eyebrow, 12px) !important; +} + +/* Title sits flush under eyebrow (no extra top gap) */ +html body :is( + .openms-lib-hero__title, + .openms-lib-about__title, + .openms-lib-resources__title, + .openms-lib-block__title, + .openms-lib-topp-split__title, + .openms-lib-cite__title, + .openms-lib-developers__title, + .contribute-channels__title, + .contribute-ways__title, + .contribute-support__title, + .contribute-outreach__title, + .contribute-coc-band__text strong, + .publications-key__title, + .sponsor-section__head h2, + .webapps-featured__title, + .ecosystem-home__title, + .community-events-home__title, + .community-home__title, + .contact-home__title, + .keyfeatures-modern__title, + .home-pathways__title, + .uni-partners__title, + .uni-partners__trust-title, + .news-section__title +) { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +/* Title → paragraph / lead */ +html body :is( + .openms-lib-hero__lead, + .openms-lib-about__lead, + .openms-lib-resources__lead, + .openms-lib-block__lead, + .openms-lib-topp-split__lead, + .openms-lib-cite__lead, + .openms-lib-developers__lead, + .contribute-channels__lead, + .contribute-ways__lead, + .contribute-support__text, + .contribute-outreach__text, + .contribute-coc-band__note, + .sponsor-section__lead, + .sponsor-benefits__lead, + .webapps-featured__lead, + .ecosystem-home__lead, + .community-events-home__lead, + .community-home__lead, + .contact-home__description, + .keyfeatures-modern__lead, + .home-pathways__lead, + .uni-partners__lead, + .trusted-by__minimal-lead, + .hero-home__description, + .news-section__lead, + .publications-featured .openms-lib-resources__lead, + .openms-lib-resources__head .openms-lib-resources__lead +) { + margin-top: var(--openms-stack-lead, 20px) !important; + margin-bottom: 0 !important; +} + +/* Heads that use grid/flex gap — rely on margins instead */ +html body :is( + .openms-lib-hero__content, + .openms-lib-about__head, + .openms-lib-about__head-copy, + .openms-lib-resources__head, + .openms-lib-block__head, + .contribute-channels__head, + .contribute-ways__head, + .contribute-support__copy, + .contribute-outreach__copy, + .sponsor-section__head, + .fellowship-application__head, + .services-support-application__head, + .contact-application__head, + .rp-application .openms-lib-resources__head, + .webapps-featured__header-main, + .ecosystem-home__header-main, + .community-events-home__header-main, + .keyfeatures-modern__header-main, + .contact-home__header +) { + gap: 0 !important; + row-gap: 0 !important; +} diff --git a/assets/css/z-services-support.css b/assets/css/z-services-support.css new file mode 100644 index 00000000..434d538c --- /dev/null +++ b/assets/css/z-services-support.css @@ -0,0 +1,32 @@ +/* Scientific & technical support — hug Tally height; no empty band under submit */ +html body .openms-lib-page--services-support #quote, +html body .openms-lib-page--services-support .services-support-application { + padding-bottom: clamp(1.75rem, 4vw, 3rem) !important; +} + +html body .openms-lib-page--services-support .services-support-application__form, +html body .openms-lib-page--services-support .services-page__form-body { + height: auto !important; + min-height: 0 !important; + margin-bottom: 0 !important; + padding-bottom: 0 !important; +} + +html body .openms-lib-page--services-support .services-page__tally-iframe, +html body .openms-lib-page--services-support iframe.services-page__tally-iframe { + display: block !important; + width: 100% !important; + /* Do not force height — Tally sets inline height via dynamicHeight */ + min-height: 0 !important; + max-height: none !important; + margin: 0 !important; + padding: 0 !important; + border: 0 !important; +} + +@media (max-width: 720px) { + html body .openms-lib-page--services-support .services-page__tally-iframe, + html body .openms-lib-page--services-support iframe.services-page__tally-iframe { + min-height: 0 !important; + } +} diff --git a/assets/css/z-sponsor-faq.css b/assets/css/z-sponsor-faq.css new file mode 100644 index 00000000..ec36e99e --- /dev/null +++ b/assets/css/z-sponsor-faq.css @@ -0,0 +1,197 @@ +/* Why sponsor — title + lead stay inside the column at tablet/phone */ +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__head, +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__head-copy, +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__title, +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__lead { + min-width: 0; + max-width: 100% !important; +} + +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__title { + overflow-wrap: break-word; +} + +html body .openms-lib-page--sponsor-us #why-sponsor .sponsor-lead-line { + display: inline !important; + white-space: normal !important; + overflow-wrap: break-word; +} + +html body .openms-lib-page--sponsor-us #why-sponsor .sponsor-lead-line + .sponsor-lead-line::before { + content: " "; +} + +@media (min-width: 1120px) { + html body .openms-lib-page--sponsor-us #why-sponsor .sponsor-lead-line { + display: block !important; + white-space: nowrap !important; + } + + html body .openms-lib-page--sponsor-us #why-sponsor .sponsor-lead-line + .sponsor-lead-line::before { + content: none; + } +} + +/* FAQ + Become a sponsor — Contact us keeps desktop pill size on all screens */ +html body .openms-lib-page--sponsor-us a.openms-lib-btn.sponsor-faq-pro__cta, +html body .openms-lib-page--sponsor-us a.openms-lib-btn.sponsor-faq-pro__cta:is(:hover, :focus-visible, :active), +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn.openms-lib-btn--primary, +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn.openms-lib-btn--primary:is(:hover, :focus-visible, :active) { + display: inline-flex !important; + box-sizing: border-box; + width: fit-content !important; + min-width: 0 !important; + max-width: 100% !important; + flex: 0 0 auto !important; + align-self: flex-start !important; + justify-self: start !important; + justify-content: center !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + height: auto !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + white-space: nowrap !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__question:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__question:focus-visible { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + background: rgba(var(--openms-blue-rgb), 0.04) !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__question:hover, +html body .openms-lib-page--sponsor-us .sponsor-faq__item[open] .sponsor-faq__question:focus-visible { + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + background: rgba(var(--openms-blue-rgb), 0.04) !important; +} + +/* Benefit comparison — always expanded */ +html body .openms-lib-page--sponsor-us .sponsor-benefits__summary { + pointer-events: none; + cursor: default; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__summary::after { + content: none !important; + display: none !important; +} + +/* Why sponsor / Impact — card layout from z-zzz-num-strip-white.css */ + +/* Sponsorship levels — light card bg + slightly stronger on hover */ +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier { + background: var(--pro-band-soft, #f4f6f9) !important; + transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:hover, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier:focus-within, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--active, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured:hover, +html body .openms-lib-page--sponsor-us .sponsor-tiers-band .sponsor-tier--featured:focus-within { + background: color-mix(in srgb, var(--openms-blue) 6%, var(--pro-band-soft, #f4f6f9)) !important; +} + +/* Benefit comparison — same column color; hover + selected highlight */ +html body .openms-lib-page--sponsor-us .sponsor-benefits { + --benefits-col-bg: color-mix(in srgb, var(--openms-blue) 4%, var(--openms-white, #fff)); + --benefits-col-hover: color-mix(in srgb, var(--openms-blue) 9%, var(--openms-white, #fff)); + --benefits-col-active: color-mix(in srgb, var(--openms-blue) 14%, var(--openms-white, #fff)); +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--bronze, +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--silver, +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--gold, +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--platinum, +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--tier { + background: var(--benefits-col-bg) !important; + transition: background-color 0.18s ease; + cursor: pointer; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--label { + cursor: default; +} + +/* Fit matrix in view — no inner scrollbars (button heads were content-box + pad overflow) */ +html body .openms-lib-page--sponsor-us .sponsor-benefits__scroller { + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; + max-width: 100% !important; + -webkit-overflow-scrolling: auto; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix { + --label-col: minmax(0, 1.25fr); + --tier-col: minmax(0, 1fr); + grid-template-columns: var(--label-col) repeat(var(--tier-cols, 4), var(--tier-col)) !important; + min-width: 0 !important; + width: 100% !important; + max-width: 100% !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell, +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--head { + box-sizing: border-box !important; + min-width: 0 !important; + max-width: 100% !important; + overflow-wrap: break-word; + word-break: break-word; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--head { + appearance: none; + margin: 0; + font: inherit; + color: inherit; + width: 100% !important; + text-align: center; + cursor: pointer; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__col-name, +html body .openms-lib-page--sponsor-us .sponsor-benefits__list, +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell p, +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell li { + max-width: 100%; + overflow-wrap: break-word; + word-break: break-word; + white-space: normal; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--head:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: -2px; + z-index: 2; +} + +/* Hovered column */ +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-hover-tier="bronze"] [data-sponsor-benefits="bronze"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-hover-tier="silver"] [data-sponsor-benefits="silver"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-hover-tier="gold"] [data-sponsor-benefits="gold"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-hover-tier="platinum"] [data-sponsor-benefits="platinum"] { + background: var(--benefits-col-hover) !important; +} + +/* Selected / active column */ +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="bronze"] [data-sponsor-benefits="bronze"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="silver"] [data-sponsor-benefits="silver"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="gold"] [data-sponsor-benefits="gold"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="platinum"] [data-sponsor-benefits="platinum"] { + background: var(--benefits-col-active) !important; +} + +/* Selected wins over hover when both match; hover on a different col still shows */ +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="bronze"][data-hover-tier="bronze"] [data-sponsor-benefits="bronze"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="silver"][data-hover-tier="silver"] [data-sponsor-benefits="silver"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="gold"][data-hover-tier="gold"] [data-sponsor-benefits="gold"], +html body .openms-lib-page--sponsor-us .sponsor-benefits[data-active-tier="platinum"][data-hover-tier="platinum"] [data-sponsor-benefits="platinum"] { + background: var(--benefits-col-active) !important; +} + +html body .openms-lib-page--sponsor-us .sponsor-benefits__matrix-cell--head[aria-pressed="true"] .sponsor-benefits__col-name { + color: var(--openms-blue) !important; +} diff --git a/assets/css/z-webapps-contact.css b/assets/css/z-webapps-contact.css new file mode 100644 index 00000000..67178841 --- /dev/null +++ b/assets/css/z-webapps-contact.css @@ -0,0 +1,7 @@ +html body .openms-lib-page--featured .webapps-catalog__contact, +html body .openms-lib-page--featured.openms-lib-page--featured-pro .webapps-catalog__contact, +html body .openms-lib-page--affiliated .webapps-catalog__contact, +html body .openms-lib-page--affiliated.openms-lib-page--featured-pro .webapps-catalog__contact { + margin-bottom: 0 !important; + padding-bottom: clamp(2.75rem, 6vw, 4.5rem) !important; +} diff --git a/assets/css/z-webapps-dev.css b/assets/css/z-webapps-dev.css new file mode 100644 index 00000000..c8d1aaa8 --- /dev/null +++ b/assets/css/z-webapps-dev.css @@ -0,0 +1,21 @@ +html body .openms-lib-page--webapps-pro #for-developers.openms-lib-developers--cards { + --hub-reveal-distance: 0px !important; + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--webapps-pro .openms-lib-page__outro { + padding-bottom: var(--pro-head-to-content) !important; + margin-bottom: 0 !important; +} + +html body .openms-lib-page--webapps-pro #for-developers .openms-lib-developers__cards-head, +html body .openms-lib-page--webapps-pro .openms-lib-developers--cards:not(.openms-lib-developers--split) .openms-lib-developers__cards-head { + margin-bottom: 0 !important; +} + +html body .openms-lib-page--webapps-pro #for-developers .openms-lib-hub__reveal { + opacity: 1 !important; + transform: none !important; + transition: none !important; +} diff --git a/assets/css/z-zzz-contribute-cards-equal.css b/assets/css/z-zzz-contribute-cards-equal.css new file mode 100644 index 00000000..f6cf7b4f --- /dev/null +++ b/assets/css/z-zzz-contribute-cards-equal.css @@ -0,0 +1,34 @@ +/* "Ways to contribute" cards — an earlier override (z-contribute-os.css) + forces every card to grid-column: 1 / -1 !important, stacking all five + full width in a single column at every viewport size. Replace that + with a uniform grid on desktop: all five cards the same size, 3-up. + (Below 960px the existing rules already fall back to 2-up then 1-up — + left alone here, since those are already an equal grid.) */ +@media (min-width: 961px) { + html body .openms-lib-page--contribute .contribute-track { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + html body .openms-lib-page--contribute .contribute-track__item--wide, + html body .openms-lib-page--contribute .contribute-track__item--mid, + html body .openms-lib-page--contribute .contribute-track__item--docs, + html body .openms-lib-page--contribute .contribute-track__item--design, + html body .openms-lib-page--contribute .contribute-track__item--web { + grid-column: span 1 !important; + } + + /* Equal cards get equal title treatment — no more oversized heading + on the card that used to be full width. */ + html body .openms-lib-page--contribute .contribute-track__item--wide .contribute-track__title { + font-size: var(--openms-card-title-size) !important; + font-weight: 700 !important; + letter-spacing: -0.01em !important; + } + + /* The "Contribute to development" card is now a third of the row + instead of the full width — two columns of project links fit + better than four. */ + html body .openms-lib-page--contribute .contribute-project-links { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} diff --git a/assets/css/z-zzz-home-note-link.css b/assets/css/z-zzz-home-note-link.css new file mode 100644 index 00000000..e41e541a --- /dev/null +++ b/assets/css/z-zzz-home-note-link.css @@ -0,0 +1,9 @@ +/* The homepage "What is OpenMS?" note callout — a sitewide !important + rule in openms-overrides.css (targeting .keyfeatures-modern__note a + generally, via a high-specificity :is() selector) forces this link + back to the muted content-link color even after home.css sets the + whole note blue. Loading last with equal specificity + !important + wins the tie, without needing to touch the shared sitewide rule. */ +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note a:not(.__spec_a__):not(.__spec_b__) { + color: var(--openms-blue) !important; +} diff --git a/assets/css/z-zzz-navy-cta-ghost.css b/assets/css/z-zzz-navy-cta-ghost.css new file mode 100644 index 00000000..2fec9ef0 --- /dev/null +++ b/assets/css/z-zzz-navy-cta-ghost.css @@ -0,0 +1,160 @@ +/* Navy CTA band outline (ghost) buttons — match Become a sponsor “Make a donation” + Rest: transparent + 2px white border. Hover: white fill, navy text, scale + white glow. */ + +html body .openms-lib-page :is( + .governance-cta-band__actions, + .contribute-coc-band__actions, + .webapps-archived__revival-actions +) a.openms-lib-btn.openms-lib-btn--ghost, +html body .openms-lib-page :is( + .governance-cta-band__actions, + .contribute-coc-band__actions, + .webapps-archived__revival-actions +) a.openms-lib-btn.openms-lib-btn--ghost:visited, +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn--ghost, +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn--ghost:visited, +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-cta-band__btn-ghost:visited, +html body .openms-lib-page--our-sponsors #sponsor-cta a.openms-lib-btn--ghost, +html body .openms-lib-page--our-sponsors #sponsor-cta a.openms-lib-btn--ghost:visited, +html body .openms-lib-page--our-sponsors #sponsor-cta a.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page--our-sponsors #sponsor-cta a.openms-lib-cta-band__btn-ghost:visited, +html body .openms-lib-page--contact #get-help a.openms-lib-btn--ghost, +html body .openms-lib-page--contact #get-help a.openms-lib-btn--ghost:visited, +html body .openms-lib-page--contact #get-help a.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page--contact #get-help a.openms-lib-cta-band__btn-ghost:visited, +html body .openms-lib-page--publications #cite-openms a.openms-lib-btn--ghost, +html body .openms-lib-page--publications #cite-openms a.openms-lib-btn--ghost:visited, +html body .openms-lib-page--publications #cite-openms a.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page--publications #cite-openms a.openms-lib-cta-band__btn-ghost:visited, +html body .openms-lib-page--contributors #join-community a.openms-lib-btn--ghost, +html body .openms-lib-page--contributors #join-community a.openms-lib-btn--ghost:visited, +html body .openms-lib-page--contributors #join-community a.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page--contributors #join-community a.openms-lib-cta-band__btn-ghost:visited, +html body .openms-lib-page--contribute .contribute-coc-band__actions a.openms-lib-btn--ghost, +html body .openms-lib-page--contribute .contribute-coc-band__actions a.openms-lib-btn--ghost:visited, +html body .openms-lib-page--archived .webapps-archived__revival-actions a.openms-lib-btn--ghost, +html body .openms-lib-page--archived .webapps-archived__revival-actions a.openms-lib-btn--ghost:visited, +html body .openms-lib-page--archived .webapps-archived__revival-actions a.openms-lib-cta-band__btn-ghost, +html body .openms-lib-page--archived .webapps-archived__revival-actions a.openms-lib-cta-band__btn-ghost:visited { + display: inline-flex !important; + box-sizing: border-box; + align-items: center !important; + justify-content: center !important; + width: fit-content !important; + min-width: 0 !important; + max-width: 100% !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + height: auto !important; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + background: transparent !important; + background-color: transparent !important; + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + white-space: nowrap !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow-white, rgba(255, 255, 255, 0.22)) !important; + transition: var(--openms-btn-motion) !important; + text-decoration: none !important; +} + +html body .openms-lib-page :is( + .governance-cta-band__actions, + .contribute-coc-band__actions, + .webapps-archived__revival-actions +) a.openms-lib-btn.openms-lib-btn--ghost :is(.openms-lib-btn__label, span), +html body .openms-lib-page :is( + .governance-cta-band__actions, + .contribute-coc-band__actions, + .webapps-archived__revival-actions +) a.openms-lib-btn.openms-lib-btn--ghost:visited :is(.openms-lib-btn__label, span) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: transparent !important; +} + +/* Hover — same language as navy-band primary (Contact us): white fill + scale + white glow */ +html body .openms-lib-page :is( + .governance-cta-band__actions, + .contribute-coc-band__actions, + .webapps-archived__revival-actions +) a.openms-lib-btn.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--our-sponsors #sponsor-cta a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--our-sponsors #sponsor-cta a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contact #get-help a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contact #get-help a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--publications #cite-openms a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--publications #cite-openms a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contributors #join-community a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contributors #join-community a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--contribute .contribute-coc-band__actions a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--archived .webapps-archived__revival-actions a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active), +html body .openms-lib-page--archived .webapps-archived__revival-actions a.openms-lib-cta-band__btn-ghost:is(:hover, :focus-visible, :active) { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !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-white, rgba(255, 255, 255, 0.22)) !important; + outline: none; + text-decoration: none !important; +} + +html body .openms-lib-page :is( + .governance-cta-band__actions, + .contribute-coc-band__actions, + .webapps-archived__revival-actions +) a.openms-lib-btn.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is( + .openms-lib-btn__label, + span, + i, + .fab, + .fas, + svg, + svg path, + .openms-lib-btn__icon, + .openms-lib-btn__icon svg, + .openms-lib-btn__icon svg path +), +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span), +html body .openms-lib-page--our-sponsors #sponsor-cta a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span), +html body .openms-lib-page--contact #get-help a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span), +html body .openms-lib-page--publications #cite-openms a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span, .openms-lib-btn__icon, svg, svg path), +html body .openms-lib-page--contributors #join-community a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span), +html body .openms-lib-page--archived .webapps-archived__revival-actions a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is(.openms-lib-btn__label, span), +html body .openms-lib-page :is(.contribute-coc-band, .governance-cta-band, .webapps-archived__revival) a.openms-lib-btn--ghost:is(:hover, :focus-visible, :active) :is( + .openms-lib-btn__label, + span, + i, + .fab, + .fas, + svg, + svg path, + .openms-lib-btn__icon, + .openms-lib-btn__icon svg, + .openms-lib-btn__icon svg path +) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: var(--openms-navy) !important; + background: transparent !important; +} + +html body .openms-lib-page :is( + .governance-cta-band__actions, + .contribute-coc-band__actions, + .webapps-archived__revival-actions +) a.openms-lib-btn.openms-lib-btn--ghost:focus-visible, +html body .openms-lib-page--sponsor-us #become-a-sponsor a.openms-lib-btn--ghost:focus-visible, +html body .openms-lib-page--contact #get-help a.openms-lib-btn--ghost: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)) var(--openms-btn-glow-white, rgba(255, 255, 255, 0.22)) !important; +} diff --git a/assets/css/z-zzz-num-strip-white.css b/assets/css/z-zzz-num-strip-white.css new file mode 100644 index 00000000..1ea077e3 --- /dev/null +++ b/assets/css/z-zzz-num-strip-white.css @@ -0,0 +1,162 @@ +/* Numbered cards — white cards with gaps (page/band shows between), site-wide + Matches Governance Structure: white fill on cards only, not a continuous strip. */ + +html body :is( + .contribute-channels__strip, + .openms-lib-about__mosaic, + .openms-lib-about__benefits, + .coc-overview__principles, + .privacy-overview__list, + .rp-include__mosaic, + .retreat-highlights__mosaic, + .fellowship-facts +), +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__mosaic, +html body .openms-lib-page--developer-retreat .retreat-highlights__mosaic, +html body .openms-lib-page--developer-retreat #about-the-retreat .openms-lib-about__mosaic.retreat-highlights__mosaic, +html body .openms-lib-page--code-of-conduct .coc-overview__principles, +html body .openms-lib-page--research-partnerships .rp-include__mosaic, +html body .openms-lib-page--research-partnerships #partnerships-include .rp-include__mosaic, +html body .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefits, +html body .openms-lib-page--webapps-pro .openms-lib-about__mosaic, +html body .openms-lib-page--pyopenms-pro .openms-lib-about__mosaic, +html body .openms-lib-page--pyopenms-viz-pro .openms-lib-about__mosaic, +html body .openms-lib-page--privacy .privacy-overview__list, +html body .openms-lib-page--contribute .contribute-channels__strip, +html body .openms-lib-page--governance #governance-bodies .openms-lib-about__mosaic, +html body .openms-lib-page--fellowship .fellowship-facts { + gap: var(--pro-card-gap, clamp(1rem, 2vw, 1.5rem)) !important; + background: transparent !important; + background-color: transparent !important; + border: none !important; + border-top: none !important; + border-bottom: none !important; + border-left: none !important; + border-right: none !important; + box-shadow: none !important; +} + +/* Shared card chrome — same padding/margin on Sponsor Us, Partner with OpenMS, OpenMS-lib, etc. */ +html body { + --openms-num-card-pad: clamp(1.15rem, 2.5vw, 1.5rem); + --openms-num-card-gap: 0.45rem; +} + +/* Cards themselves — white surfaces + unified pad */ +html body :is( + .contribute-channel, + .openms-lib-about__tile, + .openms-lib-about__benefit, + .coc-principle, + .privacy-overview__item, + .fellowship-facts__item +), +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__tile, +html body .openms-lib-page--sponsor-us .openms-lib-about__tile, +html body .openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile, +html body .openms-lib-page--code-of-conduct .coc-principle, +html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile, +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 #partnerships-include .openms-lib-about__tile, +html body .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit, +html body .openms-lib-page--webapps-pro .openms-lib-about__tile, +html body .openms-lib-page--pyopenms-pro .openms-lib-about__tile, +html body .openms-lib-page--pyopenms-viz-pro .openms-lib-about__tile, +html body .openms-lib-page--privacy .privacy-overview__item, +html body .openms-lib-page--contribute .contribute-channel, +html body .openms-lib-page--governance #governance-bodies .openms-lib-about__tile, +html body .openms-lib-page--fellowship .fellowship-facts__item { + box-sizing: border-box !important; + margin: 0 !important; + padding: var(--openms-num-card-pad) !important; + gap: var(--openms-num-card-gap) !important; + background: var(--openms-white, #fff) !important; + background-color: var(--openms-white, #fff) !important; + border: 1px solid var(--pro-line, rgba(var(--openms-navy-rgb), 0.1)) !important; + border-radius: var(--pro-radius, 1rem) !important; + box-shadow: var(--pro-shadow, 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05)) !important; + transform: none !important; +} + +/* Kill strip-era first/last column insets so every card matches */ +html body .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:first-child, +html body .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:last-child, +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:last-child, +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__tile:first-child, +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__tile:last-child { + padding: var(--openms-num-card-pad) !important; + padding-left: var(--openms-num-card-pad) !important; + padding-right: var(--openms-num-card-pad) !important; +} + +/* Title spacing under numbers — same on Sponsor Us / Partner / OpenMS-lib */ +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__tile-title, +html body .openms-lib-page--sponsor-us .openms-lib-about__mosaic .openms-lib-about__tile-title, +html body .openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__tile-title, +html body .openms-lib-page--research-partnerships .rp-include__mosaic .openms-lib-about__tile-title, +html body .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit-title { + margin: 0 0 0.35rem !important; +} + +/* Hover — keep white card, slightly stronger edge */ +html body :is( + .contribute-channel, + .openms-lib-about__tile, + .openms-lib-about__benefit, + .coc-principle, + .privacy-overview__item, + .fellowship-facts__item +):is(:hover, :focus-within), +html body .openms-lib-page--sponsor-us #why-sponsor .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--code-of-conduct .coc-principle:is(:hover, :focus-within), +html body .openms-lib-page--research-partnerships #partnerships-include .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--research-partnerships .rp-include__mosaic > .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--contribute:not(.openms-lib-page--report-handling) .contribute-channel:is(:hover, :focus-within), +html body .openms-lib-page--governance #governance-bodies .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit:is(:hover, :focus-within), +html body .openms-lib-page--webapps-pro .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--pyopenms-pro .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--pyopenms-viz-pro .openms-lib-about__tile:is(:hover, :focus-within), +html body .openms-lib-page--fellowship .fellowship-facts__item:is(:hover, :focus-within) { + background: var(--openms-white, #fff) !important; + background-color: var(--openms-white, #fff) !important; + border-color: var(--pro-line-strong, rgba(var(--openms-navy-rgb), 0.22)) !important; + box-shadow: var(--pro-shadow-hover, 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.1)) !important; + transform: none !important; +} + +/* Research Partnerships include — don’t force the whole band white (gaps need band color) */ +html body .openms-lib-page--research-partnerships #partnerships-include, +html body .openms-lib-page--hub.openms-lib-page--research-partnerships #partnerships-include.openms-lib-page__anchor, +html body .openms-lib-page--research-partnerships #partnerships-include .openms-lib-about { + background: var(--pro-band-soft, #f4f6f9) !important; + background-color: var(--pro-band-soft, #f4f6f9) !important; +} + +/* Contribute channels — keep equal-height CTAs inside cards */ +html body .openms-lib-page--contribute .contribute-channel { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + height: 100% !important; + min-height: 100% !important; +} + +html body .openms-lib-page--contribute .contribute-channel__link { + margin-top: auto !important; + padding-top: 0.85rem !important; +} + +@media (max-width: 960px) { + html body .openms-lib-page--contribute .contribute-channel { + height: auto !important; + min-height: 0 !important; + } + + html body .openms-lib-page--contribute .contribute-channel__link { + margin-top: 0.35rem !important; + padding-top: 0 !important; + } +} diff --git a/assets/css/z-zzz-openms-lib-benefit-first-pad.css b/assets/css/z-zzz-openms-lib-benefit-first-pad.css new file mode 100644 index 00000000..bd746e37 --- /dev/null +++ b/assets/css/z-zzz-openms-lib-benefit-first-pad.css @@ -0,0 +1,17 @@ +/* The "01" card (openms-lib highlights strip) still had its left padding + zeroed by an older "strip-era" rule that a later redesign pass didn't + fully clean up, leaving its number/title flush against the card edge + while every other side (and every other card) got the standard + --openms-num-card-pad inset. Match it. */ +html body .openms-lib-page--openms-lib .openms-lib-about--benefits .openms-lib-about__benefit.openms-lib-about__benefit.openms-lib-about__benefit:first-child { + padding-left: var(--openms-num-card-pad, clamp(1.15rem, 2.5vw, 1.5rem)) !important; +} + +/* Same fix for the <=1100px 2-column layout, where a separate + #what-is-openms-scoped, odd/even-based rule (higher specificity from + the #id) zeroes card 1's left padding again. */ +@media (max-width: 1100px) { + html body .openms-lib-page--solution.openms-lib-page--openms-lib #what-is-openms .openms-lib-about--benefits .openms-lib-about__benefit.openms-lib-about__benefit:first-child { + padding-left: var(--openms-num-card-pad, clamp(1.15rem, 2.5vw, 1.5rem)) !important; + } +} diff --git a/assets/css/z-zzzz-hero-explore-btn.css b/assets/css/z-zzzz-hero-explore-btn.css new file mode 100644 index 00000000..ad13e431 --- /dev/null +++ b/assets/css/z-zzzz-hero-explore-btn.css @@ -0,0 +1,44 @@ +/* Homepage hero — Explore the library: solid white fill on navy (must load last) */ +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate, +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:visited { + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow-white, rgba(255, 255, 255, 0.22)) !important; + transition: var(--openms-btn-motion) !important; +} + +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:hover, +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:focus-visible, +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:active { + background: var(--openms-white) !important; + background-color: #ffffff !important; + border: 2px solid var(--openms-white) !important; + border-color: var(--openms-white) !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-white, rgba(255, 255, 255, 0.22)) !important; + outline: none !important; + text-decoration: none !important; +} + +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:hover :is(i, svg, span), +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:focus-visible :is(i, svg, span), +html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:active :is(i, svg, span) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: currentColor !important; +} + +@media (prefers-reduced-motion: reduce) { + html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:hover, + html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:focus-visible, + html body .home-page__hero a.hero-home__btn.hero-home__btn--secondary.about-cta-btn.about-cta-btn--donate:active { + transform: none !important; + } +} diff --git a/assets/css/z-zzzzz-affiliated-btn.css b/assets/css/z-zzzzz-affiliated-btn.css new file mode 100644 index 00000000..b445d21e --- /dev/null +++ b/assets/css/z-zzzzz-affiliated-btn.css @@ -0,0 +1,1151 @@ +/* Affiliated Apps — filled pills use the same hover as navbar “Partner with OpenMS” */ + +html body .openms-lib-page--affiliated.openms-lib-page, +html body .openms-lib-page--affiliated .openms-lib-page__body, +html body .openms-lib-page--affiliated .openms-lib-page__anchor, +html body .openms-lib-page--affiliated .webapps-affiliates, +html body .openms-lib-page--affiliated .webapps-affiliates__item, +html body .openms-lib-page--affiliated .webapps-project-detail-card, +html body .openms-lib-page--affiliated .webapps-project-detail-card__main, +html body .openms-lib-page--affiliated .webapps-project-detail-card__body, +html body .openms-lib-page--affiliated .webapps-project-detail-card__actions, +html body .openms-lib-page--affiliated .webapps-project-links { + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; +} + +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn, +html body .openms-lib-page--affiliated .webapps-project-links__btn.openms-btn-primary, +html body .openms-lib-page--affiliated a.webapps-project-links__btn.openms-btn-primary { + position: relative !important; + z-index: 1 !important; + 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) !important; + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + border: var(--openms-btn-border-width, 2px) solid var(--openms-blue) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transform: scale(1) !important; + transition: var(--openms-btn-motion) !important; +} + +html body .openms-lib-page--affiliated .webapps-project-links__item:first-child .webapps-project-links__btn:is(:hover, :focus-visible, :active, :visited:hover), +html body .openms-lib-page--affiliated .webapps-project-links__btn.openms-btn-primary:is(:hover, :focus-visible, :active, :visited:hover), +html body .openms-lib-page--affiliated a.webapps-project-links__btn.openms-btn-primary:is(:hover, :focus-visible, :active, :visited:hover) { + 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; + -webkit-text-fill-color: var(--openms-white) !important; + z-index: 3 !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-blue-rgb), 0.22) !important; + outline: none !important; + text-decoration: none !important; +} + +html body .openms-lib-page--affiliated .webapps-project-links__btn.openms-btn-primary :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--affiliated .webapps-project-links__btn.openms-btn-primary:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: currentColor !important; +} + +html body .openms-lib-page--archived .webapps-archived-entry, +html body .openms-lib-page--archived .webapps-archived-entry__actions, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links { + overflow: visible !important; +} + +html body .openms-lib-page--affiliated .webapps-project-links__btn--github, +html body .openms-lib-page--affiliated .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary), +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--github, +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary):not(.webapps-project-links__btn--nfcore) { + position: relative !important; + z-index: 1 !important; + 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; + box-shadow: 0 0 0 0 rgba(var(--openms-navy-rgb), 0.18) !important; + transform: scale(1) !important; + transition: var(--openms-btn-motion), border-color 0.2s ease, background-color 0.2s ease !important; +} + +html body .openms-lib-page--affiliated .webapps-project-links__btn--github:is(:hover, :focus-visible, :active, :visited:hover), +html body .openms-lib-page--affiliated a.webapps-project-links__btn--github:is(:hover, :focus-visible, :active, :visited:hover), +html body .openms-lib-page--affiliated .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary):is(:hover, :focus-visible, :active, :visited:hover), +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--github:is(:hover, :focus-visible, :active, :visited:hover), +html body .openms-lib-page--archived .webapps-archived-entry a.webapps-project-links__btn--github:is(:hover, :focus-visible, :active, :visited:hover), +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary):not(.webapps-project-links__btn--nfcore):is(:hover, :focus-visible, :active, :visited:hover) { + background: rgba(var(--openms-navy-rgb), 0.08) !important; + background-color: rgba(var(--openms-navy-rgb), 0.08) !important; + border: 2px solid var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + border-style: solid !important; + border-width: 2px !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + z-index: 3 !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)) !important; + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-navy-rgb), 0.18) !important; + outline: none !important; + text-decoration: none !important; +} + +html body .openms-lib-page--affiliated .webapps-project-links__btn--github :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--affiliated .webapps-project-links__btn--github:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--github :is(i, span, .fab, .fas, svg, .svg-inline--fa, path), +html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--github:is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, svg, .svg-inline--fa, path) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: currentColor !important; +} + +@media (prefers-reduced-motion: reduce) { + html body .openms-lib-page--affiliated .webapps-project-links__btn.openms-btn-primary:is(:hover, :focus-visible, :active), + html body .openms-lib-page--affiliated .webapps-project-links__btn--github:is(:hover, :focus-visible, :active), + html body .openms-lib-page--archived .webapps-archived-entry .webapps-project-links__btn--github:is(:hover, :focus-visible, :active) { + transform: none !important; + } +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived-entry__meta, +html body .openms-lib-page--archived .webapps-archived-entry__meta { + display: flex !important; + flex-direction: column !important; + align-items: flex-start !important; + justify-content: flex-start !important; + flex-wrap: nowrap !important; + gap: 0.28rem !important; +} + +html body .openms-lib-page--exec-committee .contribute-channels__strip--two { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute #responsibilities.openms-lib-page__anchor, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channels__head { + text-align: left !important; + margin: 0 !important; + max-width: min(40rem, 100%) !important; + width: 100% !important; + justify-items: start !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channels__title, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channels__lead { + text-align: left !important; + margin-inline: 0 !important; + max-width: none !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channels__strip { + display: grid !important; + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + gap: 0.85rem !important; + width: 100% !important; + border: 0 !important; + border-top: 0 !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channel { + grid-column: span 2 !important; + border: 1px solid var(--contribute-border, rgba(var(--openms-navy-rgb), 0.12)) !important; + border-right: 1px solid var(--contribute-border, rgba(var(--openms-navy-rgb), 0.12)) !important; + border-radius: var(--pro-radius, 1rem) !important; + background: var(--openms-white) !important; + padding-top: clamp(1.15rem, 2vw, 1.5rem) !important; + padding-bottom: clamp(1.15rem, 2vw, 1.5rem) !important; + padding-inline: clamp(1.1rem, 2vw, 1.4rem) !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channel:nth-child(n + 4) { + grid-column: span 3 !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute #composition.openms-lib-page__anchor, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-composition { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + color: var(--openms-white) !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-composition { + display: grid !important; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; + column-gap: clamp(1.5rem, 4vw, 3rem) !important; + row-gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; + align-items: center !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-composition .contribute-channels__head { + text-align: left !important; + margin: 0 !important; + max-width: none !important; + width: 100% !important; + justify-items: start !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head .contribute-channels__eyebrow, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head .contribute-channels__lead, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head h2.contribute-channels__title, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute.openms-lib-page--solution .exec-composition .contribute-channels__head .contribute-channels__title { + text-align: left !important; + margin-inline: 0 !important; + max-width: none !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-composition .contribute-channels__strip--two { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; + max-width: none !important; + justify-self: stretch !important; + gap: 0.85rem !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-composition .contribute-channel { + padding-top: clamp(1.15rem, 2vw, 1.5rem) !important; + padding-bottom: clamp(1.15rem, 2vw, 1.5rem) !important; + padding-inline: clamp(1.1rem, 2vw, 1.4rem) !important; + background: var(--openms-white) !important; + border-right: 0 !important; +} + +@media (max-width: 47.99rem) { + html body .openms-lib-page--exec-committee .contribute-channels__strip--two { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-composition { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channels__strip { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channel, + html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-responsibilities .contribute-channel:nth-child(n + 4) { + grid-column: auto !important; + } +} + +html body .openms-lib-page--archived.openms-lib-page--contribute .contribute-channels__strip { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; +} + +html body .openms-lib-page--archived.openms-lib-page--contribute .contribute-channel__index, +html body .openms-lib-page--archived.openms-lib-page--contribute .contribute-channel::before { + display: none !important; + content: none !important; +} + +html body .openms-lib-page--archived.openms-lib-page--contribute .contribute-ways .webapps-archived--catalog, +html body .openms-lib-page--archived.openms-lib-page--contribute .contribute-ways .webapps-archived__inner, +html body .openms-lib-page--archived.openms-lib-page--contribute .contribute-ways .webapps-archived__projects, +html body .openms-lib-page--archived.openms-lib-page--contribute .contribute-ways .webapps-archived__grid { + width: 100% !important; + max-width: none !important; +} + +html body .openms-lib-page--archived .openms-lib-resources.openms-lib-resources--no-feature .openms-lib-resources__inner { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: var(--pro-head-to-content, clamp(1.5rem, 3vw, 2.25rem)) !important; +} + +html body .openms-lib-page--archived .openms-lib-page__outro, +html body .openms-lib-page--archived #archived-revival.openms-lib-page__anchor { + padding-inline: var(--openms-page-inline) !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--archived #archived-revival .webapps-archived__revival { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; +} + +html body .openms-lib-page--archived .openms-lib-resources__inner .webapps-archived--catalog, +html body .openms-lib-page--archived .openms-lib-resources__inner .webapps-archived__inner, +html body .openms-lib-page--archived .openms-lib-resources__inner .webapps-archived__projects, +html body .openms-lib-page--archived .openms-lib-resources__inner .webapps-archived__grid, +html body .openms-lib-page--archived .openms-lib-resources__inner .webapps-archived__item { + width: 100% !important; + max-width: none !important; + flex: none !important; +} + +html body .openms-lib-page--archived .openms-lib-resources__inner .webapps-archived__projects { + display: block !important; + justify-content: flex-start !important; +} + +/* Good to know — same panel language as On this page */ +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice.webapps-archived__notice--panel, +html body .openms-lib-page--archived .webapps-archived__notice.webapps-archived__notice--panel { + align-self: stretch !important; + width: 100% !important; + max-width: none !important; + margin: 0 0 1.5rem !important; + padding: 1rem 1.25rem !important; + border: 1px solid var(--sol-line, rgba(var(--openms-navy-rgb), 0.1)) !important; + border-radius: var(--sol-radius, 1rem) !important; + background: rgba(var(--openms-navy-rgb), 0.03) !important; + background-color: rgba(var(--openms-navy-rgb), 0.03) !important; + box-shadow: none !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--panel .webapps-archived__notice-head, +html body .openms-lib-page--archived .webapps-archived__notice--panel .webapps-archived__notice-head { + display: flex !important; + align-items: center !important; + gap: 0.5rem !important; + margin: 0 0 0.7rem !important; + padding: 0 !important; + border: 0 !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-icon, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-icon { + display: none !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-title, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-title { + margin: 0 !important; + color: var(--openms-blue) !important; + -webkit-text-fill-color: var(--openms-blue) !important; + font-family: var(--openms-font-heading) !important; + font-size: 0.78rem !important; + font-weight: 800 !important; + letter-spacing: 0.12em !important; + text-transform: uppercase !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--panel .webapps-archived__notice-list, +html body .openms-lib-page--archived .webapps-archived__notice--panel .webapps-archived__notice-list { + display: grid !important; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; + gap: 0.85rem 1.35rem !important; + margin: 0 !important; + padding: 0 !important; + list-style: none !important; +} + +@media (max-width: 40rem) { + html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--panel .webapps-archived__notice-list, + html body .openms-lib-page--archived .webapps-archived__notice--panel .webapps-archived__notice-list { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-item, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-item { + display: block !important; + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + counter-increment: none !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-item::before, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-item::before { + display: none !important; + content: none !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-copy, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-copy { + display: flex !important; + flex-direction: column !important; + gap: 0.22rem !important; + min-width: 0 !important; + width: auto !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-heading, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-heading { + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + border-bottom: 0 !important; + width: auto !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + font-family: var(--openms-font-heading) !important; + font-size: 1.02rem !important; + font-weight: 800 !important; + letter-spacing: -0.02em !important; + line-height: 1.25 !important; +} + +html body .openms-lib-page.openms-lib-page--solution.openms-lib-page--archived.openms-lib-page--featured-pro .webapps-archived__notice--callout .webapps-archived__notice-text, +html body .openms-lib-page--archived .webapps-archived__notice--callout .webapps-archived__notice-text { + margin: 0 !important; + color: var(--openms-grey) !important; + -webkit-text-fill-color: var(--openms-grey) !important; + font-size: 0.9rem !important; + font-weight: 500 !important; + line-height: 1.5 !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .openms-lib-page__body { + display: flex !important; + flex-direction: column !important; + gap: 0 !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .openms-lib-page__body > .openms-lib-page__anchor { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .openms-lib-page__body > .openms-lib-page__anchor:first-child { + padding-top: 0 !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .contribute-channels, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .contribute-ways { + padding-top: clamp(3.25rem, 6.5vw, 5rem) !important; + padding-bottom: clamp(3.25rem, 6.5vw, 5rem) !important; + gap: var(--pro-head-to-content, clamp(2.25rem, 4.5vw, 3.25rem)) !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .contribute-channel, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-meetings__steps .contribute-track__item, +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .exec-amendments__steps .contribute-track__item { + padding-top: clamp(1.85rem, 3.4vw, 2.6rem) !important; + padding-bottom: clamp(1.85rem, 3.4vw, 2.6rem) !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .openms-lib-page__outro { + margin-top: 0 !important; +} + +html body .openms-lib-page--exec-committee.openms-lib-page--contribute .openms-lib-page__outro > .openms-lib-page__anchor { + padding-block: clamp(3.25rem, 6.5vw, 5rem) !important; +} + +html body .openms-lib-page--exec-committee .contribute-channels__head, +html body .openms-lib-page--exec-committee .contribute-ways__head, +html body .openms-lib-page--exec-committee .exec-meetings .contribute-ways__head, +html body .openms-lib-page--exec-committee .exec-amendments .contribute-ways__head { + margin-bottom: 0 !important; + padding-bottom: 0 !important; + width: 100% !important; + max-width: none !important; + padding-inline: 0 !important; +} + +html body .openms-lib-page--exec-committee .contribute-track { + padding-block: 0 !important; +} + +html body .openms-lib-page--exec-committee .contribute-support { + margin-top: 0 !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings__steps, +html body .openms-lib-page--exec-committee .exec-amendments__steps { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: var(--pro-card-gap, clamp(1rem, 2vw, 1.5rem)) !important; + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + padding-inline: 0 !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings__steps .contribute-track__item, +html body .openms-lib-page--exec-committee .exec-amendments__steps .contribute-track__item { + grid-column: auto !important; + width: 100% !important; + max-width: none !important; + min-width: 0 !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings__steps .contribute-track__icon { + display: grid !important; + place-items: center !important; + width: auto !important; + height: auto !important; + color: rgba(var(--openms-blue-rgb), 0.28) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.28) !important; + font-size: clamp(1.65rem, 2.6vw, 2.05rem) !important; + line-height: 1 !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings__steps .contribute-track__icon :is(i, .fas, .svg-inline--fa) { + color: inherit !important; + -webkit-text-fill-color: inherit !important; + font-size: 1em !important; + width: 1em !important; + height: 1em !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings__steps .contribute-track__item:is(:hover, :focus-within), +html body .openms-lib-page--exec-committee .exec-amendments__steps .contribute-track__item:is(:hover, :focus-within) { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings__steps .contribute-track__item:is(:hover, :focus-within), +html body .openms-lib-page--exec-committee .exec-meetings__steps .contribute-track__item:is(:hover, :focus-within) :is( + .contribute-track__title, + .contribute-track__text, + .contribute-track__body, + .contribute-track__icon, + i, + .fas, + .svg-inline--fa, + span, + p, + h3 +), +html body .openms-lib-page--exec-committee .exec-amendments__steps .contribute-track__item:is(:hover, :focus-within), +html body .openms-lib-page--exec-committee .exec-amendments__steps .contribute-track__item:is(:hover, :focus-within) :is( + .contribute-track__title, + .contribute-track__text, + .contribute-track__body, + span, + p, + h3 +) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + fill: var(--openms-white) !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings .exec-meetings__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--exec-committee .exec-meetings .exec-meetings__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title, +html body .openms-lib-page--exec-committee .exec-amendments .exec-amendments__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--exec-committee .exec-amendments .exec-amendments__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +html body .openms-lib-page--exec-committee .exec-meetings__steps .contribute-track__item::before, +html body .openms-lib-page--exec-committee .exec-amendments__steps .contribute-track__item::before { + display: none !important; + content: none !important; +} + +@media (max-width: 47.99rem) { + html body .openms-lib-page--exec-committee .exec-meetings__steps, + html body .openms-lib-page--exec-committee .exec-amendments__steps { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +html body .openms-lib-page--developer-retreat .retreat-highlights__mosaic > .openms-lib-about__tile:is(:hover, :focus-within) { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-navy-rgb), 0.22) !important; + transform: translateY(-3px) !important; +} + +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) h3.openms-lib-about__tile-title, +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) .openms-lib-about__tile-title, +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) .openms-lib-about__tile-text, +html body .openms-lib-page--developer-retreat.openms-lib-page--solution .retreat-highlights__mosaic > article.openms-lib-about__tile:is(:hover, :focus-within) .openms-lib-about__num { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +html body .openms-lib-page--report-handling .rhm-process__steps { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: var(--pro-card-gap, clamp(1rem, 2vw, 1.5rem)) !important; + width: 100% !important; + max-width: none !important; + padding-inline: 0 !important; +} + +html body .openms-lib-page--report-handling .rhm-process__steps--four { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; +} + +html body .openms-lib-page--report-handling .rhm-process__steps .contribute-track__item { + grid-column: auto !important; + width: 100% !important; +} + +html body .openms-lib-page--report-handling .rhm-process__steps .contribute-track__item::before { + display: none !important; + content: none !important; +} + +html body .openms-lib-page--report-handling .rhm-process__steps .contribute-track__icon { + color: rgba(var(--openms-blue-rgb), 0.28) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.28) !important; + font-size: clamp(1.65rem, 2.6vw, 2.05rem) !important; +} + +html body .openms-lib-page--report-handling .contribute-channels__strip .contribute-channel:is(:hover, :focus-within) { + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + transform: none !important; +} + +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__icon, +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__icon :is(i, .fas, .svg-inline--fa) { + color: rgba(var(--openms-blue-rgb), 0.28) !important; + -webkit-text-fill-color: rgba(var(--openms-blue-rgb), 0.28) !important; +} + +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__icon, +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__icon :is(i, .fas, .svg-inline--fa) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) { + background: var(--openms-white) !important; + background-color: var(--openms-white) !important; + border-color: var(--contribute-border, rgba(var(--openms-navy-rgb), 0.1)) !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + transform: none !important; + box-shadow: none !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process--handling .rhm-process__steps h3.contribute-track__title, +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__title, +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__text { + color: rgba(var(--openms-navy-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-navy-rgb), 0.72) !important; + transition: color 0.2s ease, -webkit-text-fill-color 0.2s ease !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process--handling .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title, +html body .openms-lib-page--report-handling .rhm-process--handling .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__text { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .openms-lib-page--report-handling .rhm-resolutions { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: var(--pro-head-to-content) !important; +} + +html body .openms-lib-page--report-handling .rhm-resolutions .contribute-ways__head { + max-width: none !important; +} + +html body .openms-lib-page--report-handling .rhm-resolutions__steps { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + column-gap: clamp(1.25rem, 3vw, 2rem) !important; + row-gap: clamp(0.85rem, 1.6vw, 1.15rem) !important; + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + padding: 0 !important; + list-style: none !important; +} + +html body .openms-lib-page--report-handling .rhm-resolutions__steps .contribute-track__item, +html body .openms-lib-page--report-handling .rhm-resolutions__steps .contribute-track__item:is(:hover, :focus-within) { + grid-column: auto !important; + width: 100% !important; + min-height: 0 !important; + height: auto !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + transform: none !important; + color: inherit !important; + -webkit-text-fill-color: unset !important; +} + +html body .openms-lib-page--report-handling .rhm-resolutions__steps .contribute-track__item::before { + display: none !important; + content: none !important; +} + +html body .openms-lib-page--report-handling .rhm-resolutions__steps .contribute-track__body { + gap: 0.2rem !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-resolutions .rhm-resolutions__steps h3.contribute-track__title, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-resolutions .rhm-resolutions__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-resolutions .rhm-resolutions__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title, +html body .openms-lib-page--report-handling .rhm-resolutions__steps .contribute-track__title { + margin: 0 !important; + font-size: var(--openms-card-title-size, 1.05rem) !important; + font-weight: 700 !important; + line-height: 1.25 !important; + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +html body .openms-lib-page--report-handling .rhm-resolutions__steps .contribute-track__text, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-resolutions .rhm-resolutions__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__text { + margin: 0 !important; + color: var(--openms-text-muted, rgba(var(--openms-navy-rgb), 0.68)) !important; + -webkit-text-fill-color: var(--openms-text-muted, rgba(var(--openms-navy-rgb), 0.68)) !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__panel, +html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__content { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-items: center !important; + text-align: center !important; + width: 100% !important; + margin-inline: auto !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__eyebrow { + display: flex !important; + justify-content: center !important; + align-items: center !important; + width: 100% !important; + margin-inline: auto !important; + text-align: center !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__title, +html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__lead { + display: block !important; + width: 100% !important; + text-align: center !important; + margin-inline: auto !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__title .openms-lib-hero__accent { + display: inline !important; + text-align: center !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__actions { + justify-content: center !important; + margin-inline: auto !important; +} + +html body .openms-lib-page--report-handling .contribute-coc-band__actions { + display: flex !important; + flex-wrap: wrap !important; + justify-content: flex-end !important; + align-items: center !important; + width: auto !important; + max-width: none !important; + margin-inline: 0 !important; +} + +html body .openms-lib-page--report-handling .contribute-coc-band__actions .openms-lib-btn { + width: auto !important; + min-width: 0 !important; + max-width: 100% !important; + flex: 0 0 auto !important; + height: auto !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + padding: var(--openms-btn-padding) !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + font-weight: var(--openms-btn-weight) !important; + line-height: var(--openms-btn-line-height) !important; + white-space: nowrap !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--report-handling .openms-lib-page__body { + display: flex !important; + flex-direction: column !important; + gap: 0 !important; +} + +html body .openms-lib-page--report-handling .openms-lib-page__body > .openms-lib-page__anchor { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +html body .openms-lib-page--report-handling .contribute-channels, +html body .openms-lib-page--report-handling .contribute-ways { + padding-top: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; + padding-bottom: 0 !important; + padding-inline: var(--contribute-gutter, var(--openms-page-inline)) !important; + gap: var(--pro-head-to-content) !important; + width: 100% !important; + max-width: none !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--report-handling .contribute-channels { + padding-bottom: clamp(1.25rem, 2.75vw, 2rem) !important; +} + +html body .openms-lib-page--report-handling .contribute-track { + padding-block: 0 !important; +} + +html body .openms-lib-page--report-handling .contribute-support { + width: 100% !important; + max-width: none !important; + margin-top: 0 !important; + margin-inline: 0 !important; +} + +html body .openms-lib-page--report-handling .openms-lib-page__outro { + margin-top: 0 !important; +} + +html body .openms-lib-page--report-handling .openms-lib-page__outro > .openms-lib-page__anchor { + padding-block: var(--sol-section-y, clamp(3.5rem, 7vw, 5.25rem)) !important; + padding-inline: var(--contribute-gutter, var(--openms-page-inline)) !important; + box-sizing: border-box !important; +} + +html body .openms-lib-page--report-handling .contribute-channels__head, +html body .openms-lib-page--report-handling .contribute-ways__head { + margin: 0 !important; + padding: 0 !important; + width: 100% !important; + max-width: none !important; + text-align: left !important; + justify-items: start !important; +} + +html body .openms-lib-page--report-handling .contribute-channels__title, +html body .openms-lib-page--report-handling .contribute-channels__lead, +html body .openms-lib-page--report-handling .contribute-ways__title, +html body .openms-lib-page--report-handling .contribute-ways__lead { + max-width: none !important; + width: 100% !important; +} + +html body .openms-lib-page--report-handling .contribute-channels__strip, +html body .openms-lib-page--report-handling .contribute-track, +html body .openms-lib-page--report-handling .contribute-coc-band, +html body .openms-lib-page--report-handling .contribute-coc-band__panel { + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + padding-inline: 0 !important; +} + +html body .openms-lib-page--report-handling .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; +} + +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) h3.contribute-track__title, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__title, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__text, +html body .openms-lib-page--report-handling.openms-lib-page--contribute.openms-lib-page--solution .rhm-process:not(.rhm-process--handling) .rhm-process__steps .contribute-track__item:is(:hover, :focus-within) .contribute-track__icon { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: none !important; + background-image: none !important; + -webkit-background-clip: border-box !important; + background-clip: border-box !important; +} + +@media (max-width: 64rem) { + html body .openms-lib-page--report-handling .rhm-process__steps, + html body .openms-lib-page--report-handling .rhm-process__steps--four { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} + +@media (max-width: 47.99rem) { + html body .openms-lib-page--report-handling .rhm-process__steps, + html body .openms-lib-page--report-handling .rhm-process__steps--four, + html body .openms-lib-page--report-handling .rhm-resolutions__steps { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--report-handling .contribute-channels__strip { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero, + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero--pro, + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero--solution { + padding-inline: var(--contribute-gutter, var(--openms-page-inline)) !important; + text-align: center !important; + } + + html body .openms-lib-page--report-handling .rhm-resolutions__steps .contribute-track__item { + padding-inline: 0 !important; + } + + html body .openms-lib-page--report-handling .contribute-channel { + padding-inline: var(--contribute-space-4, 1rem) !important; + } + + html body .openms-lib-page--report-handling .rhm-process__steps .contribute-track__item { + padding: var(--pro-card-pad-lg, clamp(1.25rem, 2.5vw, 1.75rem)) !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__panel, + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__content { + align-items: center !important; + justify-items: center !important; + text-align: center !important; + margin-inline: auto !important; + width: 100% !important; + max-width: none !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__eyebrow { + display: flex !important; + justify-content: center !important; + align-items: center !important; + width: 100% !important; + margin-inline: auto !important; + text-align: center !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__title { + display: block !important; + width: 100% !important; + max-width: 100% !important; + margin-inline: auto !important; + text-align: center !important; + white-space: normal !important; + text-wrap: wrap !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__title .openms-lib-hero__accent { + display: block !important; + width: 100% !important; + white-space: nowrap !important; + text-wrap: nowrap !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__lead { + display: block !important; + width: 100% !important; + max-width: 100% !important; + margin-inline: auto !important; + text-align: center !important; + justify-content: center !important; + white-space: normal !important; + text-wrap: wrap !important; + } + + html body .openms-lib-page--report-handling .contribute-channels__head, + html body .openms-lib-page--report-handling .contribute-channels__title, + html body .openms-lib-page--report-handling .contribute-channels__lead, + html body .openms-lib-page--report-handling .contribute-ways__head, + html body .openms-lib-page--report-handling .contribute-ways__title { + display: block !important; + width: 100% !important; + max-width: 100% !important; + margin-inline: 0 !important; + text-align: left !important; + white-space: normal !important; + } + + html body .openms-lib-page--report-handling .contribute-channels__title, + html body .openms-lib-page--report-handling .contribute-ways__title { + text-wrap: balance !important; + } + + html body .openms-lib-page--report-handling .contribute-ways__lead, + html body .openms-lib-page--report-handling #mediation .contribute-ways__lead, + html body .openms-lib-page--report-handling #clear-and-severe-breach-actions .contribute-ways__lead, + html body .openms-lib-page--report-handling #report-handling .contribute-ways__lead, + html body .openms-lib-page--report-handling #resolutions .contribute-ways__lead { + display: block !important; + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + text-align: left !important; + white-space: normal !important; + text-wrap: wrap !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__actions { + display: flex !important; + flex-direction: row !important; + flex-wrap: wrap !important; + align-items: stretch !important; + justify-content: center !important; + width: 100% !important; + max-width: none !important; + margin-inline: 0 !important; + gap: 0.65rem !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn { + flex: 1 1 auto !important; + width: auto !important; + min-width: min(100%, 11rem) !important; + justify-content: center !important; + white-space: nowrap !important; + font-size: var(--openms-btn-font-size, var(--openms-text-min)) !important; + min-height: var(--openms-btn-min-height, 2.75rem) !important; + padding: var(--openms-btn-padding) !important; + box-sizing: border-box !important; + } + + html body .openms-lib-page--report-handling .contribute-coc-band__actions, + html body .openms-lib-page--report-handling .contribute-coc-band__actions:not(:has(> :nth-child(2))) { + display: flex !important; + grid-template-columns: none !important; + justify-content: flex-end !important; + justify-items: unset !important; + width: auto !important; + max-width: none !important; + margin-inline: 0 !important; + } + + html body .openms-lib-page--report-handling .contribute-coc-band__actions .openms-lib-btn, + html body .openms-lib-page--report-handling .contribute-coc-band__actions:not(:has(> :nth-child(2))) .openms-lib-btn { + width: auto !important; + min-width: 0 !important; + flex: 0 0 auto !important; + } + + html body .openms-lib-page--report-handling .contribute-support { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body .openms-lib-page--report-handling .contribute-coc-band__panel { + width: 100% !important; + max-width: 100% !important; + } +} + +@media (max-width: 32.5rem) { + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__actions { + flex-direction: column !important; + align-items: stretch !important; + } + + html body .openms-lib-page--report-handling.openms-lib-page--contribute .openms-lib-hero__actions .openms-lib-btn { + width: 100% !important; + min-width: 0 !important; + flex: 1 1 auto !important; + } +} + +html body #footer.footer-redesign .footer-link-group ul li a, +html body #footer.footer-redesign .footer-nav .footer-link-group ul li a, +html body #footer.footer-redesign .footer-nav .footer-link-group ul li a:visited { + color: rgba(var(--openms-white-rgb), 0.72) !important; + -webkit-text-fill-color: rgba(var(--openms-white-rgb), 0.72) !important; + background: transparent !important; + text-decoration: none !important; + transition: color 0.2s ease, -webkit-text-fill-color 0.2s ease !important; +} + +html body #footer.footer-redesign .footer-link-group ul li a:is(:hover, :focus-visible), +html body #footer.footer-redesign .footer-nav .footer-link-group ul li a:is(:hover, :focus-visible), +html body #footer.footer-redesign .footer-nav .footer-link-group ul li a:visited:is(:hover, :focus-visible) { + color: var(--openms-white) !important; + -webkit-text-fill-color: var(--openms-white) !important; + background: transparent !important; + text-decoration: none !important; +} + +/* Featured Apps — navy-outline pills (Install/GitHub) must keep a visible + navy border on hover/focus. The generic prose-link hover reset + (.openms-lib-page :is(p, li) a:hover) was winning on a specificity + tiebreak and zeroing border-color here; force it back with margin. */ +html body .openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary), +html body .openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) a.webapps-project-links__btn:not(.openms-btn-primary), +html body .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary), +html body .webapps-project-links__item:not(:first-child) a.webapps-project-links__btn:not(.openms-btn-primary) { + transition: border-color 0.2s ease, border-width 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; +} + +html body .openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary):is(:hover, :focus-visible, :active), +html body .openms-lib-page--featured-pro .webapps-project-links__item:not(:first-child) a.webapps-project-links__btn:not(.openms-btn-primary):is(:hover, :focus-visible, :active), +html body .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary):is(:hover, :focus-visible, :active), +html body .webapps-project-links__item:not(:first-child) a.webapps-project-links__btn:not(.openms-btn-primary):is(:hover, :focus-visible, :active) { + border: 2px solid var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + background: rgba(var(--openms-navy-rgb), 0.08) !important; + background-color: rgba(var(--openms-navy-rgb), 0.08) !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) rgba(var(--openms-navy-rgb), 0.18) !important; + outline: none !important; + text-decoration: none !important; + transition: border-color 0.2s ease, border-width 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; +} + +html body .webapps-project-links__item:not(:first-child) .webapps-project-links__btn:not(.openms-btn-primary):is(:hover, :focus-visible, :active) :is(i, span, .fab, .fas, .svg-inline--fa) { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; + fill: currentColor !important; +} + +/* Homepage "What is OpenMS?" cards (light background) — a broad utility rule + (openms-overrides.css) forces white text on any span/h1-h4/p/a inside + .keyfeatures-modern__topic-card, intended for the dark-card variants of + this same component. It was also whiting-out the letter-mark fallback + icon here, making it invisible against its own light icon badge. */ +html body .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-card .keyfeatures-modern__topic-icon.keyfeatures-modern__topic-icon--mark span { + color: var(--openms-navy) !important; + -webkit-text-fill-color: var(--openms-navy) !important; +} + +/* Same broad white-text utility also whited-out the card body copy + (title-modern__topic-title had its own override already; topic-text + did not win its equivalent override in home.css). */ +html body .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-card .keyfeatures-modern__topic-body .keyfeatures-modern__topic-text { + color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)) !important; + -webkit-text-fill-color: var(--home-body-color, rgba(var(--openms-dark-rgb), 0.72)) !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..286ce584 --- /dev/null +++ b/assets/js/publications-year-filter.js @@ -0,0 +1,265 @@ +(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; + + 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 = "..."; + 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..208669ad --- /dev/null +++ b/assets/js/sponsor-tiers.js @@ -0,0 +1,121 @@ +(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 switcher = root.querySelector("[data-sponsor-benefits-select]"); + var colHeaders = Array.prototype.slice.call( + benefits.querySelectorAll("[data-sponsor-benefits-col]") + ); + var tierCells = Array.prototype.slice.call( + benefits.querySelectorAll("[data-sponsor-benefits]") + ); + + 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); + benefits.removeAttribute("data-hover-tier"); + + 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); + }); + + colHeaders.forEach(function (header) { + var match = header.getAttribute("data-sponsor-benefits") === tierId; + header.setAttribute("aria-pressed", match ? "true" : "false"); + }); + + if (switcher && switcher.value !== tierId) { + switcher.value = tierId; + } + if (opts.open) { + benefits.open = true; + } + if (opts.scroll) { + benefits.scrollIntoView({ behavior: "smooth", block: "nearest" }); + } + } + + function setHoverTier(tierId) { + if (!tierId) { + benefits.removeAttribute("data-hover-tier"); + return; + } + benefits.setAttribute("data-hover-tier", tierId); + } + + toggles.forEach(function (toggle) { + toggle.addEventListener("click", function () { + activate(toggle.getAttribute("data-sponsor-tier"), { + open: true, + scroll: true + }); + }); + }); + + if (switcher) { + switcher.addEventListener("change", function () { + activate(switcher.value, { + open: true, + scroll: false + }); + }); + } + + colHeaders.forEach(function (header) { + var tierId = header.getAttribute("data-sponsor-benefits"); + header.addEventListener("click", function () { + activate(tierId, { open: true, scroll: false }); + }); + header.addEventListener("mouseenter", function () { + setHoverTier(tierId); + }); + header.addEventListener("mouseleave", function () { + setHoverTier(null); + }); + header.addEventListener("focus", function () { + setHoverTier(tierId); + }); + header.addEventListener("blur", function () { + setHoverTier(null); + }); + }); + + tierCells.forEach(function (cell) { + if (cell.hasAttribute("data-sponsor-benefits-col")) return; + var tierId = cell.getAttribute("data-sponsor-benefits"); + cell.addEventListener("mouseenter", function () { + setHoverTier(tierId); + }); + cell.addEventListener("mouseleave", function () { + setHoverTier(null); + }); + cell.addEventListener("click", function () { + activate(tierId, { open: true, scroll: false }); + }); + }); + + activate(initial, { open: true, scroll: false }); + + /* Keep Benefit comparison permanently open */ + benefits.open = true; + benefits.addEventListener("toggle", function () { + if (!benefits.open) benefits.open = true; + }); +})(); 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..26e81315 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,1474 @@ 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 — pick a path that matches 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: https://deploy-preview-277--openms.netlify.app/featured-apps/ + 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-lib 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" + authors: >- + Müller, Tom David; Siraj, Arslan; Walter, Axel; Kim, Jihyung; Wein, + Samuel; von Kleist, Johannes; Feroz, Ayesha; Pilz, Matteo; Jeong, + Kyowon; Sing, Justin Cyril; Charkow, Joshua; Röst, Hannes Luc; + Sachsenberg, Timo + 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: https://deploy-preview-277--openms.netlify.app/featured-apps/ + + 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 + title: What to expect + lead: You can still run these apps, but review known limits before you start. + points: + - title: Still usable + text: You can still use them as-is for your analysis. + - title: Check first + text: 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/ + - text: Executive Committee Charter + link: /exec_committee/ + - text: Code of Conduct Enforcement Procedures + link: /report-handling-manual/ 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 +1538,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..3a697da0 --- /dev/null +++ b/content/en/archived-apps.md @@ -0,0 +1,55 @@ +--- +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. +

+
+ + See archived apps + + + Contact us + +
+
+
+
+
+ +
+
+ {{< webapps-archived-notice >}} +
+ +
+
+
+

References

+

Available references

+

These projects remain available as-is. They are no longer updated or supported.

+
+ {{< webapps-archived-catalog >}} +
+
+
+ +
+
+ {{< webapps-archived-revival >}} +
+
+
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..cab23199 100644 --- a/content/en/code-of-conduct.md +++ b/content/en/code-of-conduct.md @@ -1,8 +1,9 @@ --- title: OpenMS Code of Conduct sidebar: false +hideShortcuts: true aliases: - - /conduct.html + - /conduct.html --- ### Code of Conduct (Summary View) @@ -79,7 +80,7 @@ In cases not involving clear severe and obvious breaches of this Code of Conduct 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), +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. @@ -88,4 +89,4 @@ The Committee will respond to any report as soon as possible, and at most within This document is adapted from guidelines written by the [The Carpentries Project](https://github.com/carpentries/handbook/blob/master/topic_folders/policies/code-of-conduct.md), which was itself based on the [Django Project](https://www.djangoproject.com/conduct/enforcement-manual/) and [Ada Initiative](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Responding_to_reports) template and the [PyCon 2013 Procedure for Handling Harassment Incidents](https://us.pycon.org/2013/about/code-of-conduct/harassment-incidents/). -[licensed CC BY 3.0](http://creativecommons.org/licenses/by/3.0/) \ No newline at end of file +[licensed CC BY 3.0](http://creativecommons.org/licenses/by/3.0/) diff --git a/content/en/communication.md b/content/en/communication.md deleted file mode 100644 index deb590c7..00000000 --- a/content/en/communication.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Community -sidebar: false ---- - -## Welcome to OpenMS! - -@OpenMS is an open-source C++ software library for LC-MS data management and analysis with python wrappers, a large modular toolset and workflows for e.g., Galaxy, KNIME and nextflow. - -OpenMS is a community-driven open source project developed by a diverse group of [contributors](/contributors). The OpenMS leadership has made a strong commitment to creating an open, inclusive, and positive community. Please read the [OpenMS Code of Conduct](/code-of-conduct) for guidance on how to interact with others in a way that makes the community thrive. - -Here's how to get started: - -- 📚 Browse through the main library code under [OpenMS/OpenMS](https://github.com/openms/openms/issues) -- 👩‍💻 Check out the [documentation](https://openms.readthedocs.io/en/latest/index.html). -- 🙋‍♀️ Come and say hi on our [![Discord Shield](https://img.shields.io/discord/832282841836159006?style=flat-square&message=Discord&color=5865F2&logo=Discord&logoColor=FFFFFF&label=Discord)](https://discord.gg/v9tv5BxPch) channel. -- 🍿 Tune in for news about developer/user meetings and events, [get involved]({{< ref "news.md" >}})! -- 🌈 Please abide by our [community code of conduct](https://github.com/OpenMS/OpenMS/blob/develop/CODE_OF_CONDUCT.md) - -We offer several communication channels to learn, share your knowledge and connect with others within the OpenMS community. - -*** - -### Discord - -Discord allows the users to communicate in different channels, publicly as well as privately - -*** - -### GitHub - -The following repositories can be used: -- [OpenMS](https://github.com/OpenMS/OpenMS) (Bug Reports, Feature requests) -- [OpenMS-docs](https://github.com/OpenMS/OpenMS-docs) (Documentation-related issues) -- [OpenMS.de](https://github.com/OpenMS/openms.de) (Any issue related to website) -- [pyopenms-docs](https://github.com/OpenMS/pyopenms-docs) (Any issue related to pyopenms) - -In case if you are confused, please ask your query [here](/help-request) - -*** - -### GitHub issue tracker - -The issue tracker can be used for: - -OpenMS -- [Bug reports](https://github.com/OpenMS/OpenMS/labels/bug) (e.g. "Filter doesn't work for 1D data") -- [Feature requests](https://github.com/OpenMS/OpenMS/labels/enhancement) -- [Tools](https://github.com/OpenMS/OpenMS/issues?q=is%3Aopen+is%3Aissue+label%3ATOPP) (**T**he **O**penMS **P**i**p**eline - TOPP) -- [TOPPView](https://github.com/OpenMS/OpenMS/labels/TOPPView) - -Documentation -- [Bug reports](https://github.com/OpenMS/OpenMS-docs/labels/bug) -- [Feature requests](https://github.com/OpenMS/OpenMS-docs/labels/enhancement) - -*** - -### OpenMS mailing list - - -These lists are the main form of receiving OpenMS-related updates, like new features, changes to the roadmap, and all kinds of project-wide decision making. - -There are two mailing list currently: -- [open-ms-announcements](https://sourceforge.net/p/open-ms/mailman/open-ms-announcements/) - Announcements about OpenMS, such as for releases, developer meetings, sprints or conference talks are made on this list. -- [open-ms-general](https://sourceforge.net/p/open-ms/mailman/open-ms-general/) - For addressing any queries or suggestion from the users. - - -*** - -## Join the OpenMS Community - -To thrive, the OpenMS project needs your expertise and enthusiasm. Not a coder? Not a problem! There are many ways to contribute to OpenMS. - -If you are interested in becoming a OpenMS contributor (yay!) we recommend checking out our [Contribute](/contribute) page. diff --git a/content/en/contact.md b/content/en/contact.md new file mode 100644 index 00000000..49615428 --- /dev/null +++ b/content/en/contact.md @@ -0,0 +1,6 @@ +--- +title: Contact us +sidebar: false +hidePageTitle: true +hideShortcuts: true +--- diff --git a/content/en/contribute.md b/content/en/contribute.md index 5244aae2..285469c4 100644 --- a/content/en/contribute.md +++ b/content/en/contribute.md @@ -1,215 +1,6 @@ --- title: Contributing to OpenMS sidebar: false +hidePageTitle: true +hideShortcuts: true --- - -# Contributing to OpenMS - -Welcome! The OpenMS project welcomes your expertise and enthusiasm. This guide helps you understand how to get involved, whether you're writing code, improving documentation, helping with community outreach, or contributing in other ways. - -OpenMS is an open-source project focused on developing software for mass spectrometry data analysis and management. The project brings together researchers, developers, and users from across academia and industry. - ---- - -## Getting Started - -If you are new to the project, here are good first steps: - -1. Learn about the **project structure and governance** -2. Join the **communication channels** -3. Explore **ways to contribute** -4. Find a **good first contribution** - -You do not need to understand the entire codebase before contributing—many contributors begin with documentation improvements, bug reports, or small fixes. - -**For code contributors**: See the [CONTRIBUTING.md guide](https://github.com/OpenMS/OpenMS/blob/develop/CONTRIBUTING.md) in the main repository for specific instructions on reporting issues, submitting pull requests, and following OpenMS coding conventions. - -**For technical documentation**: See the [OpenMS Developer Guide](https://openms.readthedocs.io/en/latest/manual/develop.html) for coding conventions, building OpenMS, and architectural details. - ---- - -## Communication Channels - -Most project discussions take place through the OpenMS GitHub organization and the OpenMS Discord server. - -### GitHub Issues and Pull Requests - -Used for **formal discussions** related to the project: - -- bug reports -- feature requests -- development discussions -- proposing code changes -- reviewing contributions - -If you encounter a problem with OpenMS or want to propose an improvement, opening a [GitHub issue](https://github.com/openms/openms/issues) is usually the best place to start. - -### Discord - -For **informal discussions and quick questions**, join the OpenMS Discord server: - -https://discord.gg/v9tv5BxPch - -Discord is useful for: - -- asking quick questions -- discussing ideas before opening an issue -- connecting with other contributors -- general community interaction - -While Discord is helpful for informal communication, important technical discussions and decisions should generally be recorded on GitHub so they remain searchable and accessible to the wider community. - -### Mailing Lists - -If you're unsure where to start or how your skills fit in, you can also ask on the [mailing list](https://lists.sourceforge.net/lists/listinfo/open-ms-general/). - -If you only want to be informed of new versions of OpenMS, please subscribe to the mailing list [open-ms-announcements](https://lists.sourceforge.net/lists/listinfo/open-ms-announcements). - -### Project Meetings - -Governance discussions also take place during meetings of the Executive Committee. Minutes from these meetings are recorded and made publicly available. - ---- - -## Code of Conduct - -Our community aspires to treat everyone equally and to value all contributions. We have a [Code of Conduct](/code-of-conduct) to foster an open and welcoming environment. - ---- - -## Ways to Contribute - -Your choices aren't limited to programming—there are many areas where we need **your** help. - -### Writing Code - -Programmers, the [CONTRIBUTING.md guide](https://github.com/OpenMS/OpenMS/blob/develop/CONTRIBUTING.md) explains how to contribute to the OpenMS codebase. - -### Reviewing Pull Requests - -The project has more than 45+ open pull requests—meaning many potential improvements and many open-source contributors waiting for feedback. If you're a developer who knows OpenMS, you can help even if you're not familiar with the entire codebase. You can: - -* summarize a long-running discussion -* triage documentation PRs -* test proposed changes - -### Developing Educational Materials - -OpenMS's [User Guide](https://github.com/OpenMS/OpenMS/wiki) is undergoing rehabilitation. We're in need of new tutorials, how-to's, and deep-dive explanations, and the site needs restructuring. Opportunities aren't limited to writers. We'd also welcome worked examples, notebooks, and videos. [OpenMS-Docs](https://github.com/OpenMS/OpenMS-docs/issues) lays out our ideas—and you may have others. - -### Issue Triaging - -The [OpenMS issue tracker](https://github.com/openms/openms/issues) has a _lot_ of open issues. Some are no longer valid, some should be prioritized, and some would make good issues for new contributors. You can: - -* check if older bugs are still present -* find duplicate issues and link related ones -* add good self-contained reproducers to issues -* label issues correctly (this requires triage rights—just ask) - -Please just dive in. - -### Website Development - -We've just revamped our website, but we're far from done. If you love web development, these [issues](https://github.com/openms/openms.de/issues) list some of our unmet needs—and feel free to share your own ideas. - -### Graphic Design - -We can barely begin to list the contributions a graphic designer can make here. Our docs are parched for illustration; our growing website craves images—opportunities abound. - -### Community Coordination and Outreach - -Through community contact we share our work more widely and learn where we're falling short. We're eager to get more people involved in efforts like our [Twitter](https://twitter.com/OpenMSTeam) account, organizing events, a newsletter, and perhaps a blog. - -### Fundraising - -OpenMS was all-volunteer for many years, but as its importance grew it became clear that to ensure stability and growth we'd need financial support. Like all the nonprofit world, we're constantly searching for grants, sponsorships, and other kinds of support. We have a number of ideas and of course we welcome more. Fundraising is a scarce skill here—we'd appreciate your help. - -You can also donate using our [OpenCollective](https://opencollective.com/openms) account. - ---- - -## Understanding the Project - -OpenMS is organized as both an **open-source software project** and a **nonprofit organization** that supports its development. - -### Governance - -The governance of the project is described in the following documents: - -- [Governance]({{< relref "/governance" >}}) — overview of project governance structure -- [Executive Committee]({{< relref "/exec_committee" >}}) — primary governance body of the project -- [Core Developers]({{< relref "/core_developers" >}}) — trusted maintainers who guide the project - -In general: - -- **Core developers** maintain the project and participate in governance -- The **Executive Committee** guides the direction of the project -- **Contributors** submit improvements, fixes, and new features - -Anyone is welcome (and encouraged!) to contribute to OpenMS. - -### Main Repositories - -The most important repositories in the OpenMS GitHub organization are: - -- **[OpenMS](https://github.com/OpenMS/OpenMS/)** — The main codebase containing algorithms, tools, and core libraries, as well as Python bindings for PyOpenMS - -- **[OpenMS-docs](https://github.com/OpenMS/OpenMS-docs)** — Documentation sources for the OpenMS ReadTheDocs site - -- **[pyopenms-docs](https://github.com/OpenMS/pyopenms-docs)** — Documentation sources for the pyOpenMS Python interface - -- **[streamlit-template](https://github.com/OpenMS/streamlit-template)** — A template for building lightweight web applications around OpenMS tools - -- **[OpenMS-website](https://github.com/OpenMS/OpenMS-website)** — Source repository for the OpenMS project website - -There are additional repositories for tutorials, experimental features, and supporting infrastructure. - ---- - -## Finding Something to Work On - -If you would like to contribute but are unsure where to start, there are many possible ways to get involved. - -Examples include: - -- improving documentation -- fixing bugs -- adding tests -- improving build infrastructure -- implementing new algorithms - -Issues labeled **"good first issue"** are often a good place for new contributors to begin. - -If you are unsure where to start, feel free to ask for suggestions on the [OpenMS Discord Server](https://discord.gg/v9tv5BxPch), or by opening a [GitHub issue](https://github.com/OpenMS/OpenMS/issues). - ---- - -## Contributor Path - -Many contributors start by reporting issues or submitting small fixes. Over time, contributors may become more involved in the development of the project. - -A typical progression in open-source projects looks like this: - -- **User** — uses the software and provides feedback -- **Contributor** — submits improvements, bug reports, or fixes -- **Frequent contributor** — regularly contributes to the project -- **Core developer** — trusted maintainer who guides the project - -Core developers are trusted maintainers who help guide the project and participate in governance. - -More information about this role is available on the [Core Developers]({{< relref "/core_developers" >}}) page. - ---- - -## Next Steps - -To continue exploring the project, you may want to: - -- read the [CONTRIBUTING.md guide](https://github.com/OpenMS/OpenMS/blob/develop/CONTRIBUTING.md) for code contribution guidelines -- read the [developer documentation](https://openms.readthedocs.io/en/latest/manual/develop.html) for technical details -- explore the [OpenMS repositories](https://github.com/OpenMS) -- review [open issues](https://github.com/OpenMS/OpenMS/issues) -- submit your first [pull request](https://github.com/OpenMS/OpenMS/pulls) - -We are glad you are interested in contributing to OpenMS! - diff --git a/content/en/contributors.md b/content/en/contributors.md index b1d140e1..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/exec_committee.md b/content/en/exec_committee.md index 5884b7e9..af52ed08 100644 --- a/content/en/exec_committee.md +++ b/content/en/exec_committee.md @@ -1,9 +1,7 @@ --- -title: "Executive Committee" +title: "Executive Committee Charter" --- -# OpenMS Executive Committee - The **Executive Committee** is the primary governance body of the OpenMS project. It is responsible for guiding the technical direction, long-term sustainability, and community governance of OpenMS. The committee is composed of the **core developers of the project** and is led by an **Executive Chairperson** elected from among its members. @@ -26,14 +24,14 @@ The Executive Committee provides leadership for the OpenMS project by: The Executive Committee is responsible for: -- Determining the **mission, direction, and vision** of the OpenMS project -- Planning for the **long-term continuity** of the project -- Directing **development resources** in line with the project vision -- Maintaining and updating the **project bylaws** -- Enhancing the **public image and reputation** of OpenMS -- Forming additional committees as needed -- Electing the **Executive Chairperson** -- Managing the **list of core developers** +- Determining the **mission, direction, and vision** of the OpenMS project +- Planning for the **long-term continuity** of the project +- Directing **development resources** in line with the project vision +- Maintaining and updating the **project bylaws** +- Enhancing the **public image and reputation** of OpenMS +- Forming additional committees as needed +- Electing the **Executive Chairperson** +- Managing the **list of core developers** - Addressing **Code of Conduct issues** --- @@ -78,7 +76,7 @@ Meeting rules: - Meetings are scheduled by the **Executive Chairperson**, or by any committee member if the position is vacant - Members must receive **at least 48 hours notice** of meetings - A **quorum of five members** is required for votes -- Proceedings follow **Robert’s Rules of Order Newly Revised** if requested by any committee member +- Proceedings follow **Robert's Rules of Order Newly Revised** if requested by any committee member --- @@ -102,9 +100,3 @@ In keeping with the principles of open science and open-source collaboration: - Meeting minutes are made publicly available unless the committee votes otherwise This commitment ensures transparency and accountability in the governance of the OpenMS project. - ---- - -## See Also - -For guidance on getting started as a contributor, see the [Contributing Guide]({{< relref "/contribute" >}}). 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/GSoC2025.md b/content/en/news/GSoC2025.md deleted file mode 100644 index 53ad112c..00000000 --- a/content/en/news/GSoC2025.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Google Summer of Code 2025 -authors: ["OpenMS Team"] -date: 2025-01-31 -summary: The OpenMS team applies as an organization for GSoC 2025 and invites the computational mass spectrometry community to join us in this effort. ---- - -# OpenMS Invites the Computational Mass Spectrometry Community to Join Google Summer of Code 2025! - -[Google Summer of Code (GSoC) 2025](https://summerofcode.withgoogle.com) OpenMS is planning to apply as an umbrella organization and we would like to extend an invitation to other projects and groups within the computational mass spectrometry and proteomics/metabolomics communities to join us in this effort. If your project aligns with the goals of GSoC and you are interested in mentoring a student project, we encourage you to submit a short proposals by **February 7th 2025 at 23:59 UTC.** - -> **Note:** Current status: We are no longer accepting project proposals from mentors. - ---- - -## GSoC Contributors - -- Make sure you are [eligible](https://summerofcode.withgoogle.com/get-started) to participate in GSoC 2025. -- remember the [GSOC 2025 timeline](https://developers.google.com/open-source/gsoc/timeline) -- Read the [DOs and DON'Ts document](https://opensource.googleblog.com/2011/03/dos-and-donts-of-google-summer-of-code.html) to gauge your interest in participating in this year's GSoC 2025. -- remember the [GSOC 2025 timeline](https://developers.google.com/open-source/gsoc/timeline) -- Review the list of themes and the projects available within. If you have specific questions about a project, our mentors are active on [Discord](https://discord.gg/v9tv5BxPch) and we will happily assist you. -- Follow our instructions below on how to submit a proposal to us. - ---- - -## Submitting an Application: - -- Proposal must be uploaded to the GSoC webpage before the official deadline. Ensure your CV and contact information are included in the proposal document. -- We highly recommend to get in touch with the mentors before submitting your proposal. - ---- - -# Available Projects - -## Theme A) Visualization and User-Friendly Tools - -### 1) Peptide m/z Calculator - -**Proposed Mentors:** Arslan Siraj, Tom Müller -**Skills:** Python, Git, Streamlit -**Estimated Project Length:** 90 hours | **Difficulty:** Easy - -In mass spectrometry (MS) proteomics and metabolomics, one common task is to compute the mass-to-charge (m/z) ratio of the analyte so that it can be located in a spectrum. Although the calculation is computationally simple and can easily be performed by the pyopenms package, this simple, commonly used calculation can be cumbersome for wet lab scientists with little programming experience. In this project the student will use the new [OpenMS-WebApps template](https://pubs.acs.org/doi/10.1021/acs.jproteome.4c00872) to create a simple GUI to allow researchers to perform this calculation. This calculation can be performed using pyopenms as demonstrated [here](https://pyopenms.readthedocs.io/en/latest/user_guide/peptides_proteins.html) Furthermore, this outcome web application further can be extend to other MS calculations tasks (e-g theoretical spectra generation etc) for quick interpretation of MS data. - ---- - -### 2) Write a generic visualization app for mzQC - -**Proposed Mentors:** Chris Bielow, Arslan Siraj -**Skills:** Visualization, Controlled Vocabularies, Python|R -**Estimated Project Length:** 175 hours | **Difficulty:** Easy to Medium - -Adoption and public exposure of quality control in mass-spectrometry (MS) has gained increasing traction in recent years. The Proteomics Standard Initiative (PSI) has developed an open exchange format -named [mzQC](https://hupo-psi.github.io/mzQC/), which aims to foster capturing, exchanging and archiving quality control related data across all MS-based OMICS, such as proteomics, metabolomics and lipidomics. -Currently, there exists no package which is capable of visualizing and summarizing the content of any given mzQC file (e.g. as obtained from a publication's supplemental material). - -Tasks: - -1. Pick a visualization framework of your choice (e.g. Streamlit or R Shiny) and write code (Python or R) to allow a user to explore the content of a given (uploaded) mzQC file. -2. Visualization could be a textual summary as well as (interactive) plots for the QC data contained within the mzQC file. Depending on the metrics properties, automated plot types should be chosen. - ---- - -### 3) Improving PyOpenMS Tool Parameter Accessibility - -**Proposed Mentors:** Tom Müller, Joshua Charkow -**Skills:** Python, Cython, Git -**Estimated Project Length:** 175 hours | **Difficulty:** Medium - -PyOpenMS provides Python bindings for OpenMS, a powerful open-source C++ library for computational mass spectrometry. These bindings are automatically generated using Cython and the autowrap package. While C++ developers prioritize performance and fine-grained control, Python developers emphasize readability and ease of use. Simply exposing a C++ API to Python often results in an interface that feels unnatural to Python users. -One area where this is particularly evident in PyOpenMS is the handling of parameters in OpenMS algorithms. Currently, retrieving and modifying parameters requires multiple steps: instantiating an object from an algorithm class, calling a method to obtain parameters, modifying them through a dedicated ‘Param’ class, and applying them via a setter method. This workflow is complex and does not align with Pythonic conventions. -The task is to improve the usability of PyOpenMS by enabling parameter setting directly via keyword arguments when instantiating objects of an algorithm class and making parameters easily accessible through the help() function for interactive exploration. - -Tasks: - -1. Modify the Cython binding for function type checking and conversion. -2. Add Pythonic helper functions for type checking and conversion. -3. Port the C++ tool documentation to Python. - ---- - -## Theme B) Data Formats and Interoperability - -### 1) Pythonic mzML handling -**Proposed Mentors:** Joshua Charkow, Tom Müller -**Skills:** Python, Git -**Estimated Project Length:** 175 hours | Difficulty: Easy - -Liquid-Chromatography-Mass Spectrometry data is commonly stored in sparse multidimensional data containing billions of peaks and can easily exceed a few gigabytes when compressed on disk. Python is commonly used in the field for exploratory analysis and development of novel data processing algorithms. The most common format for storing mass spectrometry data is in .mzML, an XML based format Although numerous libraries exist for parsing .mzML files in Python, an open source XML based format most commonly used in the field, each library contains its own UI which might not be intuitive for data scientists just starting with mass spectrometry. Recently, the [alphatims](https://github.com/MannLabs/alphatims) package was introduced which stores mass spectrometry data in a pandas dataframe like structure making it quite accessible data manipulation and exploration. Notably, this format takes advantage of python’s slicing syntax making it intuitive for all data scientists. However, this package only supports “.d” files which are vendor specific and not applicable to the broader mass spectrometry community. In this project, the student will create a “pythonic” .mzML file reader inspired by alphatims by extending the current available .mzML python parsers. - -Tasks: - -1. Leaverage the pyopenms documentation to get familiar with pyopenms .mzML file reading. -2. Create a class which allows for splicing of the .mzML file across various dimensions and returning a DataFrame object. -3. Benchmarking this class on various .mzML files for read times and memory usage. -4. creating a python package and releasing it on PyPI. - ---- - -### 2) Write a C++ library to read/write mzQC - -**Proposed Mentors:** Chris Bielow, Nils Hoffmann -**Skills:** C++, Controlled Vocabularies, JSON, CMake, GitHub CI -**Estimated Project Length:** 350 hours | **Difficulty:** Easy to Medium - -Adoption and public exposure of quality control in mass-spectrometry (MS) has gained increasing traction in recent years. The Proteomics Standard Initiative (PSI) has developed an open exchange format -named [mzQC](https://hupo-psi.github.io/mzQC/),which aims to foster capturing, exchanging and archiving quality control related data across all MS-based OMICS, such as proteomics, metabolomics and lipidomics. -Currently, there exist core libraries to read and write mzQC in Python, R, and Java. See [MS-Quality-Hub](https://github.com/MS-Quality-Hub). - -Tasks: - -1. implement a new mzQC Core library in C++ which supports reading/writing of mzQC -2. publish the library on GitHub under a permissive license (BSD-3clause) as a subproject of [MS-Quality-Hub](https://github.com/MS-Quality-Hub). -3. write class/unit tests and run them using GithubActions -4. integrate your library into OpenMS (incl. adaptation of the build system to include your library) and substitute existing code to create an mzQC - ---- - -### 3) Integrate Apache Parquet into OpenMS Build System - -**Proposed Mentors:** Timo Sachsenberg, Samuel Wein -**Skills:** CMake, GitHub CI, C++, Python -**Estimated Project Length:** 350 hours | **Difficulty:** Medium - -Proteomics and metabolomics mass spectrometry studies are generating datasets of unprecedented size as they scale to include more and more samples. Managing and processing these large datasets efficiently requires robust and scalable data handling solutions to make results readily available for downstream processing tasks like machine learning. - -The task is to integrate Apache Parquet, a columnar storage format, into OpenMS as a fundamental step toward enabling faster data processing, reducing memory usage, and improving scalability. The integration will involve: - -1. Updating the OpenMS build system with new CMake configurations. -2. Developing comprehensive tests to validate functionality and performance. -3. Adapting CI/CD pipelines for macOS, Linux, and Windows to ensure cross-platform compatibility. - ---- - -### 4) Universal Mass Spectrometry Data Processing in Python - -**Proposed Mentors:** Wout Bittremieux, Janne Heirman -**Skills:** Python, R, GitHub CI -**Estimated Project Length:** 350 hours | Difficulty: Medium - -A major challenge in mass spectrometry (MS) data analysis is the lack of interoperability between different open-source software tools. While various data processing packages in Python exist, many of these suffer from development inefficiencies due to having to implement duplicate functionality. - -This project aims to address these inefficiences by integrating leading open-source MS processing and visualization tools, such as spectrum_utils, pyOpenMS, Pyteomics, and matchms. The goal is to seamlessly connect these tools, harnessing similar internal MS data representations across different tools, allowing users to easily move between different software tools without redundant re-implementation of core functionality. - -To achieve this, we will develop translation layers between different MS tools, enabling smooth data exchange both within and across programming languages; optimize existing algorithms to handle the ever-growing size of MS datasets efficiently, ensuring faster and more scalable data processing; and create a unified workflow that makes MS analysis more intuitive, accessible, and powerful for researchers worldwide. - -By building these bridges, this project will empower scientists to focus on discoveries rather than data format headaches, fostering collaboration and innovation across the mass spectrometry community. - ---- - -## Theme C) Machine Learning and Advanced Computational Methods - -### 1) Diffusion Deconvolution of DIA-MS/MS Data (D^4 | dquartic) - -**Proposed Mentors:** Justin Sing, Leon Xu -**Skills:** Python, PyTorch, Deep Learning -**Estimated Project Length:** 350 hours | **Difficulty:** Medium to Advanced - -Diffusion models have revolutionized generative AI, excelling in tasks like image enhancement and speech separation. This project applies similar principles to Data-Independent Acquisition Mass Spectrometry (DIA-MS)—a technique that captures complex, overlapping signals requiring deconvolution. This project offers an exciting opportunity to apply deep learning & generative AI techniques to a real-world bioinformatics challenge. If you enjoy working on AI models for signal processing, deconvolution, and scientific applications, we’d love to have you on board! - -Problem: DIA-MS produces two correlated data types: -MS1: A low-resolution "overview" (analogous to a blurry image or background noise in audio). -MS2: Detailed but highly multiplexed signals (akin to overlapping voices in an audio recording). - -The goal is to train a diffusion model to deconvolve and denoise MS2 signals, using MS1 as a guiding signal—similar to how Stable Diffusion refines blurry images or Whisper (OpenAI) separates speech from noise. - -Current Progress & Next Steps: - -A baseline U-Net-based diffusion model already shows promising results on synthetic mixtures of DIA-MS data. The next phase is to: - -a. Train the model on raw DIA-MS data for direct peptide signal separation. -b. Integrate MS1 and MS2 peptide feature masks (from OpenSwath, DIA-NN, or Spectronaut) as conditioning signals—similar to how segmentation masks guide image super-resolution. -c. Investigate pseudo-DDA spectra generation (e.g., diaUMPIRE, diaTracer) by incorporating intermediate deconvolution steps. - -Tasks: - -1. Optimize Data Loading: Implement efficient pipelines for handling large-scale DIA-MS data. -2. Improve Memory Efficiency: Apply quantization to reduce model footprint, similar to vision models. -3. Enhance Conditioning Signals: Refine how the model extracts targeted peptide signals from MS1/MS2 data. -4. Explore Alternative Architectures: Test transformer-based backbones (e.g., ViTs) for potential performance gains. - ---- - -### 2) Optimizing Casanovo for Fast and Accurate De Novo Peptide Sequencing - -**Proposed Mentors:** William Stafford Noble, Wout Bittremieux -**Skills:** Python, PyTorch, deep learning, profiling -**Estimated Project Length:** 350 hours | Difficulty: Advanced - -De novo peptide sequencing is a powerful approach for molecular discovery by deciphering peptides directly from tandem mass spectrometry (MS/MS) data. Casanovo is a state-of-the-art AI tool that treats de novo sequencing like a language translation problem—converting sequences of peaks in an MS/MS spectrum into amino acid sequences, just like translating one language into another. Powered by a transformer deep neural network, Casanovo has already revolutionized peptide sequencing, but its inference speed remains a bottleneck, particularly during beam search decoding, the step responsible for selecting the best peptide candidates. - -By making Casanovo faster and more efficient, we can unlock new biological insights at an unprecedented scale. Whether it's identifying unknown proteins, uncovering disease biomarkers, or advancing drug discovery, your contributions will have a real-world impact on science and healthcare. If you love machine learning, performance optimization, and AI-driven discovery, this project is your chance to make a difference in computational biology! - -This project aims to optimize Casanovo's speed, enabling researchers to process larger datasets, make new discoveries faster, and push the boundaries of proteomics research. You will: - -a. Profile performance bottlenecks in Casanovo's inference pipeline to pinpoint slowdowns. -b. Optimize beam search decoding and other key computations to improve runtime efficiency. -c. Enhance scalability, ensuring Casanovo can handle the growing demands of big-data proteomics. - ---- 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/press-kit.md b/content/en/press-kit.md index 47292306..e14f341e 100644 --- a/content/en/press-kit.md +++ b/content/en/press-kit.md @@ -1,8 +1,4 @@ --- -title: Press kit +title: Press Kit sidebar: false --- - -We would like to make it easy for you to include the OpenMS project identity in your next academic paper, course materials, or presentation. - -You will find several high-resolution versions of the OpenMS logo [here](https://github.com/OpenMS/images). Note that by using the openms.org resources, you accept the [OpenMS Code of Conduct](/code-of-conduct). 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..1a06170c 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

+
    +

  • OpenMS WebApps: Building User-Friendly Solutions for MS Analysis

    Journal of Proteome Research2025

    Müller, Tom David; Siraj, Arslan; Walter, Axel; Kim, Jihyung; Wein, Samuel; von Kleist, Johannes; Feroz, Ayesha; Pilz, Matteo; Jeong, Kyowon; Sing, Justin Cyril; Charkow, Joshua; Röst, Hannes Luc; Sachsenberg, Timo

    • +

  • pyOpenMS-viz: Streamlining Mass Spectrometry Data Visualization with pandas

    Journal of Proteome Research2025

    Sing, Justin Cyril; Charkow, Joshua; Walter, Axel; Gao, Mingxuan; Muller, Tom David; Bittremieux, Wout; Sachsenberg, Timo; Röst, Hannes Luc

    • +

  • A universal language for finding mass spectrometry data patterns

    Nature methods2025

    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

    • +

  • Ibaqpy: A scalable Python package for baseline quantification in proteomics leveraging SDRF metadata

    Journal of proteomics2025

    Zheng P, Audain E, Webel H, Dai C, Klein J, Hitz MP, Sachsenberg T, Bai M, Perez-Riverol Y

    • +

  • MHCquant2 refines immunopeptidomics tumor antigen discovery

    Genome biology2025

    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

    • +

  • Open-Source and FAIR Research Software for Proteomics

    Journal of proteome research2025

    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

    • +

  • Perspectives in computational mass spectrometry: recent developments and key challenges

    Bioinformatics advances2025

    Sachsenberg T, Pino LK, Brunet M, Bludau I, Kohlbacher O, Vizcaino JA, Bittremieux W

    • +

  • mzPeak: Designing a Scalable, Interoperable, and Future-Ready Mass Spectrometry Data Format

    Journal of proteome research2025

    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

    • +
+
+
+

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/report-handling-manual.md b/content/en/report-handling-manual.md index fb71f8a2..cacb3f37 100644 --- a/content/en/report-handling-manual.md +++ b/content/en/report-handling-manual.md @@ -1,14 +1,15 @@ --- -title: OpenMS Code of Conduct - How to follow up on a report +title: Code of Conduct Enforcement Procedures sidebar: false +hideShortcuts: true --- -This is the manual followed by openms’s Code of Conduct Committee. It’s used when we respond to an issue to make sure we’re consistent and fair. +This is the manual followed by openms's Code of Conduct Committee. It's used when we respond to an issue to make sure we're consistent and fair. -Enforcing the [Code of Conduct](/code-of-conduct) impacts our community today and for the future. It’s an action that we do not take lightly. When reviewing enforcement measures, the Code of Conduct Committee will keep the following values and guidelines in mind: +Enforcing the [Code of Conduct](/code-of-conduct) impacts our community today and for the future. It's an action that we do not take lightly. When reviewing enforcement measures, the Code of Conduct Committee will keep the following values and guidelines in mind: -* Act in a personal manner rather than impersonal. The Committee can engage the parties to understand the situation while respecting the privacy and any necessary confidentiality of reporters. However, sometimes it is necessary to communicate with one or more individuals directly: the Committee’s goal is to improve the health of our community rather than only produce a formal decision. -* Emphasize empathy for individuals rather than judging behavior, avoiding binary labels of “good” and “bad/evil”. Overt, clear-cut aggression and harassment exist, and we will address them firmly. But many scenarios that can prove challenging to resolve are those where normal disagreements devolve into unhelpful or harmful behavior from multiple parties. Understanding the full context and finding a path that re-engages all is hard, but ultimately the most productive for our community. +* Act in a personal manner rather than impersonal. The Committee can engage the parties to understand the situation while respecting the privacy and any necessary confidentiality of reporters. However, sometimes it is necessary to communicate with one or more individuals directly: the Committee's goal is to improve the health of our community rather than only produce a formal decision. +* Emphasize empathy for individuals rather than judging behavior, avoiding binary labels of "good" and "bad/evil". Overt, clear-cut aggression and harassment exist, and we will address them firmly. But many scenarios that can prove challenging to resolve are those where normal disagreements devolve into unhelpful or harmful behavior from multiple parties. Understanding the full context and finding a path that re-engages all is hard, but ultimately the most productive for our community. * We understand that email is a difficult medium and can be isolating. Receiving criticism over email, without personal contact, can be particularly painful. This makes it especially important to keep an atmosphere of open-minded respect for the views of others. It also means that we must be transparent in our actions, and that we will do everything in our power to make sure that all our members are treated fairly and with sympathy. * Discrimination can be subtle and it can be unconscious. It can show itself as unfairness and hostility in otherwise ordinary interactions. We know that this does occur, and we will take care to look out for it. We would very much like to hear from you if you feel you have been treated unfairly, and we will use these procedures to make sure that your complaint is heard and addressed. * Help increase engagement in good discussion practice: try to identify where discussion may have broken down, and provide actionable information, pointers, and resources that can lead to positive change on these points. @@ -42,7 +43,7 @@ When a member of the Code of Conduct Committee becomes aware of a clear and seve * Immediately disconnect the originator from all OpenMS communication channels. * Reply to the reporter that their report has been received and that the originator has been disconnected. -* In every case, the moderator should make a reasonable effort to contact the originator, and tell them specifically how their language or actions qualify as a “clear and severe breach”. The moderator should also say that, if the originator believes this is unfair or they want to be reconnected to openms, they have the right to ask for a review, as below, by the Code of Conduct Committee. The moderator should copy this explanation to the Code of Conduct Committee. +* In every case, the moderator should make a reasonable effort to contact the originator, and tell them specifically how their language or actions qualify as a "clear and severe breach". The moderator should also say that, if the originator believes this is unfair or they want to be reconnected to openms, they have the right to ask for a review, as below, by the Code of Conduct Committee. The moderator should copy this explanation to the Code of Conduct Committee. * The Code of Conduct Committee will formally review and sign off on all cases where this mechanism has been applied to make sure it is not being used to control ordinary heated disagreement. @@ -50,20 +51,20 @@ When a member of the Code of Conduct Committee becomes aware of a clear and seve When a report is sent to the Committee they will immediately reply to the reporter to confirm receipt. This reply must be sent within 72 hours, and the group should strive to respond much quicker than that. -If a report doesn’t contain enough information, the Committee will obtain all relevant data before acting. The Committee is empowered to act on the Executive Committee’s behalf in contacting any individuals involved to get a more complete account of events. +If a report doesn't contain enough information, the Committee will obtain all relevant data before acting. The Committee is empowered to act on the Executive Committee's behalf in contacting any individuals involved to get a more complete account of events. The Committee will then review the incident and determine, to the best of their ability: * What happened. * Whether this event constitutes a Code of Conduct violation. * Who are the responsible party(ies). -* Whether this is an ongoing situation, and there is a threat to anyone’s physical safety. +* Whether this is an ongoing situation, and there is a threat to anyone's physical safety. -This information will be collected in writing, and whenever possible the group’s deliberations will be recorded and retained (i.e. chat transcripts, email discussions, recorded conference calls, summaries of voice conversations, etc). +This information will be collected in writing, and whenever possible the group's deliberations will be recorded and retained (i.e. chat transcripts, email discussions, recorded conference calls, summaries of voice conversations, etc). -It is important to retain an archive of all activities of this Committee to ensure consistency in behavior and provide institutional memory for the project. To assist in this, the default channel of discussion for this Committee will be a private mailing list accessible to current and future members of the Committee as well as members of the Executive Committee upon justified request. If the Committee finds the need to use off-list communications (e.g. phone calls for early/rapid response), it should in all cases summarize these back to the list so there’s a good record of the process. +It is important to retain an archive of all activities of this Committee to ensure consistency in behavior and provide institutional memory for the project. To assist in this, the default channel of discussion for this Committee will be a private mailing list accessible to current and future members of the Committee as well as members of the Executive Committee upon justified request. If the Committee finds the need to use off-list communications (e.g. phone calls for early/rapid response), it should in all cases summarize these back to the list so there's a good record of the process. -The Code of Conduct Committee should aim to have a resolution agreed upon within two weeks. In the event that a resolution can’t be determined in that time, the Committee will respond to the reporter(s) with an update and projected timeline for resolution. +The Code of Conduct Committee should aim to have a resolution agreed upon within two weeks. In the event that a resolution can't be determined in that time, the Committee will respond to the reporter(s) with an update and projected timeline for resolution. ## Resolutions @@ -77,10 +78,10 @@ Possible responses may include: - if the matter has been resolved publicly while the Committee was considering responses. * Coordinating voluntary mediation: if all involved parties agree, the Committee may facilitate a mediation process as detailed above. * Remind publicly, and point out that some behavior/actions/language have been judged inappropriate and why in the current context, or can but hurtful to some people, requesting the community to self-adjust. -* A private reprimand from the Committee to the individual(s) involved. In this case, the group chair will deliver that reprimand to the individual(s) over email, cc’ing the group. +* A private reprimand from the Committee to the individual(s) involved. In this case, the group chair will deliver that reprimand to the individual(s) over email, cc'ing the group. * A public reprimand. In this case, the Committee chair will deliver that reprimand in the same venue that the violation occurred, within the limits of practicality. E.g., the original mailing list for an email violation, but for a chat room discussion where the person/context may be gone, they can be reached by other means. The group may choose to publish this message elsewhere for documentation purposes. -* A request for a public or private apology, assuming the reporter agrees to this idea: they may at their discretion refuse further contact with the violator. The chair will deliver this request. The Committee may, if it chooses, attach “strings” to this request: for example, the group may ask a violator to apologize in order to retain one’s membership on a mailing list. -* A “mutually agreed upon hiatus” where the Committee asks the individual to temporarily refrain from community participation. If the individual chooses not to take a temporary break voluntarily, the Committee may issue a “mandatory cooling off period”. +* A request for a public or private apology, assuming the reporter agrees to this idea: they may at their discretion refuse further contact with the violator. The chair will deliver this request. The Committee may, if it chooses, attach "strings" to this request: for example, the group may ask a violator to apologize in order to retain one's membership on a mailing list. +* A "mutually agreed upon hiatus" where the Committee asks the individual to temporarily refrain from community participation. If the individual chooses not to take a temporary break voluntarily, the Committee may issue a "mandatory cooling off period". * A permanent or temporary ban from some or all OpenMS spaces (mailing lists, Discord, etc.). The group will maintain records of all such bans so that they may be reviewed in the future or otherwise maintained. Once a resolution is agreed upon, but before it is enacted, the Committee will contact the original reporter and any other affected parties and explain the proposed resolution. The Committee will ask if this resolution is acceptable, and must note feedback for the record. 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/exec-committee-main.html b/layouts/partials/exec-committee-main.html new file mode 100644 index 00000000..6654163d --- /dev/null +++ b/layouts/partials/exec-committee-main.html @@ -0,0 +1,25 @@ +
+
+
+
+
+
+

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

+

{{ .Title }}

+

+ The bylaws that guide OpenMS's core developers and technical direction. +

+
+
+
+
+ +
+
+
+ {{ .Content }} +
+
+
+
+
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..64db56cd 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..61518a2a --- /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

+

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

+
+
+ +
+
+ +

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

+

A committee composed of core developers responsible for setting the software roadmap, community policies, and day-to-day technical decisions.

+
    +
  • Define long-term vision and ensure project sustainability
    • +
  • Establish and maintain governance and code of conduct policies
    • +
  • Support a healthy and welcoming open-source community
    • +
+ Learn more +
+
+
+
+
+ +
+
+
+
+

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..b322894d --- /dev/null +++ b/layouts/partials/hero.html @@ -0,0 +1,119 @@ +{{- $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 }} +

+ {{- $leadParts := split . " — " -}} + {{- if gt (len $leadParts) 1 -}} + {{- $before := index $leadParts 0 -}} + {{- $after := trim (index $leadParts 1) " " -}} + {{- $massParts := split $before " spectrometry" -}} + {{- $runParts := split $after "run vetted apps, " -}} + {{- $tail := "" -}} + {{- if gt (len $runParts) 1 -}} + {{- $tail = index $runParts 1 -}} + {{- else -}} + {{- $tail = $after -}} + {{- end -}} + {{- if gt (len $massParts) 1 -}} + {{ index $massParts 0 }} + spectrometry{{ index $massParts 1 }} —{{- if gt (len $runParts) 1 }} run vetted apps,{{- end -}} + {{- else -}} + {{ $before }} — + {{- if gt (len $runParts) 1 -}} + run vetted apps, + {{- end -}} + {{- end -}} + {{ $tail }} + {{- else -}} + {{ . }} + {{- end -}} +

+ {{- 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/impressum-main.html b/layouts/partials/impressum-main.html new file mode 100644 index 00000000..f4f1a049 --- /dev/null +++ b/layouts/partials/impressum-main.html @@ -0,0 +1,38 @@ +{{- $title := .Title -}} +{{- $subtitle := .Params.Subtitle -}} +{{- $eyebrow := .Params.eyebrow | default "OpenMS" -}} +{{- $showTitle := and (not (.Params.hidePageTitle | default false)) $title -}} +{{- $showIntro := or $showTitle $subtitle -}} +
+
+ {{- if $showIntro }} +
+
+
+
+

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

+ {{- if $showTitle }} +

{{ $title }}

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

{{ . }}

+ {{- end }} +
+
+
+
+ {{- end }} + +
+
+
+
+
+ {{ .Content }} +
+
+
+
+
+
+
diff --git a/layouts/partials/keyfeatures.html b/layouts/partials/keyfeatures.html index 2913d134..041f5931 100644 --- a/layouts/partials/keyfeatures.html +++ b/layouts/partials/keyfeatures.html @@ -1,13 +1,125 @@ -{{- $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..4dd1f954 --- /dev/null +++ b/layouts/partials/news-entry.html @@ -0,0 +1,39 @@ +{{- $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..8d171743 --- /dev/null +++ b/layouts/partials/news-home.html @@ -0,0 +1,80 @@ +{{- $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..bcf626ff --- /dev/null +++ b/layouts/partials/news-single-main.html @@ -0,0 +1,54 @@ +{{- $cfg := .Site.Params.newsSection | default dict }} +{{- $eyebrow := "News" }} +{{- $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 }} +{{- $tocItemCount := len (findRE "]*>(.*)\s*$` "$1" (printf "%s" $toc) | safeHTML }} +
    +
    +
    +
    +
    +

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

    + {{ $backLabel }} +
    + +
    +

    {{ .Title }}

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

    {{ . }}

    + {{- end }} +

    + {{- if not .Date.IsZero }} + + {{- end }} + {{- with or .Params.authors .Params.Authors }} + {{- if not $.Date.IsZero }}{{ end }} + {{- range $i, $author := . }}{{ if $i }}, {{ end }}{{ $author }}{{ end -}} + {{- end }} +

    +
    + + {{- if $hasToc }} + + {{- end }} + +
    + {{ .Content }} +
    +
    +
    +
    +
    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..02d40a31 --- /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/press-kit-main.html b/layouts/partials/press-kit-main.html new file mode 100644 index 00000000..d54fbeb5 --- /dev/null +++ b/layouts/partials/press-kit-main.html @@ -0,0 +1,113 @@ +
    +
    +
    +
    +
    +
    +

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

    +

    Press Kit

    +

    + Official logos, citations, and assets. Everything you need to represent OpenMS. +

    +
    + + Design Manual + + + + Asset Repository + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    Logos

    +

    Logo files

    +

    SVG logos for light and dark backgrounds.

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

    Templates

    +

    Presentation & document templates

    +

    Branded templates for slides and documents.

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

    We would like to make it easy for you to include the OpenMS project identity in your next academic paper, course materials, or presentation.

    +

    By using the openms.org resources on this page, you accept the OpenMS Code of Conduct.

    +
    +
    +
    +
    +
    +
    diff --git a/layouts/partials/privacy-main.html b/layouts/partials/privacy-main.html new file mode 100644 index 00000000..96cbd667 --- /dev/null +++ b/layouts/partials/privacy-main.html @@ -0,0 +1,166 @@ +{{- $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/report-handling-main.html b/layouts/partials/report-handling-main.html new file mode 100644 index 00000000..5031658d --- /dev/null +++ b/layouts/partials/report-handling-main.html @@ -0,0 +1,34 @@ +{{- $committeeEmail := "conduct@openms.org" -}} +
    +
    +
    +
    +
    +
    +

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

    +

    {{ .Title }}

    +

    + How the OpenMS Code of Conduct Committee follows up on reports — so responses stay consistent, fair, and focused on community health. +

    +
    + + Report an incident + + + Code of Conduct + +
    +
    +
    +
    +
    + +
    +
    +
    + {{ .Content }} +
    +
    +
    +
    +
    diff --git a/layouts/partials/research-partnerships-main.html b/layouts/partials/research-partnerships-main.html new file mode 100644 index 00000000..cc70d1e5 --- /dev/null +++ b/layouts/partials/research-partnerships-main.html @@ -0,0 +1,147 @@ +{{- $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..3836abd9 --- /dev/null +++ b/layouts/partials/scientific-and-technical-support-main.html @@ -0,0 +1,91 @@ +{{- $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..ea3bb950 --- /dev/null +++ b/layouts/partials/sponsor-tiers.html @@ -0,0 +1,221 @@ +{{- $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..91928b79 --- /dev/null +++ b/layouts/partials/sponsor-us-main.html @@ -0,0 +1,168 @@ +{{- $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..0df20e1b --- /dev/null +++ b/layouts/partials/tally-form-embed.html @@ -0,0 +1,55 @@ +
    + +
    + 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..ea909049 --- /dev/null +++ b/layouts/partials/university-partners.html @@ -0,0 +1,88 @@ +{{- $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..38437c22 --- /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-notice.html b/layouts/partials/webapps-archived-notice.html new file mode 100644 index 00000000..aca88308 --- /dev/null +++ b/layouts/partials/webapps-archived-notice.html @@ -0,0 +1,36 @@ +{{- $section := site.Params.archivedSection | default dict -}} +{{- with index $section "notice" }} +{{- $notice := . -}} +{{- with .points }} +
    +
    +

    {{ index $notice "label" | default "Good to know" }}

    +

    {{ index $notice "title" | default "Good to know" }}

    + {{- with index $notice "lead" }} +

    {{ . }}

    + {{- end }} +
    +
    + {{- range $point := . }} + {{- $isMap := reflect.IsMap $point -}} + {{- $title := "" -}} + {{- $text := "" -}} + {{- if $isMap -}} + {{- $title = index $point "title" | default "" -}} + {{- $text = index $point "text" | default (index $point "content" | default "") -}} + {{- else -}} + {{- $text = $point -}} + {{- end -}} +
    + {{- with $title }} +

    {{ . }}

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

    {{ . }}

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

    {{ . }}

    + {{- end }} +
    +

    {{ $name }}

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

    {{ . }}

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

    + Maintainers + {{ . }} +

    + {{- end }} +
    +
    + {{ partial "webapps-project-links.html" (dict "links" $project.links) }} +
    +
    +
    diff --git a/layouts/partials/webapps-archived-revival.html b/layouts/partials/webapps-archived-revival.html new file mode 100644 index 00000000..cacac2bc --- /dev/null +++ b/layouts/partials/webapps-archived-revival.html @@ -0,0 +1,24 @@ +{{- $section := site.Params.archivedSection | default dict -}} +{{- $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 }} diff --git a/layouts/partials/webapps-archived.html b/layouts/partials/webapps-archived.html new file mode 100644 index 00000000..9bf766ca --- /dev/null +++ b/layouts/partials/webapps-archived.html @@ -0,0 +1,22 @@ +{{- $section := site.Params.archivedSection | default dict -}} +{{- $projects := site.Params.archivedProjects | default (slice) -}} +{{- $projectCount := len $projects -}} +{{- if $projects }} +
    +
    +
    +
      + {{- range $projects }} +
    • + {{ partial "webapps-archived-project.html" . }} +
      • + {{- 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..9b95c793 --- /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/gsoc-callout.html b/layouts/shortcodes/gsoc-callout.html new file mode 100644 index 00000000..dbdc3095 --- /dev/null +++ b/layouts/shortcodes/gsoc-callout.html @@ -0,0 +1,10 @@ +
    + + {{- with .Get "title" }} + {{ . }} + {{- end }} + +
    + {{ .Inner | markdownify }} +
    +
    diff --git a/layouts/shortcodes/gsoc-guide.html b/layouts/shortcodes/gsoc-guide.html new file mode 100644 index 00000000..ff682cb4 --- /dev/null +++ b/layouts/shortcodes/gsoc-guide.html @@ -0,0 +1,3 @@ +
    + {{ .Inner }} +
    diff --git a/layouts/shortcodes/gsoc-project.html b/layouts/shortcodes/gsoc-project.html new file mode 100644 index 00000000..e62ec998 --- /dev/null +++ b/layouts/shortcodes/gsoc-project.html @@ -0,0 +1,42 @@ +
    + + + {{ .Get "title" }} + + {{- with .Get "hours" }}{{ . }}{{ end }} + {{- with .Get "difficulty" }}{{ . }}{{ end }} + + + +
    +
    + {{- with .Get "mentors" }} +
    +
    Mentors
    +
    {{ . }}
    +
    + {{- end }} + {{- with .Get "skills" }} +
    +
    Skills
    +
    {{ . }}
    +
    + {{- end }} + {{- with .Get "hours" }} +
    +
    Length
    +
    {{ . }}
    +
    + {{- end }} + {{- with .Get "difficulty" }} +
    +
    Difficulty
    +
    {{ . }}
    +
    + {{- end }} +
    +
    + {{ .Inner | markdownify }} +
    +
    +
    diff --git a/layouts/shortcodes/gsoc-step.html b/layouts/shortcodes/gsoc-step.html new file mode 100644 index 00000000..477d14cc --- /dev/null +++ b/layouts/shortcodes/gsoc-step.html @@ -0,0 +1,6 @@ +
    +

    {{ .Get "title" }}

    +
    + {{ .Inner | markdownify }} +
    +
    diff --git a/layouts/shortcodes/gsoc-theme.html b/layouts/shortcodes/gsoc-theme.html new file mode 100644 index 00000000..0d743c62 --- /dev/null +++ b/layouts/shortcodes/gsoc-theme.html @@ -0,0 +1,13 @@ +
    + + + {{- with .Get "label" }} + {{ . }} + {{- end }} + {{ .Get "title" }} + + +
    + {{ .Inner }} +
    +
    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 @@ -
    @@ -82,9 +77,6 @@
    Members
    Ayesha Feroz -
    - Maintainer -
    @@ -98,10 +90,6 @@
    Members
    Oliver Kohlbacher -
    - Executive Team - Funding Team -
    @@ -115,9 +103,6 @@
    Members
    Christina Kumar -
    - Docs Team -
    @@ -131,10 +116,6 @@
    Members
    Kyowon Jeong -
    - Executive Team - Maintainer -
    @@ -148,10 +129,6 @@
    Members
    Peter J. Jones -
    - Executive Team - Maintainer -
    @@ -165,10 +142,6 @@
    Members
    Tom D. Müller -
    - Executive Team - Maintainer -
    @@ -182,10 +155,6 @@
    Members
    Julianus Pfeuffer -
    - Executive Team - Maintainer -
    @@ -199,10 +168,6 @@
    Members
    Matteo Pilz -
    - Maintainer - Docs Team -
    @@ -216,9 +181,6 @@
    Members
    Hannes Roest -
    - Executive Team -
    @@ -232,11 +194,6 @@
    Members
    Timo Sachsenberg -
    - Executive Team - Funding Team - Maintainer -
    @@ -250,27 +207,6 @@
    Members
    Axel Walter -
    - Executive Team - Maintainer -
    - - -
    - -
    - Avatar of Samuel Wein -
    - Samuel Wein -     -
    - Executive Team - Maintainer -
    @@ -284,9 +220,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 diff --git a/static/press-kit/OpenMS_CorporateDesign_current.pdf b/static/press-kit/OpenMS_CorporateDesign_current.pdf new file mode 100644 index 00000000..7f32aea4 Binary files /dev/null and b/static/press-kit/OpenMS_CorporateDesign_current.pdf differ diff --git a/static/press-kit/OpenMS_Logo_Dark.svg b/static/press-kit/OpenMS_Logo_Dark.svg new file mode 100644 index 00000000..dc5eae89 --- /dev/null +++ b/static/press-kit/OpenMS_Logo_Dark.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/press-kit/OpenMS_Logo_Light.svg b/static/press-kit/OpenMS_Logo_Light.svg new file mode 100644 index 00000000..5fe681e3 --- /dev/null +++ b/static/press-kit/OpenMS_Logo_Light.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/press-kit/OpenMS_PPT_Template.pptx b/static/press-kit/OpenMS_PPT_Template.pptx new file mode 100644 index 00000000..af0ec781 Binary files /dev/null and b/static/press-kit/OpenMS_PPT_Template.pptx differ diff --git a/static/press-kit/OpenMS_Word_Template.docx b/static/press-kit/OpenMS_Word_Template.docx new file mode 100644 index 00000000..cde94bf8 Binary files /dev/null and b/static/press-kit/OpenMS_Word_Template.docx differ