From a14351c801d8678449eb653799e624944a47a3c4 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 09:32:20 +0100 Subject: [PATCH 01/20] Redesign hero section with updated UI --- assets/css/hero.css | 239 +++++++++++++++++++++++++++++++++ assets/css/styles_override.css | 27 ---- config.yaml | 26 ++-- layouts/partials/hero.html | 48 +++++++ 4 files changed, 304 insertions(+), 36 deletions(-) create mode 100644 assets/css/hero.css create mode 100644 layouts/partials/hero.html diff --git a/assets/css/hero.css b/assets/css/hero.css new file mode 100644 index 0000000..a0b2baa --- /dev/null +++ b/assets/css/hero.css @@ -0,0 +1,239 @@ +/* Modern hero — matches OpenMS_Modern_Dynamic_Design mockup */ + +.hero-modern { + --hero-orange: #ff9500; + --hero-pink: #ff1b9e; + --hero-navy: #001a4d; + --hero-accent-yellow: #ffd700; + --hero-white: #ffffff; + + position: relative; + overflow: hidden; + color: var(--hero-white); + background: linear-gradient(135deg, var(--hero-navy) 0%, #1a2a5f 50%, #0a1a3f 100%); + padding: 5rem 2.5rem; + min-height: 32rem; +} + +.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(255, 149, 0, 0.15) 0%, transparent 70%); +} + +.hero-modern::after { + bottom: -30%; + left: -5%; + width: 31.25rem; + height: 31.25rem; + background: radial-gradient(circle, rgba(255, 27, 158, 0.1) 0%, transparent 70%); +} + +.hero-modern__container { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3.75rem; + align-items: center; + max-width: 75rem; + margin: 0 auto; +} + +.hero-modern__title { + font-size: clamp(2rem, 4.5vw, 3.375rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + margin-bottom: 1.5rem; + color: var(--hero-white); +} + +.hero-modern__gradient-text { + background: linear-gradient(90deg, var(--hero-accent-yellow), var(--hero-orange), var(--hero-pink)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-modern__description { + font-size: 1.125rem; + line-height: 1.7; + opacity: 0.95; + margin-bottom: 2rem; + max-width: 31.25rem; +} + +.hero-modern__buttons { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 2.5rem; +} + +.hero-modern__btn { + display: inline-block; + padding: 0.875rem 2rem; + font-size: 0.9375rem; + font-weight: 600; + border-radius: 0.5rem; + text-decoration: none; + transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; +} + +.hero-modern__btn--primary { + color: var(--hero-white); + background: linear-gradient(135deg, var(--hero-orange), var(--hero-pink)); + box-shadow: 0 0.5rem 1.5rem rgba(255, 149, 0, 0.3); +} + +.hero-modern__btn--primary:hover { + transform: translateY(-2px); + box-shadow: 0 0.75rem 2rem rgba(255, 149, 0, 0.4); + color: var(--hero-white); +} + +.hero-modern__btn--secondary { + color: var(--hero-white); + background: rgba(255, 255, 255, 0.15); + border: 2px solid var(--hero-white); + backdrop-filter: blur(10px); +} + +.hero-modern__btn--secondary:hover { + background: rgba(255, 255, 255, 0.25); + border-color: var(--hero-accent-yellow); + color: var(--hero-white); +} + +.hero-modern__stats { + display: flex; + flex-wrap: wrap; + gap: 2.5rem; + padding-top: 2.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.hero-modern__stat { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.hero-modern__stat-number { + font-size: 1.75rem; + font-weight: 800; + background: linear-gradient(90deg, var(--hero-accent-yellow), var(--hero-orange)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-modern__stat-label { + font-size: 0.8125rem; + opacity: 0.85; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.hero-modern__visual { + display: flex; + align-items: center; + justify-content: center; + min-height: 18rem; +} + +.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(--hero-orange), var(--hero-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%; + } +} + +@media (max-width: 1024px) { + .hero-modern { + padding: 5rem 1.5rem; + min-height: auto; + } + + .hero-modern__container { + grid-template-columns: 1fr; + gap: 2.5rem; + } + + .hero-modern__visual { + min-height: 12rem; + } +} + +@media (max-width: 768px) { + .hero-modern { + padding: 3.75rem 1rem; + } + + .hero-modern__buttons { + flex-direction: column; + align-items: stretch; + } + + .hero-modern__btn { + text-align: center; + } + + .hero-modern__stats { + flex-direction: column; + gap: 1.5rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-modern__wave-bar { + animation: none; + height: 55%; + } +} diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index ef8a8b8..d19c8fb 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -8,15 +8,6 @@ background-color: #1a3a7a; } -.hero-title-content { - max-width: 1200px; - margin: 1vh auto; -} - -.hero-logo { - max-height: 200px; -} - .navbar.is-fresh .navbar-item.has-dropdown .navbar-link { color: var(--colorPrimaryDark); } @@ -32,24 +23,6 @@ } } -@media only screen and (max-width: 600px) { - .hero-logo { - max-height: 150px; - } -} - -@media only screen and (max-width: 400px) { - .hero-logo { - max-height: 120px; - } -} - -@media only screen and (max-width: 320px) { - .hero-logo { - max-height: 100px; - } -} - /* ============================================= FOOTER — REDESIGN ============================================= */ diff --git a/config.yaml b/config.yaml index c66342e..5a62c75 100644 --- a/config.yaml +++ b/config.yaml @@ -37,16 +37,24 @@ languages: image: OpenMS_transparent_blackFont.png link: / hero: - # Main hero title - # title: OpenMS - # Hero subtitle (optional) - subtitle: The open-source framework for Mass Spectrometry - # Button text - buttontext: Install - # Where the main hero button links to + titleBefore: "The " + titleHighlight: open-source framework + titleAfter: " for Mass Spectrometry" + description: >- + Build sophisticated LC/MS data analysis tools with C++ or Python. + Process large datasets at scale. Create high-performance algorithms. + Join 1000+ researchers worldwide. + buttontext: Get Started Now buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html - # Hero image (from static/images/___) - image: OpenMS_transparent_blackFont.png + secondaryButtonText: Watch Demo + secondaryButtonLink: https://openms.readthedocs.io/en/latest/getting-started/walkthrough.html + stats: + - number: "10+" + label: Years Active + - number: "1000+" + label: Researchers + - number: "3.5.0" + label: Latest Version heroGroup: - title: "OpenMS allows users to:" diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html new file mode 100644 index 0000000..09d9114 --- /dev/null +++ b/layouts/partials/hero.html @@ -0,0 +1,48 @@ +{{- $hero := .Site.Params.hero }} +{{- $titleBefore := index $hero "titleBefore" | default "The " }} +{{- $titleHighlight := index $hero "titleHighlight" | default "open-source framework" }} +{{- $titleAfter := index $hero "titleAfter" | default " for Mass Spectrometry" }} +{{- $description := index $hero "description" }} +{{- $buttonText := index $hero "buttontext" }} +{{- $buttonLink := index $hero "buttonlink" }} +{{- $secondaryText := index $hero "secondaryButtonText" }} +{{- $secondaryLink := index $hero "secondaryButtonLink" }} +{{- $stats := index $hero "stats" }} + +
+
+
+

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

+ {{- with $description }} +

{{ . }}

+ {{- end }} +
+ {{- if $buttonText }} + {{ $buttonText }} + {{- end }} + {{- if and $secondaryText $secondaryLink }} + {{ $secondaryText }} + {{- end }} +
+ {{- with $stats }} +
+ {{- range . }} +
+
{{ .number }}
+
{{ .label }}
+
+ {{- end }} +
+ {{- end }} +
+ +
+
From 987e40925f634d5df4a2ffbb0ee444323e91cf64 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 09:43:14 +0100 Subject: [PATCH 02/20] Redesign hero section with updated UI --- assets/css/styles_override.css | 22 +++++++++++ config.yaml | 2 + layouts/partials/navbar-clone.html | 63 ++++++++++++++++++++++++++++++ layouts/partials/navbar.html | 63 ++++++++++++++++++++++++++++++ 4 files changed, 150 insertions(+) create mode 100644 layouts/partials/navbar-clone.html create mode 100644 layouts/partials/navbar.html diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index d19c8fb..756aba2 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -12,9 +12,31 @@ color: var(--colorPrimaryDark); } +.navbar.is-fresh .navbar-brand .navbar-brand-link { + display: flex; + align-items: center; + gap: 0.75rem; + padding-left: 0; +} + .navbar.is-fresh .navbar-brand img { max-height: 50px !important; height: 50px; + width: auto; +} + +.navbar.is-fresh .navbar-logo-text { + font-size: 1.5rem; + font-weight: 700; + color: #001a4d; + line-height: 1; +} + +/* Solid bar over the dark homepage hero (matches design mockup) */ +body:has(.hero-modern) #nav.navbar.is-fresh { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 2px solid #e8eaed; } @media only screen and (max-width: 850px) { diff --git a/config.yaml b/config.yaml index 5a62c75..27bdca3 100644 --- a/config.yaml +++ b/config.yaml @@ -36,6 +36,8 @@ languages: navbarlogo: image: OpenMS_transparent_blackFont.png link: / + text: OpenMS + altText: OpenMS hero: titleBefore: "The " titleHighlight: open-source framework diff --git a/layouts/partials/navbar-clone.html b/layouts/partials/navbar-clone.html new file mode 100644 index 0000000..7ab73e9 --- /dev/null +++ b/layouts/partials/navbar-clone.html @@ -0,0 +1,63 @@ +{{- $title := .Site.Params.title }} +{{- $navbar := .Site.Params.navbar }} +{{- $navbarLogo := .Site.Params.navbarlogo }} + diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html new file mode 100644 index 0000000..e811dc5 --- /dev/null +++ b/layouts/partials/navbar.html @@ -0,0 +1,63 @@ +{{- $title := .Site.Params.title }} +{{- $navbar := .Site.Params.navbar }} +{{- $navbarLogo := .Site.Params.navbarlogo }} + From 2e404bd9cc207af7c1c3e750203ed76c5512972c Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 10:23:54 +0100 Subject: [PATCH 03/20] added brand-pallete.css with the RGB Color Scheme --- assets/css/brand-palette.css | 43 +++++++++++++ assets/css/casestudies.css | 8 +-- assets/css/content_override.css | 2 +- assets/css/hero.css | 69 ++++++++++++--------- assets/css/keyfeatures_override.css | 8 +-- assets/css/mailchimp.css | 2 +- assets/css/members.css | 4 +- assets/css/news-banner.css | 94 +++++++++++++++++++++++++++++ assets/css/quick-facts.css | 10 +-- assets/css/shell.css | 8 +-- assets/css/styles_override.css | 79 ++++++++++++++++-------- assets/css/tabs.css | 12 ++-- assets/css/terminal.css | 16 ++--- assets/css/vars_override.css | 6 -- assets/css/webapps.css | 6 +- config.yaml | 11 +++- layouts/_default/baseof.html | 1 + layouts/partials/news-banner.html | 22 +++++++ 18 files changed, 302 insertions(+), 99 deletions(-) create mode 100644 assets/css/brand-palette.css create mode 100644 assets/css/news-banner.css delete mode 100644 assets/css/vars_override.css create mode 100644 layouts/partials/news-banner.html diff --git a/assets/css/brand-palette.css b/assets/css/brand-palette.css new file mode 100644 index 0000000..68eb097 --- /dev/null +++ b/assets/css/brand-palette.css @@ -0,0 +1,43 @@ +/* OpenMS brand palette — load before other site CSS (filename sorts first) */ +:root { + --fontFamily: {{ .Site.Params.font.name }}; + + --openms-yellow: #ffcb4f; + --openms-orange: #ff7501; + --openms-pink: #ff03cb; + --openms-purple: #b503ff; + --openms-blue: #3157e9; + --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-dark-rgb: 35, 31, 32; + --openms-grey-rgb: 194, 186, 188; + --openms-white-rgb: 255, 255, 255; + + --colorPrimaryDark: var(--openms-blue); + --colorPrimaryDarkBtn: var(--openms-orange); + --colorPrimary: var(--openms-blue); + --colorPrimaryLight: var(--openms-purple); + --colorSecondaryDark: var(--openms-dark); + --colorSecondary: var(--openms-grey); + --colorSecondaryLight: var(--openms-white); + --colorHeading: var(--openms-dark); + --colorHighlight: var(--openms-yellow); + --colorShadow: rgba(var(--openms-dark-rgb), 0.1); + --colorContentLink: var(--openms-blue); + --colorIcon: var(--openms-blue); + --colorNoteHeading: var(--openms-blue); + --colorNoteContent: var(--openms-grey); + --colorInfoHeading: var(--openms-orange); + --colorInfoContent: var(--openms-grey); + --colorWarningHeading: var(--openms-pink); + --colorWarningContent: var(--openms-grey); + --colorTipHeading: var(--openms-purple); + --colorTipContent: var(--openms-grey); +} diff --git a/assets/css/casestudies.css b/assets/css/casestudies.css index dc35cac..c1b82d0 100644 --- a/assets/css/casestudies.css +++ b/assets/css/casestudies.css @@ -4,7 +4,7 @@ .casestudies a:hover { text-decoration: none; - color:black + color: var(--openms-dark); } .casestudies-title { @@ -29,7 +29,7 @@ } .casestudies a { - color: rgb(1, 50, 67) !important; + color: var(--openms-blue) !important; } .casestudies-box-title { @@ -62,7 +62,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 +74,7 @@ left: 0; right: 100%; bottom: 0; - background: rgb(1, 50, 67); + background: var(--openms-blue); height: 4px; -webkit-transition-property: right; transition-property: right; diff --git a/assets/css/content_override.css b/assets/css/content_override.css index e719ef7..41c8eda 100644 --- a/assets/css/content_override.css +++ b/assets/css/content_override.css @@ -1,5 +1,5 @@ .content-container .divider { - background: #1e0010; + background: var(--openms-dark); } .content-container h1 { diff --git a/assets/css/hero.css b/assets/css/hero.css index a0b2baa..6425a8f 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -1,16 +1,15 @@ -/* Modern hero — matches OpenMS_Modern_Dynamic_Design mockup */ +/* Modern hero — OpenMS brand palette */ .hero-modern { - --hero-orange: #ff9500; - --hero-pink: #ff1b9e; - --hero-navy: #001a4d; - --hero-accent-yellow: #ffd700; - --hero-white: #ffffff; - position: relative; overflow: hidden; - color: var(--hero-white); - background: linear-gradient(135deg, var(--hero-navy) 0%, #1a2a5f 50%, #0a1a3f 100%); + color: var(--openms-white); + background: linear-gradient( + 135deg, + var(--openms-blue) 0%, + var(--openms-purple) 50%, + var(--openms-dark) 100% + ); padding: 5rem 2.5rem; min-height: 32rem; } @@ -29,7 +28,11 @@ right: -10%; width: 37.5rem; height: 37.5rem; - background: radial-gradient(circle, rgba(255, 149, 0, 0.15) 0%, transparent 70%); + background: radial-gradient( + circle, + rgba(var(--openms-orange-rgb), 0.15) 0%, + transparent 70% + ); } .hero-modern::after { @@ -37,7 +40,11 @@ left: -5%; width: 31.25rem; height: 31.25rem; - background: radial-gradient(circle, rgba(255, 27, 158, 0.1) 0%, transparent 70%); + background: radial-gradient( + circle, + rgba(var(--openms-pink-rgb), 0.1) 0%, + transparent 70% + ); } .hero-modern__container { @@ -57,11 +64,16 @@ line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.5rem; - color: var(--hero-white); + color: var(--openms-white); } .hero-modern__gradient-text { - background: linear-gradient(90deg, var(--hero-accent-yellow), var(--hero-orange), var(--hero-pink)); + background: linear-gradient( + 90deg, + var(--openms-yellow), + var(--openms-orange), + var(--openms-pink) + ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -89,32 +101,33 @@ font-weight: 600; border-radius: 0.5rem; text-decoration: none; - transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; + transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, + border-color 0.3s ease; } .hero-modern__btn--primary { - color: var(--hero-white); - background: linear-gradient(135deg, var(--hero-orange), var(--hero-pink)); - box-shadow: 0 0.5rem 1.5rem rgba(255, 149, 0, 0.3); + color: var(--openms-white); + background: linear-gradient(135deg, var(--openms-orange), var(--openms-pink)); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-orange-rgb), 0.3); } .hero-modern__btn--primary:hover { transform: translateY(-2px); - box-shadow: 0 0.75rem 2rem rgba(255, 149, 0, 0.4); - color: var(--hero-white); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-orange-rgb), 0.4); + color: var(--openms-white); } .hero-modern__btn--secondary { - color: var(--hero-white); - background: rgba(255, 255, 255, 0.15); - border: 2px solid var(--hero-white); + color: var(--openms-white); + background: rgba(var(--openms-white-rgb), 0.15); + border: 2px solid var(--openms-white); backdrop-filter: blur(10px); } .hero-modern__btn--secondary:hover { - background: rgba(255, 255, 255, 0.25); - border-color: var(--hero-accent-yellow); - color: var(--hero-white); + background: rgba(var(--openms-white-rgb), 0.25); + border-color: var(--openms-yellow); + color: var(--openms-white); } .hero-modern__stats { @@ -122,7 +135,7 @@ flex-wrap: wrap; gap: 2.5rem; padding-top: 2.5rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(var(--openms-white-rgb), 0.1); } .hero-modern__stat { @@ -134,7 +147,7 @@ .hero-modern__stat-number { font-size: 1.75rem; font-weight: 800; - background: linear-gradient(90deg, var(--hero-accent-yellow), var(--hero-orange)); + background: linear-gradient(90deg, var(--openms-yellow), var(--openms-orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -169,7 +182,7 @@ width: 0.375rem; height: 20%; border-radius: 0.1875rem; - background: linear-gradient(180deg, var(--hero-orange), var(--hero-pink)); + background: linear-gradient(180deg, var(--openms-orange), var(--openms-pink)); animation: hero-modern-waveform 2s ease-in-out infinite; } diff --git a/assets/css/keyfeatures_override.css b/assets/css/keyfeatures_override.css index 7d6bd2d..79a2c34 100644 --- a/assets/css/keyfeatures_override.css +++ b/assets/css/keyfeatures_override.css @@ -4,7 +4,7 @@ .keyfeatures a:hover { text-decoration: none; - color:black + color: var(--openms-dark); } .keyfeatures-img{ @@ -38,11 +38,11 @@ } .keyfeatures-box-content:hover { - box-shadow: 0 8px 16px 0 rgba(12, 42, 96, 0.4); + box-shadow: 0 8px 16px 0 rgba(var(--openms-blue-rgb), 0.4); } .keyfeatures a { - color: rgb(1, 50, 67) !important; + color: var(--openms-blue) !important; } .keyfeatures-box-title { @@ -70,5 +70,5 @@ } .keyfeatures-underline:before { - background: rgb(1, 50, 67); + background: var(--openms-blue); } \ No newline at end of file diff --git a/assets/css/mailchimp.css b/assets/css/mailchimp.css index 00894e7..aba156b 100644 --- a/assets/css/mailchimp.css +++ b/assets/css/mailchimp.css @@ -1,5 +1,5 @@ :root { - --openmsSlateGray: rgb(108, 122, 137); + --openmsSlateGray: var(--openms-grey); } .sign-up-container { diff --git a/assets/css/members.css b/assets/css/members.css index 0ddb3e8..320e1df 100644 --- a/assets/css/members.css +++ b/assets/css/members.css @@ -8,8 +8,8 @@ .role { display: inline-block; - background-color: #eee; - color: #333; + background-color: var(--openms-grey); + color: var(--openms-dark); padding: 0.2rem 0.5rem; border-radius: 0.5rem; font-size: 0.85em; diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css new file mode 100644 index 0000000..75c5684 --- /dev/null +++ b/assets/css/news-banner.css @@ -0,0 +1,94 @@ +/* Site-wide news / alert banner above the navbar */ + +.news-banner { + position: relative; + z-index: 100; + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 50%, + var(--openms-dark) 100% + ); + color: var(--openms-white); + border-bottom: 1px solid rgba(var(--openms-orange-rgb), 0.35); +} + +.news-banner__inner { + display: flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.625rem 2.5rem; + text-align: center; +} + +.news-banner__message { + margin: 0; + font-size: 0.9375rem; + line-height: 1.5; + flex: 1; +} + +.news-banner__label { + display: inline-block; + margin-right: 0.625rem; + padding: 0.125rem 0.5rem; + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + border-radius: 0.25rem; + background: linear-gradient(135deg, var(--openms-orange), var(--openms-pink)); + color: var(--openms-white); + vertical-align: middle; +} + +.news-banner__link { + display: inline; + color: inherit; + text-decoration: none; + transition: opacity 0.2s ease; +} + +.news-banner__link:hover { + color: var(--openms-white); + opacity: 0.92; +} + +.news-banner__link:hover .news-banner__cta { + color: var(--openms-yellow); +} + +.news-banner__text { + font-weight: 500; +} + +.news-banner__cta { + margin-left: 0.5rem; + font-weight: 600; + color: var(--openms-orange); + white-space: nowrap; +} + +@media (max-width: 768px) { + .news-banner__inner { + padding: 0.625rem 1.25rem; + text-align: left; + } + + .news-banner__message { + font-size: 0.875rem; + } + + .news-banner__label { + display: block; + width: fit-content; + margin: 0 0 0.375rem; + } + + .news-banner__cta { + display: block; + margin: 0.25rem 0 0; + white-space: normal; + } +} diff --git a/assets/css/quick-facts.css b/assets/css/quick-facts.css index ab77a28..7adcb88 100644 --- a/assets/css/quick-facts.css +++ b/assets/css/quick-facts.css @@ -28,12 +28,12 @@ height: 86px; font-size: 36px; font-family: 'Bebas Neue', cursive; - background: linear-gradient(45deg, transparent 5%, #FF013C 5%); + background: linear-gradient(45deg, transparent 5%, var(--openms-pink) 5%); border: 0; - color: #fff; + color: var(--openms-white); letter-spacing: 3px; line-height: 88px; - box-shadow: 6px 0px 0px #00E6F6; + box-shadow: 6px 0px 0px var(--openms-blue); outline: transparent; position: relative; } @@ -53,8 +53,8 @@ left: 0; right: 0; bottom: 0; - background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%); - text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6; + background: linear-gradient(45deg, transparent 3%, var(--openms-blue) 3%, var(--openms-blue) 5%, var(--openms-pink) 5%); + text-shadow: -3px -3px 0px var(--openms-yellow), 3px 3px 0px var(--openms-blue); clip-path: var(--slice-0); } diff --git a/assets/css/shell.css b/assets/css/shell.css index 46eaed3..441e5bf 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; } @@ -68,11 +68,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/styles_override.css b/assets/css/styles_override.css index 756aba2..31f3aaf 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -1,42 +1,73 @@ /* Back to top – colour override to match footer theme */ #backtotop a { - background-color: #0b214a; - border: 2px solid rgba(255, 255, 255, 0.25); + background-color: var(--openms-blue); + border: 2px solid rgba(var(--openms-white-rgb), 0.25); } #backtotop.visible a:hover { - background-color: #1a3a7a; + background-color: var(--openms-purple); } .navbar.is-fresh .navbar-item.has-dropdown .navbar-link { color: var(--colorPrimaryDark); } +.navbar.is-fresh { + min-height: 5.5rem; +} + +.navbar.is-fresh .container, +.navbar.is-fresh .navbar-brand { + min-height: 5.5rem; +} + .navbar.is-fresh .navbar-brand .navbar-brand-link { display: flex; align-items: center; - gap: 0.75rem; + gap: 0.875rem; padding-left: 0; } -.navbar.is-fresh .navbar-brand img { - max-height: 50px !important; - height: 50px; - width: auto; +.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 88px !important; + height: 88px !important; + width: auto !important; + padding-right: 0; } .navbar.is-fresh .navbar-logo-text { - font-size: 1.5rem; + font-size: 1.875rem; font-weight: 700; - color: #001a4d; + color: var(--openms-dark); line-height: 1; } +@media only screen and (max-width: 768px) { + .navbar.is-fresh, + .navbar.is-fresh .container, + .navbar.is-fresh .navbar-brand { + min-height: 4.5rem; + } + + .navbar.is-fresh .navbar-brand { + padding-left: 1.25rem; + } + + .navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 56px !important; + height: 56px !important; + } + + .navbar.is-fresh .navbar-logo-text { + font-size: 1.5rem; + } +} + /* Solid bar over the dark homepage hero (matches design mockup) */ body:has(.hero-modern) #nav.navbar.is-fresh { - background: rgba(255, 255, 255, 0.95); + background: rgba(var(--openms-white-rgb), 0.95); backdrop-filter: blur(10px); - border-bottom: 2px solid #e8eaed; + border-bottom: 2px solid var(--openms-grey); } @media only screen and (max-width: 850px) { @@ -50,8 +81,8 @@ body:has(.hero-modern) #nav.navbar.is-fresh { ============================================= */ .footer-redesign { - background-color: #0b214a; - color: #e2e8f0; + background-color: var(--openms-blue); + color: var(--openms-grey); padding: 3rem 0 0; font-family: inherit; } @@ -74,7 +105,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { .footer-title { font-size: 1.75rem; font-weight: 800; - color: #ffffff; + color: var(--openms-white); margin-bottom: 1.5rem; letter-spacing: -0.3px; } @@ -99,8 +130,8 @@ body:has(.hero-modern) #nav.navbar.is-fresh { .footer-link-group ul li a:focus-visible, .footer-socials a:focus-visible { - color: #ffffff; - outline: 2px solid rgba(255, 255, 255, 0.45); + color: var(--openms-white); + outline: 2px solid rgba(var(--openms-white-rgb), 0.45); outline-offset: 4px; } @@ -134,7 +165,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; - color: rgba(255, 255, 255, 0.45); + color: rgba(var(--openms-white-rgb), 0.45); margin: 0 0 0.875rem 0; padding: 0; } @@ -147,7 +178,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { } .footer-link-group ul li a { - color: #c8d4e8; + color: var(--openms-grey); text-decoration: none; font-size: 0.9rem; display: flex; @@ -157,7 +188,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { } .footer-link-group ul li a:hover { - color: #ffffff; + color: var(--openms-white); text-decoration: underline; } @@ -166,7 +197,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(var(--openms-white-rgb), 0.1); display: flex; align-items: center; justify-content: space-between; @@ -187,12 +218,12 @@ body:has(.hero-modern) #nav.navbar.is-fresh { justify-content: center; min-width: 44px; min-height: 44px; - color: #c8d4e8; + color: var(--openms-grey); transition: color 0.2s ease; } .footer-socials a:hover { - color: #ffffff; + color: var(--openms-white); } .footer-socials svg.icon { @@ -203,7 +234,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { /* ---- Copyright ---- */ .footer-copyright { - color: rgba(255, 255, 255, 0.45); + color: rgba(var(--openms-white-rgb), 0.45); font-size: 0.85rem; } diff --git a/assets/css/tabs.css b/assets/css/tabs.css index a7c39bc..c5db831 100644 --- a/assets/css/tabs.css +++ b/assets/css/tabs.css @@ -36,7 +36,7 @@ text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; - color: rgb(108, 122, 137); + color: var(--openms-grey); } #tabs-content > li { @@ -63,7 +63,7 @@ .grid-container > div { /* White, with 80% opacity */ - background-color: rgba(255, 255, 255, 0.8); + background-color: rgba(var(--openms-white-rgb), 0.8); text-align: middle; } @@ -85,8 +85,8 @@ } .image-grid > div { - background-color: rgb(238, 238, 238); - border: 2px solid rgb(255, 255, 255); + background-color: var(--openms-grey); + border: 2px solid var(--openms-white); border-radius: 10px; padding: 10px; } @@ -102,7 +102,7 @@ td > a { } tr.highlight-th { - border-top: 1px solid rgb(238, 238, 238); + border-top: 1px solid var(--openms-grey); font-size: 0.8rem; } @@ -134,7 +134,7 @@ td.full-center-text { td.lastrow-center-text { text-align: center; line-height: 35%; - border-bottom: 1px solid rgb(255, 255, 255); + border-bottom: 1px solid var(--openms-white); } /* Array Libraries */ diff --git a/assets/css/terminal.css b/assets/css/terminal.css index d41efda..45b162c 100644 --- a/assets/css/terminal.css +++ b/assets/css/terminal.css @@ -7,7 +7,7 @@ position: relative; } .terminal-window header { -background: #E0E8F0; +background: var(--openms-grey); height: 30px; border-radius: 8px 8px 0 0; padding-left: 10px; @@ -23,22 +23,22 @@ padding: 0%; } .terminal-window header .button.green { -background: #3BB662; +background: var(--openms-yellow); } .terminal-window header .button.yellow { -background: #E5C30F; +background: var(--openms-orange); } .terminal-window header .button.red { -background: #E75448; +background: var(--openms-pink); } .terminal-window section.terminal { -color: white; +color: var(--openms-white); font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier"; font-size: 11pt; -background: #30353A; +background: var(--openms-dark); padding: 10px; box-sizing: border-box; position: absolute; @@ -71,5 +71,5 @@ overflow: auto; } .terminal-data { display: none; } -.terminal-window .gray { color: gray; } -.terminal-window .green { color: green;} \ No newline at end of file +.terminal-window .gray { color: var(--openms-grey); } +.terminal-window .green { color: var(--openms-purple); } diff --git a/assets/css/vars_override.css b/assets/css/vars_override.css deleted file mode 100644 index d0697dc..0000000 --- a/assets/css/vars_override.css +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --fontFamily: {{ .Site.Params.font.name }}; - - --colorPrimaryDark: #0c2a60; - --colorPrimaryDarkBtn: #0c2a60; -} diff --git a/assets/css/webapps.css b/assets/css/webapps.css index f782644..514dec2 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -29,9 +29,9 @@ flex-direction: column; align-items: center; height: 60%; - border: 1px solid lightgray; + border: 1px solid var(--openms-grey); border-radius: 25px; - box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: 2px 2px 6px rgba(var(--openms-dark-rgb), 0.1); transition: height 0.6s ease; } @@ -115,7 +115,7 @@ .swiper-button-prev, .swiper-button-next { - color: #000080; + color: var(--openms-blue); position: absolute; top: 40%; } diff --git a/config.yaml b/config.yaml index 27bdca3..c222381 100644 --- a/config.yaml +++ b/config.yaml @@ -33,10 +33,15 @@ languages: languageName: English params: description: Why OpenMS? Mass Spectrometry. Visualizations. Open source. + newsBanner: + enabled: true + label: News + text: OpenMS 3.5.0 is now available — ARM64 Linux support and more. + link: /news/release3.5/ + linkText: Read more navbarlogo: image: OpenMS_transparent_blackFont.png link: / - text: OpenMS altText: OpenMS hero: titleBefore: "The " @@ -60,7 +65,7 @@ languages: heroGroup: - title: "OpenMS allows users to:" - bgColor: ECF2F9 + bgColor: C2BABC heroItems: - title: Run existing workflows subtitle: Run existing workflows for proteomics and metabolomics with OpenMS in KNIME. @@ -82,7 +87,7 @@ languages: buttonText: Get Started buttonLink: "https://pyopenms.readthedocs.io/en/latest/" - title: "Advanced users / developers can use OpenMS to:" - bgColor: FFF1E0 + bgColor: FFCB4F heroItems: - title: Analyze large datasets subtitle: Run workflows on very large datasets on powerful compute infrastructure diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8b196d1..71ecfb0 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -39,6 +39,7 @@ {{ end }} {{ block "navbar" . }} + {{ partial "news-banner.html" . }} {{ partial "navbar.html" . }} {{ partial "navbar-clone.html" . }} {{ end }} diff --git a/layouts/partials/news-banner.html b/layouts/partials/news-banner.html new file mode 100644 index 0000000..3d2b0d0 --- /dev/null +++ b/layouts/partials/news-banner.html @@ -0,0 +1,22 @@ +{{- $banner := .Site.Params.newsBanner }} +{{- if and $banner $banner.enabled }} +
+
+

+ {{- with $banner.label }} + {{ . }} + {{- end }} + {{- if $banner.link }} + + {{ $banner.text }} + {{- with $banner.linkText }} + {{ . }} → + {{- end }} + + {{- else }} + {{ $banner.text }} + {{- end }} +

+
+
+{{- end }} From c4ea78b3a0272754bc5e3f07756ec540f5665118 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 13:27:32 +0100 Subject: [PATCH 04/20] Redesign hero and navigation with responsive mobile layout. Add sticky site header, news banner styling, brand typography, and hero stats animation while restructuring the navbar for tablet and mobile. Co-authored-by: Cursor --- assets/css/brand-palette.css | 29 ++- assets/css/casestudies.css | 4 +- assets/css/content_override.css | 37 +-- assets/css/hero.css | 244 +++++++++++++++--- assets/css/keyfeatures_override.css | 6 - assets/css/mailchimp.css | 14 +- assets/css/navbar-responsive.css | 374 ++++++++++++++++++++++++++++ assets/css/news-banner.css | 54 ++-- assets/css/quick-facts.css | 3 - assets/css/shell.css | 5 - assets/css/site-header.css | 26 ++ assets/css/styles_override.css | 205 ++++++++++++--- assets/css/tabs.css | 10 +- assets/css/typography.css | 164 ++++++++++++ assets/js/hero-stats.js | 69 +++++ assets/js/navbar.js | 70 ++++++ config.yaml | 45 +++- layouts/_default/baseof.html | 6 +- layouts/index.html | 6 +- layouts/partials/css.html | 17 +- layouts/partials/hero.html | 7 +- layouts/partials/navbar-clone.html | 27 +- layouts/partials/navbar-cta.html | 8 + layouts/partials/navbar.html | 27 +- 24 files changed, 1255 insertions(+), 202 deletions(-) create mode 100644 assets/css/navbar-responsive.css create mode 100644 assets/css/site-header.css create mode 100644 assets/css/typography.css create mode 100644 assets/js/hero-stats.js create mode 100644 assets/js/navbar.js create mode 100644 layouts/partials/navbar-cta.html diff --git a/assets/css/brand-palette.css b/assets/css/brand-palette.css index 68eb097..142bdc6 100644 --- a/assets/css/brand-palette.css +++ b/assets/css/brand-palette.css @@ -1,12 +1,38 @@ /* OpenMS brand palette — load before other site CSS (filename sorts first) */ :root { - --fontFamily: {{ .Site.Params.font.name }}; + --fontFamily: "{{ .Site.Params.font.name | default "Montserrat" }}", system-ui, -apple-system, + "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --openms-font-heading: var(--fontFamily); + --openms-font-body: "{{ .Site.Params.bodyFont.name | default "Raleway" }}", system-ui, -apple-system, + "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + + /* Primary headings — Montserrat (pt) */ + --openms-heading-xl-size: 26pt; + --openms-heading-xl-weight: 800; + --openms-heading-lg-size: 20pt; + --openms-heading-lg-weight: 700; + + /* Body & secondary headings — Raleway (pt) */ + --openms-text-min: 11pt; + --openms-body-size: 12pt; + --openms-body-size-lg: 14pt; + --openms-secondary-heading-size: 14pt; + --openms-secondary-heading-size-lg: 16pt; + --openms-presentation-size: 18pt; + --openms-body-weight: 400; + --openms-secondary-heading-weight: 400; + + /* Quotes, callouts & emphasis — JetBrains Mono thin */ + --openms-font-mono: "{{ .Site.Params.monoFont.name | default "JetBrains Mono" }}", ui-monospace, + "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; + --openms-mono-weight: 100; --openms-yellow: #ffcb4f; --openms-orange: #ff7501; --openms-pink: #ff03cb; --openms-purple: #b503ff; --openms-blue: #3157e9; + --openms-navy: #0c2171; --openms-dark: #231f20; --openms-grey: #c2babc; --openms-white: #ffffff; @@ -16,6 +42,7 @@ --openms-pink-rgb: 255, 3, 203; --openms-purple-rgb: 181, 3, 255; --openms-blue-rgb: 49, 87, 233; + --openms-navy-rgb: 12, 33, 113; --openms-dark-rgb: 35, 31, 32; --openms-grey-rgb: 194, 186, 188; --openms-white-rgb: 255, 255, 255; diff --git a/assets/css/casestudies.css b/assets/css/casestudies.css index c1b82d0..e7a084a 100644 --- a/assets/css/casestudies.css +++ b/assets/css/casestudies.css @@ -10,8 +10,6 @@ .casestudies-title { display: flex; justify-content: center; - letter-spacing: 1.5px; - font-size: 27px; } .casestudies-box-container { @@ -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) { diff --git a/assets/css/content_override.css b/assets/css/content_override.css index 41c8eda..cc1bba2 100644 --- a/assets/css/content_override.css +++ b/assets/css/content_override.css @@ -1,43 +1,16 @@ .content-container .divider { - background: var(--openms-dark); -} - -.content-container h1 { - font-size: 2em; - text-transform: uppercase; - letter-spacing: 1.5px; - font-weight: bold; -} - -.content-container h2 { - font-size: 2em; - text-transform: uppercase; - letter-spacing: 1.5px; - font-weight: bold; + background: var(--openms-dark); } .content-container h3 { - font-size: 1.5em; - text-transform: uppercase; - letter-spacing: 1.3px; - font-weight: bold; - margin-top: 25px; + margin-top: 1.5rem; } .content-container h4 { - text-transform: uppercase; - font-weight: bold; - margin-top: 40px; - margin-bottom: -10px; + margin-top: 2.5rem; + margin-bottom: -0.625rem; } .content-container h5 { - text-transform: uppercase; - font-weight: bold; - margin-top: 22px; + margin-top: 1.375rem; } - -.content-container h6 { - text-transform: uppercase; - font-weight: bold; -} \ No newline at end of file diff --git a/assets/css/hero.css b/assets/css/hero.css index 6425a8f..9e6b3a4 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -1,17 +1,21 @@ /* Modern hero — OpenMS brand palette */ +:root { + /* News banner + navbar (approx.) — used to fit hero in one screen */ + --openms-hero-chrome: 8.5rem; +} + .hero-modern { position: relative; overflow: hidden; color: var(--openms-white); - background: linear-gradient( - 135deg, - var(--openms-blue) 0%, - var(--openms-purple) 50%, - var(--openms-dark) 100% - ); - padding: 5rem 2.5rem; - min-height: 32rem; + background: var(--openms-navy); + padding: clamp(2rem, 4vh, 5rem) 2.5rem; + min-height: min(32rem, calc(100svh - var(--openms-hero-chrome))); + max-height: calc(100svh - var(--openms-hero-chrome)); + box-sizing: border-box; + display: flex; + align-items: center; } .hero-modern::before, @@ -30,7 +34,7 @@ height: 37.5rem; background: radial-gradient( circle, - rgba(var(--openms-orange-rgb), 0.15) 0%, + rgba(var(--openms-white-rgb), 0.12) 0%, transparent 70% ); } @@ -42,7 +46,7 @@ height: 31.25rem; background: radial-gradient( circle, - rgba(var(--openms-pink-rgb), 0.1) 0%, + rgba(var(--openms-purple-rgb), 0.15) 0%, transparent 70% ); } @@ -55,12 +59,14 @@ gap: 3.75rem; align-items: center; max-width: 75rem; + width: 100%; margin: 0 auto; } .hero-modern__title { - font-size: clamp(2rem, 4.5vw, 3.375rem); - font-weight: 800; + 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-bottom: 1.5rem; @@ -68,11 +74,15 @@ } .hero-modern__gradient-text { + font-size: 1.25em; + line-height: 1.1; + display: inline-block; background: linear-gradient( 90deg, - var(--openms-yellow), - var(--openms-orange), - var(--openms-pink) + var(--openms-yellow) 0%, + var(--openms-orange) 40%, + var(--openms-pink) 75%, + var(--openms-pink) 100% ); -webkit-background-clip: text; background-clip: text; @@ -80,10 +90,8 @@ } .hero-modern__description { - font-size: 1.125rem; - line-height: 1.7; opacity: 0.95; - margin-bottom: 2rem; + margin-bottom: clamp(1rem, 2vh, 2rem); max-width: 31.25rem; } @@ -91,13 +99,13 @@ display: flex; flex-wrap: wrap; gap: 1rem; - margin-bottom: 2.5rem; + margin-bottom: clamp(1rem, 2vh, 2.5rem); } .hero-modern__btn { display: inline-block; padding: 0.875rem 2rem; - font-size: 0.9375rem; + font-size: var(--openms-body-size-lg); font-weight: 600; border-radius: 0.5rem; text-decoration: none; @@ -107,14 +115,17 @@ .hero-modern__btn--primary { color: var(--openms-white); - background: linear-gradient(135deg, var(--openms-orange), var(--openms-pink)); - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-orange-rgb), 0.3); + background: var(--openms-orange); + border: 2px solid var(--openms-orange); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-orange-rgb), 0.35); } .hero-modern__btn--primary:hover { transform: translateY(-2px); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-orange-rgb), 0.4); - color: var(--openms-white); + background: var(--openms-yellow); + border-color: var(--openms-yellow); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-yellow-rgb), 0.4); + color: var(--openms-dark); } .hero-modern__btn--secondary { @@ -134,7 +145,7 @@ display: flex; flex-wrap: wrap; gap: 2.5rem; - padding-top: 2.5rem; + padding-top: clamp(1rem, 2vh, 2.5rem); border-top: 1px solid rgba(var(--openms-white-rgb), 0.1); } @@ -147,14 +158,13 @@ .hero-modern__stat-number { font-size: 1.75rem; font-weight: 800; - background: linear-gradient(90deg, var(--openms-yellow), var(--openms-orange)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + font-variant-numeric: tabular-nums; + min-width: 7ch; + color: var(--openms-yellow); } .hero-modern__stat-label { - font-size: 0.8125rem; + font-size: var(--openms-text-min); opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; @@ -209,38 +219,198 @@ } @media (max-width: 1024px) { + :root { + --openms-hero-chrome: 9.5rem; + } + .hero-modern { - padding: 5rem 1.5rem; - min-height: auto; + padding: clamp(1.25rem, 2.5vh, 2.5rem) 1.5rem; + min-height: calc(100dvh - var(--openms-hero-chrome)); + max-height: 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; - gap: 2.5rem; + gap: clamp(0.75rem, 2vh, 1.5rem); + max-height: 100%; + overflow-y: auto; + overscroll-behavior: contain; + } + + .hero-modern__content { + text-align: center; + width: 100%; + } + + .hero-modern__description { + margin-left: auto; + margin-right: auto; + } + + .hero-modern__buttons { + justify-content: center; } .hero-modern__visual { - min-height: 12rem; + 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__stats { + justify-content: center; + align-items: flex-start; + width: 100%; + } + + .hero-modern__stat { + align-items: center; + text-align: center; + } + + .hero-modern__stat-number { + min-width: auto; } } @media (max-width: 768px) { + :root { + --openms-hero-chrome: 10.5rem; + } + .hero-modern { - padding: 3.75rem 1rem; + padding: clamp(0.75rem, 1.5vh, 1.5rem) 1.25rem; + } + + .hero-modern__container { + gap: clamp(0.5rem, 1.5vh, 1rem); + } + + .hero-modern__title { + margin-bottom: 0.5rem; + font-size: clamp(1.375rem, 5.5vw, 1.75rem); + line-height: 1.2; + } + + .hero-modern__gradient-text { + font-size: 1.12em; + } + + .hero-modern__description { + max-width: none; + margin-bottom: 0.75rem; + font-size: var(--openms-body-size-lg); + line-height: 1.45; } .hero-modern__buttons { flex-direction: column; align-items: stretch; + margin-bottom: 0.75rem; } .hero-modern__btn { text-align: center; + width: 100%; + box-sizing: border-box; + padding: 0.75rem 1.25rem; } .hero-modern__stats { - flex-direction: column; - gap: 1.5rem; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + gap: 0.5rem; + padding-top: 0.75rem; + } + + .hero-modern__stat { + flex: 1 1 0; + min-width: 0; + max-width: 6.5rem; + } + + .hero-modern__stat-number { + font-size: 1.375rem; + } + + .hero-modern__stat-label { + font-size: var(--openms-text-min); + letter-spacing: 0.04em; + line-height: 1.3; + } + + .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: 1.25rem; + } + + .hero-modern__stats { + gap: 0.5rem; + } + + .hero-modern__stat { + max-width: 5.5rem; + } + + .hero-modern__stat-number { + font-size: 1.2rem; + } + + .hero-modern__stat-label { + font-size: var(--openms-text-min); } } diff --git a/assets/css/keyfeatures_override.css b/assets/css/keyfeatures_override.css index 79a2c34..6b23356 100644 --- a/assets/css/keyfeatures_override.css +++ b/assets/css/keyfeatures_override.css @@ -19,9 +19,6 @@ .keyfeatures-title { display: flex; justify-content: center; - letter-spacing: 1.5px; - font-size: 27px; - font-weight: bold; } .keyfeatures-box-container { @@ -47,9 +44,6 @@ .keyfeatures-box-title { margin: 15px; - font-size: 16px; - text-transform: uppercase; - font-weight: bold; } .keyfeatures-box-text { diff --git a/assets/css/mailchimp.css b/assets/css/mailchimp.css index aba156b..349d4c1 100644 --- a/assets/css/mailchimp.css +++ b/assets/css/mailchimp.css @@ -31,18 +31,18 @@ width: 75%; height: 35px; padding-left: 5px; - font-size: 14px; + font-size: var(--openms-body-size-lg); color: var(--colorPrimaryDark); } .submission-instructions { position: absolute; right: 18%; - font-size: 10px; + font-size: var(--openms-text-min); color: var(--openmsSlateGray); } -.signup-button { +.sign-up-container .signup-button { display: none; } @@ -64,7 +64,7 @@ @media only screen and (max-width: 1150px) { .sign-up-input { - font-size: 12px; + font-size: var(--openms-text-min); } } @@ -81,14 +81,14 @@ display: none; } - .signup-button { + .sign-up-container .signup-button { display: block; height: 35px; border-radius: 5px; margin-left: 5px; width: 60px; color: black; - border:none; - outline:none; + border: none; + outline: none; } } diff --git a/assets/css/navbar-responsive.css b/assets/css/navbar-responsive.css new file mode 100644 index 0000000..06d991f --- /dev/null +++ b/assets/css/navbar-responsive.css @@ -0,0 +1,374 @@ +/* Navbar — tablet (md) & mobile (sm) */ + +/* Mobile bar CTAs — hidden on desktop */ +.navbar-mobile-ctas, +.navbar-mobile-ctas-end { + display: none; +} + +.navbar-brand-actions { + display: flex; + align-items: center; +} + +/* Desktop — horizontal bar */ +@media (min-width: 1024px) { + .navbar-mobile-ctas, + .navbar-mobile-ctas-end, + .navbar-brand-actions { + display: none; + } + + .navbar-desktop-cta { + display: contents; + } + + .navbar.is-fresh .navbar-burger, + #navbar-clone.navbar.is-fresh .navbar-burger { + display: none; + } + + .navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + display: flex !important; + flex: 1; + min-width: 0; + position: static; + box-shadow: none; + background: transparent; + overflow: visible; + } + + .site-header #nav.navbar.is-fresh .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-end { + flex-wrap: wrap; + justify-content: flex-end; + align-items: center; + } +} + +/* Medium desktop — tighter items so CTAs stay visible */ +@media (min-width: 1024px) and (max-width: 1280px) { + .navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 64px !important; + height: 64px !important; + } + + .navbar.is-fresh .navbar-logo-text, + #navbar-clone.navbar.is-fresh .navbar-logo-text { + font-size: var(--openms-secondary-heading-size-lg); + } + + .navbar.is-fresh .navbar-item, + .navbar.is-fresh a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-item, + #navbar-clone.navbar.is-fresh a.navbar-item.is-secondary { + font-size: var(--openms-text-min); + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .navbar.is-fresh .signup-button, + #navbar-clone.navbar.is-fresh .signup-button { + font-size: var(--openms-text-min); + padding: 0.5rem 0.875rem !important; + white-space: nowrap; + } +} + +/* Tablet & mobile — collapsible menu (Bulma < 1024px) */ +@media (max-width: 1023px) { + .site-header #nav.navbar.is-fresh, + #navbar-clone.navbar.is-fresh { + min-height: auto; + } + + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container { + display: flex; + flex-wrap: nowrap; + align-items: center; + min-height: 3.75rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .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: 3.75rem; + min-width: 0; + padding-left: 0; + gap: 0.25rem; + } + + .site-header #nav.navbar.is-fresh .navbar-brand-link, + #navbar-clone.navbar.is-fresh .navbar-brand-link { + flex: 0 1 auto; + min-width: 0; + max-width: 42%; + padding: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 44px !important; + height: 44px !important; + max-width: 100%; + width: auto; + object-fit: contain; + object-position: left center; + } + + .site-header #nav.navbar.is-fresh .navbar-logo-text, + #navbar-clone.navbar.is-fresh .navbar-logo-text { + display: none; + } + + .navbar-brand-actions { + display: flex !important; + align-items: center; + flex: 1 1 auto; + min-width: 0; + margin-left: auto; + justify-content: flex-end; + overflow: visible; + } + + /* Right cluster: Spon → Give → menu */ + .navbar-mobile-ctas-end { + display: flex !important; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + gap: 0.25rem; + flex-shrink: 0; + margin-left: auto; + overflow: visible; + max-width: 100%; + } + + .navbar-mobile-ctas-end .navbar-cta-label--full, + .navbar-mobile-ctas .navbar-cta-label--full { + display: none; + } + + .navbar-mobile-ctas-end .navbar-cta-label--short, + .navbar-mobile-ctas .navbar-cta-label--short { + display: inline; + } + + .navbar-mobile-ctas-end .navbar-cta-item { + display: inline-flex !important; + align-items: center; + flex-shrink: 0; + width: auto !important; + max-width: none; + justify-content: center; + text-align: center; + padding: 0; + } + + .navbar-mobile-ctas-end .navbar-cta-item:nth-child(1) { + order: 1; + } + + .navbar-mobile-ctas-end .navbar-cta-item:nth-child(2) { + order: 2; + } + + .navbar-mobile-ctas-end .signup-button { + display: inline-block !important; + padding: 0.35rem 0.5rem !important; + font-size: var(--openms-text-min); + line-height: 1.15; + white-space: nowrap; + border-width: 1.5px !important; + } + + .navbar-mobile-ctas-end .navbar-burger { + order: 3; + display: flex !important; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 2.75rem; + height: 2.75rem; + margin-right: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-burger, + #navbar-clone.navbar.is-fresh .navbar-burger { + display: flex !important; + align-items: center; + justify-content: center; + width: 2.75rem; + height: 2.75rem; + margin-right: 0; + } + + .site-header #nav.navbar.is-fresh .navbar-burger span, + #navbar-clone.navbar.is-fresh .navbar-burger span { + width: 1.35rem; + left: calc(50% - 0.675rem); + } + + /* Overlay menu — does not expand header height */ + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + display: none; + flex: none; + width: 100%; + position: fixed; + left: 0; + right: 0; + top: var(--openms-header-height, 9rem); + bottom: 0; + z-index: 199; + margin: 0; + background: var(--openms-white); + box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); + border-top: 1px solid var(--openms-grey); + max-height: none; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active { + display: block; + } + + .site-header #nav.navbar.is-fresh .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-end { + flex-direction: column; + align-items: stretch; + width: 100%; + flex-wrap: nowrap; + gap: 0; + padding: 0.5rem 0 1rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown { + width: 100%; + justify-content: center; + text-align: center; + padding: 0.65rem 1rem; + } + + .navbar.is-fresh .navbar-item.has-dropdown .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { + width: 100%; + justify-content: center; + } + + .navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { + position: relative; + top: auto; + right: auto; + margin-left: 0.35rem; + } + + .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { + position: static; + display: none; + width: 100%; + min-width: 0; + margin-top: 0; + box-shadow: none; + border-top: none; + background: rgba(var(--openms-blue-rgb), 0.06); + } + + .navbar.is-fresh .navbar-item.has-dropdown.is-active .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active .navbar-dropdown { + display: block; + } + + .navbar.is-fresh .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown { + display: none; + } + + .navbar.is-fresh .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown { + display: block; + } + +} + +/* Small phones */ +@media (max-width: 768px) { + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container { + min-height: 3.5rem; + } + + .site-header #nav.navbar.is-fresh .navbar-brand, + #navbar-clone.navbar.is-fresh .navbar-brand { + min-height: 3.5rem; + } + + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 38px !important; + height: 38px !important; + } + + .site-header #nav.navbar.is-fresh .navbar-brand-link, + #navbar-clone.navbar.is-fresh .navbar-brand-link { + max-width: 38%; + } +} + +@media (max-width: 380px) { + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 32px !important; + height: 32px !important; + } + + .site-header #nav.navbar.is-fresh .navbar-brand-link, + #navbar-clone.navbar.is-fresh .navbar-brand-link { + max-width: 34%; + } + + .navbar-mobile-ctas-end { + gap: 0.2rem; + } + + .navbar-mobile-ctas-end .signup-button { + padding: 0.3rem 0.4rem !important; + } + + .navbar-mobile-ctas-end .navbar-burger { + width: 2.5rem; + height: 2.5rem; + } +} + +/* Desktop CTA labels */ +@media (min-width: 1024px) { + .navbar-cta-label--short { + display: none; + } + + .navbar-cta-label--full { + display: inline; + } +} diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css index 75c5684..ec63d59 100644 --- a/assets/css/news-banner.css +++ b/assets/css/news-banner.css @@ -1,16 +1,11 @@ -/* Site-wide news / alert banner above the navbar */ +/* Site-wide news / alert banner — matches hero color scheme */ .news-banner { position: relative; z-index: 100; - background: linear-gradient( - 90deg, - var(--openms-blue) 0%, - var(--openms-purple) 50%, - var(--openms-dark) 100% - ); + background: var(--openms-navy); color: var(--openms-white); - border-bottom: 1px solid rgba(var(--openms-orange-rgb), 0.35); + border-bottom: 1px solid rgba(var(--openms-white-rgb), 0.1); } .news-banner__inner { @@ -24,21 +19,23 @@ .news-banner__message { margin: 0; - font-size: 0.9375rem; + font-size: var(--openms-body-size); line-height: 1.5; flex: 1; } +/* Matches hero primary button */ .news-banner__label { display: inline-block; margin-right: 0.625rem; padding: 0.125rem 0.5rem; - font-size: 0.6875rem; + font-size: var(--openms-text-min); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0.25rem; - background: linear-gradient(135deg, var(--openms-orange), var(--openms-pink)); + background: var(--openms-orange); + border: 2px solid var(--openms-orange); color: var(--openms-white); vertical-align: middle; } @@ -47,48 +44,57 @@ display: inline; color: inherit; text-decoration: none; - transition: opacity 0.2s ease; + transition: color 0.2s ease, opacity 0.2s ease; } .news-banner__link:hover { color: var(--openms-white); - opacity: 0.92; -} - -.news-banner__link:hover .news-banner__cta { - color: var(--openms-yellow); } .news-banner__text { font-weight: 500; } +/* Matches hero stat numbers */ .news-banner__cta { margin-left: 0.5rem; font-weight: 600; - color: var(--openms-orange); + color: var(--openms-yellow); white-space: nowrap; + transition: color 0.2s ease; +} + +.news-banner__link:hover .news-banner__cta { + color: var(--openms-yellow); } @media (max-width: 768px) { .news-banner__inner { - padding: 0.625rem 1.25rem; - text-align: left; + padding: 0.75rem 1rem; + text-align: center; + justify-content: center; } .news-banner__message { - font-size: 0.875rem; + flex: none; + width: 100%; + font-size: var(--openms-body-size); + text-align: center; } .news-banner__label { - display: block; - width: fit-content; + display: inline-block; margin: 0 0 0.375rem; } + .news-banner__link { + display: inline-block; + text-align: center; + } + .news-banner__cta { display: block; - margin: 0.25rem 0 0; + margin: 0.25rem auto 0; white-space: normal; } } diff --git a/assets/css/quick-facts.css b/assets/css/quick-facts.css index 7adcb88..78003a8 100644 --- a/assets/css/quick-facts.css +++ b/assets/css/quick-facts.css @@ -9,9 +9,6 @@ .facts-title { display: flex; justify-content: center; - letter-spacing: 1.5px; - font-size: 30px; - font-weight: bold; } .facts-list { diff --git a/assets/css/shell.css b/assets/css/shell.css index 441e5bf..6afefcb 100644 --- a/assets/css/shell.css +++ b/assets/css/shell.css @@ -32,11 +32,6 @@ align-items: center; } -.shell-title { - font-size: 35px; - font-weight: bold; -} - .shell-lesson { text-align: left; flex: 1; diff --git a/assets/css/site-header.css b/assets/css/site-header.css new file mode 100644 index 0000000..1c9270f --- /dev/null +++ b/assets/css/site-header.css @@ -0,0 +1,26 @@ +/* Sticky site header — news banner + navbar stay aligned at top */ + +.site-header { + position: sticky; + top: 0; + z-index: 200; + width: 100%; + background: var(--openms-white); +} + +.site-header .news-banner { + position: relative; + z-index: 1; + flex-shrink: 0; +} + +.site-header #nav.navbar.is-fresh { + position: relative; + z-index: 2; + width: 100%; +} + +/* Scroll clone duplicates nav only — hide; sticky header handles scroll */ +#navbar-clone.navbar.is-fresh { + display: none !important; +} diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index 31f3aaf..618034a 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -8,8 +8,160 @@ background-color: var(--openms-purple); } -.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { - color: var(--colorPrimaryDark); +.navbar.is-fresh .navbar-item, +.navbar.is-fresh .navbar-link, +.navbar.is-fresh a.navbar-item.is-secondary, +.navbar.is-fresh .navbar-menu .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-link, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary, +#navbar-clone.navbar.is-fresh .navbar-menu .navbar-item { + color: var(--openms-dark) !important; +} + +.navbar.is-fresh .navbar-item:focus-visible, +.navbar.is-fresh .navbar-link:focus-visible, +.navbar.is-fresh .navbar-dropdown .navbar-item:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-item:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-link:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: 2px; +} + +.navbar.is-fresh .navbar-item:hover, +.navbar.is-fresh .navbar-link:hover, +.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-fresh .navbar-brand .navbar-brand-link:hover, +#navbar-clone.navbar.is-fresh .navbar-item:hover, +#navbar-clone.navbar.is-fresh .navbar-link:hover, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, +#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover { + color: var(--openms-blue) !important; +} + +.navbar.is-fresh a.navbar-item.is-secondary, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary { + transition: color 0.2s ease; +} + +.navbar.is-fresh a.navbar-item.is-secondary:hover, +.navbar.is-fresh a.navbar-item.is-secondary:focus-visible, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:hover, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:focus-visible { + color: var(--openms-blue) !important; + background-color: transparent !important; +} + +.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { + border-color: var(--openms-dark) !important; +} + +.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after { + border-color: var(--openms-blue) !important; +} + +.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { + border-top-color: var(--openms-blue); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-dark-rgb), 0.08); +} + +.navbar.is-fresh .navbar-dropdown .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item { + color: var(--openms-dark) !important; +} + +.navbar.is-fresh .navbar-dropdown .navbar-item:hover, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item:hover { + color: var(--openms-blue) !important; + background-color: rgba(var(--openms-blue-rgb), 0.1); +} + +/* Navbar CTA buttons (mailchimp.css must not hide these) */ +.navbar.is-fresh .signup-button, +#navbar-clone.navbar.is-fresh .signup-button { + display: inline-block !important; +} + +/* Donate — matches hero primary button */ +.navbar.is-fresh .signup-button.secondary-btn, +#navbar-clone.navbar.is-fresh .signup-button.secondary-btn { + background-color: var(--openms-orange) !important; + color: var(--openms-white) !important; + border: 2px solid var(--openms-orange) !important; + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-orange-rgb), 0.3); +} + +.navbar.is-fresh .signup-button.secondary-btn:hover, +#navbar-clone.navbar.is-fresh .signup-button.secondary-btn:hover { + background-color: var(--openms-yellow) !important; + color: var(--openms-dark) !important; + border-color: var(--openms-yellow) !important; + box-shadow: 0 0.35rem 1rem rgba(var(--openms-yellow-rgb), 0.35); +} + +/* Sponsor — outline blue */ +.navbar.is-fresh .signup-button.sponsor-btn, +#navbar-clone.navbar.is-fresh .signup-button.sponsor-btn { + background-color: transparent !important; + color: var(--openms-blue) !important; + border: 2px solid var(--openms-blue) !important; + box-shadow: none; +} + +.navbar.is-fresh .signup-button.sponsor-btn:hover, +#navbar-clone.navbar.is-fresh .signup-button.sponsor-btn:hover { + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + border-color: var(--openms-blue) !important; + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-blue-rgb), 0.3); +} + +.navbar.is-fresh .navbar-burger, +#navbar-clone.navbar.is-fresh .navbar-burger { + color: var(--openms-dark); + width: 3.5rem; + height: 3.5rem; + margin-right: 1rem; +} + +@media (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-dark); + height: 3px; + width: 1.75rem; + left: calc(50% - 0.875rem); + 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% - 8px); +} + +.navbar.is-fresh .navbar-burger span:nth-child(2), +#navbar-clone.navbar.is-fresh .navbar-burger span:nth-child(2) { + top: calc(50% - 1.5px); +} + +.navbar.is-fresh .navbar-burger span:nth-child(3), +#navbar-clone.navbar.is-fresh .navbar-burger span:nth-child(3) { + top: calc(50% + 5px); +} + +.navbar.is-fresh .navbar-burger:hover, +#navbar-clone.navbar.is-fresh .navbar-burger:hover { + background-color: rgba(var(--openms-yellow-rgb), 0.15); } .navbar.is-fresh { @@ -21,6 +173,12 @@ min-height: 5.5rem; } +.navbar.is-fresh .navbar-item:has(.signup-button) { + flex-shrink: 0; + padding-left: 0.35rem; + padding-right: 0.35rem; +} + .navbar.is-fresh .navbar-brand .navbar-brand-link { display: flex; align-items: center; @@ -35,36 +193,22 @@ padding-right: 0; } -.navbar.is-fresh .navbar-logo-text { - font-size: 1.875rem; - font-weight: 700; - color: var(--openms-dark); +.navbar.is-fresh .navbar-logo-text, +#navbar-clone.navbar.is-fresh .navbar-logo-text { + font-family: var(--openms-font-heading); + font-size: var(--openms-heading-lg-size); + font-weight: var(--openms-heading-lg-weight); + color: var(--openms-dark) !important; line-height: 1; } -@media only screen and (max-width: 768px) { - .navbar.is-fresh, - .navbar.is-fresh .container, - .navbar.is-fresh .navbar-brand { - min-height: 4.5rem; - } - - .navbar.is-fresh .navbar-brand { - padding-left: 1.25rem; - } - - .navbar.is-fresh .navbar-brand img.navbar-logo { - max-height: 56px !important; - height: 56px !important; - } - - .navbar.is-fresh .navbar-logo-text { - font-size: 1.5rem; - } +.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text, +#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text { + color: var(--openms-blue) !important; } /* Solid bar over the dark homepage hero (matches design mockup) */ -body:has(.hero-modern) #nav.navbar.is-fresh { +body:has(.hero-modern) .site-header #nav.navbar.is-fresh { background: rgba(var(--openms-white-rgb), 0.95); backdrop-filter: blur(10px); border-bottom: 2px solid var(--openms-grey); @@ -103,11 +247,8 @@ body:has(.hero-modern) #nav.navbar.is-fresh { } .footer-title { - font-size: 1.75rem; - font-weight: 800; color: var(--openms-white); margin-bottom: 1.5rem; - letter-spacing: -0.3px; } /* ---- Partner logo row ---- */ @@ -161,7 +302,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { /* ---- Column heading ---- */ .footer-group-heading { - font-size: 0.68rem; + font-size: var(--openms-text-min); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; @@ -180,7 +321,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { .footer-link-group ul li a { color: var(--openms-grey); text-decoration: none; - font-size: 0.9rem; + font-size: var(--openms-body-size); display: flex; align-items: center; min-height: 44px; @@ -235,7 +376,7 @@ body:has(.hero-modern) #nav.navbar.is-fresh { /* ---- Copyright ---- */ .footer-copyright { color: rgba(var(--openms-white-rgb), 0.45); - font-size: 0.85rem; + font-size: var(--openms-text-min); } /* ============================================= diff --git a/assets/css/tabs.css b/assets/css/tabs.css index c5db831..f69d395 100644 --- a/assets/css/tabs.css +++ b/assets/css/tabs.css @@ -16,8 +16,6 @@ .tabs-title { display: flex; justify-content: center; - letter-spacing: 1.5px; - font-size: 27px; margin: 30px 0; } @@ -32,7 +30,7 @@ .uk-nav > li > a { height: 35px; - font-size: 13px; + font-size: var(--openms-text-min); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; @@ -93,17 +91,17 @@ /* Scientific Domains */ td, th { - font-size: 0.8rem; + font-size: var(--openms-text-min); padding: 8px; } td > a { - font-size: 0.8rem; + font-size: var(--openms-text-min); } tr.highlight-th { border-top: 1px solid var(--openms-grey); - font-size: 0.8rem; + font-size: var(--openms-text-min); } td.bold-text { diff --git a/assets/css/typography.css b/assets/css/typography.css new file mode 100644 index 0000000..0d41178 --- /dev/null +++ b/assets/css/typography.css @@ -0,0 +1,164 @@ +/* OpenMS typography + Montserrat — primary headings (h1, h2, large titles) + Raleway — body copy & secondary headings (h3–h6) + JetBrains Mono thin — quotes, callouts & emphasis + Web minimum — 11pt +*/ + +html { + font-size: var(--openms-body-size); +} + +body { + font-family: var(--openms-font-body); + font-size: 1rem; + font-weight: var(--openms-body-weight); + line-height: 1.5; + color: var(--openms-dark); +} + +/* Normal text — 11–14pt */ +p, +li, +dd, +dt, +td, +th, +label, +input, +textarea, +select, +button, +.content-container, +.subtitle:not(.is-1):not(.is-2):not(.is-3), +.navbar-item, +.navbar-link, +.news-banner__message { + font-family: var(--openms-font-body); + font-weight: var(--openms-body-weight); +} + +.openms-text-sm { + font-size: var(--openms-text-min); +} + +.openms-text-lg { + font-size: var(--openms-body-size-lg); +} + +/* Presentations — 18pt */ +.openms-text-presentation, +.hero-modern__description, +.keyfeatures > .container > p { + font-family: var(--openms-font-body); + font-size: var(--openms-presentation-size); + font-weight: var(--openms-body-weight); + line-height: 1.55; +} + +/* Titles & large headings — Montserrat extra bold 26pt */ +h1, +.title.is-1, +.keyfeatures-title, +.casestudies-title, +.heroItemTitle, +.facts-title, +.shell-title, +.tabs-title, +.section-title, +.content-container h1 { + font-family: var(--openms-font-heading); + font-size: var(--openms-heading-xl-size); + font-weight: var(--openms-heading-xl-weight); + line-height: 1.25; + letter-spacing: normal; + text-transform: none; +} + +/* Chapters & headings — Montserrat bold 20pt */ +h2, +.title.is-2, +.footer-title, +.content-container h2, +.post-title h2 { + font-family: var(--openms-font-heading); + font-size: var(--openms-heading-lg-size); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.3; + letter-spacing: normal; + text-transform: none; +} + +/* Secondary headings — Raleway regular */ +h3, +.title.is-3, +.keyfeatures-box-title, +.casestudies-box-title, +.content-container h3, +.post-subtitle h3 { + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: var(--openms-secondary-heading-weight); + line-height: 1.35; + letter-spacing: normal; + text-transform: none; +} + +h4, +h5, +h6, +.title.is-4, +.title.is-5, +.title.is-6, +.content-container h4, +.content-container h5, +.content-container h6 { + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size); + font-weight: var(--openms-secondary-heading-weight); + line-height: 1.35; + letter-spacing: normal; + text-transform: none; +} + +/* Quotes, callouts & emphasis — JetBrains Mono thin */ +blockquote, +blockquote p, +q, +.notice, +.notice-content, +.notice-type, +em, +i, +cite, +mark { + font-family: var(--openms-font-mono); + font-weight: var(--openms-mono-weight); + font-style: normal; + font-size: max(var(--openms-text-min), 1em); + line-height: 1.55; +} + +.notice-type { + letter-spacing: 0.05em; + text-transform: uppercase; +} + +blockquote p { + font-size: inherit; +} + +/* Web minimum — nothing smaller than 11pt */ +.news-banner__label, +.news-banner__message, +.hero-modern__stat-label, +.hero-modern__btn, +.footer-link-group ul li a, +.footer-copyright, +.footer-column-label, +.tabs-section .tab, +.mailchimp-form, +.members-card, +.casestudies-box-text { + font-size: max(var(--openms-text-min), 1em); +} diff --git a/assets/js/hero-stats.js b/assets/js/hero-stats.js new file mode 100644 index 0000000..b5a12e5 --- /dev/null +++ b/assets/js/hero-stats.js @@ -0,0 +1,69 @@ +(function () { + var counters = document.querySelectorAll(".hero-modern__stat-number[data-count-value]"); + if (!counters.length) return; + + var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + + function formatValue(value, decimals) { + return decimals > 0 ? value.toFixed(decimals) : String(Math.round(value)); + } + + function setFinal(counter) { + var target = parseFloat(counter.getAttribute("data-count-value")); + var suffix = counter.getAttribute("data-count-suffix") || ""; + var decimals = parseInt(counter.getAttribute("data-count-decimals") || "0", 10); + counter.textContent = formatValue(target, decimals) + suffix; + } + + function animateCounter(counter) { + if (counter.dataset.countAnimated === "true") return; + counter.dataset.countAnimated = "true"; + + var target = parseFloat(counter.getAttribute("data-count-value")); + var suffix = counter.getAttribute("data-count-suffix") || ""; + var decimals = parseInt(counter.getAttribute("data-count-decimals") || "0", 10); + var duration = 2000; + var start = performance.now(); + + function tick(now) { + var progress = Math.min((now - start) / duration, 1); + var eased = 1 - Math.pow(1 - progress, 3); + var current = target * eased; + counter.textContent = formatValue(current, decimals) + suffix; + + if (progress < 1) { + requestAnimationFrame(tick); + } else { + counter.textContent = formatValue(target, decimals) + suffix; + } + } + + requestAnimationFrame(tick); + } + + if (prefersReducedMotion) { + counters.forEach(setFinal); + return; + } + + if (!("IntersectionObserver" in window)) { + counters.forEach(animateCounter); + return; + } + + var observer = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + animateCounter(entry.target); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.3 } + ); + + counters.forEach(function (counter) { + observer.observe(counter); + }); +})(); diff --git a/assets/js/navbar.js b/assets/js/navbar.js new file mode 100644 index 0000000..cbadf55 --- /dev/null +++ b/assets/js/navbar.js @@ -0,0 +1,70 @@ +/** + * Mobile navbar — dropdown toggles & close menu on navigate + */ +(function () { + var MOBILE_MAX = 1023; + + function isMobileNav() { + return window.matchMedia("(max-width: " + MOBILE_MAX + "px)").matches; + } + + function closeMenus(nav) { + if (!nav) return; + nav.querySelectorAll(".navbar-item.has-dropdown.is-active").forEach(function (el) { + el.classList.remove("is-active"); + }); + } + + function setupNav(nav) { + if (!nav) return; + + var menu = nav.querySelector(".navbar-menu"); + var burger = nav.querySelector(".navbar-burger"); + + nav.querySelectorAll(".navbar-item.has-dropdown > .navbar-link").forEach(function (link) { + link.addEventListener("click", function (e) { + if (!isMobileNav()) return; + e.preventDefault(); + e.stopPropagation(); + var parent = link.closest(".navbar-item.has-dropdown"); + var open = parent.classList.contains("is-active"); + closeMenus(nav); + if (!open) parent.classList.add("is-active"); + }); + }); + + if (menu) { + menu.querySelectorAll("a.navbar-item[href], a.navbar-cta-item").forEach(function (anchor) { + anchor.addEventListener("click", function () { + if (!isMobileNav()) return; + menu.classList.remove("is-active"); + if (burger) burger.classList.remove("is-active"); + closeMenus(nav); + }); + }); + } + } + + function updateHeaderHeight() { + var header = document.querySelector(".site-header"); + if (!header) return; + document.documentElement.style.setProperty( + "--openms-header-height", + header.offsetHeight + "px" + ); + } + + document.addEventListener("DOMContentLoaded", function () { + setupNav(document.getElementById("nav")); + setupNav(document.getElementById("navbar-clone")); + updateHeaderHeight(); + + window.addEventListener("resize", function () { + updateHeaderHeight(); + if (!isMobileNav()) { + closeMenus(document.getElementById("nav")); + closeMenus(document.getElementById("navbar-clone")); + } + }); + }); +})(); diff --git a/config.yaml b/config.yaml index c222381..1b0d14f 100644 --- a/config.yaml +++ b/config.yaml @@ -16,6 +16,23 @@ markup: disableLanguages: [] params: + font: + name: Montserrat + sizes: + - 400 + - 600 + - 700 + - 800 + bodyFont: + name: Raleway + sizes: + - 400 + - 500 + - 600 + monoFont: + name: JetBrains Mono + sizes: + - 100 images: - /images/logo.svg navColor: blue @@ -36,9 +53,9 @@ languages: newsBanner: enabled: true label: News - text: OpenMS 3.5.0 is now available — ARM64 Linux support and more. - link: /news/release3.5/ - linkText: Read more + text: Workshop at University of Helsinki on April 30th 2026. + link: /news/ + # linkText: Learn more navbarlogo: image: OpenMS_transparent_blackFont.png link: / @@ -53,14 +70,16 @@ languages: Join 1000+ researchers worldwide. buttontext: Get Started Now buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html - secondaryButtonText: Watch Demo - secondaryButtonLink: https://openms.readthedocs.io/en/latest/getting-started/walkthrough.html stats: - - number: "10+" + - value: 10 + suffix: "+" label: Years Active - - number: "1000+" + - value: 1000 + suffix: "+" label: Researchers - - number: "3.5.0" + - value: 3.5 + suffix: ".0" + decimals: 1 label: Latest Version heroGroup: @@ -234,6 +253,12 @@ languages: url: /applications - title: Publications url: /publications - - title: Help Request - url: /help-request + - title: Sponsor + shortTitle: Spon + url: /about#sponsors + button: true + buttonVariant: sponsor + - title: Donate + shortTitle: Give + url: /about#donate button: true diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 71ecfb0..1e2ee50 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -39,8 +39,10 @@ {{ end }} {{ block "navbar" . }} - {{ partial "news-banner.html" . }} - {{ partial "navbar.html" . }} +
+ {{ partial "news-banner.html" . }} + {{ partial "navbar.html" . }} +
{{ partial "navbar-clone.html" . }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html index 01136f5..0dce7c8 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -10,11 +10,7 @@ {{ if .Content }} {{ partial "single/content.html" . }} {{ end }} - - {{ if .Site.GetPage "/news" }} - {{ partial "news.html" . }} - {{ end }} - + {{ if .Site.Params.keyfeatures }} {{ partial "keyfeatures.html" . }} {{ end }} diff --git a/layouts/partials/css.html b/layouts/partials/css.html index 70295f0..dc0d2d4 100644 --- a/layouts/partials/css.html +++ b/layouts/partials/css.html @@ -5,14 +5,19 @@ {{- $sass := (slice "theme-css/fresh/core.scss") -}} {{- $cssOpts := cond ($inServerMode) (dict "enableSourceMap" true) (dict "outputStyle" "compressed") -}} - - - + +{{- $headingFont := .Site.Params.font.name | default "Montserrat" -}} +{{- $headingWeights := .Site.Params.font.sizes | default (slice 400 600 700 800) -}} +{{- $bodyFont := .Site.Params.bodyFont.name | default "Raleway" -}} +{{- $bodyWeights := .Site.Params.bodyFont.sizes | default (slice 400 500 600) -}} +{{- $monoFont := .Site.Params.monoFont.name | default "JetBrains Mono" -}} +{{- $monoWeights := .Site.Params.monoFont.sizes | default (slice 100) -}} +{{- $fontUrl := printf "https://fonts.googleapis.com/css2?family=%s:wght@%s&family=%s:wght@%s&family=%s:wght@%s&display=swap" (replace $headingFont " " "+") (delimit $headingWeights ";") (replace $bodyFont " " "+") (delimit $bodyWeights ";") (replace $monoFont " " "+") (delimit $monoWeights ";") -}} - + + + diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index 09d9114..48ea26c 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -30,7 +30,12 @@

{{- range . }}
-
{{ .number }}
+
0{{ .suffix | default "" }}
{{ .label }}
{{- end }} diff --git a/layouts/partials/navbar-clone.html b/layouts/partials/navbar-clone.html index 7ab73e9..5ccfbf8 100644 --- a/layouts/partials/navbar-clone.html +++ b/layouts/partials/navbar-clone.html @@ -13,11 +13,21 @@ {{- end }} - +
+
+ {{- range $navbar }} + {{- if .button }} + {{ partial "navbar-cta.html" . }} + {{- end }} + {{- end }} + + +
+
{{- else if .button }} - - - + {{ partial "navbar-cta.html" . }} {{- else }} {{ .title }} diff --git a/layouts/partials/navbar-cta.html b/layouts/partials/navbar-cta.html new file mode 100644 index 0000000..f59cc53 --- /dev/null +++ b/layouts/partials/navbar-cta.html @@ -0,0 +1,8 @@ +{{- $item := . }} + + + diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index e811dc5..e0dbc66 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -13,11 +13,21 @@ {{- end }} - +
+
+ {{- range $navbar }} + {{- if .button }} + {{ partial "navbar-cta.html" . }} + {{- end }} + {{- end }} + + +
+
{{- else if .button }} - - - + {{ partial "navbar-cta.html" . }} {{- else }} {{ .title }} From bda962608f7ed0fc33ed93985e476f9544178c7d Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 13:45:16 +0100 Subject: [PATCH 05/20] organized the navbar with the new links requested --- assets/css/hero.css | 369 ++++++++++++++++++++------ assets/css/navbar-responsive.css | 139 +++++++--- assets/css/news-banner.css | 32 ++- assets/css/styles_override.css | 129 ++++++++- assets/css/typography.css | 4 +- assets/icons/linkedin.svg | 1 + assets/js/hero-stats.js | 7 +- assets/js/navbar.js | 55 +++- config.yaml | 100 ++++--- content/en/about.md | 4 +- layouts/partials/footer.html | 18 +- layouts/partials/hero-stats.html | 21 ++ layouts/partials/hero.html | 74 +++--- layouts/partials/navbar-clone.html | 13 +- layouts/partials/navbar-social.html | 14 + layouts/partials/navbar-sublinks.html | 10 + layouts/partials/navbar.html | 13 +- 17 files changed, 767 insertions(+), 236 deletions(-) create mode 100644 assets/icons/linkedin.svg create mode 100644 layouts/partials/hero-stats.html create mode 100644 layouts/partials/navbar-social.html create mode 100644 layouts/partials/navbar-sublinks.html diff --git a/assets/css/hero.css b/assets/css/hero.css index 9e6b3a4..27e2645 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -1,8 +1,40 @@ -/* Modern hero — OpenMS brand palette */ +/* Modern hero — OpenMS brand palette & UX */ :root { /* News banner + navbar (approx.) — used to fit hero in one screen */ --openms-hero-chrome: 8.5rem; + --openms-hero-focus-ring: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow); +} + +.hero-modern-wrap { + display: block; + position: relative; +} + +@media (min-width: 769px) { + .hero-modern-wrap > .hero-modern__stats { + display: flex; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: center; + position: absolute; + bottom: clamp(1rem, 2vh, 2.5rem); + left: 50%; + transform: translateX(-50%); + width: min(75rem, 100%); + max-width: min(75rem, calc(100% - 3rem)); + padding-inline: clamp(1.25rem, 4vw, 2.5rem); + box-sizing: border-box; + background: transparent; + border: none; + pointer-events: none; + z-index: 3; + } + + .hero-modern-wrap > .hero-modern__stats .hero-modern__stat, + .hero-modern-wrap > .hero-modern__stats .hero-modern__stat-sep { + pointer-events: auto; + } } .hero-modern { @@ -10,9 +42,8 @@ overflow: hidden; color: var(--openms-white); background: var(--openms-navy); - padding: clamp(2rem, 4vh, 5rem) 2.5rem; + padding: clamp(2rem, 4vh, 5rem) clamp(1.25rem, 4vw, 2.5rem); min-height: min(32rem, calc(100svh - var(--openms-hero-chrome))); - max-height: calc(100svh - var(--openms-hero-chrome)); box-sizing: border-box; display: flex; align-items: center; @@ -55,22 +86,44 @@ position: relative; z-index: 2; display: grid; - grid-template-columns: 1fr 1fr; - gap: 3.75rem; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + grid-template-areas: + "content visual" + "actions actions"; + column-gap: 3.75rem; + row-gap: clamp(1rem, 2vh, 1.75rem); align-items: center; max-width: 75rem; width: 100%; margin: 0 auto; } +.hero-modern__content { + grid-area: content; + align-self: end; + max-width: 40rem; +} + +.hero-modern__actions { + grid-area: actions; + align-self: start; + width: 100%; + max-width: 100%; +} + +.hero-modern__visual { + grid-area: visual; +} + .hero-modern__title { font-family: var(--openms-font-heading); font-size: clamp(1.875rem, 4.5vw, 3.125rem); font-weight: var(--openms-heading-xl-weight); line-height: 1.15; letter-spacing: -0.02em; - margin-bottom: 1.5rem; + margin: 0 0 1rem; color: var(--openms-white); + text-wrap: balance; } .hero-modern__gradient-text { @@ -90,27 +143,56 @@ } .hero-modern__description { - opacity: 0.95; - margin-bottom: clamp(1rem, 2vh, 2rem); - max-width: 31.25rem; + margin: 0 0 clamp(1rem, 2vh, 1.5rem); + max-width: 38ch; + color: rgba(var(--openms-white-rgb), 0.92); + 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: clamp(1rem, 2vh, 2.5rem); + margin-bottom: 0; + grid-column: 1; } .hero-modern__btn { - display: inline-block; - padding: 0.875rem 2rem; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.75rem 1.75rem; font-size: var(--openms-body-size-lg); font-weight: 600; border-radius: 0.5rem; text-decoration: none; - transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, - border-color 0.3s ease; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, + border-color 0.2s ease, color 0.2s ease; +} + +.hero-modern__btn:focus { + outline: none; +} + +.hero-modern__btn:focus-visible { + outline: none; + box-shadow: var(--openms-hero-focus-ring); +} + +.hero-modern__btn:active { + transform: translateY(0); } .hero-modern__btn--primary { @@ -143,31 +225,55 @@ .hero-modern__stats { display: flex; - flex-wrap: wrap; - gap: 2.5rem; - padding-top: clamp(1rem, 2vh, 2.5rem); - border-top: 1px solid rgba(var(--openms-white-rgb), 0.1); + 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.5rem; + gap: 0.35rem; + margin: 0; + align-items: flex-end; + text-align: right; } .hero-modern__stat-number { - font-size: 1.75rem; + margin: 0; + font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 800; font-variant-numeric: tabular-nums; - min-width: 7ch; + line-height: 1.1; + min-width: 5ch; color: var(--openms-yellow); } .hero-modern__stat-label { + margin: 0; font-size: var(--openms-text-min); - opacity: 0.85; + 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 { @@ -175,6 +281,7 @@ align-items: center; justify-content: center; min-height: 18rem; + align-self: center; } .hero-modern__waveform { @@ -218,15 +325,65 @@ } } -@media (max-width: 1024px) { +/* 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.25rem, 2.5vh, 2.5rem) 1.5rem; - min-height: calc(100dvh - var(--openms-hero-chrome)); - max-height: calc(100dvh - var(--openms-hero-chrome)); + 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 { + column-gap: 1.5rem; + } + + .hero-modern__stats { + gap: clamp(0.5rem, 1.5vw, 1.25rem); + } +} + +/* 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 { @@ -243,114 +400,129 @@ .hero-modern__container { grid-template-columns: 1fr; - gap: clamp(0.75rem, 2vh, 1.5rem); - max-height: 100%; - overflow-y: auto; - overscroll-behavior: contain; + 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__description { - margin-left: auto; - margin-right: auto; + .hero-modern__actions { + grid-area: actions; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .hero-modern__buttons { - justify-content: center; - } - - .hero-modern__visual { - min-height: 0; - max-height: clamp(5rem, 14vh, 8rem); - } - - .hero-modern__waveform { - min-height: 0; - max-height: 100%; - height: clamp(5rem, 14vh, 8rem); + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + margin-bottom: 0; } - .hero-modern__stats { - justify-content: center; - align-items: flex-start; + .hero-modern-wrap > .hero-modern__stats { + position: static; + transform: none; + left: auto; width: 100%; + max-width: none; + padding: 1rem 1.25rem; + margin: 0; + background: var(--openms-white); + border-bottom: 1px solid var(--openms-grey); + box-sizing: border-box; + pointer-events: auto; + display: flex; + flex-wrap: nowrap; + justify-content: space-evenly; + align-items: center; + gap: clamp(0.5rem, 2vw, 1rem); } .hero-modern__stat { align-items: center; text-align: center; + flex: 1 1 0; + min-width: 0; + max-width: 7rem; } .hero-modern__stat-number { + color: var(--openms-dark); + font-weight: 800; min-width: auto; + font-size: 1.375rem; } -} -@media (max-width: 768px) { - :root { - --openms-hero-chrome: 10.5rem; + .hero-modern__stat-label { + color: var(--openms-dark); } - .hero-modern { - padding: clamp(0.75rem, 1.5vh, 1.5rem) 1.25rem; + .hero-modern__stat-sep { + color: rgba(var(--openms-dark-rgb), 0.25); } - .hero-modern__container { - gap: clamp(0.5rem, 1.5vh, 1rem); + .hero-modern__visual { + grid-area: visual; + min-height: 0; + max-height: clamp(5rem, 14vh, 8rem); + } + + .hero-modern__description { + margin-inline: auto; + max-width: 34ch; + } + + .hero-modern__waveform { + min-height: 0; + max-height: 100%; + height: clamp(5rem, 14vh, 8rem); } .hero-modern__title { - margin-bottom: 0.5rem; - font-size: clamp(1.375rem, 5.5vw, 1.75rem); - line-height: 1.2; + margin-bottom: 0.75rem; + font-size: clamp(1.875rem, 7.5vw, 2.5rem); + line-height: 1.18; } .hero-modern__gradient-text { - font-size: 1.12em; + font-size: 1.1em; } .hero-modern__description { max-width: none; margin-bottom: 0.75rem; - font-size: var(--openms-body-size-lg); - line-height: 1.45; - } - - .hero-modern__buttons { - flex-direction: column; - align-items: stretch; - margin-bottom: 0.75rem; + font-size: var(--openms-body-size); + line-height: 1.4; } .hero-modern__btn { - text-align: center; width: 100%; box-sizing: border-box; + min-height: 2.75rem; padding: 0.75rem 1.25rem; } .hero-modern__stats { - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-evenly; - gap: 0.5rem; - padding-top: 0.75rem; + padding: 0.875rem 1rem; } .hero-modern__stat { - flex: 1 1 0; - min-width: 0; max-width: 6.5rem; } - .hero-modern__stat-number { - font-size: 1.375rem; - } - .hero-modern__stat-label { font-size: var(--openms-text-min); letter-spacing: 0.04em; @@ -394,11 +566,17 @@ } .hero-modern__title { - font-size: 1.25rem; + font-size: clamp(1.625rem, 6.5vw, 1.875rem); + } + + .hero-modern__description { + font-size: var(--openms-text-min); + line-height: 1.35; } .hero-modern__stats { gap: 0.5rem; + padding: 0.75rem 1rem; } .hero-modern__stat { @@ -408,10 +586,6 @@ .hero-modern__stat-number { font-size: 1.2rem; } - - .hero-modern__stat-label { - font-size: var(--openms-text-min); - } } @media (prefers-reduced-motion: reduce) { @@ -419,4 +593,29 @@ 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, + .hero-modern__stat-label { + color: var(--openms-white); + } + + .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/navbar-responsive.css b/assets/css/navbar-responsive.css index 06d991f..580e93e 100644 --- a/assets/css/navbar-responsive.css +++ b/assets/css/navbar-responsive.css @@ -89,9 +89,10 @@ display: flex; flex-wrap: nowrap; align-items: center; - min-height: 3.75rem; + min-height: 4.25rem; padding-left: 0.5rem; padding-right: 0.5rem; + overflow: visible; } .navbar-desktop-cta { @@ -104,7 +105,7 @@ align-items: center; justify-content: space-between; flex: 1; - min-height: 3.75rem; + min-height: 4.25rem; min-width: 0; padding-left: 0; gap: 0.25rem; @@ -114,14 +115,14 @@ #navbar-clone.navbar.is-fresh .navbar-brand-link { flex: 0 1 auto; min-width: 0; - max-width: 42%; + max-width: 50%; padding: 0; } .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { - max-height: 44px !important; - height: 44px !important; + max-height: 56px !important; + height: 56px !important; max-width: 100%; width: auto; object-fit: contain; @@ -217,34 +218,49 @@ .site-header #nav.navbar.is-fresh .navbar-burger span, #navbar-clone.navbar.is-fresh .navbar-burger span { - width: 1.35rem; - left: calc(50% - 0.675rem); + height: 2px; + width: 1.25rem; + left: calc(50% - 0.625rem); } /* Overlay menu — does not expand header height */ .site-header #nav.navbar.is-fresh .navbar-menu.is-static, #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { - display: none; + display: none !important; flex: none; - width: 100%; + width: 100vw; + max-width: 100vw; position: fixed; left: 0; right: 0; top: var(--openms-header-height, 9rem); bottom: 0; - z-index: 199; + height: auto !important; + min-height: calc(100dvh - var(--openms-header-height, 9rem)); + z-index: 250; margin: 0; + padding: 0; background: var(--openms-white); box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); border-top: 1px solid var(--openms-grey); max-height: none; + overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; + pointer-events: auto; } .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active, #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active { - display: block; + display: flex !important; + flex-direction: column; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static.is-active .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed.is-active .navbar-end { + display: flex; + flex: 1 1 auto; + width: 100%; } .site-header #nav.navbar.is-fresh .navbar-end, @@ -283,10 +299,10 @@ margin-left: 0.35rem; } - .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, - #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown { position: static; - display: none; + display: none !important; width: 100%; min-width: 0; margin-top: 0; @@ -295,57 +311,118 @@ background: rgba(var(--openms-blue-rgb), 0.06); } - .navbar.is-fresh .navbar-item.has-dropdown.is-active .navbar-dropdown, - #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active .navbar-dropdown { - display: block; + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown { + display: block !important; } - .navbar.is-fresh .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, - #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown { - display: none; + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown { + display: none !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown { + display: block !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + cursor: pointer; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-heading { + width: 100%; + text-align: center; + border-top-color: var(--openms-grey); + color: var(--openms-blue); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested { + font-size: var(--openms-body-size); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social { + display: flex; + justify-content: center; + align-items: center; + gap: 1.25rem; + width: 100%; + margin-top: auto; + padding: 1.25rem 1rem 1.5rem; + border-top: 1px solid var(--openms-grey); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a { + display: inline-flex; + align-items: center; + justify-content: center; + width: auto; + min-width: 44px; + min-height: 44px; + padding: 0; + color: var(--openms-blue); + transition: color 0.2s ease; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover { + color: var(--openms-orange); } - .navbar.is-fresh .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown, - #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active.is-hoverable:hover .navbar-dropdown { - display: block; + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon { + width: 1.5rem; + height: 1.5rem; + fill: currentColor; } } +@media (min-width: 1024px) { + .navbar-mobile-social { + display: none !important; + } +} + /* Small phones */ @media (max-width: 768px) { .site-header #nav.navbar.is-fresh .container, #navbar-clone.navbar.is-fresh .container { - min-height: 3.5rem; + min-height: 4rem; } .site-header #nav.navbar.is-fresh .navbar-brand, #navbar-clone.navbar.is-fresh .navbar-brand { - min-height: 3.5rem; + min-height: 4rem; } .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { - max-height: 38px !important; - height: 38px !important; + max-height: 52px !important; + height: 52px !important; } .site-header #nav.navbar.is-fresh .navbar-brand-link, #navbar-clone.navbar.is-fresh .navbar-brand-link { - max-width: 38%; + max-width: 46%; } } @media (max-width: 380px) { .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { - max-height: 32px !important; - height: 32px !important; + max-height: 48px !important; + height: 48px !important; } .site-header #nav.navbar.is-fresh .navbar-brand-link, #navbar-clone.navbar.is-fresh .navbar-brand-link { - max-width: 34%; + max-width: 42%; } .navbar-mobile-ctas-end { diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css index ec63d59..895d507 100644 --- a/assets/css/news-banner.css +++ b/assets/css/news-banner.css @@ -12,25 +12,26 @@ display: flex; align-items: center; justify-content: center; - min-height: 2.75rem; - padding: 0.625rem 2.5rem; + min-height: 1.25rem; + padding: 0.15rem 0.55rem; text-align: center; } .news-banner__message { margin: 0; - font-size: var(--openms-body-size); - line-height: 1.5; + font-size: 0.75rem; + line-height: 1.25; flex: 1; } /* Matches hero primary button */ .news-banner__label { display: inline-block; - margin-right: 0.625rem; + margin-right: 0.5rem; padding: 0.125rem 0.5rem; - font-size: var(--openms-text-min); - font-weight: 700; + font-size: inherit; + font-weight: 600; + line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0.25rem; @@ -53,11 +54,13 @@ .news-banner__text { font-weight: 500; + color: var(--openms-white); } /* Matches hero stat numbers */ .news-banner__cta { - margin-left: 0.5rem; + margin-left: 0.3rem; + font-size: 0.5rem; font-weight: 600; color: var(--openms-yellow); white-space: nowrap; @@ -70,7 +73,8 @@ @media (max-width: 768px) { .news-banner__inner { - padding: 0.75rem 1rem; + min-height: 1.125rem; + padding: 0.125rem 0.4rem; text-align: center; justify-content: center; } @@ -78,13 +82,19 @@ .news-banner__message { flex: none; width: 100%; - font-size: var(--openms-body-size); + font-size: 0.7375rem; + line-height: 1.2; text-align: center; } .news-banner__label { display: inline-block; - margin: 0 0 0.375rem; + margin: 0 0.35rem 0 0; + padding: 0.1rem 0.45rem; + } + + .news-banner__cta { + font-size: 0.4375rem; } .news-banner__link { diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index 618034a..dcf8cda 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -138,30 +138,36 @@ .navbar.is-fresh .navbar-burger span, #navbar-clone.navbar.is-fresh .navbar-burger span { background-color: var(--openms-dark); - height: 3px; - width: 1.75rem; - left: calc(50% - 0.875rem); + 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% - 8px); + 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% - 1.5px); + 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% + 5px); + top: calc(50% + 4px); } .navbar.is-fresh .navbar-burger:hover, -#navbar-clone.navbar.is-fresh .navbar-burger:hover { - background-color: rgba(var(--openms-yellow-rgb), 0.15); +.navbar.is-fresh .navbar-burger:focus, +.navbar.is-fresh .navbar-burger:focus-visible, +.navbar.is-fresh .navbar-burger:active, +#navbar-clone.navbar.is-fresh .navbar-burger:hover, +#navbar-clone.navbar.is-fresh .navbar-burger:focus, +#navbar-clone.navbar.is-fresh .navbar-burger:focus-visible, +#navbar-clone.navbar.is-fresh .navbar-burger:active { + background-color: transparent; } .navbar.is-fresh { @@ -173,6 +179,41 @@ min-height: 5.5rem; } +/* Top-level dropdown labels (e.g. Partner with OpenMS) */ +.navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link { + font-weight: 700; +} + +/* Navbar dropdown section headings & nested links */ +.navbar.is-fresh .navbar-dropdown-heading, +#navbar-clone.navbar.is-fresh .navbar-dropdown-heading { + display: block; + padding: 0.5rem 1rem 0.35rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + border-top: 1px solid rgba(var(--openms-blue-rgb), 0.12); + margin-top: 0.25rem; + pointer-events: none; + user-select: none; +} + +.navbar.is-fresh .navbar-dropdown-heading:first-child, +#navbar-clone.navbar.is-fresh .navbar-dropdown-heading:first-child { + border-top: none; + margin-top: 0; + padding-top: 0.35rem; +} + +.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested { + padding-left: 1.5rem; + font-size: calc(var(--openms-body-size) * 0.95); +} + .navbar.is-fresh .navbar-item:has(.signup-button) { flex-shrink: 0; padding-left: 0.35rem; @@ -243,12 +284,66 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { /* ---- Brand block ---- */ .footer-brand { - flex: 0 0 200px; + flex: 0 0 300px; +} + +.footer-brand-top { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.25rem; + margin-bottom: 1.5rem; +} + +.footer-logo { + display: inline-flex; + align-items: center; + min-height: 44px; +} + +.footer-logo img { + display: block; + max-height: 88px; + max-width: min(100%, 280px); + width: auto; + height: auto; + object-fit: contain; + filter: brightness(0) invert(1); +} + +.footer-logo:focus-visible { + outline: 2px solid rgba(var(--openms-white-rgb), 0.45); + outline-offset: 4px; + border-radius: 4px; +} + +.footer-donate-btn.signup-button { + display: inline-block !important; + padding: 0.55rem 1.35rem !important; + font-size: var(--openms-body-size); + font-weight: 600; + text-decoration: none; + white-space: nowrap; +} + +.footer-redesign .footer-donate-btn.signup-button.secondary-btn { + background-color: var(--openms-orange) !important; + color: var(--openms-white) !important; + border: 2px solid var(--openms-orange) !important; + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-orange-rgb), 0.3); +} + +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible { + background-color: var(--openms-yellow) !important; + color: var(--openms-dark) !important; + border-color: var(--openms-yellow) !important; + box-shadow: 0 0.35rem 1rem rgba(var(--openms-yellow-rgb), 0.35); } .footer-title { color: var(--openms-white); - margin-bottom: 1.5rem; + margin-bottom: 0; } /* ---- Partner logo row ---- */ @@ -394,6 +489,20 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { width: 100%; } + .footer-brand-top { + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + width: 100%; + gap: 1rem; + } + + .footer-logo img { + max-height: 72px; + max-width: min(65vw, 240px); + } + .footer-partners { flex-direction: row; flex-wrap: wrap; diff --git a/assets/css/typography.css b/assets/css/typography.css index 0d41178..bd5a5dd 100644 --- a/assets/css/typography.css +++ b/assets/css/typography.css @@ -148,9 +148,7 @@ blockquote p { font-size: inherit; } -/* Web minimum — nothing smaller than 11pt */ -.news-banner__label, -.news-banner__message, +/* Web minimum — nothing smaller than 11pt (news banner uses compact sizes in news-banner.css) */ .hero-modern__stat-label, .hero-modern__btn, .footer-link-group ul li a, diff --git a/assets/icons/linkedin.svg b/assets/icons/linkedin.svg new file mode 100644 index 0000000..f820eaf --- /dev/null +++ b/assets/icons/linkedin.svg @@ -0,0 +1 @@ + diff --git a/assets/js/hero-stats.js b/assets/js/hero-stats.js index b5a12e5..1eb84d4 100644 --- a/assets/js/hero-stats.js +++ b/assets/js/hero-stats.js @@ -1,5 +1,10 @@ (function () { - var counters = document.querySelectorAll(".hero-modern__stat-number[data-count-value]"); + 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; diff --git a/assets/js/navbar.js b/assets/js/navbar.js index cbadf55..8f3c394 100644 --- a/assets/js/navbar.js +++ b/assets/js/navbar.js @@ -1,5 +1,5 @@ /** - * Mobile navbar — dropdown toggles & close menu on navigate + * Mobile navbar — burger menu, dropdown toggles & close on navigate */ (function () { var MOBILE_MAX = 1023; @@ -8,28 +8,67 @@ return window.matchMedia("(max-width: " + MOBILE_MAX + "px)").matches; } - function closeMenus(nav) { + function closeDropdowns(nav) { if (!nav) return; nav.querySelectorAll(".navbar-item.has-dropdown.is-active").forEach(function (el) { el.classList.remove("is-active"); + var link = el.querySelector(".navbar-link"); + if (link) link.setAttribute("aria-expanded", "false"); }); } + function closeMobileMenu(nav) { + if (!nav) return; + var menu = nav.querySelector(".navbar-menu"); + var burger = nav.querySelector(".navbar-burger"); + if (menu) menu.classList.remove("is-active"); + if (burger) { + burger.classList.remove("is-active"); + burger.setAttribute("aria-expanded", "false"); + } + closeDropdowns(nav); + } + function setupNav(nav) { if (!nav) return; var menu = nav.querySelector(".navbar-menu"); var burger = nav.querySelector(".navbar-burger"); + if (burger && menu) { + burger.addEventListener("click", function (e) { + if (!isMobileNav()) return; + e.preventDefault(); + e.stopPropagation(); + /* Theme fresh.js also toggles the burger — prevent double-toggle */ + e.stopImmediatePropagation(); + + var willOpen = !menu.classList.contains("is-active"); + menu.classList.toggle("is-active", willOpen); + burger.classList.toggle("is-active", willOpen); + burger.setAttribute("aria-expanded", willOpen ? "true" : "false"); + + if (!willOpen) { + closeDropdowns(nav); + } else { + updateHeaderHeight(); + } + }); + } + nav.querySelectorAll(".navbar-item.has-dropdown > .navbar-link").forEach(function (link) { link.addEventListener("click", function (e) { if (!isMobileNav()) return; e.preventDefault(); e.stopPropagation(); + var parent = link.closest(".navbar-item.has-dropdown"); var open = parent.classList.contains("is-active"); - closeMenus(nav); - if (!open) parent.classList.add("is-active"); + closeDropdowns(nav); + if (!open) { + parent.classList.add("is-active"); + link.setAttribute("aria-expanded", "true"); + } }); }); @@ -37,9 +76,7 @@ menu.querySelectorAll("a.navbar-item[href], a.navbar-cta-item").forEach(function (anchor) { anchor.addEventListener("click", function () { if (!isMobileNav()) return; - menu.classList.remove("is-active"); - if (burger) burger.classList.remove("is-active"); - closeMenus(nav); + closeMobileMenu(nav); }); }); } @@ -62,8 +99,8 @@ window.addEventListener("resize", function () { updateHeaderHeight(); if (!isMobileNav()) { - closeMenus(document.getElementById("nav")); - closeMenus(document.getElementById("navbar-clone")); + closeMobileMenu(document.getElementById("nav")); + closeMobileMenu(document.getElementById("navbar-clone")); } }); }); diff --git a/config.yaml b/config.yaml index 1b0d14f..7052945 100644 --- a/config.yaml +++ b/config.yaml @@ -173,10 +173,20 @@ languages: sponsorLogo2: /images/logos/elixir-logo-white.png sponsorLogo3: /images/logos/libis-logo-white.svg logo: + image: OpenMS_transparent_blackFont.png + link: / + altText: OpenMS + donate: + text: Donate + link: /about#donate socialmediatitle: "" socialmedia: - - link: https://discord.gg/v9tv5BxPch + - link: https://discord.com/invite/v9tv5BxPch icon: discord + - link: https://www.linkedin.com/company/openms-org + icon: linkedin + - link: https://github.com/openMS + icon: github quicklinks: column1: heading: RESOURCES @@ -207,13 +217,10 @@ languages: link: /exec_committee - text: Governance link: /governance - - text: Jobs - link: /jobs + column4: heading: LEGAL links: - - text: Help - link: /help - text: Terms of use link: /terms - text: Privacy @@ -224,40 +231,71 @@ languages: link: /impressum navbar: - - title: News - url: /news - - title: Install - url: https://openms.readthedocs.io/en/latest/about/installation.html - - title: Documentation - url: https://openms.readthedocs.io/en/latest/index.html + - title: Infrastructure + sublinks: + - title: OpenMS-lib + url: https://openms.readthedocs.io/en/latest/develop-with-openms/openms-cpp-core-library.html + is_external: true + - title: pyOpenMS + url: https://pyopenms.readthedocs.io/en/latest/ + is_external: true + - title: WebApp-template + url: https://github.com/OpenMS/streamlit-template + is_external: true + - title: Projects + url: /applications + sublinks: + - title: Featured Projects + url: /applications + - title: Affiliated Projects + url: /applications + - title: Archived Projects + url: /applications + - title: Learn + sublinks: + - title: Liquid Chromatography + url: https://openms.readthedocs.io/en/latest/about/learning/lc-chromatography.html + is_external: true + - title: Mass Spectrometry + url: https://openms.readthedocs.io/en/latest/about/learning/mass-spectrometry.html + is_external: true + - title: Identification and Quantification + url: https://openms.readthedocs.io/en/latest/about/learning/id-and-quant.html + is_external: true + - title: Background + url: https://pyopenms.readthedocs.io/en/release-3.5.0/user_guide/background.html + is_external: true + - title: Glossary + url: https://openms.readthedocs.io/en/latest/manual/glossary.html + is_external: true - title: Community sublinks: - - title: Communication - url: /communication - - title: Contribute + - title: News + url: /news + - title: Getting Involved url: /contribute - - title: Awards - url: /news/fellowship2024 - url: /community - - title: About Us + - title: Annual Developer Meeting + url: /news/ + - title: About sublinks: + - title: About + url: /about - title: Governance url: /governance - - title: Contributors - url: /contributors - url: /about - - title: Use Cases - url: /publications - sublinks: - - title: Applications - url: /applications - title: Publications url: /publications - - title: Sponsor - shortTitle: Spon - url: /about#sponsors - button: true - buttonVariant: sponsor + - title: Contact + url: /communication + - title: Partner with OpenMS + url: /about#institutional-partners + is_emphasized: true + sublinks: + - title: Research Partnerships + url: /about#institutional-partners + - title: Scientific and Technical Support + url: /help + - title: Sponsor Us + url: /about#sponsors - title: Donate shortTitle: Give url: /about#donate diff --git a/content/en/about.md b/content/en/about.md index 14040b8..88c6ba2 100644 --- a/content/en/about.md +++ b/content/en/about.md @@ -7,13 +7,13 @@ OpenMS Inc. is the corporate entity and fiscal home of the OpenMS project. As a The board of directors of OpenMS Inc. consists of Dr. Samuel Wein as chief executive officer, Prof. Dr. Oliver Kohlbacher as chief scientific officer, and Dr. Timo Sachsenberg as chief technology officer. -## Sponsors +## Sponsors {#sponsors} OpenMS receives direct funding from the following sources: {{< sponsors >}} -## Institutional Partners +## Institutional Partners {#institutional-partners} Institutional Partners are organizations that support the project by employing people that contribute to OpenMS as part of their job. Current Institutional Partners include: diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d219add..d303e99 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -6,13 +6,29 @@ {{- $sponsorLogo3 := index $footer "sponsorLogo3" }} {{- $quickLinks := index $footer "quicklinks" }} {{- $socialMedia := index $footer "socialmedia" }} +{{- $footerLogo := index $footer "logo" | default .Site.Params.navbarlogo }} +{{- $donate := index $footer "donate" }}
-
{{ $title }}
+
+ {{- if $footerLogo }} + + {{- else }} +
{{ $title }}
+ {{- end }} + {{- with $donate }} + + {{- end }} +
Deployed by Netlify diff --git a/layouts/partials/hero-stats.html b/layouts/partials/hero-stats.html new file mode 100644 index 0000000..e00889a --- /dev/null +++ b/layouts/partials/hero-stats.html @@ -0,0 +1,21 @@ +{{- $stats := .stats }} +{{- $class := .class | default "hero-modern__stats" }} +{{- with $stats }} +{{- $statCount := len . }} +
+ {{- range $index, $stat := . }} +
+
0{{ $stat.suffix | default "" }}
+
{{ $stat.label }}
+
+ {{- if lt (add $index 1) $statCount }} + + {{- end }} + {{- end }} +
+{{- end }} diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index 48ea26c..00f74c2 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -9,45 +9,47 @@ {{- $secondaryLink := index $hero "secondaryButtonLink" }} {{- $stats := index $hero "stats" }} -
-
-
-

- {{ $titleBefore }}{{ $titleHighlight }}{{ $titleAfter }} -

- {{- with $description }} -

{{ . }}

- {{- end }} -
- {{- if $buttonText }} - {{ $buttonText }} - {{- end }} - {{- if and $secondaryText $secondaryLink }} - {{ $secondaryText }} +
+
+
+
+

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

+ {{- with $description }} +

{{ . }}

{{- end }}
- {{- with $stats }} -
- {{- range . }} -
-
0{{ .suffix | default "" }}
-
{{ .label }}
+ - {{- end }} -
- -
+
+ {{ partial "hero-stats.html" (dict "stats" $stats "class" "hero-modern__stats") }} +
diff --git a/layouts/partials/navbar-clone.html b/layouts/partials/navbar-clone.html index 5ccfbf8..c321469 100644 --- a/layouts/partials/navbar-clone.html +++ b/layouts/partials/navbar-clone.html @@ -34,19 +34,14 @@
{{- range $navbar }} {{- if .sublinks }} -
- +
+
- {{- range .sublinks }} - - {{ .title }} - {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }} - - {{- end }} + {{ partial "navbar-sublinks.html" .sublinks }}
{{- else if .button }} @@ -62,6 +57,8 @@ {{- if .IsTranslated }} {{ partial "translation.html" . }} {{- end }} + + {{ partial "navbar-social.html" . }}
diff --git a/layouts/partials/navbar-social.html b/layouts/partials/navbar-social.html new file mode 100644 index 0000000..00e84c7 --- /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 0000000..403f38f --- /dev/null +++ b/layouts/partials/navbar-sublinks.html @@ -0,0 +1,10 @@ +{{- range . }} +{{- if .is_heading }} +{{ .title }} +{{- else }} + + {{ .title }} + {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }} + +{{- end }} +{{- end }} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index e0dbc66..90d0ae9 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -34,19 +34,14 @@
{{- range $navbar }} {{- if .sublinks }} -
- +
+
- {{- range .sublinks }} - - {{ .title }} - {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }} - - {{- end }} + {{ partial "navbar-sublinks.html" .sublinks }}
{{- else if .button }} @@ -62,6 +57,8 @@ {{- if .IsTranslated }} {{ partial "translation.html" . }} {{- end }} + + {{ partial "navbar-social.html" . }}
From f6ed8bb00f2e8da0272195ab1b2fa82e312bf01c Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 13:53:29 +0100 Subject: [PATCH 06/20] WIP: navbar and content updates --- config.yaml | 1 - 1 file changed, 1 deletion(-) diff --git a/config.yaml b/config.yaml index 7052945..a2e1219 100644 --- a/config.yaml +++ b/config.yaml @@ -297,6 +297,5 @@ languages: - title: Sponsor Us url: /about#sponsors - title: Donate - shortTitle: Give url: /about#donate button: true From 9e7f934665287eaca41b23b695fc529b7cc897a7 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 14:56:32 +0100 Subject: [PATCH 07/20] update hero section layout for mobile responsiveness --- assets/css/hero.css | 192 +++++++++++++++++-------------- assets/css/typography.css | 1 - layouts/partials/hero-stats.html | 6 +- layouts/partials/hero.html | 2 +- 4 files changed, 108 insertions(+), 93 deletions(-) diff --git a/assets/css/hero.css b/assets/css/hero.css index 27e2645..7c5e33d 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -11,32 +11,6 @@ position: relative; } -@media (min-width: 769px) { - .hero-modern-wrap > .hero-modern__stats { - display: flex; - flex-wrap: nowrap; - justify-content: flex-end; - align-items: center; - position: absolute; - bottom: clamp(1rem, 2vh, 2.5rem); - left: 50%; - transform: translateX(-50%); - width: min(75rem, 100%); - max-width: min(75rem, calc(100% - 3rem)); - padding-inline: clamp(1.25rem, 4vw, 2.5rem); - box-sizing: border-box; - background: transparent; - border: none; - pointer-events: none; - z-index: 3; - } - - .hero-modern-wrap > .hero-modern__stats .hero-modern__stat, - .hero-modern-wrap > .hero-modern__stats .hero-modern__stat-sep { - pointer-events: auto; - } -} - .hero-modern { position: relative; overflow: hidden; @@ -146,6 +120,9 @@ 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; } @@ -165,6 +142,15 @@ 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; + } } .hero-modern__btn { @@ -257,13 +243,14 @@ } .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-yellow); + color: var(--openms-white); } .hero-modern__stat-label { @@ -368,14 +355,15 @@ .hero-modern__actions { column-gap: 1.5rem; + align-items: center; } - .hero-modern__stats { + .hero-modern__actions .hero-modern__stats { gap: clamp(0.5rem, 1.5vw, 1.25rem); } } -/* Small (sm) — stacked layout, stats below hero */ +/* Small (sm) — stacked layout; stats below hero */ @media (max-width: 768px) { :root { --openms-hero-chrome: 10.5rem; @@ -416,12 +404,21 @@ 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: center; + align-items: stretch; width: 100%; + gap: 0; } .hero-modern__buttons { @@ -432,46 +429,68 @@ margin-bottom: 0; } - .hero-modern-wrap > .hero-modern__stats { - position: static; - transform: none; - left: auto; + .hero-modern__actions .hero-modern__stats { + position: absolute; + left: 0; + right: 0; + bottom: 0; + transform: translateY(100%); width: 100%; max-width: none; - padding: 1rem 1.25rem; margin: 0; + padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem); background: var(--openms-white); - border-bottom: 1px solid var(--openms-grey); + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-dark-rgb), 0.06); box-sizing: border-box; - pointer-events: auto; - display: flex; - flex-wrap: nowrap; - justify-content: space-evenly; - align-items: center; - gap: clamp(0.5rem, 2vw, 1rem); + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.5rem; + align-items: stretch; + grid-column: unset; + justify-self: unset; + z-index: 4; } - .hero-modern__stat { + .hero-modern__actions .hero-modern__stats .hero-modern__stat-sep { + display: none; + } + + .hero-modern__actions .hero-modern__stats .hero-modern__stat { + display: flex; + flex-direction: column; align-items: center; + justify-content: center; text-align: center; - flex: 1 1 0; + gap: 0.3rem; min-width: 0; - max-width: 7rem; + max-width: none; + padding: 0.625rem 0.375rem; + border-radius: 0.5rem; + background: rgba(var(--openms-navy-rgb), 0.05); + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); } - .hero-modern__stat-number { - color: var(--openms-dark); + .hero-modern__actions .hero-modern__stats .hero-modern__stat-number { + font-family: var(--openms-font-heading); + font-size: clamp(1.375rem, 5.5vw, 1.625rem); font-weight: 800; + line-height: 1; + color: var(--openms-navy); min-width: auto; - font-size: 1.375rem; + letter-spacing: -0.02em; } - .hero-modern__stat-label { - color: var(--openms-dark); - } - - .hero-modern__stat-sep { - color: rgba(var(--openms-dark-rgb), 0.25); + .hero-modern__actions .hero-modern__stats .hero-modern__stat-label { + font-size: var(--openms-text-min); + font-weight: 600; + color: rgba(var(--openms-dark-rgb), 0.82); + text-transform: none; + letter-spacing: 0.01em; + line-height: 1.25; + max-width: 100%; + overflow-wrap: anywhere; + hyphens: auto; } .hero-modern__visual { @@ -480,11 +499,6 @@ max-height: clamp(5rem, 14vh, 8rem); } - .hero-modern__description { - margin-inline: auto; - max-width: 34ch; - } - .hero-modern__waveform { min-height: 0; max-height: 100%; @@ -501,10 +515,11 @@ font-size: 1.1em; } - .hero-modern__description { + .hero-modern .hero-modern__description { + margin-inline: auto; max-width: none; margin-bottom: 0.75rem; - font-size: var(--openms-body-size); + font-size: var(--openms-text-min); line-height: 1.4; } @@ -515,20 +530,6 @@ padding: 0.75rem 1.25rem; } - .hero-modern__stats { - padding: 0.875rem 1rem; - } - - .hero-modern__stat { - max-width: 6.5rem; - } - - .hero-modern__stat-label { - font-size: var(--openms-text-min); - letter-spacing: 0.04em; - line-height: 1.3; - } - .hero-modern__visual { min-height: 0; max-height: clamp(3.5rem, 10vh, 5.5rem); @@ -569,22 +570,17 @@ font-size: clamp(1.625rem, 6.5vw, 1.875rem); } - .hero-modern__description { - font-size: var(--openms-text-min); + .hero-modern .hero-modern__description { line-height: 1.35; } - .hero-modern__stats { - gap: 0.5rem; - padding: 0.75rem 1rem; + .hero-modern__actions .hero-modern__stats { + gap: 0.375rem; + padding: 0.625rem 0.75rem; } - .hero-modern__stat { - max-width: 5.5rem; - } - - .hero-modern__stat-number { - font-size: 1.2rem; + .hero-modern__actions .hero-modern__stats .hero-modern__stat { + padding: 0.5rem 0.25rem; } } @@ -605,11 +601,31 @@ } @media (prefers-contrast: more) { - .hero-modern__description, - .hero-modern__stat-label { + .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; diff --git a/assets/css/typography.css b/assets/css/typography.css index bd5a5dd..7477982 100644 --- a/assets/css/typography.css +++ b/assets/css/typography.css @@ -48,7 +48,6 @@ button, /* Presentations — 18pt */ .openms-text-presentation, -.hero-modern__description, .keyfeatures > .container > p { font-family: var(--openms-font-body); font-size: var(--openms-presentation-size); diff --git a/layouts/partials/hero-stats.html b/layouts/partials/hero-stats.html index e00889a..eb67aa1 100644 --- a/layouts/partials/hero-stats.html +++ b/layouts/partials/hero-stats.html @@ -2,20 +2,20 @@ {{- $class := .class | default "hero-modern__stats" }} {{- with $stats }} {{- $statCount := len . }} -
+
{{- range $index, $stat := . }}
+
{{ $stat.label }}
0{{ $stat.suffix | default "" }}
-
{{ $stat.label }}
{{- if lt (add $index 1) $statCount }} {{- end }} {{- end }} -
+ {{- end }} diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index 00f74c2..be9c9ff 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -48,8 +48,8 @@

>{{ $secondaryText }} {{- end }} + {{ partial "hero-stats.html" (dict "stats" $stats "class" "hero-modern__stats") }} - {{ partial "hero-stats.html" (dict "stats" $stats "class" "hero-modern__stats") }} From 6b7c11a2f120f3c5317d7014b48a2fef743f7aa6 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 26 May 2026 15:11:47 +0100 Subject: [PATCH 08/20] Improve hero stats layout on medium and large breakpoints. Co-authored-by: Cursor --- assets/css/hero.css | 92 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 90 insertions(+), 2 deletions(-) diff --git a/assets/css/hero.css b/assets/css/hero.css index 7c5e33d..b252535 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -150,6 +150,21 @@ 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); } } @@ -354,12 +369,85 @@ } .hero-modern__actions { - column-gap: 1.5rem; + 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 { - gap: clamp(0.5rem, 1.5vw, 1.25rem); + 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; } } From ba46a051a99f6a6cffb96ff15569ca61a0315666 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Wed, 27 May 2026 17:08:24 +0100 Subject: [PATCH 09/20] Refine homepage contact section and unify CTA styling. Co-authored-by: Cursor --- assets/css/contact-area.css | 201 ++++++ assets/css/hero-sponsors.css | 202 +++++++ assets/css/hero.css | 254 ++++++-- assets/css/heroitems.css | 706 +++++++++++++++++++++- assets/css/keyfeatures-modern.css | 251 ++++++++ assets/css/styles_override.css | 452 ++++++++++---- assets/css/university-partners.css | 181 ++++++ assets/js/back-to-top.js | 19 + config.yaml | 165 +++-- layouts/index.html | 64 +- layouts/partials/contact-area.html | 43 ++ layouts/partials/footer.html | 154 +++-- layouts/partials/hero-sponsors.html | 38 ++ layouts/partials/hero-stats.html | 22 +- layouts/partials/hero.html | 2 +- layouts/partials/university-partners.html | 103 ++++ 16 files changed, 2542 insertions(+), 315 deletions(-) create mode 100644 assets/css/contact-area.css create mode 100644 assets/css/hero-sponsors.css create mode 100644 assets/css/keyfeatures-modern.css create mode 100644 assets/css/university-partners.css create mode 100644 assets/js/back-to-top.js create mode 100644 layouts/partials/contact-area.html create mode 100644 layouts/partials/hero-sponsors.html create mode 100644 layouts/partials/university-partners.html diff --git a/assets/css/contact-area.css b/assets/css/contact-area.css new file mode 100644 index 0000000..472322f --- /dev/null +++ b/assets/css/contact-area.css @@ -0,0 +1,201 @@ +.contact-area { + padding: clamp(2.4rem, 6vh, 4rem) clamp(1.25rem, 4vw, 2.5rem); + background: var(--openms-white); +} + +.contact-area__inner { + max-width: 75rem; + width: 100%; + margin: 0 auto; + min-height: clamp(13rem, 24vh, 17rem); + padding: clamp(1.75rem, 4vh, 2.5rem); + border-radius: 0; + background: var(--openms-white); + border: none; + box-shadow: none; + 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-block; + margin: 0 0 0.65rem; + padding: 0.3rem 0.72rem; + border-radius: 999px; + 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); +} + +.contact-area__title { + margin: 0 0 0.7rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.85rem, 3.6vw, 2.85rem); + line-height: 1.12; + letter-spacing: -0.02em; + color: var(--openms-navy); +} + +.contact-area__copy { + margin: 0 0 0.8rem; + max-width: 50ch; + color: rgba(var(--openms-dark-rgb), 0.84); + font-size: clamp(1rem, 1.2vw, 1.15rem); + line-height: 1.6; +} + +.contact-area__meta { + margin: 0; + display: inline-flex; + align-items: center; + gap: 0.4rem; + color: rgba(var(--openms-dark-rgb), 0.72); + font-size: clamp(0.82rem, 0.95vw, 0.92rem); +} + +.contact-area__support-note { + margin: 0.8rem 0 0; + color: rgba(var(--openms-dark-rgb), 0.82); + font-size: clamp(0.92rem, 1vw, 1rem); + line-height: 1.5; +} + +.contact-area__support-note a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.contact-area__meta::before { + content: ""; + width: 0.55rem; + height: 0.55rem; + border-radius: 999px; + background: var(--openms-yellow); + box-shadow: 0 0 0 4px rgba(var(--openms-yellow-rgb), 0.22); +} + +.contact-area__cta { + margin-top: 0; + justify-content: center; +} + +.contact-area__actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.75rem; + align-items: stretch; + width: 100%; +} + +.contact-area__actions .contact-area__cta { + width: 100%; + font-family: var(--openms-font-body) !important; + font-size: var(--openms-text-min) !important; + font-weight: 600 !important; + line-height: 1.3 !important; +} + +.contact-area__details { + display: grid; + justify-items: start; + gap: 0.75rem; + padding: clamp(1rem, 2.2vh, 1.25rem); + border-radius: 0.95rem; + background: rgba(var(--openms-navy-rgb), 0.04); + border: none; +} + +.contact-area__line { + margin: 0; + width: 100%; + min-height: 3.2rem; + color: rgba(var(--openms-dark-rgb), 0.88); + display: grid; + grid-template-columns: auto minmax(0, 1fr); + align-items: center; + gap: 0.65rem; + padding: 0.7rem 0.8rem; + border-radius: 0.65rem; + background: rgba(var(--openms-blue-rgb), 0.025); + border: none; + text-decoration: none; + transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; +} + +.contact-area__line:hover, +.contact-area__line:focus-visible { + transform: translateY(-1px); + background: rgba(var(--openms-blue-rgb), 0.05); + outline: none; +} + +.contact-area__label { + display: block; + font-weight: 600; + line-height: 1.2; + font-size: 0.78rem; + letter-spacing: 0.04em; + text-transform: uppercase; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.contact-area__value { + display: block; + margin-top: 0.12rem; + font-weight: 500; + line-height: 1.35; + font-size: 0.92rem; + letter-spacing: 0.01em; +} + +.contact-area__icon { + display: inline-grid; + place-items: center; + width: 1.7rem; + height: 1.7rem; + border-radius: 0.5rem; + color: rgba(var(--openms-blue-rgb), 0.82); + background: rgba(var(--openms-blue-rgb), 0.08); +} + +.contact-area__details a { + color: var(--openms-navy); + text-decoration: none; +} + +.contact-area__details .contact-area__actions .contact-area__cta { + color: var(--openms-white) !important; +} + +.contact-area__details .contact-area__actions .contact-area__cta:visited, +.contact-area__details .contact-area__actions .contact-area__cta:hover, +.contact-area__details .contact-area__actions .contact-area__cta:focus-visible, +.contact-area__details .contact-area__actions .contact-area__cta:active { + color: var(--openms-white) !important; +} + + +@media (max-width: 768px) { + .contact-area__inner { + grid-template-columns: 1fr; + min-height: 0; + padding: 1.6rem 1rem 1.8rem; + } + + .contact-area__title { + font-size: clamp(1.65rem, 7vw, 2.2rem); + } + + .contact-area__actions { + grid-template-columns: 1fr; + gap: 0.75rem; + } +} diff --git a/assets/css/hero-sponsors.css b/assets/css/hero-sponsors.css new file mode 100644 index 0000000..9e8ebd4 --- /dev/null +++ b/assets/css/hero-sponsors.css @@ -0,0 +1,202 @@ +/* Sponsor strip — full band between hero and What is OpenMS? */ + +.hero-modern-wrap { + display: flex; + flex-direction: column; + width: 100%; +} + +.hero-modern-wrap > .hero-modern { + flex-shrink: 0; +} + +.hero-sponsors { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + min-height: clamp(11rem, 24vh, 17rem); + margin: 0; + padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.25rem, 4vw, 2.5rem) + clamp(2.5rem, 5vh, 3.75rem); + box-sizing: border-box; + background: var(--openms-white); + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-bottom: none; +} + +.hero-sponsors__inner { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: center; + gap: clamp(1rem, 2.5vh, 1.5rem); + width: 100%; + max-width: 75rem; + margin: 0 auto; + flex: 1 1 auto; +} + +.hero-sponsors__intro { + margin: 0; + min-width: 0; + text-align: center; +} + +.hero-sponsors__label { + display: inline-block; + margin: 0 0 0.65rem; + padding: 0.3rem 0.72rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.2); + border-radius: 999px; +} + +.hero-sponsors__description { + margin: 0.35rem auto 0; + max-width: 36rem; + font-family: var(--openms-font-body); + font-size: clamp(0.75rem, 1vw + 0.5rem, var(--openms-body-size)); + line-height: 1.5; + color: rgba(var(--openms-dark-rgb), 0.72); + text-wrap: pretty; +} + +.hero-sponsors__logos { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + align-items: stretch; + gap: clamp(0.5rem, 1.5vw, 0.875rem); + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.hero-sponsors__logo-item { + min-width: 0; + display: flex; +} + +.hero-sponsors__logo-link { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: clamp(2.75rem, 6vw, 3.4rem); + padding: clamp(0.4rem, 1.2vw, 0.65rem) clamp(0.55rem, 1.6vw, 0.85rem); + border-radius: 0.5rem; + background: transparent; + border: none; + box-shadow: none; + transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} + +@media (hover: hover) { + .hero-sponsors__logo-link:hover, + .hero-sponsors__logo-link:focus-visible { + background: transparent; + transform: translateY(-2px); + box-shadow: none; + transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, + box-shadow 0.2s ease; + } +} + +.hero-sponsors__logo-link:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 3px; +} + +.hero-sponsors__logo-img { + display: block; + max-height: clamp(1.35rem, 3.2vw, 1.95rem); + width: auto; + max-width: 100%; + object-fit: contain; + filter: brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(1038%) + hue-rotate(185deg) brightness(95%) contrast(96%); + opacity: 1; + transition: opacity 0.2s ease; +} + +.hero-sponsors__logo-link:hover .hero-sponsors__logo-img, +.hero-sponsors__logo-link:focus-visible .hero-sponsors__logo-img { + opacity: 1; +} + +.hero-sponsors__logo-item:nth-child(2) .hero-sponsors__logo-img { + max-height: clamp(1.65rem, 3.8vw, 2.3rem); +} + +/* Wide screens — logos span full inner width */ +@media (min-width: 48rem) { + .hero-sponsors__logos { + grid-template-columns: repeat(3, minmax(0, 1fr)); + max-width: none; + } +} + +/* Tablet & mobile — room for stats bar overlapping from hero */ +@media (max-width: 48rem) { + .hero-sponsors { + min-height: clamp(14rem, 38vh, 20rem); + padding-top: clamp(6.25rem, 24vw, 8rem); + padding-bottom: clamp(1.75rem, 4vh, 2.5rem); + border-top: none; + } + + .hero-sponsors__inner { + gap: 1rem; + } + + .hero-sponsors__logos { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.5rem; + } + + .hero-sponsors__logo-link { + min-height: 2.5rem; + padding: 0.4rem 0.35rem; + } + + .hero-sponsors__logo-img { + max-height: 1.35rem; + } +} + +@media (max-width: 24rem) { + .hero-sponsors__logos { + grid-template-columns: 1fr; + max-width: 14rem; + margin-inline: auto; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-sponsors__logo-link:hover, + .hero-sponsors__logo-link:focus-visible { + transform: none; + } +} + +@media (prefers-contrast: more) { + .hero-sponsors__label { + color: var(--openms-dark); + } + + .hero-sponsors__logo-link { + border-color: var(--openms-white); + } + + .hero-sponsors__logo-img { + opacity: 1; + } +} diff --git a/assets/css/hero.css b/assets/css/hero.css index b252535..a8f8fd4 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -7,8 +7,187 @@ } .hero-modern-wrap { - display: block; position: relative; + width: 100%; +} + +.hero-modern-wrap > .hero-modern__stats--below { + width: min(100%, 75rem); + max-width: 75rem; + margin: clamp(1rem, 2.5vh, 1.5rem) auto 0; + padding: clamp(1.25rem, 3vh, 1.75rem) clamp(1rem, 4vw, 2rem); + min-height: clamp(7rem, 16vh, 9.5rem); + background: transparent; + border: none; + border-radius: 0; + box-shadow: none; + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(0.85rem, 2vw, 1.35rem); + align-items: stretch; + grid-column: unset; + justify-self: unset; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + gap: 0.45rem; + min-height: clamp(5.25rem, 12vh, 6.75rem); + padding: clamp(1rem, 2.4vh, 1.35rem) clamp(0.85rem, 2vw, 1.25rem); + border-radius: 0; + background: transparent; + border: none; + box-shadow: none; + position: relative; + overflow: hidden; + isolation: isolate; + transition: + transform 0.22s ease, + box-shadow 0.22s ease, + border-color 0.22s ease; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card::before { + content: none; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card::after { + content: none; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(1)::before { + background: linear-gradient(180deg, var(--openms-yellow) 0%, var(--openms-orange) 100%); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(1)::after { + background: radial-gradient( + ellipse at center, + rgba(var(--openms-yellow-rgb), 0.2) 0%, + transparent 70% + ); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(3)::before { + background: linear-gradient(180deg, var(--openms-blue) 0%, var(--openms-purple) 100%); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(3)::after { + background: radial-gradient( + ellipse at center, + rgba(var(--openms-blue-rgb), 0.18) 0%, + transparent 70% + ); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(5)::before { + background: linear-gradient(180deg, var(--openms-pink) 0%, var(--openms-purple) 100%); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(5)::after { + background: radial-gradient( + ellipse at center, + rgba(var(--openms-pink-rgb), 0.16) 0%, + transparent 70% + ); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-sep { + display: none; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-number { + order: -1; + margin: 0; + min-width: 3ch; + font-family: var(--openms-font-heading); + font-size: clamp(1.85rem, 3.2vw, 2.65rem); + font-weight: 800; + font-variant-numeric: tabular-nums; + letter-spacing: -0.03em; + line-height: 1; + color: var(--openms-navy); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-label { + margin: 0; + max-width: 12ch; + color: rgba(var(--openms-dark-rgb), 0.72); + text-transform: uppercase; + letter-spacing: 0.06em; + font-weight: 600; + font-size: clamp(0.7rem, 0.95vw, 0.8rem); + line-height: 1.3; + display: inline-flex; + align-items: center; + gap: 0.35rem; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-icon { + display: inline-flex; + width: 1.5rem; + height: 1.5rem; + align-items: center; + justify-content: center; + border-radius: 0.4rem; + color: rgba(var(--openms-navy-rgb), 0.9); + background: rgba(var(--openms-navy-rgb), 0.08); + flex: 0 0 auto; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-icon svg { + width: 1rem; + height: 1rem; + display: block; +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(1) .hero-modern__stat-icon { + color: rgba(var(--openms-orange-rgb), 0.95); + background: rgba(var(--openms-yellow-rgb), 0.2); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(3) .hero-modern__stat-icon { + color: rgba(var(--openms-blue-rgb), 0.95); + background: rgba(var(--openms-blue-rgb), 0.16); +} + +.hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat:nth-child(5) .hero-modern__stat-icon { + color: rgba(var(--openms-pink-rgb), 0.92); + background: rgba(var(--openms-pink-rgb), 0.16); +} + +@media (hover: hover) { + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card:hover { + transform: translateY(-3px); + border-color: transparent; + box-shadow: none; + } +} + +@media (min-width: 1280px) { + .hero-modern-wrap > .hero-modern__stats--below { + padding: 1.5rem clamp(2rem, 4vw, 2.5rem); + gap: 1.35rem; + min-height: 9.5rem; + } + + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card { + min-height: 6.75rem; + padding: 1.35rem 1.5rem; + } + + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-number { + font-size: clamp(2.1rem, 2.4vw, 2.75rem); + } + + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-label { + font-size: 0.8rem; + max-width: none; + } } .hero-modern { @@ -517,65 +696,34 @@ margin-bottom: 0; } - .hero-modern__actions .hero-modern__stats { - position: absolute; - left: 0; - right: 0; - bottom: 0; - transform: translateY(100%); - width: 100%; - max-width: none; - margin: 0; - padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem); - background: var(--openms-white); - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); - box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-dark-rgb), 0.06); - box-sizing: border-box; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); + .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; - align-items: stretch; - grid-column: unset; - justify-self: unset; - z-index: 4; + border-radius: 0.75rem; } - .hero-modern__actions .hero-modern__stats .hero-modern__stat-sep { + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-sep { display: none; } - .hero-modern__actions .hero-modern__stats .hero-modern__stat { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - gap: 0.3rem; - min-width: 0; - max-width: none; - padding: 0.625rem 0.375rem; - border-radius: 0.5rem; - background: rgba(var(--openms-navy-rgb), 0.05); - border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + .hero-modern-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__actions .hero-modern__stats .hero-modern__stat-number { - font-family: var(--openms-font-heading); - font-size: clamp(1.375rem, 5.5vw, 1.625rem); - font-weight: 800; - line-height: 1; - color: var(--openms-navy); + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-number { + font-size: clamp(1.5rem, 5.5vw, 1.85rem); min-width: auto; - letter-spacing: -0.02em; } - .hero-modern__actions .hero-modern__stats .hero-modern__stat-label { + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat-label { font-size: var(--openms-text-min); - font-weight: 600; - color: rgba(var(--openms-dark-rgb), 0.82); - text-transform: none; - letter-spacing: 0.01em; - line-height: 1.25; + letter-spacing: 0.04em; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; @@ -662,13 +810,15 @@ line-height: 1.35; } - .hero-modern__actions .hero-modern__stats { + .hero-modern-wrap > .hero-modern__stats--below { gap: 0.375rem; - padding: 0.625rem 0.75rem; + padding: 0.65rem 0.5rem; + min-height: 6rem; } - .hero-modern__actions .hero-modern__stats .hero-modern__stat { - padding: 0.5rem 0.25rem; + .hero-modern-wrap > .hero-modern__stats--below .hero-modern__stat--card { + min-height: 4.5rem; + padding: 0.65rem 0.25rem; } } diff --git a/assets/css/heroitems.css b/assets/css/heroitems.css index 05ab753..5f30b11 100644 --- a/assets/css/heroitems.css +++ b/assets/css/heroitems.css @@ -1,20 +1,698 @@ -.heroItemTitle{ - margin-bottom: 0; - padding: 1rem; - border-top-right-radius: 5rem; - border-top-left-radius: 5rem; +/* OpenMS capabilities ("OpenMS allows users to") — feature cards */ + +.openms-steps { + --openms-steps-accent: rgba(var(--openms-yellow-rgb), 1); + padding: clamp(2.75rem, 5.5vh, 4rem) clamp(1.25rem, 4vw, 2.5rem); + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--openms-steps-accent) 14%, var(--openms-white)) 0%, + var(--openms-white) 32% + ); + border-top: 3px solid var(--openms-steps-accent); +} + +.openms-steps__inner { + max-width: 75rem; + margin: 0 auto; +} + +.openms-steps__header { + max-width: 44rem; + margin: 0 auto clamp(1.75rem, 3.5vh, 2.5rem); + text-align: center; +} + +.openms-steps__eyebrow { + display: inline-block; + margin: 0 0 0.85rem; + padding: 0.35rem 0.85rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-navy); + background: color-mix(in srgb, var(--openms-steps-accent) 35%, var(--openms-white)); + border: 1px solid color-mix(in srgb, var(--openms-steps-accent) 55%, transparent); + border-radius: 999px; +} + +.openms-steps__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.75rem, 3.5vw, 2.5rem); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.1; + letter-spacing: -0.02em; + color: var(--openms-navy); + text-wrap: balance; +} + +.openms-steps__title-accent { + background: linear-gradient( + 90deg, + var(--openms-navy) 0%, + color-mix(in srgb, var(--openms-steps-accent) 70%, var(--openms-navy)) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.openms-steps__subtitle { + margin: 0.85rem auto 0; + max-width: 50ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.82); + text-wrap: pretty; +} + +/* Capabilities — trusted-by style compact tiles */ +.openms-steps--users { + position: relative; + overflow: hidden; + border-top: none; + background: var(--openms-white); + color: var(--openms-dark); +} + +.openms-steps--users::before, +.openms-steps--users::after { + content: ""; + position: absolute; + border-radius: 50%; + pointer-events: none; + z-index: 0; +} + +.openms-steps--users::before { + top: -45%; + right: -10%; + width: 32rem; + height: 32rem; + background: radial-gradient( + circle, + rgba(var(--openms-blue-rgb), 0.1) 0%, + transparent 70% + ); +} + +.openms-steps--users::after { + bottom: -34%; + left: -6%; + width: 26rem; + height: 26rem; + background: radial-gradient( + circle, + rgba(var(--openms-orange-rgb), 0.1) 0%, + transparent 70% + ); +} + +.openms-steps--users .openms-steps__inner { + max-width: none; + width: 100%; + position: relative; + z-index: 1; +} + +.openms-steps--users .openms-steps__header { + max-width: 50rem; + margin: 0 auto clamp(1.35rem, 3vh, 2rem); + text-align: center; +} + +.openms-steps--users .openms-steps__eyebrow { + display: inline-block; + margin: 0 0 0.65rem; + padding: 0.3rem 0.72rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.2); + border-radius: 999px; +} + +.openms-steps--users .openms-steps__subtitle { + margin-left: auto; + margin-right: auto; + color: rgba(var(--openms-dark-rgb), 0.82); +} + +.openms-steps--users .openms-steps__title { + color: var(--openms-navy); +} + +.openms-steps--users .openms-steps__title-accent { + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 50%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.openms-steps--users .openms-steps__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(0.85rem, 1.8vw, 1.25rem); + align-items: stretch; +} + +.openms-steps--users .openms-step { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + min-height: 100%; + border: none; + border-radius: 0.85rem; + background: var(--openms-white); + box-shadow: 0 0.2rem 0.75rem rgba(var(--openms-dark-rgb), 0.06); + padding: clamp(1.15rem, 2.2vw, 1.5rem); + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} + +.openms-steps--users .openms-step:hover { + transform: translateY(-2px); + box-shadow: 0 0.55rem 1.25rem rgba(var(--openms-blue-rgb), 0.14); +} + +.openms-steps--users .openms-step__media { + flex: 0 0 auto; + width: clamp(5.6rem, 8vw, 7.2rem); + height: clamp(5.6rem, 8vw, 7.2rem); + min-height: 0; + padding: 0.62rem; + border: none; + border-radius: 0.7rem; + background: rgba(var(--openms-blue-rgb), 0.1); +} + +.openms-steps--users .openms-step__img, +.openms-steps--users .openms-step__img.img-fit { + max-height: clamp(4.2rem, 6vw, 5.3rem); + filter: none; +} + +.openms-steps--users .openms-step__content { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-width: 0; + padding: 0; + gap: 0.42rem; +} + +.openms-steps--users .openms-step__title { + font-size: clamp(1.08rem, 1.45vw, 1.26rem); + line-height: 1.22; + color: var(--openms-navy); +} + +.openms-steps--users .openms-step__subtitle { + font-size: clamp(0.9rem, 1.05vw, 1rem); + line-height: 1.5; + color: rgba(var(--openms-dark-rgb), 0.78); + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.openms-steps--users .openms-step__cta { + align-self: flex-start; + margin-top: auto; +} + +@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.35rem; + } + + .openms-steps--users .openms-step { + min-height: 15.5rem; + padding: 1.4rem; + } + + .openms-steps--users .openms-step__media { + width: 7.5rem; + height: 7.5rem; + } + + .openms-steps--users .openms-step__img, + .openms-steps--users .openms-step__img.img-fit { + max-height: 5.6rem; + } +} + +/* 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); } -.hero-cta { - display: inherit; - justify-content: center; +.openms-steps--developers .openms-step__subtitle { + color: rgba(var(--openms-white-rgb), 0.9); } -.subtitle.is-5 { - text-transform: none; -} \ No newline at end of file +.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 { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + margin-top: 0.25rem; + min-height: 2.75rem; + padding: 0.75rem 1.75rem; + border-radius: 0.5rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + text-decoration: none; + color: var(--openms-white); + background: var(--openms-blue); + border: 2px solid var(--openms-blue); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); + transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; +} + +.openms-step__cta:hover, +.openms-step__cta:focus-visible { + background: var(--openms-navy); + border-color: var(--openms-navy); + transform: translateY(-2px); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + outline: none; +} + +.openms-step__cta:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)); +} + +.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 .openms-step { + padding: 1.1rem; + } + + .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 .openms-step__subtitle { + -webkit-line-clamp: unset; + } +} + +@media (prefers-reduced-motion: reduce) { + .openms-step:hover { + transform: none; + } + + .openms-step__cta:hover, + .openms-step__cta:focus-visible { + transform: none; + } + + .openms-step__cta-arrow { + transition: none; + } +} + +@media (prefers-contrast: more) { + .openms-step { + border-color: var(--openms-navy); + } +} diff --git a/assets/css/keyfeatures-modern.css b/assets/css/keyfeatures-modern.css new file mode 100644 index 0000000..6681e3f --- /dev/null +++ b/assets/css/keyfeatures-modern.css @@ -0,0 +1,251 @@ +/* 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); + + margin: 0; + padding: clamp(4.5rem, 9vh, 6.5rem) clamp(2rem, 6vw, 3.5rem) + clamp(3rem, 6vh, 4.75rem); + color: var(--openms-white); + background: var(--openms-navy); +} + +.keyfeatures-modern__inner { + width: 100%; + max-width: 75rem; + margin: 0 auto; +} + +.keyfeatures-modern__layout { + display: grid; + grid-template-columns: 1fr; + gap: clamp(1.1rem, 2.4vw, 1.8rem); + align-items: start; +} + +.keyfeatures-modern__header { + position: static; + top: auto; + align-self: start; + display: grid; + gap: 1rem; + max-width: 66rem; +} + +.keyfeatures-modern__eyebrow { + display: inline-block; + width: fit-content; + margin: 0.4rem 0 0.55rem; + 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 0 clamp(1rem, 2.4vh, 1.6rem); + padding: 1rem 1.1rem; + 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: clamp(0.6rem, 1.6vh, 1rem) 0 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__layout { + grid-template-columns: 1fr; + gap: 1.1rem; + } + + .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 { + padding: clamp(4rem, 8vh, 5rem) clamp(1.25rem, 5vw, 1.85rem) + clamp(2.75rem, 6vh, 3.75rem); + } + + .keyfeatures-modern__topics { + padding-block: clamp(0.5rem, 2vh, 1rem); + } + + .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/styles_override.css b/assets/css/styles_override.css index dcf8cda..0583a2a 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -103,21 +103,25 @@ box-shadow: 0 0.35rem 1rem rgba(var(--openms-yellow-rgb), 0.35); } -/* Sponsor — outline blue */ +/* Sponsor — blue primary with orange-button geometry */ .navbar.is-fresh .signup-button.sponsor-btn, #navbar-clone.navbar.is-fresh .signup-button.sponsor-btn { - background-color: transparent !important; - color: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; border: 2px solid var(--openms-blue) !important; - box-shadow: none; + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; } .navbar.is-fresh .signup-button.sponsor-btn:hover, #navbar-clone.navbar.is-fresh .signup-button.sponsor-btn:hover { - background-color: var(--openms-blue) !important; + background-color: var(--openms-navy) !important; color: var(--openms-white) !important; - border-color: var(--openms-blue) !important; - box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-blue-rgb), 0.3); + border-color: var(--openms-navy) !important; + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + transform: translateY(-2px); } .navbar.is-fresh .navbar-burger, @@ -265,46 +269,70 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { 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: var(--openms-blue); - color: var(--openms-grey); - padding: 3rem 0 0; - font-family: inherit; + position: relative; + color: rgba(var(--openms-white-rgb), 0.86); + padding: clamp(2.75rem, 5vw, 3.75rem) 0 0; + font-family: var(--openms-font-body); } -/* ---- Inner wrapper (brand + link grid) ---- */ .footer-inner { - max-width: 1200px; + max-width: 75rem; margin: 0 auto; - padding: 0 2rem 2.5rem; - display: flex; - gap: 3rem; - align-items: flex-start; + padding: 0 clamp(1.25rem, 4vw, 2.5rem); +} + +/* ---- 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); } -/* ---- Brand block ---- */ .footer-brand { - flex: 0 0 300px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; } -.footer-brand-top { +.footer-brand__intro { display: flex; flex-direction: column; align-items: flex-start; - gap: 1.25rem; - margin-bottom: 1.5rem; + gap: 0.625rem; +} + +.footer-tagline { + margin: 0; + max-width: 18rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 400; + line-height: 1.5; + color: rgba(var(--openms-white-rgb), 0.72); } .footer-logo { display: inline-flex; align-items: center; - min-height: 44px; } .footer-logo img { display: block; - max-height: 88px; - max-width: min(100%, 280px); + max-height: 120px; + max-width: min(100%, 320px); width: auto; height: auto; object-fit: contain; @@ -312,25 +340,56 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { } .footer-logo:focus-visible { - outline: 2px solid rgba(var(--openms-white-rgb), 0.45); + outline: 2px solid var(--openms-yellow); outline-offset: 4px; border-radius: 4px; } -.footer-donate-btn.signup-button { +.footer-brand__actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; +} + + +.footer-brand-btn.signup-button { display: inline-block !important; - padding: 0.55rem 1.35rem !important; - font-size: var(--openms-body-size); + min-height: 2.75rem; + padding: 0.75rem 1.75rem !important; + border-radius: 0.5rem !important; + font-size: var(--openms-body-size-lg); font-weight: 600; + line-height: 1.3; text-decoration: none; white-space: nowrap; } +.footer-redesign .footer-sponsor-btn.signup-button { + color: var(--openms-white) !important; + background-color: var(--openms-blue) !important; + border: 2px solid var(--openms-blue) !important; + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); + font-size: var(--openms-text-min) !important; +} + +.footer-redesign .footer-sponsor-btn.signup-button:hover, +.footer-redesign .footer-sponsor-btn.signup-button:focus-visible { + color: var(--openms-white) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + transform: translateY(-2px); +} + .footer-redesign .footer-donate-btn.signup-button.secondary-btn { background-color: var(--openms-orange) !important; color: var(--openms-white) !important; border: 2px solid var(--openms-orange) !important; box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-orange-rgb), 0.3); + font-size: var(--openms-text-min) !important; + font-weight: 600 !important; + line-height: 1.3 !important; } .footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, @@ -343,70 +402,41 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { .footer-title { color: var(--openms-white); - margin-bottom: 0; -} - -/* ---- Partner logo row ---- */ -.footer-partners { - display: flex; - flex-wrap: wrap; - gap: 1.25rem; - align-items: center; - /* Removed container-level opacity */ -} - -.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-link-group ul li a:focus-visible, -.footer-socials a:focus-visible { - color: var(--openms-white); - outline: 2px solid rgba(var(--openms-white-rgb), 0.45); - outline-offset: 4px; + margin: 0; } -.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-nav { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: clamp(1rem, 2.5vw, 2rem); } -.footer-partners a:hover img, -.footer-partners a:focus-visible img { - opacity: 1; - /* Lights up to full brightness on hover/focus */ +.footer-links-area { + display: flex; + flex-direction: column; + gap: clamp(1.25rem, 3vw, 2rem); } -/* ---- Link columns grid ---- */ -.footer-links { - flex: 1; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; +.footer-section-label { + margin: 0 0 0.75rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(var(--openms-white-rgb), 0.58); } -/* ---- Column heading ---- */ .footer-group-heading { + 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(var(--openms-white-rgb), 0.45); - margin: 0 0 0.875rem 0; - padding: 0; + color: rgba(var(--openms-white-rgb), 0.55); } -/* ---- Link list ---- */ .footer-link-group ul { list-style: none; margin: 0; @@ -414,115 +444,244 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { } .footer-link-group ul li a { - color: var(--openms-grey); - text-decoration: none; + display: inline-flex; + align-items: center; + min-height: 2.25rem; + padding: 0.2rem 0.4rem; + margin: 0 -0.4rem; + border-radius: 0.375rem; + color: rgba(var(--openms-white-rgb), 0.85); font-size: var(--openms-body-size); + text-decoration: none; + transition: color 0.2s ease, background-color 0.2s ease; +} + +.footer-link-group ul li a.footer-link-contact-us { + font-size: var(--openms-text-min); +} + +/* Match navbar link hover (color + light blue tint, no underline) */ +.footer-link-group ul li a:hover, +.footer-link-group ul li a:focus-visible { + color: var(--openms-blue); + background-color: rgba(var(--openms-blue-rgb), 0.1); + text-decoration: none; +} + +.footer-link-group ul li a:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: 2px; +} + +.footer-socials a:focus-visible, +.footer-sponsors__logos a:focus-visible { + color: var(--openms-white); + outline: 2px solid var(--openms-yellow); + outline-offset: 3px; +} + +/* ---- Sponsors strip ---- */ +.footer-sponsors { + padding: clamp(1.25rem, 3vw, 1.75rem) 0; +} + +.footer-sponsors .footer-section-label { + margin-bottom: 1rem; +} + +.footer-sponsors__logos { display: flex; + flex-wrap: wrap; align-items: center; - min-height: 44px; - transition: color 0.2s ease; + gap: 0.5rem 1.25rem; } -.footer-link-group ul li a:hover { - color: var(--openms-white); - text-decoration: underline; +.footer-sponsors__logos a { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.875rem; + min-height: 2.875rem; + padding: 0.35rem 0.5rem; + border-radius: 0.5rem; + transition: background 0.2s ease; +} + +.footer-sponsors__logos img { + max-height: 2rem; + width: auto; + object-fit: contain; + filter: brightness(0) invert(1); + opacity: 0.8; + transition: opacity 0.2s ease; +} + +.footer-sponsors__logos a:hover, +.footer-sponsors__logos a:focus-visible { + background: var(--openms-blue); +} + +.footer-sponsors__logos a:hover img, +.footer-sponsors__logos a:focus-visible img { + opacity: 1; +} + +/* ---- Brand social icons (under logo) ---- */ +.footer-brand .footer-socials { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.25rem; + margin-top: 0.25rem; } /* ---- Bottom bar ---- */ .footer-bottom { - max-width: 1200px; + max-width: 75rem; margin: 0 auto; - padding: 1.25rem 2rem; - border-top: 1px solid rgba(var(--openms-white-rgb), 0.1); + padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem); display: flex; align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: 1rem; + justify-content: center; + text-align: center; } -/* ---- Social icons ---- */ .footer-socials { display: flex; - gap: 0.75rem; + flex-wrap: wrap; align-items: center; + gap: 0.35rem; } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; - min-width: 44px; - min-height: 44px; - color: var(--openms-grey); - transition: color 0.2s ease; + min-width: 2.875rem; + min-height: 2.875rem; + color: var(--openms-white); + border-radius: 0.5rem; + transition: color 0.2s ease, background 0.2s ease; } .footer-socials a:hover { color: var(--openms-white); + background: var(--openms-blue); } .footer-socials svg.icon { - width: 1.4rem; - height: 1.4rem; - fill: currentColor; + width: 1.5rem; + height: 1.5rem; + fill: var(--openms-white); +} + +.footer-socials a svg, +.footer-socials a svg * { + fill: var(--openms-white) !important; + stroke: var(--openms-white) !important; + color: var(--openms-white) !important; + opacity: 1 !important; } -/* ---- Copyright ---- */ .footer-copyright { - color: rgba(var(--openms-white-rgb), 0.45); + margin: 0; + color: rgba(var(--openms-white-rgb), 0.55); font-size: var(--openms-text-min); + line-height: 1.5; +} + +.back-to-top { + position: fixed; + right: clamp(1rem, 2vw, 1.5rem); + bottom: clamp(1rem, 2vw, 1.5rem); + width: 2.5rem; + height: 2.5rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.22); + border-radius: 999px; + background: rgba(var(--openms-white-rgb), 0.96); + color: var(--openms-navy); + display: inline-flex; + align-items: center; + justify-content: center; + box-shadow: 0 0.25rem 0.8rem rgba(var(--openms-dark-rgb), 0.12); + cursor: pointer; + opacity: 0; + visibility: hidden; + transform: translateY(6px); + transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; + z-index: 35; +} + +.back-to-top.is-visible { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.back-to-top:hover, +.back-to-top:focus-visible { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white); + outline: none; } /* ============================================= - FOOTER — MOBILE (max-width: 768px) + FOOTER — RESPONSIVE ============================================= */ -@media (max-width: 768px) { - .footer-inner { - flex-direction: column; +@media (max-width: 1024px) { + .footer-top { + grid-template-columns: 1fr; gap: 2rem; - padding: 0 1.25rem 2rem; } - .footer-brand { - flex: unset; - width: 100%; + .footer-nav { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1.5rem 2rem; } - .footer-brand-top { - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - width: 100%; - gap: 1rem; + .footer-links-area { + gap: 1.25rem; } +} - .footer-logo img { - max-height: 72px; - max-width: min(65vw, 240px); +@media (max-width: 768px) { + .footer-redesign { + padding-top: 2.5rem; } - .footer-partners { - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; + .footer-inner { + padding-inline: 1.25rem; } - .footer-links { - width: 100%; - grid-template-columns: repeat(2, 1fr); + .footer-logo img { + max-height: 96px; + max-width: min(85vw, 280px); + } + + .footer-nav { + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; } - .footer-link-group ul li a { - text-align: left; + .footer-sponsors__logos { + gap: 0.5rem 1rem; } .footer-bottom { - padding: 1.25rem; - flex-direction: column; - align-items: flex-start; + padding-inline: 1.25rem; + } +} + +@media (max-width: 480px) { + .footer-nav { + grid-template-columns: 1fr; + } + + .footer-sponsors__logos { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-items: start; } } @@ -531,4 +690,31 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { ============================================= */ .img-fit { object-fit: contain; +} + +/* ============================================= + LANDING — section spacing + ============================================= */ +.landing-section { + margin-top: clamp(2rem, 4.5vw, 4rem); +} + +.landing-section--first { + margin-top: 0; +} + +/* Seamless transition: Supported by → What is OpenMS */ +.landing-section--after-hero { + margin-top: 0; +} + +/* Projects block — full-width navy band (matches hero); spacing from section above */ +.webapps-modern-wrap { + margin-top: clamp(2rem, 4.5vw, 4rem); +} + +@media (max-width: 768px) { + .landing-section { + margin-top: clamp(1.5rem, 4vw, 2.25rem); + } } \ No newline at end of file diff --git a/assets/css/university-partners.css b/assets/css/university-partners.css new file mode 100644 index 0000000..c95bb46 --- /dev/null +++ b/assets/css/university-partners.css @@ -0,0 +1,181 @@ +/* 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 { + max-width: 75rem; + margin: 0 auto 1rem; + padding-inline: clamp(1.25rem, 4vw, 2.5rem); +} + +.uni-partners__eyebrow { + display: inline-block; + width: fit-content; + margin: 0.4rem 0 0.55rem; + 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; +} + +.uni-partners__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); +} + +.uni-partners__marquee { + position: relative; + overflow: hidden; + border-radius: 0; + background: var(--openms-white); +} + +.uni-partners__marquee::before, +.uni-partners__marquee::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + width: 5rem; + pointer-events: none; + z-index: 2; +} + +.uni-partners__marquee::before { + left: 0; + background: linear-gradient(90deg, var(--openms-white) 0%, rgba(255, 255, 255, 0) 100%); +} + +.uni-partners__marquee::after { + right: 0; + background: linear-gradient(270deg, var(--openms-white) 0%, rgba(255, 255, 255, 0) 100%); +} + +.uni-partners__track { + display: flex; + width: max-content; + align-items: center; + gap: 0; + padding: 1rem 0; + will-change: transform; + animation: uni-partners-marquee 28s linear infinite; +} + +.uni-partners__row { + display: flex; + align-items: center; + gap: clamp(1.25rem, 3vw, 2.25rem); + padding: 0 clamp(1.25rem, 4vw, 2.5rem); +} + +.uni-partners__item { + display: inline-flex; + align-items: center; + justify-content: center; + height: 5rem; + min-width: 8.5rem; + padding: 0.7rem 0.95rem; + border-radius: 0.6rem; + + + text-decoration: none; + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +.uni-partners__item:hover, +.uni-partners__item:focus-visible { + transform: translateY(-2px); + + outline: none; +} + +.uni-partners__item:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 2px; +} + +.uni-partners__item img { + max-height: 3.5rem; + max-width: 10.5rem; + width: auto; + height: auto; + object-fit: contain; + display: block; +} + +@keyframes uni-partners-marquee { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +/* Fallback / non-animated layout */ +.uni-partners__static { + display: none; + flex-wrap: wrap; + gap: 0.75rem; + max-width: 75rem; + margin: 0 auto; + padding-inline: clamp(1.25rem, 4vw, 2.5rem); +} + +@media (prefers-reduced-motion: reduce) { + .uni-partners__track { + animation: none; + transform: none; + } + .uni-partners__marquee { + display: none; + } + .uni-partners__static { + display: flex; + } +} + +@media (max-width: 768px) { + .uni-partners__item { + height: 4.35rem; + min-width: 7.5rem; + } + + .uni-partners__item img { + max-height: 2.8rem; + max-width: 9rem; + } + + .uni-partners__marquee::before, + .uni-partners__marquee::after { + width: 3.5rem; + } +} + +@media (max-width: 520px) { + .uni-partners__title { + font-size: clamp(1.45rem, 8vw, 1.85rem); + } +} + diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js new file mode 100644 index 0000000..b096359 --- /dev/null +++ b/assets/js/back-to-top.js @@ -0,0 +1,19 @@ +(function () { + var trigger = document.querySelector(".back-to-top"); + if (!trigger) return; + + var toggleVisibility = function () { + if (window.scrollY > 320) { + trigger.classList.add("is-visible"); + } else { + trigger.classList.remove("is-visible"); + } + }; + + trigger.addEventListener("click", function () { + window.scrollTo({ top: 0, behavior: "smooth" }); + }); + + window.addEventListener("scroll", toggleVisibility, { passive: true }); + toggleVisibility(); +})(); diff --git a/config.yaml b/config.yaml index a2e1219..d7243bf 100644 --- a/config.yaml +++ b/config.yaml @@ -54,8 +54,36 @@ languages: enabled: true label: News text: Workshop at University of Helsinki on April 30th 2026. - link: /news/ - # linkText: Learn more + newsSection: + eyebrow: OpenMS + title: News + subtitle: Announcements, releases, workshops, and community updates from OpenMS. + yearFilterLabel: Filter by year + allYearsLabel: All + readMoreLabel: Read article + backToNewsLabel: Back to news + # defaultYear: "2026" + defaultToLatestYear: false + emptyMessage: No news items for the selected year. + trustedBySection: + eyebrow: Trusted by + title: As used by leading teams + titleHighlight: leading teams + subtitle: Researchers and organizations worldwide rely on OpenMS for mass spectrometry workflows. + linkLabel: Visit website + trustedBy: + - name: Immatics + abbr: I + url: https://immatics.com/ + - name: Korean team + abbr: KR + # url: https://example.com + - name: University of Toronto + abbr: UofT + # logo: /images/logos/toronto.jpeg + - name: University of Tübingen + abbr: UT + # logo: /images/logos/logo-uni-tuebingen.png navbarlogo: image: OpenMS_transparent_blackFont.png link: / @@ -78,12 +106,35 @@ languages: suffix: "+" label: Researchers - value: 3.5 - suffix: ".0" decimals: 1 label: Latest Version + homeSponsors: + enabled: true + label: Supported by + description: OpenMS receives direct funding from leading life-science organizations. + cta: + text: Our sponsors + url: /about#sponsors + 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:" + variant: users + eyebrow: Capabilities + titleHighlight: "allows users to" bgColor: C2BABC heroItems: - title: Run existing workflows @@ -106,63 +157,97 @@ languages: buttonText: Get Started buttonLink: "https://pyopenms.readthedocs.io/en/latest/" - title: "Advanced users / developers can use OpenMS to:" + variant: developers + eyebrow: For developers + titleHighlight: developers + subtitle: Scale workflows on HPC clusters and 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: Overview + title: What is OpenMS? + description: >- + OpenMS is an open-source C++ library with Python bindings for LC/MS + data management, analysis, and visualization—built for rapid + development of mass spectrometry software. + features: + - title: Open source + text: BSD-licensed core library and tools you can extend, share, and ship. + - title: C++ & Python + text: High-performance algorithms with pyOpenMS for scripting and workflows. + - title: Cross-platform + text: Build and run on Windows, macOS, and Linux with the same toolchain. + - title: TOPP pipeline + text: Nearly 200 ready-made tools 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. + + webappsSection: + eyebrow: Community tools + title: Our Open Source Projects + titleHighlight: Open Source + description: >- + Featured projects actively maintained by the OpenMS core development + team—from command-line tools to web applications for proteomics and + metabolomics workflows. + ctaText: View project + showAll: + text: Show all projects + url: /applications webapps: - - index: 0 + - name: TOPP Tools + url: https://openms.readthedocs.io/en/latest/getting-started/topp-tools.html + logo: /images/logo.svg + description: Collection of command line tools for mass spectrometry data analysis. + - 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 + description: Web-based analysis and visualization of top-down proteomics data. + - name: OpenDIAKiosk url: http://opendia.webapps.openms.org/ logo: /images/webapp/logo/OpenDIAKiosk_logo_portrait.svg - description: OpenDIA is an interactive web app for Data-Independent Acquisition (DIA) analysis. - - index: 3 + description: Interactive DIA proteomics data analysis. + - name: umetaflow + url: https://abi-services.cs.uni-tuebingen.de/umetaflow/ + logo: /images/webapp/logo/umetaflow.png + description: Web-based access to the UmetaFlow pipeline. + - name: OpenDDA url: http://opendda.webapps.openms.org/ logo: /images/webapp/logo/openDDA.svg - description: OpenDDA is a browser-based tool to identify and quantify proteins from DDA mass spectrometry data. - - index: 4 + description: Web-based workflow for DDA proteomics. + - name: naseweis + url: https://abi-services.cs.uni-tuebingen.de/naseweis/ + logo: /images/webapp/logo/naseweis.png + description: Web-based access to the nucleic acid search engine (NASE). + - name: NuXL url: https://abi-services.cs.uni-tuebingen.de/nuxl/ logo: /images/webapp/logo/nuxl.png - description: NuXL is a dedicated software package designed for the analysis of XL-MS (cross-linking mass spectrometry). - - index: 5 + description: Web-based analysis pipeline for XL-MS data. + - name: MHCquant url: https://abi-services.cs.uni-tuebingen.de/mhcquant/ logo: /images/webapp/logo/mhcquant.svg - description: MHCQuant is a web application for analysis of MHC-bound peptides in immunopeptidomics studies. - - index: 6 - url: https://abi-services.cs.uni-tuebingen.de/toppview-lite/ - logo: /images/webapp/logo/toppview-lite.svg - description: TOPPView Lite is a web-based viewer for interactive visualization and exploration of mass spectrometry data. - - index: 7 - logo: /images/webapp/logo/naseweis.png - url: https://abi-services.cs.uni-tuebingen.de/naseweis/ - description: NASEWEIS is a WebApp for the NucleicAcidSearch Engine. It allows for library searching of Oligonucleotides. - - index: 8 - url: https://abi-services.cs.uni-tuebingen.de/streamsage/ - logo: /images/webapp/logo/streamsage.png - description: StreamSage is a web application for performing proteomics database searching in your browser. + description: Web-based analysis pipeline for immunopeptidomics. + - name: pyopenms-viz + url: https://github.com/OpenMS/pyopenms_viz + logo: /images/logo.svg + description: Python-based visualization package for mass spectrometry data directly from pandas dataframes. section5: false @@ -176,6 +261,10 @@ languages: image: OpenMS_transparent_blackFont.png link: / altText: OpenMS + tagline: The open-source framework for mass spectrometry. + sponsor: + text: Sponsor us + link: /about#sponsors donate: text: Donate link: /about#donate @@ -284,8 +373,6 @@ languages: url: /governance - title: Publications url: /publications - - title: Contact - url: /communication - title: Partner with OpenMS url: /about#institutional-partners is_emphasized: true diff --git a/layouts/index.html b/layouts/index.html index 0dce7c8..0f9d891 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,39 +1,79 @@ {{ define "main" }} {{ if .Site.Params.hero }} - {{ partial "hero.html" . }} +
+ {{ partial "hero.html" . }} +
{{ end }} {{ if .Site.Params.panel }} - {{ partial "panel.html" . }} +
+ {{ partial "panel.html" . }} +
{{ end }} {{ if .Content }} - {{ partial "single/content.html" . }} +
+ {{ partial "single/content.html" . }} +
{{ end }} {{ if .Site.Params.keyfeatures }} - {{ partial "keyfeatures.html" . }} +
+ {{ partial "keyfeatures.html" . }} +
{{ end }} - {{partial "webapps.html" . }} - +
+ {{ partial "university-partners.html" (dict "showHeader" true) }} +
+ + {{ partial "webapps.html" . }} + {{ if .Site.Params.heroGroup }} - {{ partial "heroitems.html" . }} +
+ {{ partial "heroitems.html" (dict "Site" .Site "variant" "users") }} +
{{ end }} + +
+ {{ partial "trusted-by.html" . }} +
+ + {{ if .Site.Params.heroGroup }} +
+ {{ partial "heroitems.html" (dict "Site" .Site "variant" "developers") }} +
+ {{ end }} + +
+ {{ partial "hero-sponsors.html" . }} +
+ +
+ {{ partial "contact-area.html" . }} +
- {{ partial "quick-facts.html" . }} + {{/* quick-facts hidden per UX/UI update */}} {{ if .Site.Params.shell }} - {{ partial "shell.html" . }} +
+ {{ partial "shell.html" . }} +
{{ end }} {{ if .Site.Params.tabs }} - {{ partial "tabs.html" . }} +
+ {{ partial "tabs.html" . }} +
{{ end }} {{ if .Site.Params.casestudies }} - {{ partial "casestudies.html" . }} +
+ {{ partial "casestudies.html" . }} +
{{ end }} - {{ partial "tally.html" . }} +
+ {{ partial "tally.html" . }} +
{{ end }} \ No newline at end of file diff --git a/layouts/partials/contact-area.html b/layouts/partials/contact-area.html new file mode 100644 index 0000000..0eb5a71 --- /dev/null +++ b/layouts/partials/contact-area.html @@ -0,0 +1,43 @@ +
+
+
+

Contact

+

Let us build with you

+

+ Tell us about your workflow, integrations, or tooling goals. We will point you to the + fastest next step. +

+

Usually replies within 1-2 business days.

+

+ We can offer paid consulting services. You can also support OpenMS as + Sponsor or Donate. +

+
+
+
+ + Complete the form + + + Contact via email + +
+ + + + Email + webmaster@openms.de + + +
+
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d303e99..be87cb8 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -8,77 +8,107 @@ {{- $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/hero-sponsors.html b/layouts/partials/hero-sponsors.html new file mode 100644 index 0000000..686d7ed --- /dev/null +++ b/layouts/partials/hero-sponsors.html @@ -0,0 +1,38 @@ +{{- $sponsors := .Site.Params.homeSponsors }} +{{- if and $sponsors (index $sponsors "enabled") }} +{{- $label := index $sponsors "label" | default "Supported by" }} +{{- $description := index $sponsors "description" }} +{{- $items := index $sponsors "sponsors" }} +
+
+
+

{{ $label }}

+ {{- with $description }} +

{{ . }}

+ {{- end }} +
+ {{- with $items }} +
    + {{- range . }} +
  • + + {{ .alt | default .name }} + +
    • + {{- end }} +
+ {{- end }} +
+
+{{- end }} diff --git a/layouts/partials/hero-stats.html b/layouts/partials/hero-stats.html index eb67aa1..ea67344 100644 --- a/layouts/partials/hero-stats.html +++ b/layouts/partials/hero-stats.html @@ -1,11 +1,29 @@ {{- $stats := .stats }} {{- $class := .class | default "hero-modern__stats" }} +{{- $below := in $class "hero-modern__stats--below" }} {{- with $stats }} {{- $statCount := len . }}
{{- range $index, $stat := . }} -
-
{{ $stat.label }}
+
+
+ + {{ $stat.label }} +
>{{ $secondaryText }} {{- end }}
- {{ partial "hero-stats.html" (dict "stats" $stats "class" "hero-modern__stats") }}
+ {{ partial "hero-stats.html" (dict "stats" $stats "class" "hero-modern__stats hero-modern__stats--below") }} diff --git a/layouts/partials/university-partners.html b/layouts/partials/university-partners.html new file mode 100644 index 0000000..7f108f7 --- /dev/null +++ b/layouts/partials/university-partners.html @@ -0,0 +1,103 @@ +{{- $showHeader := .showHeader | default true -}} +
+
+ {{- if $showHeader }} +
+

Partners

+

University Partners

+
+ {{- end }} + + + +
+ + University of Tübingen + + + FU Berlin + + + ETH Zürich + + + Wellcome Sanger Institute + + + EMBL-EBI + + + University of Toronto + + + DTU Biosustain + + + ZIB + +
+
+
+ From 8fe3ac2b75691ddfc5f936f95d89cfa1878af8ac Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Sun, 31 May 2026 11:28:36 +0100 Subject: [PATCH 10/20] Polish homepage layout with new sections and unified section styling. Add Trusted by and refined partners, projects, capabilities, and contact blocks; update nav links and keyfeatures spacing so design changes render correctly. Co-authored-by: Cursor --- assets/css/brand-palette.css | 3 + assets/css/contact-area.css | 25 +- assets/css/heroitems.css | 139 +++--- assets/css/keyfeatures-modern.css | 35 +- assets/css/keyfeatures_override.css | 11 +- assets/css/styles_override.css | 536 ++++++++++++++++++++- assets/css/trusted-by.css | 270 +++++++++++ assets/css/typography.css | 5 +- assets/css/university-partners.css | 104 +++- assets/css/webapps.css | 492 +++++++++++++++---- config.yaml | 22 +- layouts/_default/baseof.html | 3 - layouts/index.html | 10 - layouts/partials/contact-area.html | 7 +- layouts/partials/css.html | 21 +- layouts/partials/footer.html | 4 +- layouts/partials/heroitems.html | 112 +++-- layouts/partials/keyfeatures.html | 63 ++- layouts/partials/trusted-by.html | 73 +++ layouts/partials/university-partners.html | 13 +- layouts/partials/webapps-project-card.html | 33 ++ layouts/partials/webapps.html | 65 ++- static/images/logos/immatics.png | Bin 0 -> 20292 bytes 23 files changed, 1732 insertions(+), 314 deletions(-) create mode 100644 assets/css/trusted-by.css create mode 100644 layouts/partials/trusted-by.html create mode 100644 layouts/partials/webapps-project-card.html create mode 100644 static/images/logos/immatics.png diff --git a/assets/css/brand-palette.css b/assets/css/brand-palette.css index 142bdc6..adf98a0 100644 --- a/assets/css/brand-palette.css +++ b/assets/css/brand-palette.css @@ -44,6 +44,9 @@ --openms-blue-rgb: 49, 87, 233; --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; diff --git a/assets/css/contact-area.css b/assets/css/contact-area.css index 472322f..55fc5cd 100644 --- a/assets/css/contact-area.css +++ b/assets/css/contact-area.css @@ -89,10 +89,15 @@ .contact-area__actions { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: 1fr; gap: 0.75rem; align-items: stretch; width: 100%; + padding: 0; + border: none; + border-radius: 0; + background: none; + box-shadow: none; } .contact-area__actions .contact-area__cta { @@ -107,10 +112,11 @@ display: grid; justify-items: start; gap: 0.75rem; - padding: clamp(1rem, 2.2vh, 1.25rem); - border-radius: 0.95rem; - background: rgba(var(--openms-navy-rgb), 0.04); + padding: 0; border: none; + border-radius: 0; + background: none; + box-shadow: none; } .contact-area__line { @@ -122,18 +128,15 @@ grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.65rem; - padding: 0.7rem 0.8rem; - border-radius: 0.65rem; - background: rgba(var(--openms-blue-rgb), 0.025); + padding: 0.7rem 0; border: none; text-decoration: none; - transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; + transition: transform 0.2s ease; } .contact-area__line:hover, .contact-area__line:focus-visible { transform: translateY(-1px); - background: rgba(var(--openms-blue-rgb), 0.05); outline: none; } @@ -161,9 +164,9 @@ place-items: center; width: 1.7rem; height: 1.7rem; - border-radius: 0.5rem; + border-radius: 0; color: rgba(var(--openms-blue-rgb), 0.82); - background: rgba(var(--openms-blue-rgb), 0.08); + background: none; } .contact-area__details a { diff --git a/assets/css/heroitems.css b/assets/css/heroitems.css index 5f30b11..58d6667 100644 --- a/assets/css/heroitems.css +++ b/assets/css/heroitems.css @@ -71,6 +71,9 @@ /* 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; @@ -162,74 +165,93 @@ .openms-steps--users .openms-steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: clamp(0.85rem, 1.8vw, 1.25rem); + gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; } -.openms-steps--users .openms-step { +/* Users — image-forward showcase cards */ +.openms-steps--users .openms-step--showcase { display: flex; flex-direction: column; - align-items: flex-start; - gap: 1rem; + gap: 0; min-height: 100%; - border: none; - border-radius: 0.85rem; + padding: 0; + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: 1rem; background: var(--openms-white); - box-shadow: 0 0.2rem 0.75rem rgba(var(--openms-dark-rgb), 0.06); - padding: clamp(1.15rem, 2.2vw, 1.5rem); - transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; + 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:hover { - transform: translateY(-2px); - box-shadow: 0 0.55rem 1.25rem rgba(var(--openms-blue-rgb), 0.14); +.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__media { - flex: 0 0 auto; - width: clamp(5.6rem, 8vw, 7.2rem); - height: clamp(5.6rem, 8vw, 7.2rem); - min-height: 0; - padding: 0.62rem; +.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-radius: 0.7rem; - background: rgba(var(--openms-blue-rgb), 0.1); + 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__img, -.openms-steps--users .openms-step__img.img-fit { - max-height: clamp(4.2rem, 6vw, 5.3rem); +.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__content { +.openms-steps--users .openms-step--showcase .openms-step__content { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; - padding: 0; - gap: 0.42rem; + 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__title { - font-size: clamp(1.08rem, 1.45vw, 1.26rem); - line-height: 1.22; +.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__subtitle { - font-size: clamp(0.9rem, 1.05vw, 1rem); - line-height: 1.5; - color: rgba(var(--openms-dark-rgb), 0.78); - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; +.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__cta { +.openms-steps--users .openms-step--showcase .openms-step__cta { align-self: flex-start; margin-top: auto; + padding-top: 0.35rem; } @media (min-width: 1440px) { @@ -239,22 +261,12 @@ } .openms-steps--users .openms-steps__grid { - gap: 1.35rem; - } - - .openms-steps--users .openms-step { - min-height: 15.5rem; - padding: 1.4rem; + gap: 1.5rem; } - .openms-steps--users .openms-step__media { - width: 7.5rem; - height: 7.5rem; - } - - .openms-steps--users .openms-step__img, - .openms-steps--users .openms-step__img.img-fit { - max-height: 5.6rem; + .openms-steps--users { + --showcase-media-min-h: 21rem; + --showcase-img-max-h: 17.5rem; } } @@ -607,8 +619,14 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } - .openms-steps--users .openms-step { - padding: 1.1rem; + .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 { @@ -671,13 +689,20 @@ grid-template-columns: 1fr; } - .openms-steps--users .openms-step__subtitle { - -webkit-line-clamp: unset; + .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-step:hover, + .openms-steps--users .openms-step--showcase:hover { transform: none; } diff --git a/assets/css/keyfeatures-modern.css b/assets/css/keyfeatures-modern.css index 6681e3f..85b94d7 100644 --- a/assets/css/keyfeatures-modern.css +++ b/assets/css/keyfeatures-modern.css @@ -4,10 +4,12 @@ --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: clamp(4.5rem, 9vh, 6.5rem) clamp(2rem, 6vw, 3.5rem) - clamp(3rem, 6vh, 4.75rem); + padding-block: var(--kf-section-pad-block); + padding-inline: clamp(2rem, 6vw, 3.5rem); color: var(--openms-white); background: var(--openms-navy); } @@ -16,12 +18,13 @@ width: 100%; max-width: 75rem; margin: 0 auto; + padding-block: clamp(1.25rem, 3vh, 2.25rem); } .keyfeatures-modern__layout { display: grid; grid-template-columns: 1fr; - gap: clamp(1.1rem, 2.4vw, 1.8rem); + gap: var(--kf-layout-gap); align-items: start; } @@ -30,14 +33,15 @@ top: auto; align-self: start; display: grid; - gap: 1rem; + 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.4rem 0 0.55rem; + margin: 0 0 0.85rem; padding: 0.35rem 0.8rem; font-family: var(--openms-font-body); font-size: var(--openms-text-min); @@ -86,8 +90,8 @@ } .keyfeatures-modern__note { - margin: 0 0 clamp(1rem, 2.4vh, 1.6rem); - padding: 1rem 1.1rem; + 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); @@ -112,7 +116,7 @@ .keyfeatures-modern__topics { list-style: none; margin: 0; - padding: clamp(0.6rem, 1.6vh, 1rem) 0 0; + padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.7vw, 1.2rem); @@ -195,9 +199,13 @@ } @media (max-width: 1000px) { + .keyfeatures-modern { + --kf-layout-gap: clamp(2.75rem, 5.5vh, 3.5rem); + } + .keyfeatures-modern__layout { grid-template-columns: 1fr; - gap: 1.1rem; + gap: var(--kf-layout-gap); } .keyfeatures-modern__header { @@ -229,12 +237,13 @@ } .keyfeatures-modern { - padding: clamp(4rem, 8vh, 5rem) clamp(1.25rem, 5vw, 1.85rem) - clamp(2.75rem, 6vh, 3.75rem); + --kf-section-pad-block: clamp(6.5rem, 13vh, 8.5rem); + --kf-layout-gap: clamp(2.25rem, 5vh, 3rem); + padding-inline: clamp(1.25rem, 5vw, 1.85rem); } - .keyfeatures-modern__topics { - padding-block: clamp(0.5rem, 2vh, 1rem); + .keyfeatures-modern__inner { + padding-block: clamp(0.85rem, 2.5vh, 1.5rem); } .keyfeatures-modern__topic-card { diff --git a/assets/css/keyfeatures_override.css b/assets/css/keyfeatures_override.css index 6b23356..11617df 100644 --- a/assets/css/keyfeatures_override.css +++ b/assets/css/keyfeatures_override.css @@ -2,7 +2,14 @@ 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: var(--openms-dark); } @@ -38,7 +45,7 @@ box-shadow: 0 8px 16px 0 rgba(var(--openms-blue-rgb), 0.4); } -.keyfeatures a { +.keyfeatures:not(.keyfeatures-modern) a { color: var(--openms-blue) !important; } diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index 0583a2a..082e330 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -1,13 +1,3 @@ -/* Back to top – colour override to match footer theme */ -#backtotop a { - background-color: var(--openms-blue); - border: 2px solid rgba(var(--openms-white-rgb), 0.25); -} - -#backtotop.visible a:hover { - background-color: var(--openms-purple); -} - .navbar.is-fresh .navbar-item, .navbar.is-fresh .navbar-link, .navbar.is-fresh a.navbar-item.is-secondary, @@ -626,6 +616,10 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { outline: none; } +.back-to-top__icon { + display: block; +} + /* ============================================= FOOTER — RESPONSIVE ============================================= */ @@ -703,9 +697,10 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { margin-top: 0; } -/* Seamless transition: Supported by → What is OpenMS */ +/* Hero → What is OpenMS — section padding handles vertical rhythm */ .landing-section--after-hero { margin-top: 0; + margin-bottom: clamp(2.5rem, 5vw, 4rem); } /* Projects block — full-width navy band (matches hero); spacing from section above */ @@ -717,4 +712,521 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { .landing-section { margin-top: clamp(1.5rem, 4vw, 2.25rem); } -} \ No newline at end of file +} +/* ============================================= + 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; + } +} + +/* Publications page — extends governance layout */ +.publications-page { + margin-top: 0; +} + +.publications-intro p { + max-width: 65ch; +} + +.publications-intro + .publications-toolbar { + margin-top: 0.25rem; + margin-bottom: 0.5rem; +} + +.publications-toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem 1rem; + padding: 0 0 0.75rem; +} + +.publications-toolbar__select { + flex: 1 1 auto; + min-width: min(100%, 12rem); + max-width: 14rem; + min-height: 2.5rem; + padding: 0.4rem 2.25rem 0.4rem 0.875rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; + line-height: 1.2; + color: var(--openms-navy); + background-color: var(--openms-white); + 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; + background-size: 12px 8px; + border: 2px solid rgba(var(--openms-navy-rgb), 0.18); + border-radius: 0.5rem; + cursor: pointer; + appearance: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.publications-toolbar__select:hover { + border-color: rgba(var(--openms-blue-rgb), 0.45); +} + +.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.2); +} + +.publications-toolbar__count { + margin: 0; + flex: 0 0 100%; + font-size: var(--openms-text-min); + font-weight: 500; + color: rgba(var(--openms-navy-rgb), 0.7); +} + +@media (min-width: 768px) { + .publications-toolbar__count { + flex: 0 0 auto; + margin-left: auto; + } +} + +.publications-year h2 { + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 800; + color: var(--openms-navy); + margin: 0 0 1rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid rgba(var(--openms-orange-rgb), 0.45); +} + +.publications-year[hidden], +.publications-year[data-publications-archived] { + display: none; +} + +.publication-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 1.25rem; +} + +.publication-entry { + margin: 0; + padding: 0 0 1.25rem; + border: none; + border-radius: 0; + background: transparent; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.publication-entry:last-child { + padding-bottom: 0; + border-bottom: none; +} + +.publication-entry p { + margin: 0; +} + +.publication-entry p + p { + margin-top: 0.4rem; +} + +.publication-title { + font-family: var(--openms-font-heading); + font-size: var(--openms-body-size-lg); + font-weight: 700; + line-height: 1.35; + color: var(--openms-navy); +} + +.publication-title-link { + color: var(--openms-navy); + text-decoration: none; + transition: color 0.2s ease; +} + +.publication-title-link:hover, +.publication-title-link:focus-visible { + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.publication-meta { + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.publication-journal { + font-style: italic; +} + +.publication-year { + font-weight: 600; + color: var(--openms-navy); +} + +.publication-authors { + font-size: var(--openms-text-min); + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.78); +} + +@media (max-width: 640px) { + .publication-title { + font-size: var(--openms-body-size); + } +} + +/* Publications layout */ +.publications-layout__container { + max-width: min(100%, 52rem); +} + +.publications-layout .governance-hero { + margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); + margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); + width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); + max-width: 100vw; + padding-left: clamp(2rem, 5vw, 3.5rem); + padding-right: clamp(1.25rem, 3vw, 2rem); +} + +.publications-body { + display: grid; + gap: clamp(1.5rem, 3vw, 2.5rem); +} diff --git a/assets/css/trusted-by.css b/assets/css/trusted-by.css new file mode 100644 index 0000000..2789662 --- /dev/null +++ b/assets/css/trusted-by.css @@ -0,0 +1,270 @@ +/* Trusted by — clean logo rail layout */ + +.trusted-by { + padding: clamp(2.5rem, 5vh, 3.5rem) clamp(1.25rem, 4vw, 2.5rem); + background: var(--openms-white); +} + +.trusted-by__inner { + max-width: 75rem; + margin: 0 auto; +} + +.trusted-by__header { + max-width: 52rem; + margin: 0 auto clamp(1.25rem, 3vh, 2rem); + text-align: center; +} + +.trusted-by__eyebrow { + 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; +} + +.trusted-by__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.7rem, 3.2vw, 2.35rem); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.08; + letter-spacing: -0.02em; + color: var(--openms-navy); + text-wrap: balance; +} + +.trusted-by__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; +} + +.trusted-by__subtitle { + margin: 0.7rem auto 0; + max-width: 62ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.58; + color: rgba(var(--openms-dark-rgb), 0.78); + text-wrap: pretty; +} + +.trusted-by__rail { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: clamp(0.55rem, 1.25vw, 0.85rem); + align-items: stretch; +} + +.trusted-by__entry { + margin: 0; + display: flex; + min-width: 0; +} + +.trusted-by__tile--has-logo { + flex-direction: column; + justify-content: center; + gap: 0; + min-height: auto; + padding: 0.35rem 0.5rem; + text-align: center; +} + +.trusted-by__tile { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.6rem; + width: 100%; + min-height: 4.25rem; + padding: 0.6rem 0.75rem; + text-decoration: none; + color: inherit; + border: none; + background: transparent; + box-shadow: none; + transition: opacity 0.2s ease, transform 0.2s ease; +} + +.trusted-by__tile--link { + cursor: pointer; +} + +.trusted-by__tile--link:hover, +.trusted-by__tile--link:focus-visible { + transform: translateY(-1px); + outline: none; +} + +.trusted-by__tile--link:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: 3px; +} + +.trusted-by__tile--link:hover .trusted-by__monogram, +.trusted-by__tile--link:focus-visible .trusted-by__monogram { + background: var(--openms-navy); + color: var(--openms-white); + border-color: rgba(var(--openms-navy-rgb), 0.2); +} + +.trusted-by__mark { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + width: 2.9rem; + height: 2.9rem; + border: none; + background: transparent; +} + +.trusted-by__tile--has-logo .trusted-by__mark { + width: 100%; + height: auto; + min-height: 3rem; + padding: 0.35rem 0.5rem; + background: transparent; + border: none; +} + +.trusted-by__tile--has-logo:has(.trusted-by__logo--large) .trusted-by__mark { + min-height: 11rem; +} + +.trusted-by__tile--has-logo:has(.trusted-by__logo--large) { + padding: 0.5rem 0.75rem; +} + +.trusted-by__logo { + display: block; + max-height: 1.75rem; + max-width: 100%; + width: auto; + height: auto; + object-fit: contain; +} + +.trusted-by__tile--has-logo .trusted-by__logo { + max-height: 3rem; + max-width: min(100%, 10rem); +} + +.trusted-by__tile--has-logo .trusted-by__logo--large { + height: 12rem; + width: 100%; + max-height: none; + max-width: 100%; + object-fit: contain; + object-position: center; +} + +.trusted-by__monogram { + display: grid; + place-items: center; + width: 2rem; + height: 2rem; + border-radius: 0.55rem; + font-family: var(--openms-font-heading); + font-size: 0.85rem; + font-weight: 800; + letter-spacing: -0.01em; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.045); + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; +} + +.trusted-by__entry:nth-child(4n + 1) .trusted-by__monogram { + border-color: rgba(var(--openms-yellow-rgb), 0.45); + background: rgba(var(--openms-yellow-rgb), 0.12); +} + +.trusted-by__entry:nth-child(4n + 2) .trusted-by__monogram { + border-color: rgba(var(--openms-blue-rgb), 0.35); + background: rgba(var(--openms-blue-rgb), 0.1); +} + +.trusted-by__entry:nth-child(4n + 3) .trusted-by__monogram { + border-color: rgba(var(--openms-pink-rgb), 0.35); + background: rgba(var(--openms-pink-rgb), 0.1); +} + +.trusted-by__entry:nth-child(4n) .trusted-by__monogram { + border-color: rgba(var(--openms-orange-rgb), 0.35); + background: rgba(var(--openms-orange-rgb), 0.1); +} + +.trusted-by__name { + flex: 1 1 auto; + min-width: 0; + font-family: var(--openms-font-body); + font-size: clamp(0.78rem, 1vw, 0.88rem); + font-weight: 700; + line-height: 1.25; + color: rgba(var(--openms-dark-rgb), 0.86); + text-wrap: balance; +} + +@media (max-width: 1024px) { + .trusted-by__rail { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 768px) { + .trusted-by__header { + max-width: none; + } + + .trusted-by__rail { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 520px) { + .trusted-by { + padding-inline: 1rem; + } + + .trusted-by__header { + text-align: left; + margin-inline: 0; + } + + .trusted-by__rail { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + .trusted-by__tile--link:hover, + .trusted-by__tile--link:focus-visible { + transform: none; + } +} + +@media (prefers-contrast: more) { + .trusted-by__tile--link:focus-visible { + outline-width: 3px; + } +} diff --git a/assets/css/typography.css b/assets/css/typography.css index 7477982..29e24b8 100644 --- a/assets/css/typography.css +++ b/assets/css/typography.css @@ -33,7 +33,7 @@ button, .subtitle:not(.is-1):not(.is-2):not(.is-3), .navbar-item, .navbar-link, -.news-banner__message { +.news-banner__headline { font-family: var(--openms-font-body); font-weight: var(--openms-body-weight); } @@ -147,9 +147,10 @@ blockquote p { font-size: inherit; } -/* Web minimum — nothing smaller than 11pt (news banner uses compact sizes in news-banner.css) */ +/* 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, diff --git a/assets/css/university-partners.css b/assets/css/university-partners.css index c95bb46..74b7280 100644 --- a/assets/css/university-partners.css +++ b/assets/css/university-partners.css @@ -1,7 +1,7 @@ /* University partners — carousel ticker with modern section heading */ .uni-partners { - padding-block: clamp(2.25rem, 5vh, 3.5rem); + padding-block: clamp(2.25rem, 5vh,3.5rem); padding-inline: 0; background: var(--openms-white); } @@ -13,35 +13,60 @@ } .uni-partners__header { - max-width: 75rem; - margin: 0 auto 1rem; + display: grid; + grid-template-columns: 1fr; + gap: clamp(0.8rem, 2vw, 1.15rem); + max-width: 90rem; + margin: 0 auto clamp(1.75rem, 3.5vh, 2.5rem); padding-inline: clamp(1.25rem, 4vw, 2.5rem); + text-align: center; +} + +.uni-partners__header-main { + min-width: 0; + max-width: 52rem; + margin-inline: auto; } .uni-partners__eyebrow { display: inline-block; - width: fit-content; - margin: 0.4rem 0 0.55rem; - padding: 0.35rem 0.8rem; + 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-yellow); - background: rgba(var(--openms-white-rgb), 0.08); - border: 1px solid rgba(var(--openms-white-rgb), 0.2); + 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; + margin: 0 auto; font-family: var(--openms-font-heading); - font-size: clamp(1.75rem, 3.5vw, 2.5rem); + font-size: clamp(2rem, 4.2vw, 3rem); font-weight: var(--openms-heading-lg-weight); - line-height: 1.1; - letter-spacing: -0.02em; + line-height: 1.02; + letter-spacing: -0.03em; color: var(--openms-navy); + text-wrap: balance; + max-width: 18ch; +} + +.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__marquee { @@ -143,6 +168,43 @@ padding-inline: clamp(1.25rem, 4vw, 2.5rem); } +.uni-partners--static .uni-partners__marquee { + display: none; +} + +.uni-partners--static .uni-partners__static { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.75rem; + max-width: 75rem; + margin: 0 auto; + padding-inline: clamp(1.25rem, 4vw, 2.5rem); +} + +.uni-partners--static .uni-partners__item { + min-width: 0; + height: 5.25rem; + padding: 0.75rem 1rem; + border: none; + border-radius: 0.6rem; + background: rgba(var(--openms-white-rgb), 0.95); +} + +.uni-partners--static .uni-partners__item img { + width: 100%; + max-width: 10rem; + height: 3rem; + max-height: 3rem; + object-fit: contain; + object-position: center; +} + +.uni-partners--static .uni-partners__static .uni-partners__item:nth-last-child(-n+4) img { + max-width: 14.8rem; + height: 4.9rem; + max-height: 4.9rem; +} + @media (prefers-reduced-motion: reduce) { .uni-partners__track { animation: none; @@ -171,11 +233,23 @@ .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__title { - font-size: clamp(1.45rem, 8vw, 1.85rem); + .uni-partners--static .uni-partners__static { + grid-template-columns: 1fr; + } + + .uni-partners--static .uni-partners__item { + height: 4.5rem; } } diff --git a/assets/css/webapps.css b/assets/css/webapps.css index 514dec2..709e77e 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -1,144 +1,434 @@ -.webapps-container { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 30px; +/* Open Source Projects — hero-matched section (navy, glows, glass cards, hover overlay) */ + +.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 shell — mirrors .hero-modern */ +section.webapps-featured { + --webapps-card-w: 9rem; + --webapps-card-h: 6.25rem; + --webapps-logo-w: 5.75rem; + --webapps-logo-h: 3.5rem; + --webapps-card-pad-x: 0.6rem; + --webapps-card-pad-y: 0.55rem; + --webapps-card-title-lines: 2; + --webapps-card-text-lines: 3; + --openms-webapps-focus-ring: 0 0 0 3px var(--openms-navy), + 0 0 0 5px var(--openms-yellow); + + position: relative; + overflow: hidden; + width: 100%; + box-sizing: border-box; + color: var(--openms-white); + background: var(--openms-navy); + padding: clamp(2.75rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem); } -.swiper-wrapper { - box-sizing: border-box; +section.webapps-featured::before, +section.webapps-featured::after { + content: none; } -.swiper-slide { - box-sizing: border-box; - cursor: pointer; +section.webapps-featured::before { + top: -45%; + right: -8%; + width: 36rem; + height: 36rem; + background: radial-gradient( + circle, + rgba(var(--openms-white-rgb), 0.14) 0%, + transparent 70% + ); } +section.webapps-featured::after { + bottom: -35%; + left: -6%; + width: 30rem; + height: 30rem; + background: radial-gradient( + circle, + rgba(var(--openms-purple-rgb), 0.18) 0%, + transparent 70% + ); +} -.swiper-wrapper .swiper-slide { - display: flex; - flex-direction: column; - align-items: center; - height: 60%; - border: 1px solid var(--openms-grey); - border-radius: 25px; - box-shadow: 2px 2px 6px rgba(var(--openms-dark-rgb), 0.1); - transition: height 0.6s ease; +.webapps-featured__inner { + position: relative; + z-index: 1; + max-width: 90rem; + margin: 0 auto; } -.swiper-slide img { - width: 95%; +/* Header — hero typography */ +.webapps-featured__header { + display: grid; + grid-template-columns: 1fr; + gap: clamp(0.8rem, 2vw, 1.15rem); + margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem); } -.swiper-slide p { - margin: 0px; - padding-top: 3px; - margin-left: 13px; - margin-right: 10px; - display: none; - transition: display 2.5s ease; - font-weight: 600; - margin-bottom: 10px; +.webapps-featured__header-main { + min-width: 0; + max-width: 52rem; } -/* slide-0: FLASHApp */ -.swiper-slide.slide-0 img { - height: 230px; - margin-top: 10px; +.webapps-featured__eyebrow { + display: inline-block; + margin: 0 0 0.85rem; + padding: 0.35rem 0.85rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-yellow); + background: rgba(var(--openms-white-rgb), 0.08); + border: 1px solid rgba(var(--openms-white-rgb), 0.18); + border-radius: 999px; } -.swiper-slide.slide-0 p { - margin-top: 20px; + +.webapps-featured__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(2rem, 4.2vw, 3rem); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.02; + letter-spacing: -0.03em; + color: var(--openms-white); + text-wrap: balance; + max-width: 18ch; + text-shadow: 0 0.35rem 1rem rgba(var(--openms-dark-rgb), 0.35); } -/* slide-1: umetaflow */ -.swiper-slide.slide-1 img { - width: 100%; - height: 250px; +.webapps-featured__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; +} + +.webapps-featured__lead { + margin: 0.8rem 0 0; + max-width: none; + font-family: var(--openms-font-body); + font-size: clamp(0.95rem, 1.25vw, 1.08rem); + line-height: 1.65; + color: rgba(var(--openms-white-rgb), 0.95); + text-wrap: pretty; } -.swiper-slide.slide-1 p { - margin-top: 10px; + +/* Grid — staggered layout (one up, one down) */ +.webapps-featured .webapps-featured__grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-auto-rows: auto; + align-items: start; + justify-items: center; + gap: clamp(0.85rem, 1.8vw, 1.25rem); } -/* slide-2: NuXL */ -.swiper-slide.slide-2 img { - height: 150px; - margin-top: 60px; +.webapps-featured__item { + display: flex; + justify-content: center; + margin: 0; + min-width: 0; + width: 100%; } -.swiper-slide.slide-2 p { - margin-top: 50px; + +.webapps-featured__item:nth-child(odd) { + transform: translateY(clamp(-0.65rem, -1.2vw, -0.35rem)); } -/* slide-3: MHCQuant */ -.swiper-slide.slide-3 img { - height: 180px; - margin-top: 40px; +.webapps-featured__item:nth-child(even) { + transform: translateY(clamp(0.65rem, 1.2vw, 0.35rem)); } -.swiper-slide.slide-3 p { - margin-top: 40px; + +/* Cards: uniform compact tiles, text overlay on hover */ +.webapps-project-card { + display: block; + width: var(--webapps-card-w); + max-width: 100%; + margin: 0; } -/* slide-4: TOPPView-lite */ -.swiper-slide.slide-4 img { - height: 180px; - margin-top: 40px; +.webapps-project-card__surface { + position: relative; + display: block; + width: 100%; + overflow: hidden; + border-radius: 0.5rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + background: var(--openms-white); + text-decoration: none; + color: inherit; + transition: border-color 0.2s ease, box-shadow 0.2s ease; } -.swiper-slide.slide-4 p { - margin-top: 40px; + +.webapps-project-card__surface:hover, +.webapps-project-card__surface:focus-visible { + border-color: rgba(var(--openms-navy-rgb), 0.12); } -/* slide-5: NASEWEIS */ -.swiper-slide.slide-5 img { - height: 100px; - margin-top: 80px; +.webapps-project-card__surface:focus-visible { + outline: none; + box-shadow: var(--openms-hero-focus-ring, var(--openms-webapps-focus-ring)); } -.swiper-slide.slide-5 p { - margin-top: 80px; + +.webapps-project-card__media { + position: relative; + z-index: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: var(--webapps-card-h); + min-height: var(--webapps-card-h); + box-sizing: border-box; + overflow: hidden; + padding: var(--webapps-card-pad-y) var(--webapps-card-pad-x); + background: var(--openms-white); } -/* slide-6: StreamSage */ -.swiper-slide.slide-6 img { - width: 100%; - height: 250px; +.webapps-project-card__media img { + display: block; + width: var(--webapps-logo-w); + height: var(--webapps-logo-h); + max-width: var(--webapps-logo-w); + max-height: var(--webapps-logo-h); + flex-shrink: 0; + box-sizing: border-box; + object-fit: contain; + object-position: center; +} + +/* Keep image clear; show stronger panel only on hover/focus */ +.webapps-project-card__overlay { + position: absolute; + inset: 0; + z-index: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 0.35rem; + padding: 0.75rem; + background: transparent; + pointer-events: none; + transition: background 0.22s ease; +} + +.webapps-project-card__surface:hover .webapps-project-card__overlay, +.webapps-project-card__surface:focus-visible .webapps-project-card__overlay { + background: transparent; +} + +.webapps-project-card__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: 0.95rem; + font-weight: 700; + line-height: 1.3; + color: var(--openms-white); + letter-spacing: -0.01em; + text-shadow: 0 1px 2px rgba(var(--openms-dark-rgb), 0.45); + display: -webkit-box; + -webkit-line-clamp: var(--webapps-card-title-lines); + -webkit-box-orient: vertical; + overflow: hidden; + width: fit-content; + max-width: 100%; + padding: 0.25rem 0.45rem; + border-radius: 0.35rem; + background: rgba(var(--openms-navy-rgb), 0.78); +} + +.webapps-project-card__text { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.5; + color: var(--openms-navy); + text-shadow: none; + display: -webkit-box; + -webkit-line-clamp: var(--webapps-card-text-lines); + -webkit-box-orient: vertical; + overflow: hidden; + opacity: 0; + max-height: 0; + width: fit-content; + max-width: 100%; + padding: 0.2rem 0.45rem; + border-radius: 0.35rem; + background: rgba(var(--openms-white-rgb), 0.95); + transition: opacity 0.22s ease, max-height 0.22s ease; +} + +.webapps-project-card__surface:hover .webapps-project-card__text, +.webapps-project-card__surface:focus-visible .webapps-project-card__text { + opacity: 1; + max-height: 8rem; +} + +.webapps-project-card__text:empty { + display: none; +} + +.webapps-project-card__cta { + margin-top: 0.15rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.3; + color: var(--openms-navy); + text-shadow: none; + opacity: 0; + max-height: 0; + overflow: hidden; + width: fit-content; + max-width: 100%; + padding: 0.2rem 0.45rem; + border-radius: 0.35rem; + background: rgba(var(--openms-white-rgb), 0.95); + transition: opacity 0.22s ease, max-height 0.22s ease; } -.swiper-slide.slide-6 p { - margin-top: 10px; + +.webapps-project-card__surface:hover .webapps-project-card__cta, +.webapps-project-card__surface:focus-visible .webapps-project-card__cta { + opacity: 1; + max-height: 2rem; +} + +.webapps-featured__footer { + margin-top: clamp(1.75rem, 3.5vh, 2.5rem); + display: flex; + justify-content: center; +} + +.webapps-featured__show-all { + min-width: min(100%, 16rem); +} + +.webapps-featured__show-all:focus { + outline: none; } -.swiper-button-prev, -.swiper-button-next { - color: var(--openms-blue); - position: absolute; - top: 40%; +.webapps-featured__show-all:focus-visible { + outline: none; + box-shadow: var(--openms-hero-focus-ring, var(--openms-webapps-focus-ring)); } -@media (max-width: 1349px) { - .swiper { - width: 1000px; - } +@media (hover: none) { + .webapps-project-card__overlay { + background: transparent; + } + + .webapps-project-card__text, + .webapps-project-card__cta { + opacity: 1; + max-height: 8rem; + } + + .webapps-project-card__title { + background: rgba(var(--openms-navy-rgb), 0.92); + } + + .webapps-project-card__surface:active .webapps-project-card__overlay { + background: transparent; + } } -@media (max-width: 999px) { - .swiper { - width: 700px; - } +@media (max-width: 991px) { + section.webapps-featured { + --webapps-card-w: 8rem; + --webapps-card-h: 5.5rem; + --webapps-logo-w: 5.1rem; + --webapps-logo-h: 3.1rem; + } + + .webapps-featured .webapps-featured__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(0.65rem, 1.8vw, 0.9rem); + } + + .webapps-featured__item:nth-child(odd), + .webapps-featured__item:nth-child(even) { + transform: translateY(0); + } } -@media (max-width: 699px) { - .swiper { - width: 350px; - } - - .swiper-slide p { - font-size: 15px; - } +@media (max-width: 768px) { + .webapps-featured__header { + gap: 0.75rem; + } -} \ No newline at end of file + .webapps-featured__show-all { + width: 100%; + max-width: none; + } +} + +@media (max-width: 520px) { + section.webapps-featured { + --webapps-card-w: 7.25rem; + --webapps-card-h: 5rem; + --webapps-logo-w: 4.6rem; + --webapps-logo-h: 2.85rem; + --webapps-card-pad-x: 0.5rem; + --webapps-card-pad-y: 0.45rem; + } + + .webapps-featured .webapps-featured__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .webapps-project-card__cta { + align-self: stretch; + width: 100%; + } +} + +@media (prefers-reduced-motion: reduce) { + .webapps-project-card__overlay { + transition-duration: 0.01ms; + } + + .webapps-featured__show-all:hover, + .webapps-featured__show-all:focus-visible { + transform: none; + } +} + +@media (prefers-contrast: more) { + section.webapps-featured { + border-top: 2px solid var(--openms-white); + border-bottom: 2px solid var(--openms-white); + } + + .webapps-project-card__surface { + border-color: var(--openms-white); + } + + .webapps-project-card__overlay { + background: rgba(var(--openms-navy-rgb), 0.96); + } + + .webapps-project-card__text, + .webapps-project-card__cta { + opacity: 1; + max-height: none; + } +} diff --git a/config.yaml b/config.yaml index d7243bf..a5c38f6 100644 --- a/config.yaml +++ b/config.yaml @@ -73,17 +73,18 @@ languages: linkLabel: Visit website trustedBy: - name: Immatics - abbr: I + logo: /images/logos/immatics.png url: https://immatics.com/ - name: Korean team abbr: KR # url: https://example.com - name: University of Toronto - abbr: UofT - # logo: /images/logos/toronto.jpeg + logo: /images/logos/toronto.jpeg + logoSize: large + url: http://www.moleculargenetics.utoronto.ca/faculty/2017/7/19/hannes-rost - name: University of Tübingen - abbr: UT - # logo: /images/logos/logo-uni-tuebingen.png + logo: /images/logos/logo-uni-tuebingen.png + url: https://kohlbacherlab.org/ navbarlogo: image: OpenMS_transparent_blackFont.png link: / @@ -295,6 +296,8 @@ languages: link: /code-of-conduct - text: Contribute link: /contribute + - text: OpenMS Fellowship + link: /news/fellowship2024/ - text: Core Developers link: /core_developers column3: @@ -363,6 +366,8 @@ languages: url: /news - title: Getting Involved url: /contribute + - title: OpenMS Fellowship + url: /news/fellowship2024/ - title: Annual Developer Meeting url: /news/ - title: About @@ -373,6 +378,8 @@ languages: url: /governance - title: Publications url: /publications + - title: Contact + url: /#contact - title: Partner with OpenMS url: /about#institutional-partners is_emphasized: true @@ -383,6 +390,11 @@ languages: url: /help - title: Sponsor Us url: /about#sponsors + - title: Sponsor us + shortTitle: Sponsor + url: /about#sponsors + button: true + buttonVariant: sponsor - title: Donate url: /about#donate button: true diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 1e2ee50..ae22ccc 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -49,9 +49,6 @@ {{ block "main" . }} {{ end }} - -
- {{ if .Site.Params.footer }} {{ partial "footer.html" . }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html index 0f9d891..fa9127a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -39,16 +39,6 @@ {{ partial "trusted-by.html" . }} - {{ if .Site.Params.heroGroup }} -
- {{ partial "heroitems.html" (dict "Site" .Site "variant" "developers") }} -
- {{ end }} - -
- {{ partial "hero-sponsors.html" . }} -
-
{{ partial "contact-area.html" . }}
diff --git a/layouts/partials/contact-area.html b/layouts/partials/contact-area.html index 0eb5a71..86d513b 100644 --- a/layouts/partials/contact-area.html +++ b/layouts/partials/contact-area.html @@ -1,4 +1,4 @@ -
+

Contact

@@ -21,10 +21,7 @@

Let us build with you - Complete the form - - - Contact via email + Contact us

diff --git a/layouts/partials/css.html b/layouts/partials/css.html index dc0d2d4..a5020cd 100644 --- a/layouts/partials/css.html +++ b/layouts/partials/css.html @@ -36,12 +36,11 @@ {{- $themeCssFiles := resources.Match "theme-css/*.css" -}} {{- $userCssFiles := resources.Match "css/*.css" -}} -{{- $cssFiles := $themeCssFiles | append $userCssFiles }} - -{{- range $cssFiles -}} - -{{- $targetFile := printf "css/%s.css" . -}} +{{- range $themeCssFiles -}} +{{- $cssFileName := path.Base .Name -}} +{{- if ne $cssFileName "keyfeatures.css" -}} +{{- $targetFile := printf "css/%s" $cssFileName -}} {{ if $inServerMode -}} {{ $custom_style := . | resources.ExecuteAsTemplate $targetFile $page -}} @@ -49,5 +48,17 @@ {{ $custom_style := . | resources.ExecuteAsTemplate $targetFile $page | minify | fingerprint -}} {{- end -}} +{{- end -}} +{{- end -}} +{{- range $userCssFiles -}} +{{- $cssFileName := path.Base .Name -}} +{{- $targetFile := printf "css/%s" $cssFileName -}} +{{ if $inServerMode -}} +{{ $custom_style := . | resources.ExecuteAsTemplate $targetFile $page -}} + +{{ else }} +{{ $custom_style := . | resources.ExecuteAsTemplate $targetFile $page | minify | fingerprint -}} + +{{- end -}} {{- end -}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index be87cb8..157690e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -108,7 +108,7 @@

{{ .heading }}

diff --git a/layouts/partials/heroitems.html b/layouts/partials/heroitems.html index 51663a4..d50e89a 100644 --- a/layouts/partials/heroitems.html +++ b/layouts/partials/heroitems.html @@ -1,48 +1,76 @@ -{{- $heroGroup := .Site.Params.heroGroup }} +{{- $site := .Site -}} +{{- $filterVariant := .variant -}} +{{- $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 }} -
- -
-
- {{- if and (not .leftAlign) (not .terminal) }} -
-
- Description -
+{{- $eyebrow := .eyebrow }} +{{- $titleHighlight := .titleHighlight }} +{{- $subtitle := .subtitle }} +{{- $variant := .variant | default "default" }} +
+
+
+ {{- 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 }} +
  • +
    + + + + +
    + {{- with .tag }} + {{ . }} + {{- end }} +

    {{ .title }}

    + {{- with .subtitle }} +

    {{ . }}

    + {{- end }} + {{- if and .buttonText .buttonLink }} + + {{ .buttonText }} + + {{- end }} -
    -
-
+
+ + + {{- end }} + +
+ {{- end }} -
-{{- end }} \ No newline at end of file diff --git a/layouts/partials/keyfeatures.html b/layouts/partials/keyfeatures.html index 2913d13..0f21ff4 100644 --- a/layouts/partials/keyfeatures.html +++ b/layouts/partials/keyfeatures.html @@ -1,13 +1,60 @@ {{- $keyfeatures := .Site.Params.keyfeatures }} {{- $title := index $keyfeatures "title" }} -{{- $subtitle := index $keyfeatures "subtitle" }} +{{- $eyebrow := index $keyfeatures "eyebrow" }} +{{- $description := index $keyfeatures "description" | default (index $keyfeatures "subtitle") }} +{{- $note := index $keyfeatures "note" }} {{- $features := index $keyfeatures "features" }} -
-
-

{{ $title }}

-

{{ $subtitle }}

-
- +
+
+
+
+
+ {{- 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 +
+
diff --git a/layouts/partials/trusted-by.html b/layouts/partials/trusted-by.html new file mode 100644 index 0000000..4fe017f --- /dev/null +++ b/layouts/partials/trusted-by.html @@ -0,0 +1,73 @@ +{{- $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 "" -}} +
+
+
+

{{ $eyebrow }}

+

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

+ {{- with $subtitle }} +

{{ . }}

+ {{- end }} +
+ + +
+
+{{- end -}} diff --git a/layouts/partials/university-partners.html b/layouts/partials/university-partners.html index 7f108f7..41d06a8 100644 --- a/layouts/partials/university-partners.html +++ b/layouts/partials/university-partners.html @@ -1,6 +1,7 @@ {{- $showHeader := .showHeader | default true -}} +{{- $staticOnly := .staticOnly | default false -}}
{{- if $showHeader }}
-

Partners

-

University Partners

+
+

Partners

+

+ University Partners +

+
{{- end }} + {{- if not $staticOnly }} + {{- end }}
diff --git a/layouts/partials/webapps-project-card.html b/layouts/partials/webapps-project-card.html new file mode 100644 index 0000000..4edf912 --- /dev/null +++ b/layouts/partials/webapps-project-card.html @@ -0,0 +1,33 @@ +{{- $project := .project }} +{{- $ctaText := .ctaText | default "View project" }} +{{- $url := $project.url }} +{{- $isExternal := in $url "://" }} +{{- $ariaLabel := printf "%s — %s" $project.name $ctaText }} +{{- if $isExternal }} + {{- $ariaLabel = printf "%s (opens in new tab)" $ariaLabel }} +{{- end }} + diff --git a/layouts/partials/webapps.html b/layouts/partials/webapps.html index d87e4e2..18f7c8f 100644 --- a/layouts/partials/webapps.html +++ b/layouts/partials/webapps.html @@ -1,22 +1,51 @@ +{{- $section := .Site.Params.webappsSection }} {{- $webapps := .Site.Params.webapps }} +{{- if $webapps }} +{{- $eyebrow := index $section "eyebrow" }} +{{- $title := index $section "title" | default "Our Open Source Projects" }} +{{- $titleHighlight := index $section "titleHighlight" }} +{{- $description := index $section "description" }} +{{- $ctaText := index $section "ctaText" | default "View project" }} +{{- $showAll := index $section "showAll" }} +{{- $cardCtx := dict "ctaText" $ctaText }} +
+
+
+
+
+ {{- with $eyebrow }} +

{{ . }}

+ {{- end }} +

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

+ {{- with $description }} +

{{ . }}

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

New: WebApps

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

{{ $webapp.description | safeHTML}}

-
- {{- end}} +
    + {{- range $webapps }} +
  • + {{ partial "webapps-project-card.html" (merge $cardCtx (dict "project" .)) }} +
    • + {{- end }} +
-
- -
-
+ {{- with $showAll }} +
+ {{ .text }}
- -
+ {{- end }} +
+
+
+{{- end }} diff --git a/static/images/logos/immatics.png b/static/images/logos/immatics.png new file mode 100644 index 0000000000000000000000000000000000000000..ed2295d4e958ecf8a4c4cb0ceb25cf21b4d34e29 GIT binary patch literal 20292 zcmdRVgk5|UC10!x=l_b!dJAlPMAMkU-T2@UK0;%|b|Hlj)0=dQiQeIwDSzew&^Ocj;OM4guq7L97Pi;nQcNLvVe}97bvxKRO5-2Pwl%A4|@m zeP8^}Cs@DxBZrfd(k})BFMaiDRWG|JnEl^dJW&v+z5Q%pC*{uzOhE?7V;QV18JZth zWGy$UTS#jm#EV#%vTW~exR~-U29n2MC@|b552(tbj1Md^eUOjio<%AcBcqKp9cgIj$vB*7tFBzLsJ+!*A$Xb~a$F*K`K*z%;BwDEW>@^VU; zcVxD+wDM^SL$|W6ei-~-%%5}dK#kn9C(v?nf->fe%nn@1WzLMrwtl8=<4O;Ik^lldkoV^PfQFPJZ7 zreo;7(APyM#pZPxkmEdl%&(~$kKaRoCuI2(JX<$g_;cYiT+Q@+sWF`~HrrdjNYxbW zKJ^a|{D8P|iBY9T@+j(Mr4HTuf&4*wEP8$iCn(z@ivK;OzbY;39V8}_3Q05i{!s{3 zXOvlPg?_Qv1nqVNVaKa-b9?^kTRtQ{w|%h1-}?sLUv_h@7Bw-HP=CkyO=t0i^8;r+ zXR=zVueaw(_M?b9jt+W%!p;=m5c}atzt3c3Ba6CO8muJ8VaA>PaY#{ArB=mLmihLt zck17qKLyl=>MKhqNNCWqG_gEWvSJoyf6L71z_|M$ooSA#ks+>I(USO;1XOii&XF~f zap6Jpvn&pMjvH(T?PuSYX%>CKy4n(;b4{i zT29>SQHh7x`tby+6}t0g>i6Bdxhg3tk-eY2I*-nds5hePw(4FPZX4w|64WTvG&*X% zHhTTuC+Gr;*q1otN!<6~yaMaO4cS3!;|XJ?GNQ6cd+U>@C+tq&W(FI+`3!|EldWm* zx-RGqilA!7U-t~oJB2K;`&atMTnS&%V7$PX4OkB-kon${@YYxMOBS~5xGZsCf8gU* zNk(TS)2@@4h9kla{EgQkfkOd9yV<90QSI;$U;6hqiSf&B`cs;bJtG-z4yZTn4uoTu zF*P#vGVLoQD=2^R{(R>%*{9UcCf_~3$A4F{C^6UTG>#a3NA}JAyT!`qmDJ_DyXRc9 zbOWZXSX1R4+2quq;L^N~=q6WtTz9}G# z1yWYv+Hps$B4VdX8Lu+|Bxay^yKU*aa7w?-o9xEe_Sl!{2PZhuXwhbchL_F>g5w5k*pLsXU zHYHm7axb?~jb6o*<*rJJ3g^=Wr*+4svxI)V1QXxskCm|UzHIwJ-9Fu=iS3!$ntN<| zJcGRSGjxbXS6quH-R~2{6L-F9n&~~Oi7Zz^sJx&uL>a*}tE#qq-Jkwaiq=!}DY4qk zot|v)YAD|Nis(I_1v=m7DE; zOMaVg-(mUozwhtoPT_`?I2V0!KQwJ??OpKnAD!#8FLKJONuA-#nb+qwjFn#lMN7`%t*PjaffxGXG zEsb{SSDg!7Tl}(Ca4+b^aPHxVhtY=B^NJhoQDum{S&q0!7}aYm%V?l*-W}=s6T7ti zY|?37sg|*^yW#f_-Sd)-8dt}`S*Yt>-Q!@B*7eNO2l zzaPITkALpvMQLREVVwpaUF35zxo@oAsSIYlV;(`(YJMm`iooAXvWQG3z#a0K;5$r2_ zz*Zd#3PFZd60zeW$K9bCRqlgV70)lyCiP_`l&KduA0$V0Bb@RpzmR=xpJyEYsB%E$ zllfFUkqaLJIX?WTNn_Q|4m}YHhnFAbP8l%2Fn^kE?i6eDJr0He3Fw?p9Ia+|^-gXa zvcCDrIJ)uaCs_SQp%ad94+1C!1Y)!3$HAQpGx>pxs!@t)e3}U>cemZ~Ik(qCa6ur> z^8<1(#Cw~DtT!Fjs4p_4RP;C}r%sPibe2#EWHIWqL*>XejDE!WrFu-Gd}a=#(2109 zH6w^vbkXg$5eEqB^^w}=omB5j+a1PbdomDhd2bxQTkI*NA)qF(x-v=*bNiVRkiPb{FA$ zvcl{zT@c&(GCA;o7AAaGR#+S+OsXc_kg!q=8bwD)Pa&#(ufp=EWS%yRpgRr`qLHk5Cm2VhoHyU&)rSD0}C=Sw#Q>p&<|7e)1p@ zFaW#VEs5dMQ;*~9bK*&{cUTu8Qmd{WU!QaYY=Di$v)pb*D=5?6i8E|d^hSgG)I;$( z+kQt_qxdcn)Lq*B z^+R5F>B|tW8UsKg97<#Bf5yw`c9QQYCy8(Tk{aEyuo>Lp?C>&`7D-P36Q-N=W>Lu?!ja#ewcrC)> zkBR^S5mrpSA2h*9a6n1|JGO7k-bh%E(6S zjumuUsWwjZJ%Vx2w2$dO1U30($ss!}t1sho+2gFf(kw+2i?1J=FVlU0f<_$^F3@|k zXXjbZv>#RPOQ(rJKNON$0&Rnq@lbV5tJBdjIpq}Jl24L?(2PXyJD}mld_V)y*-kSm zr*2YCjQAGVQD?6jsi3F(()TJ*z$f#)qJi!hx0g6IKZ_B1*;(eGA4CQ!5>Jf#DC1MN z!VJ-_gE<#`aFO9b0X@-U(KjlC*;`x2I=Z8$N<~j)S4bs8Sl5HL*-hVHgAZIN28J!E zS_B%p68e-lh6O+mmW2m{%iAZ-eG|YzOx^AfK=dM}Kv$42pS(r_qfmTN*Jssj86Ruj z4Pw@e5a?y(OhhHnP$7%!wzO^tP-=j}w2g-nL6Lo>(C;5PgrObk8;ojj=yI7PxcF|} zGO%i=qf~*GL}C=Pd!jX;#flOC7e38b)GaV47Rl#HZh;+pHyd1BFf^g?bT|jH5}|Hv z?--IDnbyvL31W&UdSM0owysM#a_5CUe@I^OL4iXGS8T9RG$_L{y{f)8#wyM!F2y_V zc&*U$nBFwDX`u@d=_?GQO317#d_ei|ZAEQBuNFx3qugU&7(DD&B2;X1jG~COS7a;Q zs^tuuALNv;HRlaG^4s&Wz6nl~VM;TGCY$DmF@V5KbD=QZG}yfeGewpD7ddg!@W#bx zO_k>$#^L!dQ&4fT?}<=u(O7R9E9Ea*xw8eG>|wWzNfyG;_G(x6qT%xI`AWQ{*Y8|R z+K};lqisGD87F%GzZat#3w=@%4oGl;2A-X6f7rH9_05Qv2#~dEHt{>#{mqN;jO+J1 zukQJ%6tiYq127$RRPKrrR$)U@SaPDoCz(`7Bf-s5d6AA+X*JLg)Fh>)^>G?yThsYQ zoPY|IxrwC}ZW3o(5y97Q!18HJo>FW+-_YKgixtcpJJK8>%;1L+OjP%@JpyGK&_T#oGp%57+FvxPdl4<`ya z8U~ZC>y*$N?-`&W@a{r{3PBO64WTfABs^|8qDU(1r9v)AJ18q29?bmOD#|t*Y=Z?F zB=1`5%wYx=%ga^hRA-+3oz{hVegx;cSH%In^83rLM2>WYcP%G!K|Uq_62}2;V+2pj zO2oxO$3>Sxd2>BXfsV%jw&Vr!a6IzaEM&`Ed)Ypplp(&0u!z}-57Lu#n2Lt`7(T(m z>vE!=Syfj3(Wdu~s6``CJ>lckBSK5sn%#^;_TIfT@+D#j4pPYdcxnLpD+GtM6K-?cp*_mVdjcM!($LC3~mrZqhl1oAxQlaFps3OmjlY$Qd3|AVF{m2}i* z6NqNL*F9-Hh~k1%AA%il4Tg+O3Hz8G*^|I@pGyv>>`*Mm=y!QHaHY3;5Bm zz3nhtcmCa zSS_zKckwuS6+{)moxP*wCPSl_$$vO`d)^fC7u0QlDE?#Sh!5dJzm&Jr*qz^javtO$ z6D;b4`c_jq@zt^zUD9~8Y%1d5ecBFn0nPTzf2#x4zmB@xDoJ+x2><>i%=h`xDD6@2 zO((v9QcyyRw_GT0Lzx{jESv+9&^K6J;5J`dv*=Ld?}`_y(P%QX%3d_R4o7wjJWtDs z!h|AQ*deqmU~uabj+}jF?;vBaY0SIbff$;(Ha6xXt%aT&{k`G&5th%bGB$}7)Y!dshgz1D0$(&^8T{~m_rNSO|CAFM@9OZ(Hn|H&eS^8<%9}Yjuo8( zrV)}fR*&_wu4CTMS|2X}o%V34K4_aiJ=&M{pl0HQhhTuz2XNY_vebU;Myx7h82(z@ z0aOclw_W5fm4L!bOTXKT$*1yxdlghinkD@jO~?^!N&7x~!&3|dxLZN!kPaRXno9#> zy?2;S&7qXwrVE);Ny8raNkOzo2-3bt38R2q`wPMH7X_6L9(>}2CP(JbfS)PN3+P?? z;a3@C5m$RrA0}i2RGf?gz{bzRD=Ydgtm^)zyZ#fVd^3%2Po?_6169D)hT53V?<>X9 zOq0Jy%8|v^8x5G`BJ1bBPw8ozCO`d_9>sA4Ei1q}`ett89+mKbF_CIo$&%)3{h#m4 zTs8VMEjl1aG0F%1$m)Kp*WQ!aqBKLPn+JI#0h*vx7;?%}trJk|os|Qu{Xi_owqE{S zf@3iah&ldl<~hCa6#_XUBAYvZBv#EYGU%NxE9P+e?DDYP$-yGcA!9$Ca;bXXbnf@P zCw}4#cfrB=42$c~87t(E*sTn9B-4&h$@%)30KRi1Xq6Hy&u>OkSSNBLL3cX9H9N^W zvdfEX~ zCY&|zp#GMy$S%1`gJNpsIxsuPq+2>%D3iw7%$CLE=M^07`1LMN`s(sCEB+2MXqmq{ z*pbUz--fF{-9of5g7R@T{?uhN!&Qdj=#AWPEmT9a+??kIsO4hr!nba;rI7OqFMQ(D zNR6KchVGEwa1!eTDBcfutHu-?cYXcYe-^6N6c6&qwFS)1f&5uuihoOBQ6d0Kz|2Gvwf<%U zWGDudpmT=6%naxm_9OKQla&WqHqEdkz<3Yh3B-ZiL8%t?-;(zNFo2y$t%w)xZX{Ha z`-@Dd(ne^>LIxDVZVd&2h=u|LQuRJaiB>$y?Mi1Sx}C)dN>o&y;*HY*J;p<9!m5(s z(bSb=tXkf)C5$LWknYMaeXPF#-yxNWpZX@2HITN`$BdZ3ln;c=;)e;BS=ZZEE>iA# zR>y?h;Oo71YnnsNCjR8ANA+XvK)~d1b6&H zm>MYm)5`dI6A+d6M9?2q-s$1;LUG{pg@RJ%OA+vi=gx%m{Q_LZw4W>}DO1duXeyZj z96S|JZAlg~$t9I$aE!055K~I@^AvBGF5dfgUDTc9q_y=cEt*=idBm+gNXgf;!UzaM z+hq4wYY$={X`dq;tN;VR^(KP0x4vy;<&b0)9YIKv2F_0sD1c8p!rSE2$VC8#NRXk> z!_-6(N(ce^r0vB-?ttR+$@EWZj(dw~lRtWi-ntk_VDO*z3E1d^1Y~{mmI;7XoIjjT zYhQBMm>0kCIwuq}qj&Y@DfRHX9bi?T6s1u(U>IvdV$#8h%hSHXPJsBt;KXG1_0x*p z_YYd={(8Lk0cG#3HBy=wvb5F#*s+xl*NWE%3^y1UBgtrn8^abm5b609hA^|^YH4Nv zKfm@%pU9bkx|HDDZ^nJlqyY0sdOUBzm)lUn_py8-oUpCz>cMRXNu$#!Fdl$pyK^IN z2)??%$`nnrXO}R~WAY>o_Fx~BwZ2~5ViC27;3a+D#m2#AR2t&2Eb%Y6feu!DpZvlM zN}oC=C&QXxzw4~BYjqUd*7~(4E5n9GaQf%LbTO(RmOL-B;~0y98YC-)v|2w}=;})nq2T(n z)`x-2!wg}vB%oMGLON^02$8&F@}?g&`31*XoqLmBq8-u4n}>Vv+^9rSx}c8^E4c0U zzN|)vV|v*md3Kou$sG6HE>Ev$?&T7Ads+jay__d}`E zoD#r0MTNgek?d0nUEu}Rii}BJ;lxXa)J3Ksc%<^%*yXGDj8@7~UeBEqKl zldxrI$+Vlm8*^)gFTUjVIriA&hPst=VL94yp!$v4(KE`BLsND_1n~1f$Id5L+8;_v zSurZ+kkrqjH-%~Xb+h?7c#sVc9+S!6+F0;U^TjLbI-?2MbST1UuVn!F!KwHgXU2TU zZ9R`^8ijYy5Zp0b;-Qqv$t;OqIfdnx0^LAf7})MyPzm?R@pz>I6RI%D!izxS=H;!7Pz!U|ZENQNO0@_s2OqLK*P{Vft{ zgXo*ipo*sQ%I>@UWOtkr85jbKbJ8=@`wW68=m{7T=k|qugyGx5SNifj;u`U0+8FRa zL9vd~nti$Rin6r?iI*1-71!|MJ}kopWs_89oLnXHkRk4nNsc_SnN;YKRE|*Wm2_+> zI`Jq&@~g+*pfjvG9%>a{exislgF^#FP->v0MdP1%Bh5~##m2VG0OCS)l)>DR;cXLri2;unVfLHlPQp|RTM6IJV4D|_5!N&SO~iL1I! zYsZ*YReX=R*Bm{B;wPzM1WB)40!kBCTQL|$(YmP5>RrmN5;q5ujhC;Q?9jxI?Ca`- zweQf7euTzQQm^uvVi&p)ho@YVu6lm|ufEYfJCc+rs}QeN-YarWjL?yaO?RmmcAt=$aX+r!$v}xd z(NY{?Z9su>BKwzl`svR&xpXn?f++dGZ#|_(yj_oUbGr8`r!$~x)peV$=jap4E2Vo( zjo(dq)J}p$#}QtOk*>BnFA-r}T2|O7I<0?NP&lksf_gBiom6W6MksIMyDI`?9>nt^ zQ|yUR|CGq1?E2-DvhP#36uaqniD!Q?Gal=t?7UoQUn|eg>ps!Ux;C&cae_~#`NT6= zXA~lGe`{fB(>egd;2ujITXA1lq zP=Fp_CWu;(hwcqo(xluGH0S^Z6g~Ynpv>(VfPr5Sr5+D01u&!<2oHux3wZ>X{~J(c z_zcXq#_c{$UK0WUMYE4=38P#+Bl9OMML=^#^p3M6p!{y2_~W5Gf+&nH8az*hQ4TXr zX<%KZMH@^a(S-@|MNxjYqKeWI>U2?Bf|-KbDS0exG@lUJ{}Q1+CEUQJ=E3J){Al!w|kFDy8W#bBOqt~J||@^P&d^CopmVg zqET{4l6(>q-Isy#zJV&YPc5;oy7oYt#(nxIcHT}2l&&C({2NL@5VaVO5}+VJ+y#Bg z*xiS^(|iq?45^U%SK;eiq zy@C4p4OM;vWsd$9LF3a4egojM3$%CWu@?-qH(RzBOxf`PDJ*vMZml#sk&8157NvR1 z(17P6j469vH<_v~xHlRKmGzKa-cd-|vHgaE-auV|_!j-Ga{6Gs#S9IiE*^Zc9?+g0 z)4&}%5Z}SXSxTKL{Enp;;{Xvu7a|-fkB7Lf>$nG{u8YBRW7aras>x*GU}5S8>N6T& zh8Yz32Cid)l23DZ9KFWqQhi7Egch`+DVWSc@e3<#sQQq#2ASm}g)~XEXkT>xj&?}M zWug}m$fa@HnwZqmD^v;)^b9)DmNs1AKEZ~x-#(+iNr z)GAKPJ9f5QMw`g8n+QozfHGKw4c7GnMV$ikJ-)ipu=0e9V(J<6jwyKZ2C_>khP2-a zk)PNE@Q!kiSm#Wcfy8GejBUsYEhX41S zjt-t#J@u6~9FxY)*jYVu63p4}dwv=>lSiNXN#=1!&AO;=i$-=3gGG+8p3)momf|19$95m;XIf6=v;f zN;0;(hBVD>RXgeUCdvs0<`9T0Eg`~3ZY#U&QBfZ{&V;nw5Wm>md^LTsEsaj9Kp=`U zqpGPlM$Hy}kbt5Agk$@L!}shSZX)#GwY4rIp^jBE?MXWLIG{t#{xfm&;c&C`3EIs9 zyGiz`-?;SU`O#$!rS5-}1d9(JnejQ;{GmVdMxQ2u9gXI9L_pYHJc|GOZ?l$D5F4Zx zwsA5p*(%tkJ|)=%R=Ia9(DykSuFeBLU&TqD9HYpdj7NZ_F5u&OT$H)se=*lyF79Gi z0`A)oh@0Tg5=36J`@RJn)CDBqW~aSwBfY*gaQwc$Va)27;Co0}Pxm{_&x9I;Su7l# zd7gR|UJj7$`bNAOJb?jGo4MuQpOrG{{V(%2H2*P@4|Q^Dg#AI+gaGlA4hQaYgDVQ~ zl$!tdcWAz(IZ>mH=v`{H@pQ{p0nY>p^_ei_(AYIQW-dYopliX~lnH z-}{QoFikWeQs4Ae_8N9eG+x^}$LyM)A8cKKUtHK8c)kDkJ31`_$fS$`=CN_QI|s%P zLl-pQgpk>vz^ZBF%^s{A#xVM&>~U?~b8{LwL8pBKa~$ZP6VL~xY|l>dBJ)=c;LQznkwZfTZzV8lab$q4$rBSLf%=FE2c%*{^pHK=k3@`j%&` zTC%gY7DDx_5P)0+)OBtQgZ5?~HwPxMfluztm0S?(f{oZem63QmnG=p!iu}9OOxaJ1 z*0w-zBY^3N@^b%5mZIV7GQQ?V#?WbG>+e&V>h>mdG6e#8X?e5k^mm*Ih#T_%Okc>q zeh-KYHn?=tueO2G!=oJ~Aec>FykzlC*cRp;Ra2bU)lwBntG&fzh!1H^Z)$gPJe+m+ zei>d}=KJ&a(FW?fjN0Jr-w!W#>j`b9+*0jcxO{jKJwwh(Cw<_UAX(e~P(O`D&;4aL zBJJ+R`PZ_oadG{KP2tI}aPwiu2?ud@t68^E!-xd`%m9G9I|k1Y zT;CO%MCmy^ei510cX!nrMQmEB73f|1mPQI#LPblq)aKo(O-ifuEFP;3Af!r=UG6SY zmMpW@^~!lupXQ2Zo<#K5Zd!dX@AV^2?0kgJlc1SWX7HgeQh&FnYUERQ117SJ1q$~$ zG)@+W-Y!da6hJs8n%6@$f5V!?R8~mrtazYsdBbw}tYLz#=|~lG@2kf-oUVBZlcAfe z_qRRRb5pUoYj;kaU+$Rw>|^Oggl!*7+BuaMM)J+ceT4n?2g>u}CDn4Oz`<>iVB6z_ zkpNZ?oXb9QH?5z#y3d;3>1XME71rxY99dp-XTt204s$QU!OjpKHfGF`dr>v*Y838% zp}3o4S8q}zIr+7GXVB&CS8Hwn>M*0|khZ8IEJxQOf`z%a)Um+sFy9-$({16IQ+;o_ z<9>dPquMF=uk{psyQZ6WyX+{&4G~;rb#$55YSoAxTY{!wOO!jej~X2ic_i(n+p4~% zn%Gqrnkd`TWJ)iHeDE-hQKAE6j z^I+AeKKCO3t82eiD{;k{ka;vf9M1suR4R*iywGo^_2pPt;!4UJ#d;RYdJPp35GF6j zpl1D?YBQGx->)22M#|~H1NDING{$m`NfvjXVwTcEJs3;7SrNrdqjL)IO`i682d3V7 zp*c0n5)E*ZCHw7!#THv<3FaKCxoycu+!)OM{4q2eqneAkORd2gLb1K`HNHFmOO z(~rVhmXRo!Cg(c`zLzF!@&@b=#b4P93w$rx3*LjxKS`ZH?_)XThAy|SW)K%ZW_#QNz${O6 zFP~QYS^o&@bq#-9eTG>rs*%)W)s%LzyZIgaQRnG`pNMb%ecE=WC|83{*C@P|9butR zm-j7P->d@zMrUOL4ZH$%rB1C?=|!N`xtsWQLS(qJhQwAasWIF*sp5<4-h5b6k>UnS ztoWimzV{=AtZiGh9c}i0c!kRfm3D@A^74&J4&OSBQ!kzg$0;*#l}wx&Q_}S@{#8m| zp8s-#vZfAaA-D6*eMf$5i!+6R zfn$u)$70ne}N?BplefE`&Ktj|aBJ_myc8#LNww|LD&xNBF!vou_=^;}IQP%s%&!*U zoR!0v4f3s|~61?q_`Xa1btbeG4^}kZ&Yu;%;rv*EuTEp)yL9I z!hhpJ0XZeqXGGWw>`@ooOObL-pY9p0Ijp<8C|pG}S`+qcx$S9y_a7BJ9z=04IWAOd zKQmy^BZi3;)6YvinnLOTI-eV}w75iuU|`qA)b+G2!hy{bxo|fT=IR{8wmuM?vTZ(* zJmfy$MheO*+li874=KkWl*sq`n;{+l2ito_sXNsU^!0x3DbA$uV=#tj{@U-ZthZ55 zsZzsSQ{Z0goI2fo%bGZmfO(B|P=4$@1&fj%CVxz92*D%-H>e&MyZJws}vHzcuqVg+ocXgzzzhOepD+ z4WJt%KSaVioxh%0%-a@!O5ZFOV(3-8>+q6Jz_dmC!(c}*8%+A{=wHoFgCTj=wQK?T z_`eFmqmA<2Gh^zgjlHJuhjymlizL^7b|Wyxo7mRXp-UCf&fE%g^KHNU55{^C*=i>5 zADq=)<@dhJkve0K(kG#M&{i+mX^+3Y`u!)tA`CNy?jliZ=Sac%%wBmo5F9OQU3Eb zntjDBFKIgp%SR~!TH7-gtm9`(^fPNRB37c+ff-?l{MbFsX zIb=Ul;_I+w=H8iW`s?8P9~|bN`I35he(si<`?(=@fww^Ff3UzQaZeAH_SvEFWqo^) zF{k1o+v^YHTB@VV{*Q!rQtSmpT?W+Q(JXCMuT}mG&+s0K;y$yg4;pmubRiP|LWO$- zFAt&(+obzEBHB#h)mK(1Mk=0M_C?}Hl{qu9^6T$YhaY~&wW*_e)Pyfn-dMf+l%CE- z({*gO4_{pIP@fvk7;yU#?^qeVs$}-WM{HD5t8th}d`xeg=4w>cPz)`oi?#Y^_T5h! zN^D$3UfZs}SA@g79OE%F=72hzj15MjJ!hhJq{nGy(TUslv~A#^QF>7R;h867E_c32 za*ltae#(Jkoxw!sn(wzQs!9ihb9$ZE(N`S>+%GNy>LaC*Uu|b@`Gvo)7{Dub&Fz1Dq5Qgl^L6^e z#tyf^JG+O{4?3V+Rbv_|f=}6X?~TPQzfy6#NU>XHE0K^@9{jsx_FbA6Djckt$z8o42CLh%ME#cYjrgKpmCoh4ho5oy7*69x>!>Yzebs?@(8QYgG%ts;Ml&;8 zQ{#^cS4TQWu36>>7pZsFB^wNR{?ivL8g7aRuB$kkB@e_H9+x{pFNFH-nY1PjsqI9r zzU>XT80vIcg3)lbQ4L%AP!pNeZD9k-uTSUnZXww|JUk zcutu6vXFUGLl?mXopjWz!u@iBx(5^7!#`wxnKI8N&9J6%5F`4TbTzcxWEJcE!xGqy ztGB|3w!vT8jCEU`o+$sK)ETX$3Wivsl9}Gb)Z#f6hzaNnZd18*GPg-GW{HxKKOHyw z$?TfI|A=wt-Z;}f$Kh0{QC!TkDSVDYqx^u-b{gm0wo=>rkFZ3F19kGJjXw)sE0$0u z7cu>@G_~E!zxz5OUEM$y=RunTV->@ZeyVKfVVfUi-4(&mDz526cQab17+7BNC3N}L z?B@|S9kE2Zz^K7vad|db))0QxQ~6Mv=A=`thoY)e3okkhlVeo+w%K+Z@(QgLXH-ce zxEk1AfBI`1r4x<((a+W>{P&6RXhq!H7f*vXGyGgV*%nE?4Ktb6lW+|)TjI>;9eTt? zc38JVvhn2L>Fvapb(YO$FzL%!rl^FAb_xro+w6RX*y?7K776d!Q@a-B`7!*}Ju;Jj z{8&uo!u$x+TeYerAN7qVz5jV^TliON8T+F4&q$l^R$dx+oo{_A(duGatRg!gLZ+l^ zFJ_hi)erI3*$-qQpItw`HyCNR600eQLjRZ1n>BZPH+)VNo79=_gywgK zX&R7ycTImH6iLC>Qo?oj2%G)JZ?CC)SU(itC4*0th=HwY=PgE1NFz{cN?Yd1(4_v9sF>(og_55 zCY^1hFw_%RQ-JqcNu&ZZP}My67r|H3)k_FDYp?D)h$Z!b7XugjSUTfaYs(SWrhqDo z0@>1r)@vM72-G76FO#$7;UCM1G{%r>cztf}m1WhKO&LR5u)4{3OC;Xu4O47{Jyc4m z6Hj0OXpX^S>-x*sWd@mD7RHuUy}A?9fWa5Vg?s4Xb?)6a&5w<8p)ADt?}2iBQew4XC? z4cnOVHG5h>SM;(nXP1Fm=lg=S<=h220c)PMJGB2gFcl4XZ8hHnx5zq>){rCB+h|)EC4Ai9Gl=K<+mY zIBmGn0-R4F5W|h|bm$)r%z)B2Lkd7ilXji`o+Cp5J3+VAkDw2M*G~G+Y;Xev-V|dIFx+f)<7p2E@_AYK zI{0kugoGR}kK1W_cDTSvUDUkP555sWxE?2`%fYb&blB7&d1`eb-b$hCe?%2jNp*9H z(|>}=z_U!e!N(BJp#TPIy){!17D%V{5rNrtl6YJ!xr#VygzFtLXxgveKq&m1${wA* zy(HTR$K#Qp#NrDf&O$fu0aZ<|>9R0~)LpPn37KM<#(KCa)by*?Z;95Wn*KU>w~l{t zfd#9^1+D_#*?+-=ylbyUq4SynwGvoZTr6k%;T@<@kgkBnKxu9)y}DP~+%DBOufacc z9Y)@OohXA;e(}1*V3X;28;1B}X+E>_@H(;ijzuMT?i&hueYME`?+uj}jPPn+j8r># zpFpXxi-$Bgzw;kKVo3QK7cy0};lp)SPnLxnxViwFGh4O}rFP5l1}hBOskcMQcLp%Um*al1QFoXTs2x8kU|d4vc*Db zJD;Eb((FOSX{K2vJ7p=p74~W9)aUzxpOgeL7%-`i6jA6`93T)&9iWaM+3_!@ew*`1 zE-3Qxe@XmJ9S-CSrVIE!1~A>Nhy+xL+chRg);n`v!CE$|fB9Xu9OLAVNdZbzjZw?8tk{paCI;9jHZKL9pEbz;ZPf z31Shu#&YJ*(Sb_(Mjm#Pg{troQfnr+pfAxaJx0o)%WAqr;>Ig6bs#>V9a))ax zc2+tOrOE!Ugke^&vU4o(uf*|SEgI?C`>z-x!SXUKUH>1SS#P6UJao}5=Kxh!@hHh_ zy=UdP%~%1=``7f@@am=AGyD%EQNhK-@;{I!L_7*zNdlHp1Nn?q*#FiOWS76A`2XW6 zRO=tKY313BRl{}4Kj2Xt95w&HHH4IM;K_e{CvjON@BYiBujAJ`R4;_0iCIj-@K2|L z!0(jwd7xiegFxQim=&Huw_QO91Zt5}Geia0?8x*z=4-i-Jc|*SLHFJPRiZoDeJ4|V z|HR_*m<`!~U5Apf`E~tv2+-poQqw2w{{d`~XxaLc?g$AW=h*$nE(GX&z<}W8jY#2b zRWwpVSUHY@KA{&={F)xS<{;2Ec;feuECO`J4tS@I+%o~)Z*dvU*&>Q;Pnb!d2&vd9^hyh_!1q>&^0hxFU67Uwh9bi=H1HohY)m(;_ zUqE(eB6+he#wW1w27J)8ElQtgxrD7@Km@_gQj+Iei6Iyy(I%x3U~dKroYHjD7!XRd zMS9AVg{}XI!!vb3%c=ZEv-w-^!^`)e&>2eErLBEza3NXfTKFPe4xQM~1`$&jIP~jU z_C3gTN48w=MH8Rx(2s1oNg)z6lX{*Y6x#nSin-Hyr~cAlGMv*?obQE#c*Tf!fdct` zur^_s-7D`<>SD?R+L+_v5YbSo^e$d8xEdKSh<6EcyV`FVZnh|ZQ_ikr`^vK3!#M(I zki90CtvM9K3go=YY}uHDcvppguAEv=vfQLSQwc2dc=pL(FsTamElc9G+$@l;1@Da< z3=zo?7xWUvpxa^_JZ*Rf$=eNG{ZH44u3PhB!oxho`0F4oO5iNC4D%SrE3che(A`m{ z?k@tb8Rn`1aeR59oevsAn3oN2`*S(LQU6mMbU&hu z6e->G+E+|frf-6OS@+i=KkwA4gDA98E{B>DJn8h4H?j7dBO%`4%3hQh+*M8%#T(e4 z4-mIC%m68YJ_h8PRZhK$YxC*12KtsnhrEwiE`b)_VS~tPf-EvXi~-*yDqZ8dG2g#h z=vuyTYJLdiWP8{P!V7Ay-^>;sy-|1L_uS0-UTkYGZ88@EbVgnM^5Wvj3|(Dn8ItpT z?;VgK{V6EAQzj7IF@P>}!!_&X>yJr}{gJ;5^QM3o41jLNkC>Fvn*lq^fA$<)Rl+we zqmp=;K+^LW#^f*7AMp{8VF+$?-u|9Z$7cdlP3uvYwg%zIv-=K1*#iV-m%N;=xK`84 zdZk;tef|(8(B1%zz?=OyUTjEfm^mgKdYTMXC-AH9Mzk0giIIaWxGVVBENn?B-LRg@ zW)|_Pe$Xi~Y}qJ1rhsdr(JT&bX)^5m^wW}Rgcg-=TW4JryDd8XtMwg&Ab)O4s2~Q;3&Xbi2)0E5W^o zQoXO@G&rVhjzyEqHYgqV=%2oB>A$Xc@pS=(uH+wiSH0P+w+MlpS8;38)k#Cb-A?(= zF!I^e_W4yB_5N?Ct2ibv%&h%s#NEKkW_iq_2K&B|@J9td?@hB-ZK)oTIcw*M_&uWL z5^wH2(d~^7&gVt1EQnrBVWqZ#wcUx2c7r>S7FmTI;* zh3Cf7=Dq1RRORPxt`PLz3;GWB{+d2g&YY>K|FEZ=XAxNemy>jVV&P0dzEmhtvK65w zdH+e?{l#wet0l(8Bts#;H=vSrb0GjP6E{P`DdS3U}uM%}X0U&n|6n zOjw%u_*OdT>6N;8I`rs(71;7p>cQQ+f9Wbx*d7iTbS+`eyN1yh^l3JWiVb*8&Rn$f z%zk!Cc87vy#l^kvI(AQ%ZgHD%heGI`g6`q%`;ooa2KLxEUhGdQp82lK=ELje#ziCl zvibq9Jp!FIrG2hrIvRU{Uh6dDu693cc^SJ(|7YJst)8jHS1{bKPGiW{H=6}YJqc@{ zuP8mYMfZ1#fAp(gO3RjtJ+w-{HRt!Are}V?rVH;kXJ9z;FtNv4PLKaJdsFemqWIOK zNlR6YYQZZ}f1C%+a{gs6VcMhxT>jg6!0O4gZP||{s!#6&R@SMYa{>O}+I{$4G4wv=^%yx+aMR&)86 zTL*FiWG>A(dG$*9ot{>XoEDJ2ePTbf&hLEkKK05>6T5$}C9Y;Lo5iGY9{~pM2a)pM zNBrKe3B0+?j%Cx6=Vp8MFUwwV<54%z$Oo*4-&>t4jdebI((J3^hrqcGvrDTZd*!xHcWV^|X|=41ZC)*TZ`MP80l!*~^uy0z-%uzn zU03#11SC82)?Aj$r(b%UNInuI|LN%);diC)y$!i`HK& zJpVpzj@--~9!b9J%f1_)mv3f%?`sLRUgE&Zx+5vuXCAHw zI&R`l+l)=N^+z6UHu Date: Thu, 4 Jun 2026 12:25:01 +0100 Subject: [PATCH 11/20] Add community pages, calendar, and docs for the homepage redesign. Introduce dedicated contact, OpenMS-lib, partnerships, sponsor, and calendar pages; refresh navbar, publications, news layouts, and unified section spacing; add maintainer guides for updating site content without front-end changes. Co-authored-by: Cursor --- .github/pull_request_template.md | 11 +- README.md | 6 + archetypes/news.md | 10 + assets/css/about.css | 354 +++++ assets/css/brand-palette.css | 8 +- assets/css/community-calendar.css | 252 +++ assets/css/contact-area.css | 378 +++-- assets/css/contact-page.css | 37 + assets/css/governance.css | 354 +++++ assets/css/hero-saas.css | 316 ++++ assets/css/hero.css | 14 +- assets/css/heroitems.css | 32 +- assets/css/home.css | 1387 +++++++++++++++++ assets/css/keyfeatures-modern.css | 1 + assets/css/landing-page.css | 1 + assets/css/navbar-responsive.css | 873 +++++++++-- assets/css/navbar-search.css | 244 +++ assets/css/news-banner.css | 145 +- assets/css/news-section.css | 573 +++++++ assets/css/openms-buttons.css | 350 +++++ assets/css/openms-lib.css | 581 +++++++ assets/css/publications.css | 238 +++ assets/css/shortcuts_override.css | 59 +- assets/css/site-header.css | 5 + assets/css/styles_override.css | 242 +-- assets/css/trusted-by.css | 371 +++-- assets/css/university-partners.css | 18 +- assets/css/webapps.css | 388 +++-- assets/js/community-calendar.js | 267 ++++ assets/js/navbar-search.js | 170 ++ assets/js/navbar.js | 92 +- assets/js/news-year-filter.js | 108 ++ assets/js/publications-year-filter.js | 122 ++ assets/js/swiper.js | 97 +- config.yaml | 69 +- content/en/about.md | 87 +- content/en/calendar.md | 6 + content/en/contact.md | 88 ++ content/en/contribute.md | 2 +- content/en/governance.md | 156 +- content/en/news/_index.md | 4 + content/en/news/gsoc2025.md | 1 + content/en/openms-lib.md | 129 ++ content/en/publications.md | 470 +++--- content/en/research-partnerships.md | 86 + content/en/sponsor-us.md | 87 ++ data/community_events.yaml | 40 + docs/README.md | 83 + docs/common-tasks/add-images.md | 59 + docs/common-tasks/add-news-post.md | 108 ++ docs/common-tasks/add-webapp-to-homepage.md | 73 + docs/common-tasks/edit-a-page.md | 87 ++ docs/common-tasks/edit-footer-or-navbar.md | 91 ++ docs/common-tasks/edit-homepage-hero.md | 133 ++ .../common-tasks/update-community-calendar.md | 48 + docs/common-tasks/update-news-banner.md | 59 + docs/getting-started/edit-via-github.md | 81 + docs/getting-started/preview-locally.md | 67 + docs/reference/config-yaml-guide.md | 110 ++ docs/reference/content-front-matter.md | 74 + docs/reference/file-locations.md | 65 + docs/reference/shortcodes.md | 107 ++ docs/troubleshooting/common-errors.md | 101 ++ docs/workflow/deployment.md | 66 + docs/workflow/pull-requests.md | 56 + docs/workflow/who-to-ask.md | 32 + layouts/_default/single.html | 13 + layouts/index.html | 110 +- layouts/index.searchindex.json | 16 + layouts/news/section.html | 118 ++ layouts/news/single.html | 3 + layouts/partials/community-calendar-main.html | 58 + layouts/partials/contact-area.html | 74 +- layouts/partials/footer.html | 26 +- layouts/partials/hero-stat-card.html | 14 + layouts/partials/hero-stats.html | 34 +- layouts/partials/hero.html | 46 +- layouts/partials/heroitems.html | 9 +- layouts/partials/home-pathways.html | 35 + layouts/partials/keyfeatures.html | 11 +- layouts/partials/navbar-clone.html | 24 +- layouts/partials/navbar-cta.html | 14 +- layouts/partials/navbar-mobile-ctas.html | 8 + layouts/partials/navbar-search.html | 50 + layouts/partials/navbar.html | 25 +- layouts/partials/news-banner.html | 23 +- layouts/partials/news-date-badge.html | 9 + layouts/partials/news-single-main.html | 47 + layouts/partials/openms-lib-main.html | 5 + layouts/partials/publications-main.html | 20 + .../partials/publications-year-select.html | 21 + layouts/partials/single/content.html | 34 + layouts/partials/trusted-by.html | 302 +++- layouts/partials/university-partners.html | 17 +- layouts/partials/webapps-project-card.html | 38 +- layouts/partials/webapps.html | 48 +- layouts/shortcodes/heroitems.html | 2 + layouts/shortcodes/keyfeatures.html | 1 + layouts/shortcodes/partners.html | 58 +- .../shortcodes/publications-year-select.html | 1 + layouts/shortcodes/sponsors.html | 93 +- 101 files changed, 10725 insertions(+), 1511 deletions(-) create mode 100644 archetypes/news.md create mode 100644 assets/css/about.css create mode 100644 assets/css/community-calendar.css create mode 100644 assets/css/contact-page.css create mode 100644 assets/css/governance.css create mode 100644 assets/css/hero-saas.css create mode 100644 assets/css/home.css create mode 100644 assets/css/landing-page.css create mode 100644 assets/css/navbar-search.css create mode 100644 assets/css/news-section.css create mode 100644 assets/css/openms-buttons.css create mode 100644 assets/css/openms-lib.css create mode 100644 assets/css/publications.css create mode 100644 assets/js/community-calendar.js create mode 100644 assets/js/navbar-search.js create mode 100644 assets/js/news-year-filter.js create mode 100644 assets/js/publications-year-filter.js create mode 100644 content/en/calendar.md create mode 100644 content/en/contact.md create mode 100644 content/en/news/_index.md create mode 100644 content/en/openms-lib.md create mode 100644 content/en/research-partnerships.md create mode 100644 content/en/sponsor-us.md create mode 100644 data/community_events.yaml create mode 100644 docs/README.md create mode 100644 docs/common-tasks/add-images.md create mode 100644 docs/common-tasks/add-news-post.md create mode 100644 docs/common-tasks/add-webapp-to-homepage.md create mode 100644 docs/common-tasks/edit-a-page.md create mode 100644 docs/common-tasks/edit-footer-or-navbar.md create mode 100644 docs/common-tasks/edit-homepage-hero.md create mode 100644 docs/common-tasks/update-community-calendar.md create mode 100644 docs/common-tasks/update-news-banner.md create mode 100644 docs/getting-started/edit-via-github.md create mode 100644 docs/getting-started/preview-locally.md create mode 100644 docs/reference/config-yaml-guide.md create mode 100644 docs/reference/content-front-matter.md create mode 100644 docs/reference/file-locations.md create mode 100644 docs/reference/shortcodes.md create mode 100644 docs/troubleshooting/common-errors.md create mode 100644 docs/workflow/deployment.md create mode 100644 docs/workflow/pull-requests.md create mode 100644 docs/workflow/who-to-ask.md create mode 100644 layouts/_default/single.html create mode 100644 layouts/index.searchindex.json create mode 100644 layouts/news/section.html create mode 100644 layouts/news/single.html create mode 100644 layouts/partials/community-calendar-main.html create mode 100644 layouts/partials/hero-stat-card.html create mode 100644 layouts/partials/home-pathways.html create mode 100644 layouts/partials/navbar-mobile-ctas.html create mode 100644 layouts/partials/navbar-search.html create mode 100644 layouts/partials/news-date-badge.html create mode 100644 layouts/partials/news-single-main.html create mode 100644 layouts/partials/openms-lib-main.html create mode 100644 layouts/partials/publications-main.html create mode 100644 layouts/partials/publications-year-select.html create mode 100644 layouts/partials/single/content.html create mode 100644 layouts/shortcodes/heroitems.html create mode 100644 layouts/shortcodes/keyfeatures.html create mode 100644 layouts/shortcodes/publications-year-select.html diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 4b434ea..9104d63 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,5 +1,3 @@ - - #### Brief description of what is fixed or changed +#### Website checklist (content / config PRs) + +- [ ] Netlify deploy preview checked (link below when ready) +- [ ] If `config.yaml`: valid YAML, homepage (and affected pages) reviewed on preview +- [ ] If news post: `date`, `summary`, and `type: news` set; article and `/news` listing checked +- [ ] If new images: files under `static/`, paths use `/images/...` +- [ ] No secrets or internal-only URLs committed + +**Maintainer docs:** [docs/README.md](../docs/README.md) diff --git a/README.md b/README.md index b5d06af..22aea15 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 0000000..0418aa1 --- /dev/null +++ b/archetypes/news.md @@ -0,0 +1,10 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +authors: [] +date: {{ .Date.Format "2006-01-02" }} +summary: "" +type: news +draft: true +--- + +Write your news article here. diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 0000000..abcdc93 --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,354 @@ +.about-page, +.research-partnerships-page, +.sponsor-us-page { + display: grid; + gap: clamp(2rem, 3.8vw, 3.2rem); + margin: 0; + overflow-x: clip; +} + +.research-partnerships-page__actions, +.sponsor-us-page__actions { + margin-top: 1rem; +} + +.about-hero { + position: relative; + overflow: hidden; + padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem); + background: linear-gradient( + 135deg, + var(--openms-navy) 0%, + #1b318f 55%, + var(--openms-blue) 100% + ); + color: var(--openms-white); +} + +.about-hero::before, +.about-hero::after { + content: ""; + position: absolute; + border-radius: 50%; + pointer-events: none; +} + +.about-hero::before { + width: 18rem; + height: 18rem; + right: -4rem; + top: -8rem; + background: radial-gradient(circle, rgba(var(--openms-white-rgb), 0.16) 0%, transparent 70%); +} + +.about-hero::after { + width: 14rem; + height: 14rem; + left: -5rem; + bottom: -7rem; + background: radial-gradient(circle, rgba(var(--openms-pink-rgb), 0.2) 0%, transparent 70%); +} + +.about-hero__eyebrow { + position: relative; + z-index: 1; + margin: 0 0 0.5rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(var(--openms-white-rgb), 0.82); +} + +.about-hero__title { + position: relative; + z-index: 1; + margin: 0; + max-width: 20ch; + font-family: var(--openms-font-heading); + font-size: clamp(2rem, 4.8vw, 3.2rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.02em; + text-wrap: balance; + color: var(--openms-white) !important; +} + +.about-hero__title span { + color: var(--openms-white) !important; +} + +.about-hero__description { + position: relative; + z-index: 1; + margin: 0.9rem 0 0; + max-width: 60ch; + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-white-rgb), 0.92); +} + +.about-hero a, +.about-hero a:visited { + color: var(--openms-white) !important; +} + +.about-section { + padding: 0 clamp(1rem, 3vw, 2rem); +} + +.about-section h2 { + margin-top: 0; + margin-bottom: 0.75rem; + color: var(--openms-navy); +} + +.about-page .governance-links h2 { + margin-top: 0; + margin-bottom: 0.75rem; + color: var(--openms-navy) !important; +} + +.about-page #donate h2 { + color: var(--openms-navy) !important; +} + +.about-section p { + max-width: 72ch; +} + +.about-two-col { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: clamp(1rem, 2vw, 2rem); + align-items: start; + max-width: 56rem; + margin-inline: auto; + width: 100%; +} + +.about-two-col p { + margin-top: 0; + overflow-wrap: anywhere; + max-width: none; +} + +.about-page .about-two-col { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; +} + +.about-sponsors-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + max-width: 64rem; + margin-top: 1rem; +} + +.about-sponsor-card { + min-height: 8rem; + padding: 1rem; + border-radius: 0.75rem; + border: 1px solid #d3d0d1; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + background: #fff; + min-width: 0; +} + +.about-sponsor-card__stack { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.45rem; + width: 100%; +} + +.about-sponsor-card__logo { + max-width: 13rem; + max-height: 4rem; + width: 100%; + height: auto; + object-fit: contain; + display: block; +} + +.about-sponsor-card__badge { + display: inline-block; + padding: 0.55rem 1rem; + border-radius: 0.6rem; + background: #6b2fb6; + color: #fff; + font-family: Montserrat, Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.08em; +} + +.about-sponsor-card__logo-wrap { + display: flex; + align-items: center; + justify-content: center; + padding: 0.6rem 0.8rem; + border-radius: 0.5rem; + background: #0c2171; + min-height: 4rem; + width: 100%; + max-width: 12rem; +} + +.about-sponsor-card__logo--denbi { + max-width: 11.5rem; + max-height: 3rem; +} + +.about-sponsor-card__name { + font-family: Montserrat, Arial, sans-serif; + font-size: 0.78rem; + letter-spacing: 0.06em; + color: #0c2171; + text-transform: uppercase; + font-weight: 700; +} + +.about-donate-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1rem; +} + +/* Blue sponsor CTAs use .openms-btn-primary / .openms-step__cta (openms-buttons.css) */ + +/* Donate CTA — secondary blue (openms-buttons.css) */ + +@media (max-width: 1100px) { + .about-sponsors-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .about-sponsor-card__logo { + max-width: 11.5rem; + max-height: 3.4rem; + } +} + +@media (max-width: 860px) { + .about-page { + gap: 1.8rem; + } + + .about-hero { + padding: 1rem 1rem 1.25rem; + } + + .about-hero__title { + max-width: none; + font-size: clamp(1.8rem, 8vw, 2.4rem); + } + + .about-sponsors-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.75rem; + } + + .about-sponsor-card { + min-height: 7rem; + padding: 0.85rem; + } + + .about-page .uni-partners__item { + min-width: 0; + } + + .about-page .uni-partners__item img { + max-width: 100%; + } +} + +@media (max-width: 640px) { + .about-page .about-two-col { + grid-template-columns: 1fr !important; + gap: 0.75rem; + } + + .about-page { + gap: 1.4rem; + margin: 0; + } + + .about-hero { + padding: 0.95rem 0.9rem 1.1rem; + } + + .about-hero__eyebrow { + margin-bottom: 0.4rem; + } + + .about-hero__title { + font-size: clamp(1.55rem, 8vw, 2rem); + line-height: 1.12; + } + + .about-hero__description { + margin-top: 0.7rem; + font-size: var(--openms-text-min); + line-height: 1.45; + } + + .about-section p { + max-width: none; + } + + .about-sponsors-grid { + grid-template-columns: 1fr; + } + + .about-sponsor-card { + min-height: 6.5rem; + padding: 0.75rem; + } + + .about-sponsor-card__badge { + width: 100%; + text-align: center; + font-size: 0.85rem; + letter-spacing: 0.06em; + padding: 0.5rem 0.75rem; + } + + .about-sponsor-card__name { + font-size: 0.72rem; + } + + .about-donate-actions .about-cta-btn { + width: 100%; + } + + .about-page .uni-partners { + padding-block: 1.2rem; + } + + .about-page .uni-partners__marquee { + display: none; + } + + .about-page .uni-partners__static { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.6rem; + padding-inline: 0; + } + + .about-page .uni-partners__static .uni-partners__item { + height: 4rem; + padding: 0.5rem; + } +} + +@media (max-width: 420px) { + .about-page .uni-partners__static { + grid-template-columns: 1fr; + } +} diff --git a/assets/css/brand-palette.css b/assets/css/brand-palette.css index adf98a0..fb84383 100644 --- a/assets/css/brand-palette.css +++ b/assets/css/brand-palette.css @@ -14,6 +14,10 @@ /* Body & secondary headings — Raleway (pt) */ --openms-text-min: 11pt; + --openms-navbar-font-size: 16px; + /* Nav breakpoints: burger < 1280px; compact xl 1280–1535px; full desktop 1536px+ */ + --openms-nav-desktop-min: 1280px; + --openms-nav-xl-wide-min: 1536px; --openms-body-size: 12pt; --openms-body-size-lg: 14pt; --openms-secondary-heading-size: 14pt; @@ -32,6 +36,7 @@ --openms-pink: #ff03cb; --openms-purple: #b503ff; --openms-blue: #3157e9; + --openms-blue-secondary: #5280f0; --openms-navy: #0c2171; --openms-dark: #231f20; --openms-grey: #c2babc; @@ -42,6 +47,7 @@ --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; @@ -51,7 +57,7 @@ --openms-white-rgb: 255, 255, 255; --colorPrimaryDark: var(--openms-blue); - --colorPrimaryDarkBtn: var(--openms-orange); + --colorPrimaryDarkBtn: var(--openms-blue); --colorPrimary: var(--openms-blue); --colorPrimaryLight: var(--openms-purple); --colorSecondaryDark: var(--openms-dark); diff --git a/assets/css/community-calendar.css b/assets/css/community-calendar.css new file mode 100644 index 0000000..708c8e9 --- /dev/null +++ b/assets/css/community-calendar.css @@ -0,0 +1,252 @@ +/* Community calendar page */ + +.community-calendar-layout__container { + max-width: min(100%, 56rem); +} + +.community-calendar-page__update p { + max-width: 65ch; +} + +.community-calendar-page__update a { + font-weight: 600; +} + +.community-calendar { + display: grid; + gap: 1.25rem; +} + +.community-calendar__toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.65rem 1rem; +} + +.community-calendar__month { + margin: 0; + flex: 1 1 auto; + min-width: 10rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 800; + color: var(--openms-navy); + text-align: center; +} + +.community-calendar__nav, +.community-calendar__today { + min-height: 2.35rem; + padding: 0.4rem 0.85rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--openms-navy); + background: var(--openms-white); + border: 1px solid rgba(var(--openms-navy-rgb), 0.18); + border-radius: 0.5rem; + cursor: pointer; + transition: border-color 0.2s ease, background-color 0.2s ease; +} + +.community-calendar__nav { + width: 2.5rem; + padding-inline: 0; +} + +.community-calendar__nav:hover, +.community-calendar__nav:focus-visible, +.community-calendar__today:hover, +.community-calendar__today:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.45); + background: rgba(var(--openms-blue-rgb), 0.06); + outline: none; +} + +.community-calendar__today { + margin-left: auto; +} + +.community-calendar__body { + display: grid; + grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 1fr); + gap: clamp(1.25rem, 3vw, 2rem); + align-items: start; +} + +.community-calendar__weekdays { + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 0.35rem; + margin-bottom: 0.35rem; + font-size: var(--openms-text-min); + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.55); + text-align: center; +} + +.community-calendar__grid { + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 0.35rem; +} + +.community-calendar__day { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + min-height: 3.25rem; + padding: 0.35rem 0.2rem 0.45rem; + font-family: var(--openms-font-body); + color: var(--openms-navy); + background: var(--openms-white); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: 0.45rem; + cursor: pointer; + transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; +} + +.community-calendar__day--pad { + border: none; + background: transparent; + cursor: default; + min-height: 0; + padding: 0; +} + +.community-calendar__day:not(.community-calendar__day--pad):hover, +.community-calendar__day:not(.community-calendar__day--pad):focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.4); + box-shadow: 0 0.2rem 0.65rem rgba(var(--openms-blue-rgb), 0.12); + outline: none; +} + +.community-calendar__day.is-today { + border-color: rgba(var(--openms-blue-rgb), 0.55); + background: rgba(var(--openms-blue-rgb), 0.06); +} + +.community-calendar__day.is-selected { + border-color: var(--openms-blue); + box-shadow: 0 0 0 2px rgba(var(--openms-blue-rgb), 0.25); +} + +.community-calendar__day.has-events .community-calendar__day-num { + font-weight: 700; +} + +.community-calendar__day-num { + font-size: var(--openms-text-min); + line-height: 1.2; +} + +.community-calendar__day-dots { + display: flex; + gap: 0.15rem; + margin-top: 0.2rem; +} + +.community-calendar__day-dot { + width: 0.35rem; + height: 0.35rem; + border-radius: 50%; + background: var(--openms-blue); +} + +.community-calendar__aside { + padding: clamp(1rem, 2vw, 1.25rem); + border-radius: 0.75rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + background: #f7f9fc; +} + +.community-calendar__aside-title { + margin: 0 0 0.5rem; + font-family: var(--openms-font-heading); + font-size: 1.1rem; + font-weight: 700; + color: var(--openms-navy); +} + +.community-calendar__aside-hint { + margin: 0 0 0.85rem; + font-size: var(--openms-text-min); + color: rgba(var(--openms-navy-rgb), 0.7); +} + +.community-calendar__event-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 0.85rem; +} + +.community-calendar__event { + margin: 0; + padding: 0 0 0.85rem; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.community-calendar__event:last-child { + padding-bottom: 0; + border-bottom: none; +} + +.community-calendar__event--empty { + color: rgba(var(--openms-navy-rgb), 0.65); + font-size: var(--openms-body-size); +} + +.community-calendar__event-title { + margin: 0 0 0.35rem; + font-size: var(--openms-body-size); + font-weight: 700; + line-height: 1.35; +} + +.community-calendar__event-title a { + color: var(--openms-navy); + text-decoration: none; +} + +.community-calendar__event-title a:hover, +.community-calendar__event-title a:focus-visible { + color: var(--openms-blue); + text-decoration: underline; +} + +.community-calendar__event-meta { + margin: 0; + font-size: var(--openms-text-min); + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.community-calendar__event-summary { + margin: 0.4rem 0 0; + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-dark-rgb), 0.78); +} + +.community-calendar__event-more { + margin: 0.35rem 0 0; + font-size: var(--openms-text-min); +} + +.community-calendar__event-more a { + font-weight: 600; +} + +@media (max-width: 860px) { + .community-calendar__body { + grid-template-columns: 1fr; + } + + .community-calendar__today { + margin-left: 0; + } +} diff --git a/assets/css/contact-area.css b/assets/css/contact-area.css index 55fc5cd..ef0a0e5 100644 --- a/assets/css/contact-area.css +++ b/assets/css/contact-area.css @@ -1,18 +1,184 @@ +/* Homepage contact — minimal; bridges from Trusted by when adjacent */ + +.contact-home { + background: var(--openms-white); + border-top: none; +} + +.home-page__trust + .home-page__cta .contact-home { + background: linear-gradient( + 180deg, + var(--openms-white) 0%, + rgba(var(--openms-blue-rgb), 0.04) 55%, + rgba(var(--openms-blue-rgb), 0.07) 100% + ); +} + +.contact-home__main { + padding-block: 0; + padding-inline: var(--home-pad-x, clamp(1.25rem, 4vw, 2.5rem)); +} + +.home-page__trust + .home-page__cta .contact-home__main { + padding-top: clamp(3.5rem, 7vh, 5rem); +} + +main.home-page > section.home-page__cta:last-of-type .contact-home__main { + padding-bottom: clamp(3.5rem, 7vh, 5rem); +} + +main.home-page > section.home-page__cta:last-of-type .contact-home { + margin-bottom: 0; +} + +main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redesign { + padding-top: 0; + margin-top: 0; +} + +.contact-home__inner { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: clamp(2rem, 4vw, 4rem); + align-items: end; + max-width: 75rem; + margin: clamp(3.5rem, 7vh, 5rem) auto; +} + +.contact-home__content, +.contact-home__aside { + min-width: 0; +} + +/* Eyebrow, title, description: home.css (matches Trusted by) */ + +.home-page__cta .contact-home__eyebrow-icon { + display: inline-flex; + line-height: 0; + opacity: 0.85; +} + +.home-page__cta .contact-home__eyebrow-icon svg { + display: block; + width: 0.8125rem; + height: 0.8125rem; +} + +.contact-home__aside { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 0.85rem; + text-align: right; +} + +.contact-home__cta { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.7rem 1.5rem; + border-radius: 0.5rem; + font-size: var(--openms-text-min); + font-weight: 600; + text-decoration: none; + white-space: nowrap; +} + +.contact-home__links { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 0.35rem; + margin: 0; + padding: 0; +} + +.contact-home__link { + font-size: var(--openms-text-min); + font-weight: 500; + color: var(--openms-blue); + text-decoration: none; +} + +.contact-home__link:hover, +.contact-home__link:focus-visible { + color: var(--openms-navy); + text-decoration: underline; + text-underline-offset: 0.14em; + outline: none; +} + +.contact-home__meta { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.45; + color: rgba(var(--openms-dark-rgb), 0.45); +} + +/* After Trusted by — two columns, aligned with hero split */ +@media (min-width: 769px) { + .home-page__trust + .home-page__cta .contact-home__inner { + grid-template-columns: minmax(0, 1.05fr) minmax(14rem, 20rem); + align-items: center; + gap: clamp(2.5rem, 5vw, 5rem); + } + + .home-page__trust + .home-page__cta .contact-home__content { + text-align: left; + } + + .home-page__trust + .home-page__cta .contact-home__description { + max-width: 38rem; + } + + .home-page__trust + .home-page__cta .contact-home__aside { + align-items: flex-end; + text-align: right; + } + + .home-page__trust + .home-page__cta .contact-home__links { + align-items: flex-end; + } +} + +@media (max-width: 768px) { + .contact-home__inner { + grid-template-columns: 1fr; + gap: 1.5rem; + align-items: start; + } + + .home-page__cta .contact-home__title { + max-width: none; + } + + .contact-home__description { + max-width: none; + } + + .contact-home__aside { + align-items: flex-start; + text-align: left; + } + + .contact-home__links { + align-items: flex-start; + } +} + +/* ═══ Standalone contact page ═══ */ .contact-area { padding: clamp(2.4rem, 6vh, 4rem) clamp(1.25rem, 4vw, 2.5rem); background: var(--openms-white); } .contact-area__inner { - max-width: 75rem; + box-sizing: border-box; width: 100%; - margin: 0 auto; - min-height: clamp(13rem, 24vh, 17rem); + max-width: 75rem; + margin-inline: auto; padding: clamp(1.75rem, 4vh, 2.5rem); - border-radius: 0; - background: var(--openms-white); - border: none; - box-shadow: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); gap: clamp(1.2rem, 2.8vw, 2.5rem); @@ -20,185 +186,155 @@ } .contact-area__eyebrow { - display: inline-block; - margin: 0 0 0.65rem; - padding: 0.3rem 0.72rem; - border-radius: 999px; + 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: 700; - letter-spacing: 0.08em; + font-weight: 600; + letter-spacing: 0.06em; 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); +} + +.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.8125rem; } .contact-area__title { margin: 0 0 0.7rem; font-family: var(--openms-font-heading); - font-size: clamp(1.85rem, 3.6vw, 2.85rem); - line-height: 1.12; - letter-spacing: -0.02em; + 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; - color: rgba(var(--openms-dark-rgb), 0.84); - font-size: clamp(1rem, 1.2vw, 1.15rem); - line-height: 1.6; + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-dark-rgb), 0.82); } .contact-area__meta { margin: 0; - display: inline-flex; - align-items: center; - gap: 0.4rem; - color: rgba(var(--openms-dark-rgb), 0.72); - font-size: clamp(0.82rem, 0.95vw, 0.92rem); + font-size: var(--openms-text-min); + color: rgba(var(--openms-dark-rgb), 0.6); } .contact-area__support-note { margin: 0.8rem 0 0; - color: rgba(var(--openms-dark-rgb), 0.82); - font-size: clamp(0.92rem, 1vw, 1rem); + font-size: var(--openms-body-size); line-height: 1.5; + color: rgba(var(--openms-dark-rgb), 0.82); } .contact-area__support-note a { color: var(--openms-blue); font-weight: 600; - text-decoration: underline; - text-underline-offset: 0.14em; } -.contact-area__meta::before { - content: ""; - width: 0.55rem; - height: 0.55rem; - border-radius: 999px; - background: var(--openms-yellow); - box-shadow: 0 0 0 4px rgba(var(--openms-yellow-rgb), 0.22); +.contact-area__cta { + justify-content: center; } -.contact-area__cta { - margin-top: 0; +.contact-area__cta-secondary { + display: inline-flex; + align-items: center; justify-content: center; + min-height: 2.75rem; + padding: 0.75rem 1.5rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.16); + border-radius: 0.5rem; + background: transparent; + color: var(--openms-navy); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + text-decoration: none; + transition: border-color 0.2s ease, color 0.2s ease; +} + +.contact-area__cta-secondary:hover, +.contact-area__cta-secondary:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.4); + color: var(--openms-blue); + outline: none; } .contact-area__actions { - display: grid; - grid-template-columns: 1fr; - gap: 0.75rem; - align-items: stretch; + display: flex; + flex-direction: column; + gap: 0.65rem; width: 100%; - padding: 0; - border: none; - border-radius: 0; - background: none; - box-shadow: none; } .contact-area__actions .contact-area__cta { width: 100%; - font-family: var(--openms-font-body) !important; - font-size: var(--openms-text-min) !important; - font-weight: 600 !important; - line-height: 1.3 !important; + border-radius: 0.5rem; } .contact-area__details { - display: grid; - justify-items: start; + display: flex; + flex-direction: column; gap: 0.75rem; - padding: 0; - border: none; - border-radius: 0; - background: none; - box-shadow: none; } .contact-area__line { - margin: 0; - width: 100%; - min-height: 3.2rem; - color: rgba(var(--openms-dark-rgb), 0.88); - display: grid; - grid-template-columns: auto minmax(0, 1fr); - align-items: center; - gap: 0.65rem; - padding: 0.7rem 0; - border: none; + font-size: var(--openms-text-min); + font-weight: 500; + color: var(--openms-blue); text-decoration: none; - transition: transform 0.2s ease; } .contact-area__line:hover, .contact-area__line:focus-visible { - transform: translateY(-1px); - outline: none; -} - -.contact-area__label { - display: block; - font-weight: 600; - line-height: 1.2; - font-size: 0.78rem; - letter-spacing: 0.04em; - text-transform: uppercase; - color: rgba(var(--openms-dark-rgb), 0.72); -} - -.contact-area__value { - display: block; - margin-top: 0.12rem; - font-weight: 500; - line-height: 1.35; - font-size: 0.92rem; - letter-spacing: 0.01em; -} - -.contact-area__icon { - display: inline-grid; - place-items: center; - width: 1.7rem; - height: 1.7rem; - border-radius: 0; - color: rgba(var(--openms-blue-rgb), 0.82); - background: none; -} - -.contact-area__details a { color: var(--openms-navy); - text-decoration: none; + text-decoration: underline; + outline: none; } .contact-area__details .contact-area__actions .contact-area__cta { color: var(--openms-white) !important; } -.contact-area__details .contact-area__actions .contact-area__cta:visited, -.contact-area__details .contact-area__actions .contact-area__cta:hover, -.contact-area__details .contact-area__actions .contact-area__cta:focus-visible, -.contact-area__details .contact-area__actions .contact-area__cta:active { - color: var(--openms-white) !important; -} - - -@media (max-width: 768px) { +@media (max-width: 1024px) { .contact-area__inner { grid-template-columns: 1fr; - min-height: 0; - padding: 1.6rem 1rem 1.8rem; + gap: 1.5rem; + padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 4vw, 1.75rem); } - .contact-area__title { - font-size: clamp(1.65rem, 7vw, 2.2rem); + .contact-area__main { + text-align: center; } - .contact-area__actions { - grid-template-columns: 1fr; - gap: 0.75rem; + .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 0000000..8f9f7b2 --- /dev/null +++ b/assets/css/contact-page.css @@ -0,0 +1,37 @@ +.contact-page__channels { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.contact-page__channel .governance-card__link { + margin-top: 1rem; +} + +.contact-page__channel-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.65rem 1.5rem; + border-radius: 999px; + text-decoration: none; +} + +.contact-page__channel .governance-card__link a:not(.contact-page__channel-btn) { + font-weight: 600; + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.contact-page__note { + padding: clamp(1.25rem, 2.5vw, 1.75rem); + border-radius: 1rem; + background: rgba(var(--openms-blue-rgb), 0.06); + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); +} + +@media (max-width: 860px) { + .contact-page__channels { + grid-template-columns: 1fr; + } +} diff --git a/assets/css/governance.css b/assets/css/governance.css new file mode 100644 index 0000000..2877c23 --- /dev/null +++ b/assets/css/governance.css @@ -0,0 +1,354 @@ +.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); +} + +.infrastructure-links { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.infrastructure-card h2 { + font-size: clamp(1.15rem, 2vw, 1.35rem); +} + +.infrastructure-card h2 a { + color: var(--openms-navy); + text-decoration: none; +} + +.infrastructure-card h2 a:hover, +.infrastructure-card h2 a:focus-visible { + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.12em; +} + +.governance-card { + position: relative; + padding: 0.2rem 0.1rem 0.2rem 1.35rem; +} + +.governance-card h2 { + margin-top: 0.05rem; + margin-bottom: 0.75rem; + 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: 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; + } +} diff --git a/assets/css/hero-saas.css b/assets/css/hero-saas.css new file mode 100644 index 0000000..84f88ba --- /dev/null +++ b/assets/css/hero-saas.css @@ -0,0 +1,316 @@ +/* Homepage hero — split layout (copy left, visual panel right) */ + +.hero-home { + position: relative; + overflow: hidden; + background: var(--openms-white); +} + +.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; + padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem); +} + +.hero-home__inner { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); + gap: clamp(2rem, 4vw, 3.5rem); + align-items: center; + max-width: 75rem; + margin: 0 auto; +} + +.hero-home__eyebrow { + display: inline-block; + margin: 0 0 0.85rem; + padding: 0.3rem 0.72rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.2); + border-radius: 999px; +} + +.hero-home__title { + margin: 0 0 1rem; + font-family: var(--openms-font-heading); + font-size: clamp(2rem, 4.5vw, 3.15rem); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; + color: var(--openms-navy); + text-wrap: balance; +} + +.hero-home__title-accent { + display: inline; + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 55%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-home__description { + margin: 0 0 1.5rem; + max-width: 42ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.82); + text-wrap: pretty; +} + +.hero-home__actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: center; +} + +.hero-home__btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.75rem 1.75rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + border-radius: 0.5rem; + text-decoration: none; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, + border-color 0.2s ease; +} + +.hero-home__btn--primary.openms-btn-primary { + border-radius: 0.5rem; +} + +.hero-home__btn--secondary { + color: var(--openms-navy); + background: var(--openms-white); + border: 2px solid rgba(var(--openms-navy-rgb), 0.18); + box-shadow: none; +} + +.hero-home__btn--secondary:hover, +.hero-home__btn--secondary:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.45); + color: var(--openms-blue); + transform: translateY(-2px); + outline: none; +} + +.hero-home__note { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem 1.15rem; + margin: 1rem 0 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); +} + +.hero-home__note-sep { + color: rgba(var(--openms-navy-rgb), 0.28); + user-select: none; +} + +/* Right panel — Nexilo-style bento metric cards */ +.hero-home__panel { + display: flex; + align-items: center; + justify-content: center; + min-height: clamp(14rem, 28vh, 18rem); + background: transparent; + box-shadow: none; +} + +.hero-home__bento { + width: 100%; + max-width: 22rem; + margin-inline: auto; +} + +.hero-home__bento-stack { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.hero-home__bento-duo { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.75rem; +} + +.hero-home__bento-card { + position: relative; + display: flex; + flex-direction: column; + gap: 0.35rem; + padding: clamp(1.1rem, 2.2vh, 1.35rem) clamp(1rem, 2vw, 1.25rem); + border-radius: 1rem; + background: var(--openms-white); + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + box-shadow: + 0 0.5rem 1.5rem rgba(var(--openms-navy-rgb), 0.07), + 0 0.15rem 0.4rem rgba(var(--openms-navy-rgb), 0.04); +} + +.hero-home__bento-card--featured { + padding: clamp(1.35rem, 2.8vh, 1.65rem) clamp(1.15rem, 2.5vw, 1.4rem); +} + +.hero-home__bento-card--accent { + background: linear-gradient( + 145deg, + var(--openms-blue) 0%, + #2d4fd4 55%, + var(--openms-navy) 100% + ); + border-color: transparent; + box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.28); +} + +.hero-home__bento-mark { + position: absolute; + top: 0.85rem; + right: 0.85rem; + width: 0.95rem; + height: 0.95rem; + opacity: 0.35; + background-image: + linear-gradient(currentColor 0 0), + linear-gradient(currentColor 0 0), + linear-gradient(currentColor 0 0), + linear-gradient(currentColor 0 0); + background-size: 38% 38%; + background-position: + 0 0, + 100% 0, + 0 100%, + 100% 100%; + background-repeat: no-repeat; + color: rgba(var(--openms-navy-rgb), 0.35); +} + +.hero-home__bento-card--accent .hero-home__bento-mark { + color: rgba(var(--openms-white-rgb), 0.55); + opacity: 0.7; +} + +.hero-home__bento-value { + margin: 0; + font-family: var(--openms-font-heading); + font-weight: 800; + font-variant-numeric: tabular-nums; + line-height: 1; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.hero-home__bento-card--featured .hero-home__bento-value { + font-size: clamp(2.35rem, 5vw, 3.15rem); +} + +.hero-home__bento-duo .hero-home__bento-value { + font-size: clamp(1.65rem, 3.5vw, 2.15rem); +} + +.hero-home__bento-card--accent .hero-home__bento-value { + color: var(--openms-white); +} + +.hero-home__bento-label { + margin: 0; + max-width: 12rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 500; + line-height: 1.35; + color: rgba(var(--openms-navy-rgb), 0.62); +} + +.hero-home__bento-card--accent .hero-home__bento-label { + color: rgba(var(--openms-white-rgb), 0.88); +} + +.hero-home__bento-card .hero-modern__stat-number { + display: inline; + margin: 0; + font: inherit; + color: inherit; +} + +@media (max-width: 900px) { + .hero-home__inner { + grid-template-columns: 1fr; + gap: 1.75rem; + } + + .hero-home::before { + width: 100%; + height: 45%; + top: auto; + bottom: 0; + } + + .hero-home__description { + max-width: none; + } + + .hero-home__panel { + max-width: 28rem; + margin-inline: auto; + width: 100%; + } +} + +/* SM — same bento layout as desktop; panel uses full content width */ +@media (max-width: 768px) { + .hero-home__panel { + max-width: none; + width: 100%; + } + + .hero-home__bento { + max-width: 22rem; + width: 100%; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-home__btn--secondary:hover { + transform: none; + } +} diff --git a/assets/css/hero.css b/assets/css/hero.css index a8f8fd4..d9663cf 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -377,17 +377,17 @@ .hero-modern__btn--primary { color: var(--openms-white); - background: var(--openms-orange); - border: 2px solid var(--openms-orange); - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-orange-rgb), 0.35); + background: var(--openms-blue-secondary); + border: 2px solid var(--openms-blue-secondary); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-secondary-rgb), 0.35); } .hero-modern__btn--primary:hover { transform: translateY(-2px); - background: var(--openms-yellow); - border-color: var(--openms-yellow); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-yellow-rgb), 0.4); - color: var(--openms-dark); + background: var(--openms-navy); + border-color: var(--openms-navy); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + color: var(--openms-white); } .hero-modern__btn--secondary { diff --git a/assets/css/heroitems.css b/assets/css/heroitems.css index 58d6667..0fc458b 100644 --- a/assets/css/heroitems.css +++ b/assets/css/heroitems.css @@ -545,38 +545,7 @@ } .openms-step__cta { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.35rem; - width: fit-content; margin-top: 0.25rem; - min-height: 2.75rem; - padding: 0.75rem 1.75rem; - border-radius: 0.5rem; - font-family: var(--openms-font-body); - font-size: var(--openms-text-min); - font-weight: 600; - line-height: 1.3; - text-decoration: none; - color: var(--openms-white); - background: var(--openms-blue); - border: 2px solid var(--openms-blue); - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); - transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; -} - -.openms-step__cta:hover, -.openms-step__cta:focus-visible { - background: var(--openms-navy); - border-color: var(--openms-navy); - transform: translateY(-2px); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); - outline: none; -} - -.openms-step__cta:focus-visible { - box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)); } .openms-step__cta-arrow { @@ -721,3 +690,4 @@ border-color: var(--openms-navy); } } + diff --git a/assets/css/home.css b/assets/css/home.css new file mode 100644 index 0000000..58deae8 --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,1387 @@ +/* Homepage — each section has its own layout pattern */ + +.home-page { + --home-max: 75rem; + --home-pad-x: clamp(1.25rem, 4vw, 2.5rem); + --home-pad-y: clamp(3rem, 6.5vh, 5rem); + --home-section-pad: clamp(2.5rem, 5vh, 3.5rem); + --home-section-gap: clamp(2rem, 4vh, 3rem); + --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); + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + background: var(--openms-white); +} + +.home-page > header, +.home-page > section { + margin: 0; +} + +.home-page__container { + width: min(100%, var(--home-max)); + margin: 0 auto; + padding-inline: var(--home-pad-x); +} + +.home-page__block { + margin: 0; +} + +/* Section rhythm — one spacing unit between blocks, no double padding */ +.home-page__hero + .home-page__block--partners .hero-home__main { + padding-bottom: clamp(1rem, 2vh, 1.5rem); +} + +.home-page__hero + .home-page__block--partners .uni-partners--home { + padding-top: clamp(3.5rem, 7vh, 5rem); +} + +.home-page__block--partners:has(+ .home-page__block--projects) .uni-partners--home { + padding-bottom: 0; +} + +.home-page__block--partners + .home-page__block--projects .webapps-featured--home { + padding-top: var(--home-section-gap); +} + +.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--overview + .home-page__trust { + 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 { + border-top: none; +} + +/* ═══════════════════════════════════════════ + 1. HERO — split copy + navy panel (hero-saas.css → .hero-home) + ═══════════════════════════════════════════ */ +.home-page__hero { + margin: 0; + padding: 0; +} + +/* ═══════════════════════════════════════════ + 4. TRUSTED BY — split header + bento logo cards (matches projects / hero) + ═══════════════════════════════════════════ */ +.home-page__trust { + padding: var(--home-section-pad) var(--home-pad-x); + background: var(--openms-white); + border: none; +} + +.home-page__trust .trusted-by--home, +.home-page__trust .trusted-by--ribbon, +.home-page__trust .trusted-by--wall { + padding: 0; + background: transparent; + border: none; +} + +.home-page__trust .trusted-by--home::before, +.home-page__trust .trusted-by--ribbon::before, +.home-page__trust .trusted-by--wall::before { + content: none; +} + +.home-page__trust .trusted-by__shell { + box-sizing: border-box; + width: min(100%, var(--home-max)); + max-width: var(--home-max); + margin-inline: auto; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; +} + +/* Homepage trusted-by — centered header + logo row */ +.home-page__trust .trusted-by__home { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + gap: clamp(2.25rem, 4.5vh, 3.25rem); +} + +.home-page__trust .trusted-by__home-header--center { + display: flex; + flex-direction: column; + align-items: center; + margin: clamp(1rem, 2.5vh, 1.75rem) auto 0; + width: 100%; + max-width: 42rem; + text-align: center; +} + +.home-page__trust .trusted-by__home-eyebrow, +.home-page__cta .contact-home__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 0.85rem; + padding: 0.35rem 0.75rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; +} + +.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, +.home-page__cta .contact-home__title { + margin: 0; + max-width: 36rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.75rem, 3.5vw, 2.65rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + color: var(--openms-navy); + text-wrap: balance; +} + +.home-page__trust .trusted-by__home-title { + margin-inline: auto; + text-align: center; +} + +.home-page__trust .trusted-by__home-title-accent, +.home-page__cta .trusted-by__home-title-accent { + display: inline; + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; +} + +.home-page__trust .trusted-by__home-lead, +.home-page__cta .contact-home__description { + margin: 0.85rem 0 0; + max-width: 38rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-dark-rgb), 0.72); + text-wrap: pretty; +} + +.home-page__trust .trusted-by__home-lead { + margin-inline: auto; + text-align: center; +} + +.home-page__trust .trusted-by__home-grid--row { + list-style: none; + width: fit-content; + max-width: 100%; + margin: clamp(0.75rem, 2vh, 1.25rem) auto 0; + padding: 0; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: clamp(1.5rem, 3vw, 2.5rem); +} + +.home-page__trust .trusted-by__home-item { + display: flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + margin: 0; + padding: 0.25rem; +} + +.home-page__trust .trusted-by__home-card { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-decoration: none; + color: inherit; + background: transparent; + border: none; + box-shadow: none; + border-radius: 0; +} + +.home-page__trust .trusted-by__home-card--static { + cursor: default; +} + +.home-page__trust .trusted-by__home-logo { + display: block; + width: auto; + height: auto; + max-width: min(100%, 10.5rem); + max-height: clamp(2.75rem, 7vh, 4rem); + object-fit: contain; + object-position: center; +} + +.home-page__trust .trusted-by__home-card--logo-large .trusted-by__home-logo, +.home-page__trust .trusted-by__home-logo--large { + max-width: min(100%, 18rem); + max-height: clamp(4rem, 10vh, 6.25rem); +} + +.home-page__trust .trusted-by__home-monogram { + font-family: var(--openms-font-heading); + font-size: 1.25rem; + font-weight: 700; + letter-spacing: 0.06em; + color: rgba(var(--openms-navy-rgb), 0.45); +} + +.home-page__trust a.trusted-by__home-card:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: 4px; + border-radius: 0.25rem; +} + +/* Trusted by → Contact — shared rhythm, softer handoff */ + +@media (min-width: 1280px) { + .home-page__trust .trusted-by__home-grid--row { + gap: clamp(2.5rem, 4vw, 4rem); + } + + .home-page__trust .trusted-by__home-header--center { + max-width: 46rem; + } + +} + +@media (max-width: 640px) { + .home-page__trust .trusted-by__home-grid--row { + gap: 1.25rem 1.5rem; + } + + .home-page__trust .trusted-by__home-title, + .home-page__cta .contact-home__title { + font-size: clamp(1.5rem, 5vw, 2rem); + } + + .home-page__trust .trusted-by__home-logo { + max-height: 2.75rem; + } + + .home-page__trust .trusted-by__home-card--logo-large .trusted-by__home-logo, + .home-page__trust .trusted-by__home-logo--large { + max-width: min(100%, 14.5rem); + max-height: 4rem; + } +} + +/* Ribbon minimal (homepage default) */ +.trusted-by__ribbon--minimal { + display: flex; + flex-direction: column; + align-items: center; + gap: clamp(1.25rem, 2.5vh, 1.75rem); + text-align: center; +} + +.trusted-by__minimal-top { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.35rem; + max-width: 36rem; +} + +.trusted-by__minimal-label { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 500; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.45); +} + +.trusted-by__minimal-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.1rem, 2vw, 1.35rem); + font-weight: 600; + line-height: 1.35; + letter-spacing: -0.01em; + color: var(--openms-navy); + text-wrap: balance; +} + +.trusted-by__minimal-lead { + margin: -0.5rem 0 0; + max-width: 32rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.62); + text-wrap: pretty; +} + +.trusted-by__minimal-logos { + list-style: none; + margin: 0; + padding: 0; + width: 100%; + max-width: 56rem; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0; + border-top: 1px solid var(--home-line); + border-bottom: 1px solid var(--home-line); +} + +.trusted-by__minimal-item { + margin: 0; + flex: 1 1 8rem; + min-width: 0; + display: flex; +} + +.trusted-by__minimal-item:not(:last-child) { + border-right: 1px solid var(--home-line); +} + +.trusted-by__minimal-link { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 4.5rem; + padding: clamp(1.25rem, 2.5vh, 1.75rem) clamp(1rem, 2.5vw, 1.5rem); + text-decoration: none; + color: inherit; + background: transparent; + transition: opacity 0.2s ease; +} + +.trusted-by__minimal-link--static { + cursor: default; +} + +.trusted-by__minimal-img { + display: block; + width: auto; + max-width: min(100%, 9rem); + height: clamp(2rem, 4.5vh, 2.75rem); + object-fit: contain; + object-position: center; + opacity: 0.72; + transition: opacity 0.2s ease; +} + +.trusted-by__minimal-img--large, +.trusted-by__minimal-link--large .trusted-by__minimal-img { + max-width: min(100%, 10.5rem); + height: clamp(2.25rem, 5vh, 3rem); +} + +.trusted-by__minimal-text { + font-family: var(--openms-font-heading); + font-size: 1.125rem; + font-weight: 600; + letter-spacing: 0.06em; + color: rgba(var(--openms-navy-rgb), 0.55); +} + +.trusted-by__minimal-link:hover .trusted-by__minimal-img, +.trusted-by__minimal-link:focus-visible .trusted-by__minimal-img { + opacity: 1; +} + +.trusted-by__minimal-link:hover .trusted-by__minimal-text, +.trusted-by__minimal-link:focus-visible .trusted-by__minimal-text { + color: var(--openms-navy); +} + +.trusted-by__minimal-link:focus-visible { + outline: 2px solid var(--openms-blue); + outline-offset: -2px; +} + +@media (max-width: 640px) { + .trusted-by__minimal-logos { + flex-direction: column; + } + + .trusted-by__minimal-item { + flex: 1 1 auto; + width: 100%; + border-right: none !important; + border-bottom: 1px solid var(--home-line); + } + + .trusted-by__minimal-item:last-child { + border-bottom: none; + } +} + +.trusted-by__wall { + display: grid; + gap: clamp(1.25rem, 2.5vh, 1.75rem); +} + +.trusted-by__wall-head { + max-width: 36rem; + margin: 0 auto; + text-align: center; +} + +.trusted-by__wall-eyebrow { + margin: 0 0 0.65rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.5); +} + +.trusted-by__wall-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.5rem, 3vw, 2.1rem); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.12; + letter-spacing: -0.02em; + color: var(--openms-navy); + text-wrap: balance; +} + +.trusted-by__wall-title-accent { + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 55%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.trusted-by__wall-lead { + margin: 0.75rem 0 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.76); + text-wrap: pretty; +} + +.trusted-by__wall-grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(1rem, 2vw, 1.35rem); + align-items: stretch; +} + +.trusted-by__wall-item { + margin: 0; + min-width: 0; + display: flex; +} + +.trusted-by__wall-card { + display: flex; + flex-direction: column; + width: 100%; + min-height: clamp(11rem, 22vh, 14.5rem); + padding: 0; + overflow: hidden; + border-radius: 1rem; + border: 1px solid var(--home-line); + background: var(--openms-white); + text-decoration: none; + color: inherit; + box-shadow: 0 0.25rem 0.85rem rgba(var(--openms-navy-rgb), 0.05); + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; +} + +.trusted-by__wall-card--static { + cursor: default; +} + +/* Logo area — most of the card */ +.trusted-by__wall-media { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + min-height: clamp(8.5rem, 16vh, 11.5rem); + padding: clamp(1.35rem, 3vh, 2rem) clamp(1.25rem, 3vw, 2rem); + background: linear-gradient( + 180deg, + rgba(var(--openms-blue-rgb), 0.04) 0%, + rgba(var(--openms-white-rgb), 1) 100% + ); + border-bottom: 1px solid var(--home-line); +} + +.trusted-by__wall-card--has-logo .trusted-by__wall-media { + min-height: clamp(9.5rem, 18vh, 12.5rem); + padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 4vw, 2.5rem); +} + +.trusted-by__wall-logo { + display: block; + width: min(100%, 14rem); + height: clamp(3.5rem, 8vh, 5rem); + max-height: none; + max-width: none; + object-fit: contain; + object-position: center; + filter: none; + transition: transform 0.22s ease; +} + +.trusted-by__wall-card--logo-large .trusted-by__wall-media { + min-height: clamp(10.5rem, 20vh, 13.5rem); +} + +.trusted-by__wall-logo--large { + width: min(100%, 18rem); + height: clamp(4.5rem, 10vh, 6.5rem); +} + +.trusted-by__wall-monogram { + display: grid; + place-items: center; + width: clamp(4rem, 10vw, 5.5rem); + height: clamp(4rem, 10vw, 5.5rem); + border-radius: 1rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.25rem, 2.5vw, 1.65rem); + font-weight: 800; + color: var(--openms-navy); + background: rgba(var(--openms-blue-rgb), 0.08); + border: 2px solid rgba(var(--openms-blue-rgb), 0.15); +} + +.trusted-by__wall-footer { + flex: 0 0 auto; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.35rem 0.65rem; + padding: 0.65rem 0.85rem 0.75rem; + background: var(--openms-white); +} + +.trusted-by__wall-name { + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + line-height: 1.3; + color: rgba(var(--openms-navy-rgb), 0.75); + text-align: center; +} + +.trusted-by__wall-cta { + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--openms-blue); + opacity: 0; + transform: translateY(2px); + transition: opacity 0.2s ease, transform 0.2s ease; +} + +.trusted-by__wall-cta::after { + content: " →"; +} + +.trusted-by__wall-card:hover, +.trusted-by__wall-card:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.3); + box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.14); + transform: translateY(-2px); + outline: none; +} + +.trusted-by__wall-card:hover .trusted-by__wall-logo, +.trusted-by__wall-card:focus-visible .trusted-by__wall-logo { + transform: scale(1.06); +} + +.trusted-by__wall-card:hover .trusted-by__wall-cta, +.trusted-by__wall-card:focus-visible .trusted-by__wall-cta { + opacity: 1; + transform: translateY(0); +} + +@media (min-width: 900px) { + .trusted-by__wall-grid { + max-width: 52rem; + margin-inline: auto; + } + + .trusted-by__wall-logo { + width: min(100%, 16rem); + height: clamp(4rem, 9vh, 5.5rem); + } + + .trusted-by__wall-logo--large { + width: min(100%, 20rem); + height: clamp(5rem, 11vh, 7rem); + } +} + +/* ═══════════════════════════════════════════ + 3. OVERVIEW — sidebar headline + 2×2 card grid + ═══════════════════════════════════════════ */ +.home-page__block--overview .keyfeatures-modern--home { + --kf-section-pad-block: var(--home-section-pad); + margin: 0; + padding: var(--home-section-pad) var(--home-pad-x); + background: var(--openms-white); + border: none; + color: var(--openms-navy); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__inner { + max-width: var(--home-max); + margin: 0 auto; + padding: 0; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__layout { + display: grid; + grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); + grid-template-areas: + "header topics" + "note note"; + gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem); + align-items: start; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__header { + grid-area: header; + position: sticky; + top: 1.5rem; + text-align: left; + justify-items: start; + padding-top: 0; + max-width: none; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__eyebrow { + margin: 0 0 0.65rem; + padding: 0.3rem 0.65rem; + 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; + letter-spacing: 0.08em; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__title { + font-size: var(--home-head); + color: var(--openms-navy); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__lead { + text-align: left; + color: rgba(var(--openms-dark-rgb), 0.78); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topics { + grid-area: topics; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.75rem; + align-self: stretch; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-card { + background: #f7f9fc; + border: 1px solid var(--home-line); + box-shadow: none; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-card:hover { + border-color: rgba(var(--openms-blue-rgb), 0.3); + box-shadow: 0 0.35rem 1rem rgba(var(--openms-blue-rgb), 0.1); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-icon { + background: var(--openms-white); + border-color: var(--home-line); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-icon--mark { + color: var(--openms-navy); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-icon img { + filter: none; +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-title { + color: var(--openms-navy); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topic-text { + color: rgba(var(--openms-dark-rgb), 0.76); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note { + grid-area: note; + max-width: none; + color: rgba(var(--openms-dark-rgb), 0.82); + background: rgba(var(--openms-yellow-rgb), 0.12); + border: 1px solid rgba(var(--openms-orange-rgb), 0.25); + border-left: 4px solid var(--openms-orange); +} + +.home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__note a { + color: var(--openms-blue); +} + +/* ═══════════════════════════════════════════ + 4. PATHWAYS — numbered vertical step list + ═══════════════════════════════════════════ */ +.home-page__block--pathways { + padding: var(--home-pad-y) 0; + background: linear-gradient( + 180deg, + rgba(var(--openms-blue-rgb), 0.04) 0%, + var(--openms-white) 100% + ); + border-bottom: 1px solid var(--home-line); +} + +.home-pathways--steps .home-pathways__container { + display: grid; + gap: clamp(1.5rem, 3vh, 2rem); +} + +.home-pathways__head { + max-width: 28rem; +} + +.home-pathways__eyebrow { + margin: 0 0 0.5rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.5); +} + +.home-pathways__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: var(--home-head); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.12; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.home-pathways__steps { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 0.65rem; + counter-reset: home-step; +} + +.home-pathways__step-link { + display: grid; + grid-template-columns: 3.25rem minmax(0, 1fr) auto; + align-items: center; + gap: 1rem; + padding: clamp(1rem, 2vw, 1.2rem) clamp(1.1rem, 2vw, 1.35rem); + border-radius: 0.75rem; + border: 1px solid var(--home-line); + background: var(--openms-white); + text-decoration: none; + color: inherit; + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; +} + +.home-pathways__step:nth-child(1) .home-pathways__step-link { + border-left: 4px solid var(--openms-blue); +} + +.home-pathways__step:nth-child(2) .home-pathways__step-link { + border-left: 4px solid var(--openms-purple); +} + +.home-pathways__step:nth-child(3) .home-pathways__step-link { + border-left: 4px solid var(--openms-pink); +} + +.home-pathways__step-link:hover, +.home-pathways__step-link:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.35); + box-shadow: 0 0.4rem 1.2rem rgba(var(--openms-blue-rgb), 0.1); + transform: translateX(4px); + outline: none; +} + +.home-pathways__step-num { + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 2vw, 1.65rem); + font-weight: 800; + line-height: 1; + color: rgba(var(--openms-navy-rgb), 0.2); +} + +.home-pathways__step-body { + display: flex; + flex-direction: column; + gap: 0.25rem; + min-width: 0; +} + +.home-pathways__step-label { + font-family: var(--openms-font-heading); + font-size: clamp(1.02rem, 1.2vw, 1.12rem); + font-weight: 700; + color: var(--openms-navy); +} + +.home-pathways__step-text { + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.74); +} + +.home-pathways__step-go { + font-size: 1.25rem; + font-weight: 700; + color: var(--openms-blue); +} + +/* ═══════════════════════════════════════════ + 5. PROJECTS — Nexilo-style split header + feature cards + ═══════════════════════════════════════════ */ +.home-page__block--projects .webapps-featured--home { + padding: var(--home-section-pad) var(--home-pad-x); + background: #f4f6fa; + color: var(--openms-navy); + border: none; +} + +.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(--home-max); + margin: 0 auto; + display: block; +} + +.home-page__block--projects .webapps-featured__header--split { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); + gap: clamp(1.5rem, 4vw, 3rem); + align-items: end; + margin: 0 0 clamp(2rem, 4vh, 2.75rem); + text-align: left; +} + +.home-page__block--projects .webapps-featured__header-intro { + max-width: 26rem; +} + +.home-page__block--projects .webapps-featured__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 0.85rem; + padding: 0.35rem 0.75rem; + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; +} + +.home-page__block--projects .webapps-featured__eyebrow-icon { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + line-height: 0; + opacity: 0.9; +} + +.home-page__block--projects .webapps-featured__eyebrow-icon svg { + display: block; + width: 0.875rem; + height: 0.875rem; +} + +.home-page__block--projects .webapps-featured__header-title-wrap .webapps-featured__title { + margin: 0; + font-size: clamp(2rem, 4.2vw, 3.15rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + color: var(--openms-navy); + text-align: left; + max-width: none; +} + +.home-page__block--projects .webapps-featured__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; +} + +.home-page__block--projects .webapps-featured__header-intro .webapps-featured__lead { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-dark-rgb), 0.72); + text-align: left; +} + +.home-page__block--projects .webapps-featured__grid--bento { + --webapps-bento-visual-h: clamp(12rem, 22vh, 15rem); + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: stretch; + gap: clamp(1rem, 2vw, 1.35rem); +} + +.home-page__block--projects .webapps-featured__item { + display: flex; + min-width: 0; + height: 100%; +} + +.home-page__block--projects .webapps-project-card--bento { + display: flex; + width: 100%; + height: 100%; + min-height: 100%; +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface { + display: flex; + flex-direction: column; + height: 100%; + padding: 0; + overflow: hidden; + border-radius: 1.15rem; + background: var(--openms-white); + border: 1px solid rgba(var(--openms-navy-rgb), 0.07); + box-shadow: + 0 0.5rem 1.75rem rgba(var(--openms-navy-rgb), 0.07), + 0 0.15rem 0.45rem rgba(var(--openms-navy-rgb), 0.04); + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:hover, +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:focus-visible { + transform: translateY(-4px); + border-color: rgba(var(--openms-blue-rgb), 0.2); + box-shadow: + 0 1rem 2.5rem rgba(var(--openms-blue-rgb), 0.12), + 0 0.25rem 0.75rem rgba(var(--openms-navy-rgb), 0.06); + outline: none; +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__visual { + display: flex; + flex: 0 0 var(--webapps-bento-visual-h); + align-items: stretch; + justify-content: stretch; + box-sizing: border-box; + width: 100%; + min-width: 0; + height: var(--webapps-bento-visual-h); + min-height: var(--webapps-bento-visual-h); + max-height: var(--webapps-bento-visual-h); + padding: clamp(1.25rem, 2.5vh, 2rem); + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.1) 0%, + rgba(var(--openms-purple-rgb), 0.05) 42%, + rgba(var(--openms-white-rgb), 1) 100% + ); + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.06); +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__logo { + display: block; + flex: 1 1 auto; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; + max-width: none; + max-height: none; + object-fit: contain; + object-position: center; + filter: none; +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:hover .webapps-project-card__logo, +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:focus-visible .webapps-project-card__logo { + transform: scale(1.03); +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__content { + display: flex; + flex-direction: column; + gap: 0.45rem; + flex: 1 1 auto; + padding: clamp(1.15rem, 2.2vh, 1.4rem) clamp(1.25rem, 2.5vw, 1.5rem) + clamp(1.35rem, 2.5vh, 1.6rem); +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__name { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.8vw, 1.2rem); + font-weight: 700; + line-height: 1.25; + color: var(--openms-navy); +} + +.home-page__block--projects .webapps-project-card--bento .webapps-project-card__text { + margin: 0; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.68); + -webkit-line-clamp: 3; +} + +.home-page__block--projects .webapps-featured__footer { + margin-top: clamp(2rem, 4vh, 2.75rem); + margin-bottom: clamp(3.5rem, 7vh, 5rem); + text-align: center; +} + +.home-page__block--projects .webapps-featured__show-all { + border-radius: 0.5rem; + padding: 0.75rem 1.75rem; +} + +/* ═══════════════════════════════════════════ + 6. PARTNERS — Neurox-style trust line + logo marquee + ═══════════════════════════════════════════ */ +.home-page__block--partners .uni-partners--home { + padding: var(--home-section-pad) 0; + background: var(--openms-white); + border: none; +} + +.home-page__block--partners .uni-partners--home .uni-partners__inner { + max-width: none; +} + +.home-page__block--partners .uni-partners--home .uni-partners__header--trust { + max-width: none; + margin: 0 auto; + padding-inline: var(--home-pad-x); + text-align: center; +} + +.home-page__block--partners .uni-partners--home .uni-partners__tagline { + margin: 0; + font-family: var(--openms-font-body); + font-size: clamp(0.8125rem, 1.6vw, 0.9375rem); + font-weight: 500; + line-height: 1.5; + letter-spacing: 0.01em; + color: rgba(var(--openms-navy-rgb), 0.5); + text-wrap: balance; +} + +.home-page__block--partners .uni-partners--home .uni-partners__tagline-strong { + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.home-page__block--partners .uni-partners--home .uni-partners__marquee { + margin-top: clamp(0.75rem, 1.5vh, 1.25rem); + margin-bottom: clamp(3.5rem, 7vh, 5rem); + background: transparent; + border: none; +} + +.home-page__block--partners .uni-partners--home .uni-partners__marquee::before, +.home-page__block--partners .uni-partners--home .uni-partners__marquee::after { + width: clamp(3rem, 8vw, 6rem); +} + +.home-page__block--partners .uni-partners--home .uni-partners__track { + padding: 0.35rem 0; + animation-duration: 36s; +} + +.home-page__block--partners .uni-partners--home .uni-partners__row { + gap: clamp(2.5rem, 6vw, 4.5rem); + padding: 0 clamp(2rem, 5vw, 3.5rem); +} + +.home-page__block--partners .uni-partners--home { + --uni-home-logo-w: clamp(10rem, 14vw, 12.5rem); + --uni-home-logo-h: clamp(3.25rem, 5.5vh, 4rem); +} + +.home-page__block--partners .uni-partners--home .uni-partners__item { + flex: 0 0 var(--uni-home-logo-w); + width: var(--uni-home-logo-w); + height: var(--uni-home-logo-h); + min-width: var(--uni-home-logo-w); + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.home-page__block--partners .uni-partners--home .uni-partners__item:hover, +.home-page__block--partners .uni-partners--home .uni-partners__item:focus-visible { + transform: none; +} + +.home-page__block--partners .uni-partners--home .uni-partners__item img { + width: var(--uni-home-logo-w); + height: var(--uni-home-logo-h); + max-width: var(--uni-home-logo-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 (max-width: 768px) { + .home-page__block--partners .uni-partners--home { + --uni-home-logo-w: 9rem; + --uni-home-logo-h: 3.25rem; + } + + .home-page__block--partners .uni-partners--home .uni-partners__row { + gap: 2rem; + } +} + +/* ═══════════════════════════════════════════ + 7. SPONSORS — split intro + logo tiles + ═══════════════════════════════════════════ */ +.home-page__block--sponsors .hero-sponsors { + min-height: 0; + padding: var(--home-pad-y) var(--home-pad-x); + background: #f0f4fa; + border: none; +} + +.home-page__block--sponsors .hero-sponsors__inner { + max-width: var(--home-max); + margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); + gap: clamp(1.5rem, 3vw, 2.5rem); + align-items: center; +} + +.home-page__block--sponsors .hero-sponsors__intro { + text-align: left; +} + +.home-page__block--sponsors .hero-sponsors__label { + margin: 0 0 0.65rem; + color: var(--openms-navy); + background: rgba(var(--openms-blue-rgb), 0.1); + border-color: rgba(var(--openms-blue-rgb), 0.2); +} + +.home-page__block--sponsors .hero-sponsors__description { + margin: 0; + max-width: 32ch; + text-align: left; + color: rgba(var(--openms-dark-rgb), 0.78); + font-size: var(--openms-body-size-lg); + line-height: 1.6; +} + +.home-page__block--sponsors .hero-sponsors__logos { + gap: 0.75rem; +} + +.home-page__block--sponsors .hero-sponsors__logo-link { + min-height: 5rem; + border-radius: 0.85rem; + background: var(--openms-white); + border: 1px solid var(--home-line); + box-shadow: 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05); +} + +/* ═══════════════════════════════════════════ + 8. CTA — homepage contact (contact-area.css → .contact-home) + ═══════════════════════════════════════════ */ +.home-page__cta { + margin: 0; + padding: 0; +} + +/* ─── Responsive ─── */ +@media (max-width: 1024px) { + .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__layout { + grid-template-columns: 1fr; + grid-template-areas: + "header" + "topics" + "note"; + } + + .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__header { + position: static; + } + + .home-page__block--projects .webapps-featured__header--split { + grid-template-columns: 1fr; + align-items: start; + } + + .home-page__block--projects .webapps-featured__header-title-wrap .webapps-featured__title { + font-size: clamp(1.75rem, 5vw, 2.35rem); + } + + .home-page__block--projects .webapps-featured__grid--bento { + grid-template-columns: 1fr; + } + + .home-page__block--sponsors .hero-sponsors__inner { + grid-template-columns: 1fr; + text-align: center; + } + + .home-page__block--sponsors .hero-sponsors__intro, + .home-page__block--sponsors .hero-sponsors__description { + text-align: center; + margin-inline: auto; + } + +} + +@media (max-width: 768px) { + .home-page__block--overview .keyfeatures-modern--home .keyfeatures-modern__topics { + grid-template-columns: 1fr; + } + + .home-pathways__step-link { + grid-template-columns: 2.5rem minmax(0, 1fr) auto; + } +} + +@media (max-width: 520px) { + .trusted-by__wall-grid { + grid-template-columns: 1fr; + } + + .trusted-by__wall-card { + min-height: 12rem; + } + + .trusted-by__wall-cta { + opacity: 1; + transform: none; + } +} + +@media (prefers-reduced-motion: reduce) { + .home-pathways__step-link:hover, + .home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:hover, + .home-page__block--projects .webapps-project-card__surface:hover, + .contact-area__cta-secondary:hover, + .trusted-by__wall-card:hover { + transform: none; + } + + .trusted-by__wall-card:hover .trusted-by__wall-logo { + transform: none; + } +} diff --git a/assets/css/keyfeatures-modern.css b/assets/css/keyfeatures-modern.css index 85b94d7..155c93d 100644 --- a/assets/css/keyfeatures-modern.css +++ b/assets/css/keyfeatures-modern.css @@ -258,3 +258,4 @@ transform: none; } } + diff --git a/assets/css/landing-page.css b/assets/css/landing-page.css new file mode 100644 index 0000000..af7b43a --- /dev/null +++ b/assets/css/landing-page.css @@ -0,0 +1 @@ +/* Deprecated: homepage layout lives in home.css (class .home-page) */ diff --git a/assets/css/navbar-responsive.css b/assets/css/navbar-responsive.css index 580e93e..4abd01d 100644 --- a/assets/css/navbar-responsive.css +++ b/assets/css/navbar-responsive.css @@ -1,4 +1,33 @@ -/* Navbar — tablet (md) & mobile (sm) */ +/* Navbar — burger menu through md/lg (≤1279px), SM layout; horizontal bar from 1280px (xl) */ + +.site-header { + max-width: 100%; +} + +.site-header #nav.navbar.is-fresh { + max-width: 100%; +} + +.navbar-backdrop { + display: none; +} + +.site-header #nav.navbar.is-fresh .navbar-burger.is-active span:nth-child(1), +#navbar-clone.navbar.is-fresh .navbar-burger.is-active span:nth-child(1) { + top: calc(50% - 1px); + transform: rotate(45deg); +} + +.site-header #nav.navbar.is-fresh .navbar-burger.is-active span:nth-child(2), +#navbar-clone.navbar.is-fresh .navbar-burger.is-active span:nth-child(2) { + opacity: 0; +} + +.site-header #nav.navbar.is-fresh .navbar-burger.is-active span:nth-child(3), +#navbar-clone.navbar.is-fresh .navbar-burger.is-active span:nth-child(3) { + top: calc(50% - 1px); + transform: rotate(-45deg); +} /* Mobile bar CTAs — hidden on desktop */ .navbar-mobile-ctas, @@ -11,77 +40,338 @@ align-items: center; } -/* Desktop — horizontal bar */ -@media (min-width: 1024px) { +.navbar-links, +.navbar-actions { + display: flex; + align-items: center; +} + +/* Desktop XL — horizontal bar (1280px+) */ +@media (min-width: 1280px) { .navbar-mobile-ctas, .navbar-mobile-ctas-end, .navbar-brand-actions { display: none; } + .navbar-mobile-social { + display: none !important; + } + .navbar-desktop-cta { display: contents; } + .navbar-cta-label--short { + display: none; + } + + .navbar-cta-label--full { + display: inline; + } + .navbar.is-fresh .navbar-burger, #navbar-clone.navbar.is-fresh .navbar-burger { display: none; } + .site-header #nav.navbar.is-fresh, + #navbar-clone.navbar.is-fresh { + min-height: 4.75rem; + overflow: visible; + } + + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + width: 100%; + max-width: 100%; + min-height: 4.75rem; + padding-left: clamp(0.75rem, 1.5vw, 2rem); + padding-right: clamp(0.75rem, 1.5vw, 2rem); + gap: 0.5rem; + 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; + position: relative; + z-index: 2; + min-width: 0; + min-height: inherit; + max-width: min(240px, 22vw); + } + + .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%; + } + + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 64px !important; + height: 64px !important; + max-width: 100%; + object-fit: contain; + object-position: left center; + } + .navbar.is-fresh .navbar-menu.is-static, #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { - display: flex !important; - flex: 1; + display: grid !important; + grid-column: 1 / -1; + grid-row: 1; + grid-template-columns: 1fr auto 1fr; + align-items: center; min-width: 0; position: static; box-shadow: none; background: transparent; overflow: visible; + pointer-events: none; } .site-header #nav.navbar.is-fresh .navbar-end, #navbar-clone.navbar.is-fresh .navbar-end { - flex-wrap: wrap; - justify-content: flex-end; + display: contents; + } + + .site-header #nav.navbar.is-fresh .navbar-links, + #navbar-clone.navbar.is-fresh .navbar-links { + grid-column: 2; + display: flex; + flex-wrap: nowrap; align-items: center; + justify-content: center; + gap: 1rem; + min-width: max-content; + max-width: min(100%, calc(100vw - 30rem)); + overflow: visible; + pointer-events: auto; + } + + .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; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown { + position: absolute; + top: 100%; + left: auto; + right: 0; + transform: none; + z-index: 400; + overflow: visible; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link { + display: inline-flex; + align-items: center; + gap: 0.25rem; + max-width: none; + overflow: visible; + text-overflow: clip; + padding-right: 0.45rem !important; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link::after { + position: relative; + top: 0.1em; + right: auto; + margin-left: 0.25rem; + } + + .site-header #nav.navbar.is-fresh .navbar-actions, + #navbar-clone.navbar.is-fresh .navbar-actions { + grid-column: 3; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-end; + gap: 0.5rem; + min-width: 0; + justify-self: end; + pointer-events: auto; + } + + .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: 0.85rem; + padding-right: 0.85rem; + 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: 0.85rem; + 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: 0.9rem; } } -/* Medium desktop — tighter items so CTAs stay visible */ -@media (min-width: 1024px) and (max-width: 1280px) { - .navbar.is-fresh .navbar-brand img.navbar-logo, +/* Lower XL (1280–1399px) — slightly tighter than wide xl */ +@media (min-width: 1280px) and (max-width: 1399px) { + .site-header #nav.navbar.is-fresh .navbar-links, + #navbar-clone.navbar.is-fresh .navbar-links { + gap: 0.75rem; + } + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { - max-height: 64px !important; - height: 64px !important; + max-height: 56px !important; + height: 56px !important; } - .navbar.is-fresh .navbar-logo-text, - #navbar-clone.navbar.is-fresh .navbar-logo-text { - font-size: var(--openms-secondary-heading-size-lg); + .site-header #nav.navbar.is-fresh .navbar-brand, + #navbar-clone.navbar.is-fresh .navbar-brand { + max-width: min(200px, 20vw); } .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 { - font-size: var(--openms-text-min); - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; } - .navbar.is-fresh .signup-button, - #navbar-clone.navbar.is-fresh .signup-button { - font-size: var(--openms-text-min); - padding: 0.5rem 0.875rem !important; - white-space: nowrap; + .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link { + padding-left: 0.75rem; + } + + .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: 0.8rem; + } +} + +/* Compact desktop — many nav items between xl and 2xl */ +@media (min-width: 1280px) and (max-width: 1535px) { + .site-header #nav.navbar.is-fresh .navbar-links, + #navbar-clone.navbar.is-fresh .navbar-links { + gap: 0.65rem; + max-width: min(100%, calc(100vw - 28rem)); + } + + .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: 0.65rem; + padding-right: 0.65rem; + font-size: 0.9375rem; + } +} + + +/* XL wide — room for full logo and comfortable link spacing */ +@media (min-width: 1536px) { + .site-header #nav.navbar.is-fresh, + #navbar-clone.navbar.is-fresh, + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container, + .navbar.is-fresh .navbar-brand, + .navbar.is-fresh .container { + min-height: 5.5rem; + } + + .site-header #nav.navbar.is-fresh .navbar-brand, + #navbar-clone.navbar.is-fresh .navbar-brand { + max-width: min(300px, 24vw); + } + + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 88px !important; + height: 88px !important; + } + + .site-header #nav.navbar.is-fresh .navbar-links, + #navbar-clone.navbar.is-fresh .navbar-links { + gap: 1.25rem; + } + + .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: 1rem; + padding-right: 1rem; } + + .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link { + padding-left: 1rem; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link { + padding-right: 0.45rem !important; + } + } -/* Tablet & mobile — collapsible menu (Bulma < 1024px) */ -@media (max-width: 1023px) { +/* Tablet, md & mobile — collapsible burger menu */ +@media (max-width: 1279px) { + .site-header { + overflow-x: clip; + } + .site-header #nav.navbar.is-fresh, #navbar-clone.navbar.is-fresh { min-height: auto; + overflow: visible; + } + + .site-header #nav.navbar.is-fresh.is-menu-open .navbar-backdrop, + #navbar-clone.navbar.is-fresh.is-menu-open .navbar-backdrop { + display: block; + position: fixed; + left: 0; + right: 0; + top: var(--openms-header-height, 4.5rem); + bottom: 0; + z-index: 240; + margin: 0; + border: none; + padding: 0; + background: rgba(var(--openms-navy-rgb), 0.35); + cursor: pointer; } .site-header #nav.navbar.is-fresh .container, @@ -144,59 +434,25 @@ overflow: visible; } - /* Right cluster: Spon → Give → menu */ + /* Right cluster: search → burger */ .navbar-mobile-ctas-end { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; - gap: 0.25rem; + gap: 0.35rem; flex-shrink: 0; margin-left: auto; overflow: visible; max-width: 100%; } - .navbar-mobile-ctas-end .navbar-cta-label--full, - .navbar-mobile-ctas .navbar-cta-label--full { - display: none; - } - - .navbar-mobile-ctas-end .navbar-cta-label--short, - .navbar-mobile-ctas .navbar-cta-label--short { - display: inline; - } - - .navbar-mobile-ctas-end .navbar-cta-item { - display: inline-flex !important; - align-items: center; - flex-shrink: 0; - width: auto !important; - max-width: none; - justify-content: center; - text-align: center; - padding: 0; - } - - .navbar-mobile-ctas-end .navbar-cta-item:nth-child(1) { + .navbar-mobile-ctas-end .navbar-search--mobile { order: 1; } - .navbar-mobile-ctas-end .navbar-cta-item:nth-child(2) { - order: 2; - } - - .navbar-mobile-ctas-end .signup-button { - display: inline-block !important; - padding: 0.35rem 0.5rem !important; - font-size: var(--openms-text-min); - line-height: 1.15; - white-space: nowrap; - border-width: 1.5px !important; - } - .navbar-mobile-ctas-end .navbar-burger { - order: 3; + order: 2; display: flex !important; flex-shrink: 0; align-items: center; @@ -221,6 +477,7 @@ height: 2px; width: 1.25rem; left: calc(50% - 0.625rem); + transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease; } /* Overlay menu — does not expand header height */ @@ -273,6 +530,68 @@ padding: 0.5rem 0 1rem; } + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: stretch; + gap: 0.5rem; + width: 100%; + margin-top: auto; + padding: 1rem 1rem 0.75rem; + border-top: 1px solid var(--openms-grey); + border-bottom: none; + background: linear-gradient( + 0deg, + rgba(var(--openms-blue-rgb), 0.06) 0%, + rgba(var(--openms-white-rgb), 1) 100% + ); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--full, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--full { + display: inline; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--short, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-label--short { + display: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item { + display: flex !important; + align-items: center; + justify-content: center; + width: 100% !important; + max-width: none; + min-height: 2.75rem; + padding: 0.65rem 1.25rem !important; + border-radius: 0.65rem; + font-size: 0.9375rem; + text-align: center; + white-space: nowrap; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary .navbar-cta-label, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate .navbar-cta-label, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate .navbar-cta-label { + color: inherit !important; + } + + .site-header #nav.navbar.is-fresh .navbar-links, + #navbar-clone.navbar.is-fresh .navbar-links { + flex-direction: column; + align-items: stretch; + width: 100%; + } + + .site-header #nav.navbar.is-fresh .navbar-actions, + #navbar-clone.navbar.is-fresh .navbar-actions { + display: none !important; + } + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, .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, @@ -280,23 +599,51 @@ #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown { width: 100%; - justify-content: center; - text-align: center; - padding: 0.65rem 1rem; + justify-content: flex-start; + text-align: left; + min-height: 3rem; + padding: 0.8rem 1.25rem; + font-weight: 600; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08); + } + + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:last-child, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:last-child, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown:last-child, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown:last-child { + border-bottom: none; } .navbar.is-fresh .navbar-item.has-dropdown .navbar-link, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { width: 100%; - justify-content: center; + justify-content: space-between; + text-align: left; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link { + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.06); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after { + transform: rotate(180deg); + border-color: var(--openms-blue); } .navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { position: relative; - top: auto; + top: 0.1em; right: auto; - margin-left: 0.35rem; + margin-left: 0.25rem; + } + + .navbar.is-fresh .navbar-item.has-dropdown .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link { + gap: 0.25rem; } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, @@ -334,14 +681,28 @@ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-heading { width: 100%; - text-align: center; - border-top-color: var(--openms-grey); + text-align: left; + padding-left: 1.5rem; + padding-right: 1.25rem; + border-top-color: rgba(var(--openms-navy-rgb), 0.08); color: var(--openms-blue); + font-size: 0.75rem; + letter-spacing: 0.04em; + text-transform: uppercase; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item { + justify-content: flex-start; + text-align: left; + font-weight: 500; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.06); } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested { - font-size: var(--openms-body-size); + font-size: var(--openms-navbar-font-size); + padding-left: 1.75rem; } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social, @@ -351,9 +712,9 @@ align-items: center; gap: 1.25rem; width: 100%; - margin-top: auto; - padding: 1.25rem 1rem 1.5rem; - border-top: 1px solid var(--openms-grey); + margin-top: 0; + padding: 0.75rem 1rem max(1.25rem, env(safe-area-inset-bottom, 0px)); + border-top: none; } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a, @@ -365,15 +726,9 @@ min-width: 44px; min-height: 44px; padding: 0; - color: var(--openms-blue); transition: color 0.2s ease; } - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, - #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover { - color: var(--openms-orange); - } - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon { width: 1.5rem; @@ -383,69 +738,355 @@ } -@media (min-width: 1024px) { - .navbar-mobile-social { +/* Mobile + MD (≤1279px) — same layout as SM phones */ +@media (max-width: 1279px) { + .site-header #nav.navbar.is-fresh.is-menu-open .navbar-backdrop, + #navbar-clone.navbar.is-fresh.is-menu-open .navbar-backdrop { display: none !important; } -} -/* Small phones */ -@media (max-width: 768px) { .site-header #nav.navbar.is-fresh .container, #navbar-clone.navbar.is-fresh .container { - min-height: 4rem; + min-height: 4.25rem; + padding-left: 0.75rem; + padding-right: 0.75rem; } .site-header #nav.navbar.is-fresh .navbar-brand, #navbar-clone.navbar.is-fresh .navbar-brand { - min-height: 4rem; - } - - .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, - #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { - max-height: 52px !important; - height: 52px !important; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + column-gap: 0.65rem; + min-height: 4.25rem; + width: 100%; } .site-header #nav.navbar.is-fresh .navbar-brand-link, #navbar-clone.navbar.is-fresh .navbar-brand-link { - max-width: 46%; + grid-column: 1; + max-width: 100%; + min-width: 0; + padding: 0.25rem 0; + } + + .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; } -} -@media (max-width: 380px) { .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { - max-height: 48px !important; - height: 48px !important; + max-height: 58px !important; + height: 58px !important; + max-width: min(100%, 11.5rem); } - .site-header #nav.navbar.is-fresh .navbar-brand-link, - #navbar-clone.navbar.is-fresh .navbar-brand-link { - max-width: 42%; + .navbar-mobile-toolbar.navbar-mobile-ctas-end { + gap: 0.15rem; + padding: 0; + border: none; + background: transparent; + box-shadow: none; } - .navbar-mobile-ctas-end { - gap: 0.2rem; + .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-ctas-end .signup-button { - padding: 0.3rem 0.4rem !important; + .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; } - .navbar-mobile-ctas-end .navbar-burger { - width: 2.5rem; - height: 2.5rem; + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + left: 0; + right: 0; + width: 100vw; + max-width: 100vw; + border-left: none; + box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); } -} -/* Desktop CTA labels */ -@media (min-width: 1024px) { - .navbar-cta-label--short { - display: none; + .site-header #nav.navbar.is-fresh .navbar-end, + #navbar-clone.navbar.is-fresh .navbar-end { + padding-bottom: 0; } - .navbar-cta-label--full { - display: inline; + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas { + padding: 1rem 1rem 0.65rem; + } + + .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 { + min-height: 2.65rem; + padding: 0.55rem 0.65rem !important; + font-size: 0.8125rem; + border-radius: 0.55rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-links { + align-items: center; + padding: 0.35rem 0 0; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + justify-content: center; + text-align: center; + padding-left: 1.25rem; + padding-right: 1.25rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .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-heading, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested { + justify-content: center; + text-align: center; + padding-left: 1.25rem; + padding-right: 1.25rem; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social { + padding: 0.65rem 1.35rem max(1.25rem, env(safe-area-inset-bottom, 0px)); + gap: 1rem; + } + + /* Flat menu — blue text on hover, no background fill */ + .site-header #nav.navbar.is-fresh, + #navbar-clone.navbar.is-fresh { + border-bottom: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + border-top: none; + box-shadow: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas { + border: none; + background: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { + border: none; + background: transparent; + background-color: transparent; + box-shadow: none; + } + + .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 { + background: transparent !important; + background-color: transparent !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown .navbar-dropdown { + background: transparent !important; + background-color: transparent !important; + box-shadow: none; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item { + border: none; + background: transparent; + background-color: transparent; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item):hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link:hover, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible, + .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-item:not(.navbar-cta-item):hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:hover, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link: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 { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link, + .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-item.has-dropdown.is-active > .navbar-link:focus-visible, + #navbar-clone.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:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:focus-visible { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !important; + } + + /* SM–MD icon colors — blue default, orange on interaction */ + .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle { + color: var(--openms-blue); + } + + .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-orange); + background: transparent; + } + + .navbar-mobile-toolbar .navbar-burger { + color: var(--openms-blue); + } + + .navbar-mobile-toolbar .navbar-burger span { + background-color: var(--openms-blue); + } + + .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-orange); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a { + color: var(--openms-blue); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible { + color: var(--openms-orange); + background: transparent; + } + + .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 { + fill: currentColor; + } + + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item svg.icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg.icon { + color: var(--openms-blue); + fill: currentColor; + } + + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item:hover svg.icon, + .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item:focus-visible svg.icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link:hover svg.icon, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link:focus-visible svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item:hover svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item:focus-visible svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:hover svg.icon, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:focus-visible svg.icon { + color: var(--openms-orange); + fill: currentColor; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link::after { + border-color: var(--openms-blue) !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible::after, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after { + border-color: var(--openms-orange) !important; + } + + @media (max-width: 480px) { + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas { + grid-template-columns: 1fr; + gap: 0.45rem; + } + + .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 { + min-height: 2.5rem; + padding: 0.55rem 1rem !important; + font-size: 0.875rem; + } + } + + @media (max-width: 380px) { + .site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, + #navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: 52px !important; + height: 52px !important; + max-width: min(100%, 10rem); + } + + .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle, + .navbar-mobile-toolbar .navbar-burger { + width: 2.5rem; + height: 2.5rem; + min-width: 2.5rem; + min-height: 2.5rem; + } + } +} + +@media (prefers-reduced-motion: reduce) { + .site-header #nav.navbar.is-fresh .navbar-burger.is-active span, + #navbar-clone.navbar.is-fresh .navbar-burger.is-active span { + transition: none; } } + diff --git a/assets/css/navbar-search.css b/assets/css/navbar-search.css new file mode 100644 index 0000000..a0dbe59 --- /dev/null +++ b/assets/css/navbar-search.css @@ -0,0 +1,244 @@ +/* Navbar site search — magnifying glass toggles expandable panel */ + +.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-dark); + cursor: pointer; + transition: color 0.2s ease; +} + +.navbar-search__toggle:hover, +.navbar-search__toggle:focus-visible { + color: var(--openms-blue); + background: transparent; + outline: none; +} + +.navbar-search.is-open .navbar-search__toggle { + color: var(--openms-blue); + background: transparent; +} + +.navbar-search__toggle-icon { + display: block; + width: 1.5rem; + height: 1.5rem; +} + +@media (min-width: 1280px) { + .navbar-search__toggle-icon { + width: 1.625rem; + height: 1.625rem; + } +} + +.navbar-search__panel { + position: absolute; + top: 50%; + right: calc(100% + 0.35rem); + transform: translateY(-50%); + z-index: 500; + width: min(16rem, calc(100vw - 8rem)); + min-width: 12rem; +} + +.navbar-search__panel[hidden] { + display: none !important; +} + +.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; + min-height: 2.5rem; + padding: 0 0.75rem; + border: 1px solid var(--openms-grey); + border-radius: 0.5rem; + background: var(--openms-white); + box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.navbar-search__field:focus-within { + border-color: var(--openms-blue); + box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.15), + 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); +} + +.navbar-search__input { + flex: 1; + min-width: 0; + width: 100%; + border: none; + background: transparent; + padding: 0.4rem 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 500; + line-height: 1.3; + color: var(--openms-dark); + outline: none; +} + +.navbar-search__input::placeholder { + color: rgba(var(--openms-dark-rgb), 0.45); +} + +.navbar-search__input::-webkit-search-cancel-button { + cursor: pointer; +} + +.navbar-search__results { + position: absolute; + top: calc(100% + 0.35rem); + right: 0; + left: 0; + z-index: 501; + max-height: min(18rem, 50vh); + overflow-x: hidden; + overflow-y: auto; + margin: 0; + padding: 0.35rem 0; + list-style: none; + background: var(--openms-white); + border: 1px solid var(--openms-grey); + border-radius: 0.5rem; + box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); +} + +.navbar-search__results:not([hidden]) { + display: block; +} + +.navbar-search__result { + display: block; + padding: 0.55rem 0.85rem; + text-decoration: none; + color: var(--openms-dark); + border-top: 1px solid var(--openms-grey); +} + +.navbar-search__result:first-child { + border-top: none; +} + +.navbar-search__result:hover, +.navbar-search__result:focus-visible { + background: rgba(var(--openms-blue-rgb), 0.08); + color: var(--openms-blue); + outline: none; +} + +.navbar-search__result-title { + display: block; + font-size: var(--openms-navbar-font-size, 16px); + font-weight: 600; + line-height: 1.3; +} + +.navbar-search__result-meta { + display: block; + margin-top: 0.15rem; + font-size: var(--openms-text-min); + color: rgba(var(--openms-dark-rgb), 0.55); + line-height: 1.35; +} + +.navbar-search__empty, +.navbar-search__status { + padding: 0.65rem 0.85rem; + font-size: var(--openms-text-min); + color: rgba(var(--openms-dark-rgb), 0.65); +} + +/* Desktop — icon in actions cluster */ +@media (min-width: 1280px) { + .navbar-search--desktop { + display: flex; + } + + .navbar-search--mobile { + display: none !important; + } +} + +/* Mobile — icon in top bar before burger */ +@media (max-width: 1279px) { + .navbar-search--desktop { + display: none !important; + } + + .navbar-search--mobile { + display: flex; + } + + .navbar-search--mobile .navbar-search__toggle { + width: 2.5rem; + height: 2.5rem; + } + + .navbar-search--mobile .navbar-search__panel { + position: fixed; + top: var(--openms-header-height, 4.5rem); + right: 0.5rem; + left: 0.5rem; + transform: none; + width: auto; + min-width: 0; + max-width: none; + } + + @media (max-width: 768px) { + .navbar-search--mobile .navbar-search__panel { + right: 0.75rem; + left: 0.75rem; + } + + .navbar-search--mobile .navbar-search__field { + border-radius: 0.65rem; + box-shadow: 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.1); + } + } + + .navbar-search--mobile .navbar-search__field { + min-height: 2.75rem; + } + + .navbar-search--mobile .navbar-search__input { + font-size: var(--openms-navbar-font-size, 16px); + } + + .navbar-search--mobile .navbar-search__results { + position: static; + max-height: min(14rem, 40vh); + margin-top: 0.35rem; + } +} diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css index 895d507..3134b1e 100644 --- a/assets/css/news-banner.css +++ b/assets/css/news-banner.css @@ -1,110 +1,113 @@ -/* Site-wide news / alert banner — matches hero color scheme */ +/* Site announcement — same visual language as hero-modern */ .news-banner { position: relative; z-index: 100; - background: var(--openms-navy); + overflow: hidden; color: var(--openms-white); + background: var(--openms-navy); border-bottom: 1px solid rgba(var(--openms-white-rgb), 0.1); } +.news-banner::before { + content: ""; + position: absolute; + top: -120%; + right: -5%; + width: 18rem; + height: 18rem; + border-radius: 50%; + pointer-events: none; + background: radial-gradient( + circle, + rgba(var(--openms-white-rgb), 0.1) 0%, + transparent 70% + ); +} + .news-banner__inner { + position: relative; + z-index: 1; display: flex; align-items: center; justify-content: center; - min-height: 1.25rem; - padding: 0.15rem 0.55rem; - text-align: center; + max-width: 75rem; + margin: 0 auto; + padding: 0.875rem clamp(1.25rem, 4vw, 2.5rem); } -.news-banner__message { +.news-banner__header { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem 1rem; margin: 0; - font-size: 0.75rem; - line-height: 1.25; - flex: 1; + min-width: 0; + max-width: 100%; + width: auto; + text-align: center; } -/* Matches hero primary button */ -.news-banner__label { - display: inline-block; - margin-right: 0.5rem; - padding: 0.125rem 0.5rem; - font-size: inherit; +.news-banner__eyebrow { + flex-shrink: 0; + margin: 0; + padding: 0.08rem 0.42rem; + font-family: var(--openms-font-body); + font-size: 0.68rem; font-weight: 600; line-height: 1.2; - letter-spacing: 0.06em; + letter-spacing: 0.05em; text-transform: uppercase; - border-radius: 0.25rem; - background: var(--openms-orange); - border: 2px solid var(--openms-orange); color: var(--openms-white); - vertical-align: middle; -} - -.news-banner__link { - display: inline; - color: inherit; - text-decoration: none; - transition: color 0.2s ease, opacity 0.2s ease; -} - -.news-banner__link:hover { - color: var(--openms-white); -} - -.news-banner__text { - font-weight: 500; - color: var(--openms-white); -} - -/* Matches hero stat numbers */ -.news-banner__cta { - margin-left: 0.3rem; - font-size: 0.5rem; - font-weight: 600; - color: var(--openms-yellow); - white-space: nowrap; - transition: color 0.2s ease; + background: var(--openms-orange); + border: 1px solid var(--openms-orange); + border-radius: 0.25rem; } -.news-banner__link:hover .news-banner__cta { - color: var(--openms-yellow); +.news-banner__headline { + margin: 0; + min-width: 0; + flex: 0 1 auto; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: var(--openms-body-weight); + line-height: 1.45; + color: rgba(var(--openms-white-rgb), 0.94); + text-wrap: pretty; } @media (max-width: 768px) { .news-banner__inner { - min-height: 1.125rem; - padding: 0.125rem 0.4rem; - text-align: center; - justify-content: center; + padding-block: 0.85rem; } - .news-banner__message { - flex: none; - width: 100%; - font-size: 0.7375rem; - line-height: 1.2; - text-align: center; + .news-banner__header { + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.55rem; } - .news-banner__label { - display: inline-block; - margin: 0 0.35rem 0 0; - padding: 0.1rem 0.45rem; + .news-banner__headline { + font-size: clamp(0.9rem, 2.8vw, 1rem); + line-height: 1.4; } +} - .news-banner__cta { - font-size: 0.4375rem; +@media (max-width: 520px) { + .news-banner__inner { + padding: 0.75rem 1rem; } - .news-banner__link { - display: inline-block; - text-align: center; + .news-banner__eyebrow { + padding: 0.08rem 0.36rem; + font-size: 0.62rem; } - .news-banner__cta { - display: block; - margin: 0.25rem auto 0; - white-space: normal; + .news-banner__headline { + font-size: 0.88rem; + line-height: 1.35; + overflow-wrap: break-word; } } diff --git a/assets/css/news-section.css b/assets/css/news-section.css new file mode 100644 index 0000000..261f8f1 --- /dev/null +++ b/assets/css/news-section.css @@ -0,0 +1,573 @@ +/* News listing page — aligned with hero & featured projects */ + +.news-page { + background: linear-gradient( + 180deg, + rgba(var(--openms-navy-rgb), 0.04) 0%, + var(--openms-white) 12rem + ); +} + +.news-page__hero { + background: var(--openms-navy); + color: var(--openms-white); + padding: clamp(2rem, 4vh, 3rem) clamp(1.25rem, 4vw, 2.5rem); + position: relative; + overflow: hidden; +} + +.news-page__hero::before { + content: ""; + position: absolute; + top: -60%; + right: -8%; + width: 28rem; + height: 28rem; + border-radius: 50%; + pointer-events: none; + background: radial-gradient( + circle, + rgba(var(--openms-white-rgb), 0.1) 0%, + transparent 70% + ); +} + +.news-page__hero-inner { + position: relative; + z-index: 1; + max-width: 75rem; + margin: 0 auto; +} + +.news-page__eyebrow { + margin: 0 0 0.5rem; + 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); +} + +.news-page__title { + margin: 0 0 0.75rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.875rem, 4vw, var(--openms-heading-lg-size)); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--openms-white); + text-wrap: balance; +} + +.news-page__subtitle { + margin: 0; + max-width: 42rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-white-rgb), 0.9); + text-wrap: pretty; +} + +.news-page__main { + max-width: 75rem; + margin: 0 auto; + padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) + clamp(2.5rem, 5vh, 4rem); +} + +.news-page__toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem 1rem; + margin-bottom: clamp(1.5rem, 3vh, 2rem); + padding-bottom: 1.25rem; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.12); +} + +.news-page__filter-label { + margin: 0; + flex: 0 0 100%; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(var(--openms-dark-rgb), 0.65); +} + +.news-page__years { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + flex: 1 1 auto; + min-width: 0; +} + +.news-page__year-btn { + flex-shrink: 0; + min-height: 2.25rem; + padding: 0.375rem 0.875rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; + line-height: 1.2; + color: var(--openms-navy); + background: var(--openms-white); + border: 2px solid rgba(var(--openms-navy-rgb), 0.18); + border-radius: 999px; + cursor: pointer; + transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, + box-shadow 0.2s ease, transform 0.2s ease; +} + +.news-page__year-btn:hover { + border-color: rgba(var(--openms-blue-rgb), 0.45); + color: var(--openms-blue); +} + +.news-page__year-btn:focus { + outline: none; +} + +.news-page__year-btn:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 2px; +} + +.news-page__year-btn.is-active { + color: var(--openms-white); + background: var(--openms-navy); + border-color: var(--openms-navy); + box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-navy-rgb), 0.25); +} + +.news-page__count { + margin: 0 0 0 auto; + flex: 0 0 auto; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 500; + color: rgba(var(--openms-dark-rgb), 0.7); + white-space: nowrap; +} + +.news-page__intro { + margin-bottom: 1.5rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.82); +} + +.news-page__year-heading { + margin: 2rem 0 1rem; + padding-bottom: 0.5rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: 700; + line-height: 1.2; + color: var(--openms-navy); + letter-spacing: -0.01em; + border-bottom: 2px solid rgba(var(--openms-orange-rgb), 0.5); +} + +.news-page__year-heading:first-child { + margin-top: 0; +} + +.news-page__year-heading[hidden], +.news-card[data-news-hidden] { + display: none; +} + +.news-page__list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.news-card { + margin: 0; +} + +.news-card__inner { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 1rem 1.25rem; + align-items: start; + padding: 1.25rem 1.25rem 1.25rem 1rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + border-radius: 0.75rem; + background: var(--openms-white); + box-shadow: 0 0.25rem 1rem rgba(var(--openms-dark-rgb), 0.05); + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; +} + +.news-card:hover .news-card__inner, +.news-card:focus-within .news-card__inner { + border-color: rgba(var(--openms-blue-rgb), 0.35); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.12); + transform: translateY(-2px); +} + +.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__body { + min-width: 0; +} + +.news-card__title { + margin: 0 0 0.375rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: 700; + line-height: 1.3; + letter-spacing: -0.01em; +} + +.news-card__title a { + color: var(--openms-navy); + text-decoration: none; + transition: color 0.2s ease; +} + +.news-card__title a:hover { + color: var(--openms-blue); +} + +.news-card__title a:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 2px; + border-radius: 0.125rem; +} + +.news-card__meta { + margin: 0 0 0.625rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + line-height: 1.4; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.news-card__authors::before { + content: "by "; +} + +.news-card__summary { + margin: 0 0 0.875rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.82); + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.news-card__summary p { + margin: 0; +} + +.news-card__read-more { + display: inline-flex; + align-items: center; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; + color: var(--openms-blue); + text-decoration: none; + transition: color 0.2s ease; +} + +.news-card__read-more:hover { + color: var(--openms-navy); +} + +.news-card__read-more:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 2px; + border-radius: 0.125rem; +} + +.news-page__empty { + margin: 2rem 0 0; + padding: 2rem 1.5rem; + text-align: center; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + color: rgba(var(--openms-dark-rgb), 0.75); + border-radius: 0.75rem; + background: rgba(var(--openms-navy-rgb), 0.04); + border: 1px dashed rgba(var(--openms-navy-rgb), 0.2); +} + +.news-page__empty[hidden] { + display: none; +} + +@media (max-width: 768px) { + .news-page__toolbar { + flex-direction: column; + align-items: stretch; + } + + .news-page__years { + flex-wrap: nowrap; + overflow-x: auto; + padding-bottom: 0.25rem; + -webkit-overflow-scrolling: touch; + scrollbar-width: thin; + } + + .news-page__count { + margin-left: 0; + text-align: left; + } + + .news-card__inner { + grid-template-columns: 1fr; + gap: 0.75rem; + } + + .news-card__date { + flex-direction: row; + gap: 0.5rem; + width: fit-content; + min-width: 0; + padding: 0.375rem 0.75rem; + } + + .news-card__date-day { + font-size: 1.125rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .news-card:hover .news-card__inner, + .news-card:focus-within .news-card__inner { + transform: none; + } +} + +/* --- Single news article --- */ + +.news-page__hero--article { + padding-bottom: clamp(1.75rem, 3vh, 2.5rem); +} + +.news-page__back { + display: inline-flex; + align-items: center; + gap: 0.35rem; + margin-bottom: 1rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; + color: var(--openms-yellow); + text-decoration: none; + transition: color 0.2s ease, opacity 0.2s ease; +} + +.news-page__back:hover { + color: var(--openms-white); +} + +.news-page__back:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 2px; + border-radius: 0.125rem; +} + +.news-article { + padding: clamp(1.25rem, 3vw, 1.75rem); + border: 1px solid rgba(var(--openms-navy-rgb), 0.12); + border-radius: 0.75rem; + background: var(--openms-white); + box-shadow: 0 0.25rem 1rem rgba(var(--openms-dark-rgb), 0.05); +} + +.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: 48rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: var(--openms-body-weight); + line-height: 1.65; + color: rgba(var(--openms-dark-rgb), 0.88); +} + +.news-article__content p { + margin: 0 0 1rem; +} + +.news-article__content strong { + font-weight: 600; + color: var(--openms-navy); +} + +.news-article__content a { + color: var(--openms-blue); + font-weight: 500; + text-decoration: underline; + text-underline-offset: 0.15em; + transition: color 0.2s ease; +} + +.news-article__content a:hover { + color: var(--openms-navy); +} + +.news-article__content a:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 2px; + border-radius: 0.125rem; +} + +.news-article__content h2, +.news-article__content h3, +.news-article__content h4 { + margin: 1.75rem 0 0.75rem; + font-family: var(--openms-font-heading); + color: var(--openms-navy); + letter-spacing: -0.01em; +} + +.news-article__content h2 { + font-size: var(--openms-secondary-heading-size-lg); + font-weight: 700; +} + +.news-article__content h3 { + font-size: var(--openms-secondary-heading-size); + font-weight: 700; +} + +.news-article__content ul, +.news-article__content ol { + margin: 0 0 1rem; + padding-left: 1.25rem; +} + +.news-article__content li { + margin-bottom: 0.35rem; +} + +.news-article__content img { + max-width: 100%; + height: auto; + border-radius: 0.5rem; +} + +.news-article__footer { + margin-top: 2rem; + padding-top: 1.25rem; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.news-article__back-link { + display: inline-flex; + align-items: center; + gap: 0.35rem; + min-height: 2.75rem; + padding: 0.75rem 1.75rem; + border-radius: 0.5rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-navy-rgb), 0.35); + color: var(--openms-white); + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; + text-decoration: none; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, + border-color 0.2s ease; +} + +.news-article__back-link:hover, +.news-article__back-link:focus-visible { + transform: translateY(-2px); + background: var(--openms-blue); + border-color: var(--openms-blue); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + 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; + } +} diff --git a/assets/css/openms-buttons.css b/assets/css/openms-buttons.css new file mode 100644 index 0000000..39a1e55 --- /dev/null +++ b/assets/css/openms-buttons.css @@ -0,0 +1,350 @@ +/* Primary blue CTA — same design as Contact us (.openms-step__cta) */ + +.openms-btn-primary, +.openms-step__cta, +.about-cta-btn--sponsor, +.openms-btn-primary.about-cta-btn--sponsor, +.footer-redesign .footer-sponsor-btn, +.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary, +.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta, +#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary, +#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta, +.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary, +.navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-height: 2.75rem; + padding: 0.75rem 1.75rem; + border-radius: 0.5rem; + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + text-decoration: none; + white-space: nowrap; + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); + transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; +} + +.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-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, +.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 { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; + transform: none; + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + outline: 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: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); +} + +/* Default + hover — force Contact us colors (overrides Bulma .navbar-item / .button) */ +.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; +} + +.footer-redesign .footer-sponsor-btn:hover, +.footer-redesign .footer-sponsor-btn:focus-visible, +.footer-redesign .footer-sponsor-btn:active { + background: var(--openms-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + transform: translateY(-2px); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !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-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 { + 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; +} + +.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-navy) !important; + background-color: var(--openms-navy) !important; + border-color: var(--openms-navy) !important; + color: var(--openms-white) !important; + transform: translateY(-2px); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !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 on navy — keep white text; primary uses brand blue */ +.hero-modern__btn.openms-btn-primary { + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + background: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; +} + +.hero-modern__btn.openms-btn-primary:hover, +.hero-modern__btn.openms-btn-primary:focus-visible { + background: var(--openms-navy) !important; + border-color: var(--openms-navy) !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: 0.75rem 1.75rem !important; + min-height: 2.75rem; + 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 (fills on hover) */ + +.about-cta-btn--donate, +.footer-redesign .footer-donate-btn.signup-button.secondary-btn, +.governance-links a.about-cta-btn--donate { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.75rem 1.75rem; + border-radius: 0.5rem; + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; + text-decoration: none; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + box-shadow: none; + transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, + box-shadow 0.2s ease; +} + +.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, +.governance-links a.about-cta-btn--donate:hover, +.governance-links a.about-cta-btn--donate:focus-visible { + background: var(--openms-blue); + background-color: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; + transform: translateY(-2px); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + outline: 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.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); +} + +.footer-redesign .footer-donate-btn.signup-button.secondary-btn, +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:visited { + min-height: 2.75rem; + padding: 0.75rem 1.75rem !important; + font-size: var(--openms-text-min) !important; + line-height: 1.3 !important; + background: transparent !important; + background-color: transparent !important; + border: 2px solid var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + box-shadow: none !important; +} + +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible { + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + transform: translateY(-2px); + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !important; +} + +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !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, +.navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate { + background: transparent !important; + background-color: transparent !important; + border: 2px solid var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-blue) !important; + box-shadow: none !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, +.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, +.navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active { + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !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, + .openms-btn-primary:hover, + .openms-btn-primary:focus-visible, + .openms-step__cta:hover, + .openms-step__cta: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 { + transform: none; + } + + .about-cta-btn--donate:hover, + .about-cta-btn--donate:focus-visible, + .footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, + .footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible, + .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, + .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, + #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, + #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible { + transform: none; + } +} diff --git a/assets/css/openms-lib.css b/assets/css/openms-lib.css new file mode 100644 index 0000000..39efcb5 --- /dev/null +++ b/assets/css/openms-lib.css @@ -0,0 +1,581 @@ +/* OpenMS-lib — unified About-style page + embedded capability sections */ + +.openms-lib-layout .shortcuts-container, +.content-padding:has(.openms-lib-layout) .shortcuts-container { + display: none; +} + +.openms-lib-layout__shell { + width: 100%; + max-width: none; + margin: 0; +} + +.openms-lib-page { + display: grid; + gap: 0; +} + +/* Intro / outro — readable column (About rhythm) */ +.openms-lib-page__intro.governance-page, +.openms-lib-page__outro.governance-page { + display: grid; + gap: clamp(2rem, 3.8vw, 3.2rem); + max-width: min(100%, 52rem); + margin: 0 auto; + padding-inline: clamp(1rem, 3vw, 2rem); +} + +.openms-lib-page__intro { + padding-top: 0.5rem; +} + +.openms-lib-page__outro { + padding-bottom: clamp(2rem, 5vh, 3rem); +} + +.openms-lib-layout .openms-lib-page__intro .governance-hero { + margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); + margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); + width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); + max-width: 100vw; + padding-left: clamp(2rem, 5vw, 3.5rem); + padding-right: clamp(1.25rem, 3vw, 2rem); +} + +.openms-lib-page__infra-btns a.openms-btn-primary { + min-height: 2.5rem; + padding: 0.55rem 1.25rem; + border-radius: 0.5rem; + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--openms-white) !important; + background: rgba(var(--openms-white-rgb), 0.14); + border: 1px solid rgba(var(--openms-white-rgb), 0.35); + box-shadow: none; +} + +.openms-lib-page__infra-btns a.openms-btn-primary:hover, +.openms-lib-page__infra-btns a.openms-btn-primary:focus-visible { + background: rgba(var(--openms-yellow-rgb), 0.28); + border-color: rgba(var(--openms-white-rgb), 0.5); + color: var(--openms-white) !important; +} + +.openms-lib-page__intro .governance-jump-links { + margin-top: -0.15rem; +} + +.openms-lib-page__anchor { + scroll-margin-top: 5.5rem; +} + +/* Full-width module band */ +.openms-lib-page__modules { + display: grid; + gap: 0; + margin-block: clamp(0.5rem, 2vh, 1rem); + border-block: 1px solid rgba(var(--openms-navy-rgb), 0.08); + background: var(--openms-white); +} + +.openms-lib-band__inner { + width: 100%; + max-width: 75rem; + margin-inline: auto; + padding-inline: clamp(1.25rem, 4vw, 2.5rem); +} + +/* ── What is OpenMS? (light governance style) ── */ +.keyfeatures-modern--openms-lib { + --kf-layout-gap: clamp(1.5rem, 3vh, 2rem); + --kf-radius: 0.85rem; + + margin: 0; + padding: clamp(2.5rem, 5vh, 3.5rem) 0; + color: var(--openms-navy); + background: linear-gradient( + 180deg, + rgba(var(--openms-blue-rgb), 0.04) 0%, + var(--openms-white) 28% + ); + border-top: none; +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__inner { + padding-block: 0; +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__layout { + gap: var(--kf-layout-gap); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__header { + position: static; + max-width: none; + margin: 0; + padding-top: 0; + text-align: left; + display: grid; + gap: clamp(0.85rem, 2vw, 1.15rem); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__eyebrow { + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border-color: rgba(var(--openms-blue-rgb), 0.2); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__title { + font-size: clamp(1.65rem, 3.2vw, 2.15rem); + color: var(--openms-navy); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__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; +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__lead { + color: rgba(var(--openms-navy-rgb), 0.78); + font-size: var(--openms-body-size-lg); + line-height: 1.62; +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topics { + gap: clamp(0.85rem, 1.6vw, 1.1rem); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card { + position: relative; + display: flex; + flex-direction: column; + gap: 0.65rem; + min-height: 100%; + padding: 1.15rem 1.1rem 1.2rem 1.4rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + border-radius: var(--kf-radius); + background: var(--openms-white); + box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.06); + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card::before { + content: ""; + position: absolute; + left: 0; + top: 0.65rem; + bottom: 0.65rem; + width: 0.24rem; + border-radius: 999px; + background: linear-gradient(180deg, var(--openms-blue) 0%, var(--openms-purple) 100%); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card:hover, +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card:focus-within { + transform: translateY(-3px); + border-color: rgba(var(--openms-blue-rgb), 0.22); + box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.12); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-icon { + width: 2.5rem; + height: 2.5rem; + border-color: rgba(var(--openms-blue-rgb), 0.18); + background: rgba(var(--openms-blue-rgb), 0.08); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-icon img { + filter: none; + opacity: 0.95; +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-icon--mark { + color: var(--openms-blue); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-title { + color: var(--openms-navy); + font-size: clamp(1rem, 1.15vw, 1.08rem); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-text { + color: rgba(var(--openms-navy-rgb), 0.74); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__note { + max-width: 52rem; + color: rgba(var(--openms-navy-rgb), 0.88); + background: rgba(var(--openms-blue-rgb), 0.06); + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + border-left: 4px solid var(--openms-yellow); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__note a { + color: var(--openms-blue); +} + +.keyfeatures-modern--openms-lib .keyfeatures-modern__note a:hover, +.keyfeatures-modern--openms-lib .keyfeatures-modern__note a:focus-visible { + color: var(--openms-navy); +} + +/* ── Capabilities (users) ── */ +.openms-steps--openms-lib.openms-steps--users { + padding: clamp(2.5rem, 5vh, 3.5rem) 0; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.08); + background: var(--openms-white); +} + +.openms-steps--openms-lib.openms-steps--users::before, +.openms-steps--openms-lib.openms-steps--users::after { + opacity: 0.65; +} + +.openms-steps--openms-lib .openms-steps__header { + max-width: none; + margin: 0 0 clamp(1.5rem, 3vh, 2rem); + text-align: left; +} + +.openms-steps--openms-lib .openms-steps__eyebrow { + margin-bottom: 0.65rem; +} + +.openms-steps--openms-lib.openms-steps--users .openms-steps__eyebrow { + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border-color: rgba(var(--openms-blue-rgb), 0.2); +} + +.openms-steps--openms-lib .openms-steps__title { + font-size: clamp(1.65rem, 3.2vw, 2.15rem); + text-wrap: balance; +} + +.openms-steps--openms-lib.openms-steps--users .openms-steps__subtitle { + margin-left: 0; + margin-right: 0; + max-width: 60ch; + text-align: left; +} + +.openms-steps--openms-lib.openms-steps--users .openms-step--showcase { + border-radius: 0.85rem; + border-color: rgba(var(--openms-navy-rgb), 0.1); + box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.06); +} + +.openms-steps--openms-lib.openms-steps--users .openms-step--showcase:hover { + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 0.7rem 1.85rem rgba(var(--openms-blue-rgb), 0.14); +} + +.openms-steps--openms-lib.openms-steps--users .openms-step--showcase .openms-step__media { + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.07) 0%, + var(--openms-white) 100% + ); +} + +.openms-steps--openms-lib .openms-step__cta.openms-btn-primary { + min-height: 2.5rem; + padding: 0.55rem 1.25rem; + font-size: var(--openms-text-min); +} + +/* ── Advanced users / developers ── */ +.openms-steps--openms-lib.openms-steps--developers { + --dev-card-media-min-h: clamp(11rem, 22vw, 14rem); + --dev-logo-max-h: clamp(5rem, 12vw, 7.5rem); + --dev-terminal-h: clamp(10rem, 18vw, 12.5rem); + + position: relative; + overflow: hidden; + padding: clamp(2.75rem, 5.5vh, 3.75rem) 0; + border-top: none; + color: var(--openms-white); + background: linear-gradient( + 135deg, + var(--openms-navy) 0%, + #1a2f8f 48%, + #2a4fd4 100% + ); +} + +.openms-steps--openms-lib.openms-steps--developers::before, +.openms-steps--openms-lib.openms-steps--developers::after { + opacity: 1; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-steps__header { + text-align: left; + max-width: 56rem; + margin: 0 0 clamp(1.65rem, 3.5vh, 2.25rem); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-steps__eyebrow { + color: var(--openms-yellow); + background: rgba(var(--openms-white-rgb), 0.1); + border-color: rgba(var(--openms-white-rgb), 0.22); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-steps__title { + color: var(--openms-white); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-steps__title-accent { + background: linear-gradient( + 90deg, + var(--openms-yellow) 0%, + var(--openms-orange) 45%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-steps__subtitle { + margin-left: 0; + text-align: left; + max-width: 58ch; + color: rgba(var(--openms-white-rgb), 0.92); + line-height: 1.62; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-steps__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(1.1rem, 2.2vw, 1.5rem); + align-items: stretch; +} + +/* White showcase cards on navy band (matches users section pattern) */ +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer { + display: flex; + flex-direction: column; + min-height: 100%; + padding: 0; + border: 1px solid rgba(var(--openms-white-rgb), 0.22); + border-radius: 1rem; + background: var(--openms-white); + box-shadow: 0 0.5rem 1.75rem rgba(var(--openms-dark-rgb), 0.22); + overflow: hidden; + transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer:hover { + transform: translateY(-5px); + border-color: rgba(var(--openms-yellow-rgb), 0.55); + box-shadow: 0 1rem 2.5rem rgba(var(--openms-dark-rgb), 0.32); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__index { + display: none; +} + +/* Consistent top media / bottom content (no alternating layout) */ +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__media, +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer:nth-child(even) .openms-step__media { + order: -1; + width: 100%; + min-height: var(--dev-card-media-min-h); + margin: 0; + padding: clamp(1rem, 2vw, 1.35rem); + border: none; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-top: none; + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.1) 0%, + rgba(var(--openms-navy-rgb), 0.04) 55%, + color-mix(in srgb, var(--openms-steps-accent) 22%, var(--openms-white)) 100% + ); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__content, +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer:nth-child(even) .openms-step__content { + order: 2; + display: flex; + flex-direction: column; + flex: 1 1 auto; + gap: 0.55rem; + padding: clamp(1.15rem, 2.2vw, 1.4rem) clamp(1.2rem, 2.4vw, 1.5rem) + clamp(1.25rem, 2.4vw, 1.55rem); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__tag { + margin: 0; + padding: 0.32rem 0.65rem; + font-size: var(--openms-text-min); + 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) 50%, transparent); + border-radius: 999px; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__title { + padding-right: 0; + font-size: clamp(1.12rem, 1.55vw, 1.28rem); + line-height: 1.28; + color: var(--openms-navy); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__subtitle { + flex: 1 1 auto; + font-size: clamp(0.92rem, 1.05vw, 1.02rem); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.76); + display: block; + overflow: visible; + -webkit-line-clamp: unset; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__img, +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__img.img-fit { + display: block; + width: auto; + max-width: min(100%, 14rem); + height: auto; + max-height: var(--dev-logo-max-h); + min-height: 4.5rem; + margin: 0 auto; + object-fit: contain; + filter: none; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta { + align-self: flex-start; + margin-top: auto; + padding-top: 0.35rem; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta.openms-btn-primary { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta.openms-btn-primary:hover, +.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta.openms-btn-primary:focus-visible { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +/* Terminal card */ +.openms-steps--openms-lib.openms-steps--developers .openms-step--terminal .openms-step__media { + padding: clamp(0.75rem, 1.5vw, 1rem); + background: linear-gradient(180deg, #1a1d24 0%, #0f1118 100%); + border-bottom-color: rgba(var(--openms-navy-rgb), 0.12); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--terminal .openms-step__terminal { + width: 100%; +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--terminal .openms-step__terminal .terminal-window { + width: 100%; + height: var(--dev-terminal-h); + min-height: var(--dev-terminal-h); + margin: 0; + border-radius: 0.6rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.12); + box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.35); +} + +.openms-steps--openms-lib.openms-steps--developers .openms-step--terminal .terminal-window section.terminal { + font-size: clamp(0.58rem, 0.85vw, 0.68rem); + line-height: 1.5; +} + +/* Outro */ +.openms-lib-page__outro .governance-pillars { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.openms-lib-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.25rem; +} + +.openms-lib-page__outro .governance-section p, +.openms-lib-page__intro .governance-card p { + max-width: 72ch; +} + +.openms-lib-page__intro .governance-card a { + font-weight: 600; +} + +@media (max-width: 1000px) { + .keyfeatures-modern--openms-lib .keyfeatures-modern__topics { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .openms-steps--openms-lib.openms-steps--users .openms-steps__grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 860px) { + .openms-lib-layout .openms-lib-page__intro .governance-hero { + margin-left: calc(-1 * clamp(0.75rem, 4vw, 1.25rem)); + margin-right: calc(-1 * clamp(0.75rem, 4vw, 1.25rem)); + width: calc(100% + 2 * clamp(0.75rem, 4vw, 1.25rem)); + padding-left: clamp(1.25rem, 4vw, 1.75rem); + padding-right: clamp(1rem, 3vw, 1.25rem); + } + + .openms-lib-page__outro .governance-pillars { + grid-template-columns: 1fr; + } + + .openms-lib-actions .openms-step__cta, + .openms-lib-actions .about-cta-btn { + width: 100%; + justify-content: center; + } +} + +@media (max-width: 640px) { + .keyfeatures-modern--openms-lib .keyfeatures-modern__topics { + grid-template-columns: 1fr; + } + + .openms-steps--openms-lib.openms-steps--developers .openms-steps__grid { + grid-template-columns: 1fr; + } + + .openms-steps--openms-lib.openms-steps--developers { + --dev-card-media-min-h: clamp(10rem, 28vw, 12rem); + --dev-logo-max-h: clamp(4.5rem, 14vw, 6rem); + --dev-terminal-h: clamp(9rem, 24vw, 11rem); + } +} + +@media (min-width: 1100px) { + .openms-steps--openms-lib.openms-steps--developers { + --dev-card-media-min-h: 13.5rem; + --dev-logo-max-h: 7rem; + --dev-terminal-h: 12rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card:hover, + .openms-steps--openms-lib .openms-step--showcase:hover, + .openms-steps--openms-lib.openms-steps--developers .openms-step--developer:hover { + transform: none; + } +} diff --git a/assets/css/publications.css b/assets/css/publications.css new file mode 100644 index 0000000..2ce1a8f --- /dev/null +++ b/assets/css/publications.css @@ -0,0 +1,238 @@ +/* Publications page — extends governance layout */ +.publications-page { + margin-top: 0; +} + +.publications-layout__container { + max-width: min(100%, 52rem); +} + +.publications-layout .governance-hero { + margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); + margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); + width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); + max-width: 100vw; + padding-left: clamp(2rem, 5vw, 3.5rem); + padding-right: clamp(1.25rem, 3vw, 2rem); +} + +.publications-body { + display: grid; + gap: clamp(1.5rem, 3vw, 2.5rem); +} + +.publications-intro p { + max-width: 65ch; +} + +.publications-featured { + padding: clamp(1.25rem, 2.5vw, 1.75rem); + border-radius: 0.85rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.22); + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.08) 0%, + rgba(var(--openms-white-rgb), 1) 55% + ); + box-shadow: 0 0.35rem 1.25rem rgba(var(--openms-navy-rgb), 0.06); +} + +.publications-featured h2 { + margin: 0 0 0.5rem; + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 800; + color: var(--openms-navy); +} + +.publications-featured__lead { + margin: 0 0 1.25rem; + max-width: 65ch; + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.78); +} + +.publications-featured__list { + gap: 1rem; +} + +.publication-entry--featured { + padding: clamp(1rem, 2vw, 1.25rem); + border-radius: 0.65rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + background: var(--openms-white); + border-bottom: 1px solid rgba(var(--openms-blue-rgb), 0.18); +} + +.publication-entry--featured:last-child { + border-bottom: 1px solid rgba(var(--openms-blue-rgb), 0.18); +} + +.publication-entry--featured .publication-title-link { + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.publication-entry--featured .publication-title-link:hover, +.publication-entry--featured .publication-title-link:focus-visible { + color: var(--openms-navy); +} + +.publications-intro + .publications-toolbar { + margin-top: 0.25rem; + margin-bottom: 0.5rem; +} + +.publications-toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem 1rem; + padding: 0 0 0.75rem; +} + +.publications-toolbar__select { + flex: 1 1 auto; + min-width: min(100%, 12rem); + max-width: 14rem; + min-height: 2.5rem; + padding: 0.4rem 2.25rem 0.4rem 0.875rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; + line-height: 1.2; + color: var(--openms-navy); + background-color: var(--openms-white); + 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; + background-size: 12px 8px; + border: 2px solid rgba(var(--openms-navy-rgb), 0.18); + border-radius: 0.5rem; + cursor: pointer; + appearance: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.publications-toolbar__select:hover { + border-color: rgba(var(--openms-blue-rgb), 0.45); +} + +.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.2); +} + +.publications-toolbar__count { + margin: 0; + flex: 0 0 100%; + font-size: var(--openms-text-min); + font-weight: 500; + color: rgba(var(--openms-navy-rgb), 0.7); +} + +@media (min-width: 768px) { + .publications-toolbar__count { + flex: 0 0 auto; + margin-left: auto; + } +} + +.publications-year h2 { + font-family: var(--openms-font-heading); + font-size: var(--openms-secondary-heading-size); + font-weight: 800; + color: var(--openms-navy); + margin: 0 0 1rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid rgba(var(--openms-orange-rgb), 0.45); +} + +.publications-year[hidden], +.publications-year[data-publications-archived] { + display: none; +} + +.publication-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 1.25rem; +} + +.publication-entry { + margin: 0; + padding: 0 0 1.25rem; + border: none; + border-radius: 0; + background: transparent; + border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.publication-entry:last-child { + padding-bottom: 0; + border-bottom: none; +} + +.publication-entry p { + margin: 0; +} + +.publication-entry p + p { + margin-top: 0.4rem; +} + +.publication-title { + font-family: var(--openms-font-heading); + font-size: var(--openms-body-size-lg); + font-weight: 700; + line-height: 1.35; + color: var(--openms-navy); +} + +.publication-title-link { + color: var(--openms-navy); + text-decoration: none; + transition: color 0.2s ease; +} + +.publication-title-link:hover, +.publication-title-link:focus-visible { + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.publication-meta { + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.72); +} + +.publication-journal { + font-style: italic; +} + +.publication-year { + font-weight: 600; + color: var(--openms-navy); +} + +.publication-authors { + font-size: var(--openms-text-min); + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.78); +} + +@media (max-width: 640px) { + .publication-title { + font-size: var(--openms-body-size); + } +} diff --git a/assets/css/shortcuts_override.css b/assets/css/shortcuts_override.css index 34c9b1b..01bd695 100644 --- a/assets/css/shortcuts_override.css +++ b/assets/css/shortcuts_override.css @@ -1,3 +1,58 @@ -.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 { + display: none; +} + +/* About page: hide left TOC */ +.content-padding:has(.about-page) .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 index 1c9270f..d0bf262 100644 --- a/assets/css/site-header.css +++ b/assets/css/site-header.css @@ -6,6 +6,7 @@ z-index: 200; width: 100%; background: var(--openms-white); + overflow: visible; } .site-header .news-banner { @@ -20,6 +21,10 @@ width: 100%; } +body.navbar-menu-open { + overflow: hidden; +} + /* Scroll clone duplicates nav only — hide; sticky header handles scroll */ #navbar-clone.navbar.is-fresh { display: none !important; diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index 082e330..3867fa9 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -2,10 +2,28 @@ .navbar.is-fresh .navbar-link, .navbar.is-fresh a.navbar-item.is-secondary, .navbar.is-fresh .navbar-menu .navbar-item, -#navbar-clone.navbar.is-fresh .navbar-item, +.navbar.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; +} + +.navbar.is-fresh .navbar-item:not(.navbar-cta-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-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, -#navbar-clone.navbar.is-fresh .navbar-menu .navbar-item { +#navbar-clone.navbar.is-fresh .navbar-menu .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-dropdown-heading { + font-size: var(--openms-navbar-font-size); color: var(--openms-dark) !important; } @@ -19,11 +37,11 @@ outline-offset: 2px; } -.navbar.is-fresh .navbar-item:hover, +.navbar.is-fresh .navbar-item:not(.navbar-cta-item):hover, .navbar.is-fresh .navbar-link:hover, .navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-fresh .navbar-brand .navbar-brand-link:hover, -#navbar-clone.navbar.is-fresh .navbar-item:hover, +#navbar-clone.navbar.is-fresh .navbar-item:not(.navbar-cta-item):hover, #navbar-clone.navbar.is-fresh .navbar-link:hover, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, #navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover { @@ -43,11 +61,28 @@ background-color: transparent !important; } +.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-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { border-color: var(--openms-dark) !important; } +@media (min-width: 1280px) { + .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link::after, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link::after { + position: relative; + top: 0.1em; + right: auto; + margin-left: 0.25rem; + } +} + .navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after { border-color: var(--openms-blue) !important; @@ -59,6 +94,30 @@ box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-dark-rgb), 0.08); } +@media (min-width: 1280px) { + .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { + min-width: max(100%, 13.5rem); + width: max-content; + max-width: min(22rem, 92vw); + padding-top: 0.35rem; + padding-bottom: 0.35rem; + } + + .navbar.is-fresh .navbar-dropdown .navbar-item, + .navbar.is-fresh .navbar-dropdown-heading, + #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-dropdown-heading { + white-space: nowrap; + } + + .navbar.is-fresh .navbar-dropdown .navbar-item, + #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item { + padding-left: 1rem; + padding-right: 1rem; + } +} + .navbar.is-fresh .navbar-dropdown .navbar-item, #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item { color: var(--openms-dark) !important; @@ -70,48 +129,20 @@ background-color: rgba(var(--openms-blue-rgb), 0.1); } -/* Navbar CTA buttons (mailchimp.css must not hide these) */ -.navbar.is-fresh .signup-button, -#navbar-clone.navbar.is-fresh .signup-button { - display: inline-block !important; -} - -/* Donate — matches hero primary button */ -.navbar.is-fresh .signup-button.secondary-btn, -#navbar-clone.navbar.is-fresh .signup-button.secondary-btn { - background-color: var(--openms-orange) !important; - color: var(--openms-white) !important; - border: 2px solid var(--openms-orange) !important; - box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-orange-rgb), 0.3); -} - -.navbar.is-fresh .signup-button.secondary-btn:hover, -#navbar-clone.navbar.is-fresh .signup-button.secondary-btn:hover { - background-color: var(--openms-yellow) !important; - color: var(--openms-dark) !important; - border-color: var(--openms-yellow) !important; - box-shadow: 0 0.35rem 1rem rgba(var(--openms-yellow-rgb), 0.35); -} - -/* Sponsor — blue primary with orange-button geometry */ -.navbar.is-fresh .signup-button.sponsor-btn, -#navbar-clone.navbar.is-fresh .signup-button.sponsor-btn { - background-color: var(--openms-blue) !important; - color: var(--openms-white) !important; - border: 2px solid var(--openms-blue) !important; - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); - font-size: var(--openms-text-min); - font-weight: 600; - line-height: 1.3; +/* 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 .signup-button.sponsor-btn:hover, -#navbar-clone.navbar.is-fresh .signup-button.sponsor-btn:hover { - background-color: var(--openms-navy) !important; - color: var(--openms-white) !important; - border-color: var(--openms-navy) !important; - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); - transform: translateY(-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 { + transform: none; } .navbar.is-fresh .navbar-burger, @@ -122,7 +153,7 @@ margin-right: 1rem; } -@media (max-width: 1023px) { +@media (max-width: 1279px) { .navbar.is-fresh .navbar-burger, #navbar-clone.navbar.is-fresh .navbar-burger { margin-right: 0; @@ -164,13 +195,15 @@ background-color: transparent; } -.navbar.is-fresh { - min-height: 5.5rem; -} +@media (min-width: 1280px) { + .navbar.is-fresh { + min-height: 5.5rem; + } -.navbar.is-fresh .container, -.navbar.is-fresh .navbar-brand { - min-height: 5.5rem; + .navbar.is-fresh .container, + .navbar.is-fresh .navbar-brand { + min-height: 5.5rem; + } } /* Top-level dropdown labels (e.g. Partner with OpenMS) */ @@ -184,7 +217,6 @@ #navbar-clone.navbar.is-fresh .navbar-dropdown-heading { display: block; padding: 0.5rem 1rem 0.35rem; - font-size: var(--openms-text-min); font-weight: 700; letter-spacing: 0.04em; text-transform: none; @@ -205,13 +237,11 @@ .navbar.is-fresh .navbar-dropdown .navbar-item.is-nested, #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested { padding-left: 1.5rem; - font-size: calc(var(--openms-body-size) * 0.95); } -.navbar.is-fresh .navbar-item:has(.signup-button) { +.navbar.is-fresh .navbar-actions .navbar-cta-item, +#navbar-clone.navbar.is-fresh .navbar-actions .navbar-cta-item { flex-shrink: 0; - padding-left: 0.35rem; - padding-right: 0.35rem; } .navbar.is-fresh .navbar-brand .navbar-brand-link { @@ -344,51 +374,10 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { .footer-brand-btn.signup-button { - display: inline-block !important; - min-height: 2.75rem; - padding: 0.75rem 1.75rem !important; - border-radius: 0.5rem !important; - font-size: var(--openms-body-size-lg); - font-weight: 600; - line-height: 1.3; - text-decoration: none; - white-space: nowrap; -} - -.footer-redesign .footer-sponsor-btn.signup-button { - color: var(--openms-white) !important; - background-color: var(--openms-blue) !important; - border: 2px solid var(--openms-blue) !important; - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); - font-size: var(--openms-text-min) !important; + display: inline-flex !important; } -.footer-redesign .footer-sponsor-btn.signup-button:hover, -.footer-redesign .footer-sponsor-btn.signup-button:focus-visible { - color: var(--openms-white) !important; - background-color: var(--openms-navy) !important; - border-color: var(--openms-navy) !important; - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); - transform: translateY(-2px); -} - -.footer-redesign .footer-donate-btn.signup-button.secondary-btn { - background-color: var(--openms-orange) !important; - color: var(--openms-white) !important; - border: 2px solid var(--openms-orange) !important; - box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-orange-rgb), 0.3); - font-size: var(--openms-text-min) !important; - font-weight: 600 !important; - line-height: 1.3 !important; -} - -.footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, -.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible { - background-color: var(--openms-yellow) !important; - color: var(--openms-dark) !important; - border-color: var(--openms-yellow) !important; - box-shadow: 0 0.35rem 1rem rgba(var(--openms-yellow-rgb), 0.35); -} +/* Footer Donate — secondary blue (openms-buttons.css) */ .footer-title { color: var(--openms-white); @@ -399,6 +388,7 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); + padding-top: clamp(1.25rem, 2.5vw, 2rem); } .footer-links-area { @@ -506,6 +496,16 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { transition: opacity 0.2s ease; } +.footer-sponsors__logo-link--elixir { + min-width: 4rem; + padding-inline: 0.6rem; +} + +.footer-sponsors__logo-link--elixir img { + max-height: 3.35rem; + max-width: min(100%, 10rem); +} + .footer-sponsors__logos a:hover, .footer-sponsors__logos a:focus-visible { background: var(--openms-blue); @@ -531,9 +531,39 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { margin: 0 auto; padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem); display: flex; + flex-wrap: wrap; align-items: center; - justify-content: center; - text-align: center; + justify-content: space-between; + gap: 1rem 1.5rem; +} + +.footer-deploy { + display: inline-flex; + align-items: center; + flex-shrink: 0; + padding: 0.25rem; + border-radius: 0.375rem; + transition: opacity 0.2s ease; +} + +.footer-deploy:hover, +.footer-deploy:focus-visible { + opacity: 0.9; + outline: none; +} + +.footer-deploy:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 3px; +} + +.footer-deploy img { + display: block; + width: auto; + max-width: min(100%, 7.125rem); + height: auto; + max-height: 2rem; + object-fit: contain; } .footer-socials { @@ -632,10 +662,12 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; + padding-top: clamp(1rem, 2vw, 1.5rem); } .footer-links-area { gap: 1.25rem; + padding-top: 0; } } @@ -663,6 +695,9 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { } .footer-bottom { + flex-direction: column; + justify-content: center; + text-align: center; padding-inline: 1.25rem; } } @@ -687,7 +722,8 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { } /* ============================================= - LANDING — section spacing + LANDING — legacy section spacing (non-home pages) + Homepage rhythm: assets/css/landing-page.css ============================================= */ .landing-section { margin-top: clamp(2rem, 4.5vw, 4rem); @@ -697,13 +733,11 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { margin-top: 0; } -/* Hero → What is OpenMS — section padding handles vertical rhythm */ .landing-section--after-hero { margin-top: 0; margin-bottom: clamp(2.5rem, 5vw, 4rem); } -/* Projects block — full-width navy band (matches hero); spacing from section above */ .webapps-modern-wrap { margin-top: clamp(2rem, 4.5vw, 4rem); } diff --git a/assets/css/trusted-by.css b/assets/css/trusted-by.css index 2789662..f2a4244 100644 --- a/assets/css/trusted-by.css +++ b/assets/css/trusted-by.css @@ -1,42 +1,72 @@ -/* Trusted by — clean logo rail layout */ +/* Trusted by — vertical showcase wall (distinct from project / partner tiles) */ .trusted-by { - padding: clamp(2.5rem, 5vh, 3.5rem) clamp(1.25rem, 4vw, 2.5rem); - background: var(--openms-white); + 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__inner { +.trusted-by__shell { + position: relative; + z-index: 1; max-width: 75rem; margin: 0 auto; + display: grid; + gap: clamp(1.75rem, 3.5vh, 2.5rem); } -.trusted-by__header { - max-width: 52rem; - margin: 0 auto clamp(1.25rem, 3vh, 2rem); - text-align: center; +.trusted-by__intro { + display: grid; + gap: 0.65rem; + max-width: 46rem; } .trusted-by__eyebrow { display: inline-block; - margin: 0 0 0.65rem; + 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-blue); - background: rgba(var(--openms-blue-rgb), 0.1); - border: 1px solid rgba(var(--openms-blue-rgb), 0.2); + 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.7rem, 3.2vw, 2.35rem); + font-size: clamp(1.75rem, 3.4vw, 2.35rem); font-weight: var(--openms-heading-lg-weight); - line-height: 1.08; + line-height: 1.1; letter-spacing: -0.02em; color: var(--openms-navy); text-wrap: balance; @@ -45,8 +75,8 @@ .trusted-by__title-accent { background: linear-gradient( 90deg, - var(--openms-yellow) 0%, - var(--openms-orange) 42%, + var(--openms-blue) 0%, + var(--openms-purple) 55%, var(--openms-pink) 100% ); -webkit-background-clip: text; @@ -55,189 +85,264 @@ } .trusted-by__subtitle { - margin: 0.7rem auto 0; - max-width: 62ch; + margin: 0; + max-width: 52ch; font-family: var(--openms-font-body); - font-size: var(--openms-body-size); - line-height: 1.58; - color: rgba(var(--openms-dark-rgb), 0.78); + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-dark-rgb), 0.8); text-wrap: pretty; } -.trusted-by__rail { +.trusted-by__showcase { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: clamp(0.55rem, 1.25vw, 0.85rem); + gap: clamp(0.85rem, 1.8vw, 1.15rem); align-items: stretch; } -.trusted-by__entry { +.trusted-by__item { margin: 0; - display: flex; min-width: 0; + display: flex; } -.trusted-by__tile--has-logo { - flex-direction: column; - justify-content: center; - gap: 0; - min-height: auto; - padding: 0.35rem 0.5rem; - text-align: center; -} - -.trusted-by__tile { +.trusted-by__card { + position: relative; display: flex; - flex-direction: row; - align-items: center; - gap: 0.6rem; + flex-direction: column; width: 100%; - min-height: 4.25rem; - padding: 0.6rem 0.75rem; + min-height: 11.5rem; + padding: 0; + overflow: hidden; text-decoration: none; color: inherit; - border: none; - background: transparent; - box-shadow: none; - transition: opacity 0.2s ease, transform 0.2s ease; + 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__tile--link { - cursor: pointer; +.trusted-by__card-accent { + display: block; + height: 4px; + flex: 0 0 auto; + background: var(--openms-blue); } -.trusted-by__tile--link:hover, -.trusted-by__tile--link:focus-visible { - transform: translateY(-1px); - outline: none; +.trusted-by__item:nth-child(4n + 1) .trusted-by__card-accent { + background: linear-gradient(90deg, var(--openms-yellow), var(--openms-orange)); } -.trusted-by__tile--link:focus-visible { - outline: 2px solid var(--openms-blue); - outline-offset: 3px; +.trusted-by__item:nth-child(4n + 2) .trusted-by__card-accent { + background: linear-gradient(90deg, var(--openms-blue), var(--openms-blue-secondary)); } -.trusted-by__tile--link:hover .trusted-by__monogram, -.trusted-by__tile--link:focus-visible .trusted-by__monogram { - background: var(--openms-navy); - color: var(--openms-white); - border-color: rgba(var(--openms-navy-rgb), 0.2); +.trusted-by__item:nth-child(4n + 3) .trusted-by__card-accent { + background: linear-gradient(90deg, var(--openms-pink), var(--openms-purple)); } -.trusted-by__mark { - flex: 0 0 auto; +.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; - width: 2.9rem; - height: 2.9rem; - border: none; - background: transparent; -} - -.trusted-by__tile--has-logo .trusted-by__mark { - width: 100%; - height: auto; - min-height: 3rem; - padding: 0.35rem 0.5rem; - background: transparent; - border: none; -} - -.trusted-by__tile--has-logo:has(.trusted-by__logo--large) .trusted-by__mark { - min-height: 11rem; + 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__tile--has-logo:has(.trusted-by__logo--large) { - padding: 0.5rem 0.75rem; +.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: 1.75rem; - max-width: 100%; + 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__tile--has-logo .trusted-by__logo { - max-height: 3rem; - max-width: min(100%, 10rem); -} - -.trusted-by__tile--has-logo .trusted-by__logo--large { - height: 12rem; - width: 100%; - max-height: none; - max-width: 100%; - object-fit: contain; - object-position: center; +.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: 2rem; - height: 2rem; - border-radius: 0.55rem; + width: 3.25rem; + height: 3.25rem; + border-radius: 50%; font-family: var(--openms-font-heading); - font-size: 0.85rem; + font-size: 1.1rem; font-weight: 800; - letter-spacing: -0.01em; + letter-spacing: -0.02em; color: var(--openms-navy); - background: rgba(var(--openms-navy-rgb), 0.045); - border: 1px solid rgba(var(--openms-navy-rgb), 0.12); - transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; + 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__entry:nth-child(4n + 1) .trusted-by__monogram { - border-color: rgba(var(--openms-yellow-rgb), 0.45); - background: rgba(var(--openms-yellow-rgb), 0.12); +.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__entry:nth-child(4n + 2) .trusted-by__monogram { +.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); - background: rgba(var(--openms-blue-rgb), 0.1); } -.trusted-by__entry:nth-child(4n + 3) .trusted-by__monogram { +.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); - background: rgba(var(--openms-pink-rgb), 0.1); } -.trusted-by__entry:nth-child(4n) .trusted-by__monogram { +.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); - background: rgba(var(--openms-orange-rgb), 0.1); } -.trusted-by__name { - flex: 1 1 auto; - min-width: 0; +.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.78rem, 1vw, 0.88rem); + font-size: clamp(0.82rem, 1vw, 0.92rem); font-weight: 700; - line-height: 1.25; - color: rgba(var(--openms-dark-rgb), 0.86); + 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__rail { - grid-template-columns: repeat(3, minmax(0, 1fr)); + .trusted-by__showcase { + grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 768px) { - .trusted-by__header { +@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__rail { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .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; } } @@ -246,25 +351,25 @@ padding-inline: 1rem; } - .trusted-by__header { - text-align: left; - margin-inline: 0; + .trusted-by__showcase { + grid-template-columns: 1fr; } - .trusted-by__rail { - grid-template-columns: 1fr; + .trusted-by__card { + min-height: 10rem; } } @media (prefers-reduced-motion: reduce) { - .trusted-by__tile--link:hover, - .trusted-by__tile--link:focus-visible { + .trusted-by__card--link:hover, + .trusted-by__card--link:focus-visible { transform: none; } -} -@media (prefers-contrast: more) { - .trusted-by__tile--link:focus-visible { - outline-width: 3px; + .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/university-partners.css b/assets/css/university-partners.css index 74b7280..6c75633 100644 --- a/assets/css/university-partners.css +++ b/assets/css/university-partners.css @@ -46,13 +46,13 @@ .uni-partners__title { margin: 0 auto; font-family: var(--openms-font-heading); - font-size: clamp(2rem, 4.2vw, 3rem); + font-size: clamp(1.75rem, 3.4vw, 2.35rem); font-weight: var(--openms-heading-lg-weight); - line-height: 1.02; - letter-spacing: -0.03em; + line-height: 1.1; + letter-spacing: -0.02em; color: var(--openms-navy); text-wrap: balance; - max-width: 18ch; + max-width: none; } .uni-partners__title-accent { @@ -69,6 +69,16 @@ -webkit-text-fill-color: transparent; } +.uni-partners__lead { + margin: 0.85rem auto 0; + max-width: 42rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-dark-rgb), 0.8); + text-wrap: pretty; +} + .uni-partners__marquee { position: relative; overflow: hidden; diff --git a/assets/css/webapps.css b/assets/css/webapps.css index 709e77e..8328217 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -1,4 +1,4 @@ -/* Open Source Projects — hero-matched section (navy, glows, glass cards, hover overlay) */ +/* Open Source Projects — light section, elevated project cards */ .webapps-modern-wrap { display: block; @@ -6,55 +6,41 @@ width: 100%; } -/* Section shell — mirrors .hero-modern */ section.webapps-featured { - --webapps-card-w: 9rem; - --webapps-card-h: 6.25rem; - --webapps-logo-w: 5.75rem; - --webapps-logo-h: 3.5rem; - --webapps-card-pad-x: 0.6rem; - --webapps-card-pad-y: 0.55rem; - --webapps-card-title-lines: 2; + --webapps-card-radius: 1rem; + --webapps-logo-size: clamp(4.5rem, 10vw, 5.5rem); --webapps-card-text-lines: 3; - --openms-webapps-focus-ring: 0 0 0 3px var(--openms-navy), + --openms-webapps-focus-ring: 0 0 0 3px var(--openms-blue), 0 0 0 5px var(--openms-yellow); position: relative; overflow: hidden; width: 100%; box-sizing: border-box; - color: var(--openms-white); - background: var(--openms-navy); + color: var(--openms-navy); + background: var(--openms-white); padding: clamp(2.75rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem); -} - -section.webapps-featured::before, -section.webapps-featured::after { - content: none; + border-block: 1px solid rgba(var(--openms-navy-rgb), 0.08); } section.webapps-featured::before { - top: -45%; - right: -8%; - width: 36rem; - height: 36rem; - background: radial-gradient( - circle, - rgba(var(--openms-white-rgb), 0.14) 0%, - transparent 70% + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 45%, + var(--openms-pink) 100% ); + pointer-events: none; } section.webapps-featured::after { - bottom: -35%; - left: -6%; - width: 30rem; - height: 30rem; - background: radial-gradient( - circle, - rgba(var(--openms-purple-rgb), 0.18) 0%, - transparent 70% - ); + content: none; } .webapps-featured__inner { @@ -64,17 +50,18 @@ section.webapps-featured::after { margin: 0 auto; } -/* Header — hero typography */ .webapps-featured__header { display: grid; grid-template-columns: 1fr; gap: clamp(0.8rem, 2vw, 1.15rem); - margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem); + margin-bottom: clamp(2rem, 4vh, 2.75rem); + text-align: center; } .webapps-featured__header-main { min-width: 0; - max-width: 52rem; + max-width: 42rem; + margin-inline: auto; } .webapps-featured__eyebrow { @@ -86,32 +73,30 @@ section.webapps-featured::after { 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.18); + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.2); border-radius: 999px; } .webapps-featured__title { - margin: 0; + margin: 0 auto; font-family: var(--openms-font-heading); - font-size: clamp(2rem, 4.2vw, 3rem); + font-size: clamp(1.75rem, 3.4vw, 2.35rem); font-weight: var(--openms-heading-lg-weight); - line-height: 1.02; - letter-spacing: -0.03em; - color: var(--openms-white); + line-height: 1.1; + letter-spacing: -0.02em; + color: var(--openms-navy); text-wrap: balance; - max-width: 18ch; - text-shadow: 0 0.35rem 1rem rgba(var(--openms-dark-rgb), 0.35); + max-width: none; } .webapps-featured__title-accent { display: inline; background: linear-gradient( 90deg, - var(--openms-yellow) 0%, - var(--openms-orange) 40%, - var(--openms-pink) 75%, + var(--openms-blue) 0%, + var(--openms-purple) 55%, var(--openms-pink) 100% ); -webkit-background-clip: text; @@ -120,167 +105,180 @@ section.webapps-featured::after { } .webapps-featured__lead { - margin: 0.8rem 0 0; - max-width: none; + margin: 0.85rem auto 0; + max-width: 40rem; font-family: var(--openms-font-body); font-size: clamp(0.95rem, 1.25vw, 1.08rem); line-height: 1.65; - color: rgba(var(--openms-white-rgb), 0.95); + color: rgba(var(--openms-navy-rgb), 0.78); text-wrap: pretty; } -/* Grid — staggered layout (one up, one down) */ .webapps-featured .webapps-featured__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - grid-auto-rows: auto; - align-items: start; - justify-items: center; - gap: clamp(0.85rem, 1.8vw, 1.25rem); + gap: clamp(1rem, 2vw, 1.35rem); + align-items: stretch; } .webapps-featured__item { display: flex; - justify-content: center; margin: 0; min-width: 0; width: 100%; } -.webapps-featured__item:nth-child(odd) { - transform: translateY(clamp(-0.65rem, -1.2vw, -0.35rem)); -} - -.webapps-featured__item:nth-child(even) { - transform: translateY(clamp(0.65rem, 1.2vw, 0.35rem)); -} - -/* Cards: uniform compact tiles, text overlay on hover */ +/* Project cards — app-tile layout (logo frame + visible copy) */ .webapps-project-card { - display: block; - width: var(--webapps-card-w); + display: flex; + width: 100%; max-width: 100%; margin: 0; + height: 100%; } .webapps-project-card__surface { position: relative; - display: block; + display: flex; + flex-direction: column; + align-items: stretch; width: 100%; + height: 100%; + padding: clamp(1rem, 2vw, 1.2rem); + gap: 0.9rem; overflow: hidden; - border-radius: 0.5rem; - border: 1px solid rgba(var(--openms-navy-rgb), 0.12); - background: var(--openms-white); + border-radius: var(--webapps-card-radius); + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.06) 0%, + var(--openms-white) 38% + ); text-decoration: none; color: inherit; - transition: border-color 0.2s ease, box-shadow 0.2s ease; + box-shadow: 0 0.2rem 0.85rem rgba(var(--openms-navy-rgb), 0.06); + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, + background 0.2s ease; +} + +.webapps-project-card__accent { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 55%, + var(--openms-pink) 100% + ); + opacity: 0.55; + transition: opacity 0.2s ease, height 0.2s ease; } .webapps-project-card__surface:hover, .webapps-project-card__surface:focus-visible { - border-color: rgba(var(--openms-navy-rgb), 0.12); + border-color: rgba(var(--openms-blue-rgb), 0.28); + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.1) 0%, + var(--openms-white) 42% + ); + box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.14); + transform: translateY(-4px); +} + +.webapps-project-card__surface:hover .webapps-project-card__accent, +.webapps-project-card__surface:focus-visible .webapps-project-card__accent { + opacity: 1; + height: 4px; } .webapps-project-card__surface:focus-visible { outline: none; - box-shadow: var(--openms-hero-focus-ring, var(--openms-webapps-focus-ring)); + box-shadow: var(--openms-webapps-focus-ring), + 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.14); } -.webapps-project-card__media { - position: relative; - z-index: 0; +.webapps-project-card__logo-wrap { display: flex; align-items: center; justify-content: center; - width: 100%; - height: var(--webapps-card-h); - min-height: var(--webapps-card-h); - box-sizing: border-box; - overflow: hidden; - padding: var(--webapps-card-pad-y) var(--webapps-card-pad-x); + align-self: center; + width: var(--webapps-logo-size); + height: var(--webapps-logo-size); + flex-shrink: 0; + padding: 0.65rem; + border-radius: 0.85rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); background: var(--openms-white); + box-shadow: inset 0 0 0 1px rgba(var(--openms-white-rgb), 0.8), + 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.07); + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } -.webapps-project-card__media img { +.webapps-project-card__logo { display: block; - width: var(--webapps-logo-w); - height: var(--webapps-logo-h); - max-width: var(--webapps-logo-w); - max-height: var(--webapps-logo-h); - flex-shrink: 0; - box-sizing: border-box; + width: 100%; + height: 100%; object-fit: contain; object-position: center; + transition: transform 0.25s ease; } -/* Keep image clear; show stronger panel only on hover/focus */ -.webapps-project-card__overlay { - position: absolute; - inset: 0; - z-index: 1; - display: flex; - flex-direction: column; - justify-content: flex-end; - gap: 0.35rem; - padding: 0.75rem; - background: transparent; - pointer-events: none; - transition: background 0.22s ease; +.webapps-project-card__surface:hover .webapps-project-card__logo-wrap, +.webapps-project-card__surface:focus-visible .webapps-project-card__logo-wrap { + border-color: rgba(var(--openms-blue-rgb), 0.35); + box-shadow: inset 0 0 0 1px rgba(var(--openms-white-rgb), 0.9), + 0 0.5rem 1.25rem rgba(var(--openms-blue-rgb), 0.12); + transform: scale(1.03); } -.webapps-project-card__surface:hover .webapps-project-card__overlay, -.webapps-project-card__surface:focus-visible .webapps-project-card__overlay { - background: transparent; +.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__title { +.webapps-project-card__body { + display: flex; + flex-direction: column; + flex: 1; + gap: 0.45rem; + min-width: 0; + text-align: left; +} + +.webapps-project-card__name { margin: 0; font-family: var(--openms-font-heading); - font-size: 0.95rem; + font-size: clamp(0.95rem, 1.15vw, 1.05rem); font-weight: 700; line-height: 1.3; - color: var(--openms-white); letter-spacing: -0.01em; - text-shadow: 0 1px 2px rgba(var(--openms-dark-rgb), 0.45); - display: -webkit-box; - -webkit-line-clamp: var(--webapps-card-title-lines); - -webkit-box-orient: vertical; - overflow: hidden; - width: fit-content; - max-width: 100%; - padding: 0.25rem 0.45rem; - border-radius: 0.35rem; - background: rgba(var(--openms-navy-rgb), 0.78); + color: var(--openms-navy); + transition: color 0.2s ease; +} + +.webapps-project-card__surface:hover .webapps-project-card__name, +.webapps-project-card__surface:focus-visible .webapps-project-card__name { + color: var(--openms-blue); } .webapps-project-card__text { margin: 0; + flex: 1; font-family: var(--openms-font-body); font-size: var(--openms-body-size); - line-height: 1.5; - color: var(--openms-navy); - text-shadow: none; + line-height: 1.52; + color: rgba(var(--openms-navy-rgb), 0.72); display: -webkit-box; -webkit-line-clamp: var(--webapps-card-text-lines); -webkit-box-orient: vertical; overflow: hidden; - opacity: 0; - max-height: 0; - width: fit-content; - max-width: 100%; - padding: 0.2rem 0.45rem; - border-radius: 0.35rem; - background: rgba(var(--openms-white-rgb), 0.95); - transition: opacity 0.22s ease, max-height 0.22s ease; -} - -.webapps-project-card__surface:hover .webapps-project-card__text, -.webapps-project-card__surface:focus-visible .webapps-project-card__text { - opacity: 1; - max-height: 8rem; } .webapps-project-card__text:empty { @@ -288,32 +286,37 @@ section.webapps-featured::after { } .webapps-project-card__cta { + display: inline-flex; + align-items: center; + gap: 0.35rem; margin-top: 0.15rem; + width: fit-content; font-family: var(--openms-font-body); font-size: var(--openms-text-min); font-weight: 700; line-height: 1.3; - color: var(--openms-navy); - text-shadow: none; - opacity: 0; - max-height: 0; - overflow: hidden; - width: fit-content; - max-width: 100%; - padding: 0.2rem 0.45rem; - border-radius: 0.35rem; - background: rgba(var(--openms-white-rgb), 0.95); - transition: opacity 0.22s ease, max-height 0.22s ease; + color: var(--openms-blue); + transition: gap 0.2s ease, color 0.2s ease; +} + +.webapps-project-card__cta-icon { + display: inline-block; + transition: transform 0.2s ease; } .webapps-project-card__surface:hover .webapps-project-card__cta, .webapps-project-card__surface:focus-visible .webapps-project-card__cta { - opacity: 1; - max-height: 2rem; + color: var(--openms-navy); + gap: 0.5rem; +} + +.webapps-project-card__surface:hover .webapps-project-card__cta-icon, +.webapps-project-card__surface:focus-visible .webapps-project-card__cta-icon { + transform: translateX(3px); } .webapps-featured__footer { - margin-top: clamp(1.75rem, 3.5vh, 2.5rem); + margin-top: clamp(2rem, 4vh, 2.75rem); display: flex; justify-content: center; } @@ -326,47 +329,15 @@ section.webapps-featured::after { outline: none; } -.webapps-featured__show-all:focus-visible { - outline: none; - box-shadow: var(--openms-hero-focus-ring, var(--openms-webapps-focus-ring)); -} - @media (hover: none) { - .webapps-project-card__overlay { - background: transparent; - } - - .webapps-project-card__text, - .webapps-project-card__cta { - opacity: 1; - max-height: 8rem; - } - - .webapps-project-card__title { - background: rgba(var(--openms-navy-rgb), 0.92); - } - - .webapps-project-card__surface:active .webapps-project-card__overlay { - background: transparent; + .webapps-project-card__surface { + transform: none; } } @media (max-width: 991px) { - section.webapps-featured { - --webapps-card-w: 8rem; - --webapps-card-h: 5.5rem; - --webapps-logo-w: 5.1rem; - --webapps-logo-h: 3.1rem; - } - .webapps-featured .webapps-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: clamp(0.65rem, 1.8vw, 0.9rem); - } - - .webapps-featured__item:nth-child(odd), - .webapps-featured__item:nth-child(even) { - transform: translateY(0); } } @@ -382,30 +353,30 @@ section.webapps-featured::after { } @media (max-width: 520px) { - section.webapps-featured { - --webapps-card-w: 7.25rem; - --webapps-card-h: 5rem; - --webapps-logo-w: 4.6rem; - --webapps-logo-h: 2.85rem; - --webapps-card-pad-x: 0.5rem; - --webapps-card-pad-y: 0.45rem; - } - .webapps-featured .webapps-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.85rem; } - .webapps-project-card__cta { - align-self: stretch; - width: 100%; + .webapps-project-card__surface { + padding: 0.85rem; + gap: 0.75rem; } } @media (prefers-reduced-motion: reduce) { - .webapps-project-card__overlay { + .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; @@ -414,21 +385,16 @@ section.webapps-featured::after { @media (prefers-contrast: more) { section.webapps-featured { - border-top: 2px solid var(--openms-white); - border-bottom: 2px solid var(--openms-white); + border-block-color: var(--openms-navy); } .webapps-project-card__surface { - border-color: var(--openms-white); + border-color: var(--openms-navy); + box-shadow: none; } - .webapps-project-card__overlay { - background: rgba(var(--openms-navy-rgb), 0.96); - } - - .webapps-project-card__text, - .webapps-project-card__cta { - opacity: 1; - max-height: none; + .webapps-project-card__surface { + border-width: 2px; + box-shadow: none; } } diff --git a/assets/js/community-calendar.js b/assets/js/community-calendar.js new file mode 100644 index 0000000..2d86207 --- /dev/null +++ b/assets/js/community-calendar.js @@ -0,0 +1,267 @@ +(function () { + "use strict"; + + var root = document.querySelector("[data-community-calendar]"); + if (!root) return; + + var dataEl = document.getElementById("community-events-data"); + var gridEl = root.querySelector("[data-calendar-grid]"); + var monthLabel = root.querySelector("[data-calendar-month-label]"); + var eventList = root.querySelector("[data-calendar-event-list]"); + var hintEl = root.querySelector("[data-calendar-hint]"); + var prevBtn = root.querySelector("[data-calendar-prev]"); + var nextBtn = root.querySelector("[data-calendar-next]"); + var todayBtn = root.querySelector("[data-calendar-today]"); + + if (!dataEl || !gridEl || !monthLabel || !eventList) return; + + var events = []; + try { + var raw = JSON.parse(dataEl.textContent || "[]"); + if (typeof raw === "string") { + raw = JSON.parse(raw); + } + events = Array.isArray(raw) ? raw : raw.events || []; + } catch (e) { + events = []; + } + + var view = new Date(); + view.setDate(1); + var selected = null; + + function parseDate(str) { + if (!str) return null; + var parts = String(str).split("-"); + if (parts.length < 3) return null; + return new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2])); + } + + function dateKey(d) { + return ( + d.getFullYear() + + "-" + + String(d.getMonth() + 1).padStart(2, "0") + + "-" + + String(d.getDate()).padStart(2, "0") + ); + } + + function eventOnDay(ev, day) { + var start = parseDate(ev.start); + if (!start) return false; + var end = parseDate(ev.end || ev.start); + var t = day.getTime(); + start.setHours(0, 0, 0, 0); + end.setHours(23, 59, 59, 999); + return t >= start.getTime() && t <= end.getTime(); + } + + function eventsForDay(day) { + return events.filter(function (ev) { + return eventOnDay(ev, day); + }); + } + + function upcomingEvents() { + var today = new Date(); + today.setHours(0, 0, 0, 0); + return events + .filter(function (ev) { + var end = parseDate(ev.end || ev.start); + return end && end.getTime() >= today.getTime(); + }) + .sort(function (a, b) { + return parseDate(a.start) - parseDate(b.start); + }); + } + + function formatRange(ev) { + var start = parseDate(ev.start); + if (!start) return ""; + var opts = { year: "numeric", month: "short", day: "numeric" }; + var s = start.toLocaleDateString(undefined, opts); + if (ev.end && ev.end !== ev.start) { + var end = parseDate(ev.end); + if (end) { + return s + " – " + end.toLocaleDateString(undefined, opts); + } + } + return s; + } + + function renderEventItem(ev) { + var li = document.createElement("li"); + li.className = "community-calendar__event"; + if (ev.category) { + li.classList.add("community-calendar__event--" + ev.category); + } + + var title = document.createElement("h3"); + title.className = "community-calendar__event-title"; + if (ev.url) { + var a = document.createElement("a"); + a.href = ev.url; + a.textContent = ev.title || "Event"; + if (/^https?:\/\//.test(ev.url)) { + a.target = "_blank"; + a.rel = "noopener noreferrer"; + } + title.appendChild(a); + } else if (ev.news_url) { + var link = document.createElement("a"); + link.href = ev.news_url; + link.textContent = ev.title || "Event"; + title.appendChild(link); + } else { + title.textContent = ev.title || "Event"; + } + li.appendChild(title); + + var meta = document.createElement("p"); + meta.className = "community-calendar__event-meta"; + var bits = [formatRange(ev)]; + if (ev.location) bits.push(ev.location); + meta.textContent = bits.filter(Boolean).join(" · "); + li.appendChild(meta); + + if (ev.summary) { + var sum = document.createElement("p"); + sum.className = "community-calendar__event-summary"; + sum.textContent = ev.summary; + li.appendChild(sum); + } + + if (ev.news_url && ev.url) { + var more = document.createElement("p"); + more.className = "community-calendar__event-more"; + var newsLink = document.createElement("a"); + newsLink.href = ev.news_url; + newsLink.textContent = "News post →"; + more.appendChild(newsLink); + li.appendChild(more); + } + + return li; + } + + function renderList(list, emptyText) { + eventList.innerHTML = ""; + if (!list.length) { + var empty = document.createElement("li"); + empty.className = "community-calendar__event community-calendar__event--empty"; + empty.textContent = emptyText || "No events."; + eventList.appendChild(empty); + return; + } + list.forEach(function (ev) { + eventList.appendChild(renderEventItem(ev)); + }); + } + + function renderMonth() { + var year = view.getFullYear(); + var month = view.getMonth(); + monthLabel.textContent = view.toLocaleDateString(undefined, { + month: "long", + year: "numeric", + }); + + gridEl.innerHTML = ""; + var first = new Date(year, month, 1); + var startPad = (first.getDay() + 6) % 7; + var daysInMonth = new Date(year, month + 1, 0).getDate(); + var todayKey = dateKey(new Date()); + + for (var i = 0; i < startPad; i++) { + var pad = document.createElement("div"); + pad.className = "community-calendar__day community-calendar__day--pad"; + pad.setAttribute("aria-hidden", "true"); + gridEl.appendChild(pad); + } + + for (var d = 1; d <= daysInMonth; d++) { + var day = new Date(year, month, d); + var key = dateKey(day); + var dayEvents = eventsForDay(day); + var btn = document.createElement("button"); + btn.type = "button"; + btn.className = "community-calendar__day"; + btn.setAttribute("role", "gridcell"); + btn.dataset.date = key; + btn.setAttribute( + "aria-label", + day.toLocaleDateString(undefined, { + weekday: "long", + month: "long", + day: "numeric", + year: "numeric", + }) + (dayEvents.length ? ", " + dayEvents.length + " event(s)" : "") + ); + + if (key === todayKey) btn.classList.add("is-today"); + if (dayEvents.length) btn.classList.add("has-events"); + if (selected === key) btn.classList.add("is-selected"); + + var num = document.createElement("span"); + num.className = "community-calendar__day-num"; + num.textContent = String(d); + btn.appendChild(num); + + if (dayEvents.length) { + var dots = document.createElement("span"); + dots.className = "community-calendar__day-dots"; + dots.setAttribute("aria-hidden", "true"); + dayEvents.slice(0, 3).forEach(function () { + var dot = document.createElement("span"); + dot.className = "community-calendar__day-dot"; + dots.appendChild(dot); + }); + btn.appendChild(dots); + } + + btn.addEventListener("click", function () { + selected = key; + if (hintEl) hintEl.hidden = true; + renderList(dayEvents, "No events on this day."); + renderMonth(); + }); + + gridEl.appendChild(btn); + } + } + + function showUpcoming() { + selected = null; + if (hintEl) { + hintEl.hidden = false; + hintEl.textContent = "Upcoming community events."; + } + renderList(upcomingEvents(), "No upcoming events scheduled."); + renderMonth(); + } + + if (prevBtn) { + prevBtn.addEventListener("click", function () { + view.setMonth(view.getMonth() - 1); + renderMonth(); + }); + } + + if (nextBtn) { + nextBtn.addEventListener("click", function () { + view.setMonth(view.getMonth() + 1); + renderMonth(); + }); + } + + if (todayBtn) { + todayBtn.addEventListener("click", function () { + view = new Date(); + view.setDate(1); + showUpcoming(); + }); + } + + showUpcoming(); +})(); diff --git a/assets/js/navbar-search.js b/assets/js/navbar-search.js new file mode 100644 index 0000000..0307330 --- /dev/null +++ b/assets/js/navbar-search.js @@ -0,0 +1,170 @@ +/** + * Navbar site search — magnifying glass opens panel; live results from search-index.json. + */ +(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 closePanel(root, toggle, panel, input, results) { + root.classList.remove("is-open"); + toggle.setAttribute("aria-expanded", "false"); + panel.hidden = true; + closeResults(results, input); + } + + function openPanel(root, toggle, panel, input) { + root.classList.add("is-open"); + toggle.setAttribute("aria-expanded", "true"); + panel.hidden = false; + window.requestAnimationFrame(function () { + 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"); + 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); + } + }); + + 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.contains(e.target)) { + if (root.classList.contains("is-open")) { + closePanel(root, toggle, panel, input, results); + } + } + }); + } + + document.addEventListener("DOMContentLoaded", function () { + document.querySelectorAll(".navbar-search").forEach(setupSearch); + }); +})(); diff --git a/assets/js/navbar.js b/assets/js/navbar.js index 8f3c394..5acc547 100644 --- a/assets/js/navbar.js +++ b/assets/js/navbar.js @@ -1,13 +1,29 @@ /** - * Mobile navbar — burger menu, dropdown toggles & close on navigate + * Mobile navbar — burger menu, dropdown toggles, backdrop & close on navigate */ (function () { - var MOBILE_MAX = 1023; + var MOBILE_MAX = 1279; function isMobileNav() { return window.matchMedia("(max-width: " + MOBILE_MAX + "px)").matches; } + function closeAllSearch() { + document.querySelectorAll(".navbar-search.is-open").forEach(function (root) { + var toggle = root.querySelector(".navbar-search__toggle"); + var panel = root.querySelector(".navbar-search__panel"); + var input = root.querySelector(".navbar-search__input"); + var results = root.querySelector(".navbar-search__results"); + if (!toggle || !panel || !input || !results) return; + root.classList.remove("is-open"); + toggle.setAttribute("aria-expanded", "false"); + panel.hidden = true; + results.hidden = true; + results.innerHTML = ""; + input.setAttribute("aria-expanded", "false"); + }); + } + function closeDropdowns(nav) { if (!nav) return; nav.querySelectorAll(".navbar-item.has-dropdown.is-active").forEach(function (el) { @@ -17,16 +33,43 @@ }); } - function closeMobileMenu(nav) { + function updateHeaderHeight() { + var header = document.querySelector(".site-header"); + if (!header) return; + document.documentElement.style.setProperty( + "--openms-header-height", + header.offsetHeight + "px" + ); + } + + function setMenuOpen(nav, open) { if (!nav) return; + var menu = nav.querySelector(".navbar-menu"); var burger = nav.querySelector(".navbar-burger"); - if (menu) menu.classList.remove("is-active"); + var backdrop = nav.querySelector("[data-navbar-backdrop]"); + + if (menu) menu.classList.toggle("is-active", open); if (burger) { - burger.classList.remove("is-active"); - burger.setAttribute("aria-expanded", "false"); + burger.classList.toggle("is-active", open); + burger.setAttribute("aria-expanded", open ? "true" : "false"); + } + if (backdrop) backdrop.hidden = !open; + nav.classList.toggle("is-menu-open", open); + + if (open) { + closeAllSearch(); + document.body.classList.add("navbar-menu-open"); + window.requestAnimationFrame(updateHeaderHeight); + } else { + closeDropdowns(nav); + document.body.classList.remove("navbar-menu-open"); + window.requestAnimationFrame(updateHeaderHeight); } - closeDropdowns(nav); + } + + function closeMobileMenu(nav) { + setMenuOpen(nav, false); } function setupNav(nav) { @@ -34,6 +77,7 @@ 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) { @@ -44,15 +88,14 @@ e.stopImmediatePropagation(); var willOpen = !menu.classList.contains("is-active"); - menu.classList.toggle("is-active", willOpen); - burger.classList.toggle("is-active", willOpen); - burger.setAttribute("aria-expanded", willOpen ? "true" : "false"); - - if (!willOpen) { - closeDropdowns(nav); - } else { - updateHeaderHeight(); - } + setMenuOpen(nav, willOpen); + }); + } + + if (backdrop) { + backdrop.addEventListener("click", function () { + if (!isMobileNav()) return; + closeMobileMenu(nav); }); } @@ -82,15 +125,6 @@ } } - function updateHeaderHeight() { - var header = document.querySelector(".site-header"); - if (!header) return; - document.documentElement.style.setProperty( - "--openms-header-height", - header.offsetHeight + "px" - ); - } - document.addEventListener("DOMContentLoaded", function () { setupNav(document.getElementById("nav")); setupNav(document.getElementById("navbar-clone")); @@ -103,5 +137,13 @@ closeMobileMenu(document.getElementById("navbar-clone")); } }); + + document.addEventListener("keydown", function (e) { + if (e.key !== "Escape" || !isMobileNav()) return; + var nav = document.getElementById("nav"); + if (nav && nav.classList.contains("is-menu-open")) { + closeMobileMenu(nav); + } + }); }); })(); diff --git a/assets/js/news-year-filter.js b/assets/js/news-year-filter.js new file mode 100644 index 0000000..ac042fc --- /dev/null +++ b/assets/js/news-year-filter.js @@ -0,0 +1,108 @@ +(function () { + "use strict"; + + var root = document.querySelector("[data-news-year-filter]"); + if (!root) return; + + var buttons = root.querySelectorAll("[data-news-year-btn]"); + var items = root.querySelectorAll(".news-card[data-news-year]"); + var headings = root.querySelectorAll("[data-news-year-heading]"); + var emptyEl = root.querySelector("[data-news-empty]"); + var countEl = root.querySelector("[data-news-count]"); + var total = items.length; + + 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 setActiveButton(year) { + buttons.forEach(function (btn) { + var value = btn.getAttribute("data-news-year-btn"); + var active = value === year || (year === "all" && value === "all"); + btn.classList.toggle("is-active", active); + btn.setAttribute("aria-pressed", active ? "true" : "false"); + }); + } + + function applyFilter(year) { + var showAll = !year || year === "all"; + var visible = 0; + + items.forEach(function (item) { + var itemYear = item.getAttribute("data-news-year") || ""; + var show = showAll || itemYear === year; + if (show) { + item.removeAttribute("data-news-hidden"); + } else { + item.setAttribute("data-news-hidden", "true"); + } + if (show) visible += 1; + }); + + headings.forEach(function (heading) { + var headingYear = heading.getAttribute("data-news-year-heading") || ""; + var showHeading = showAll || headingYear === year; + heading.hidden = !showHeading; + }); + + if (emptyEl) { + emptyEl.hidden = showAll || visible > 0; + } + + if (countEl) { + if (showAll) { + countEl.textContent = total + " " + (total === 1 ? "article" : "articles"); + } else { + countEl.textContent = + visible + " of " + total + " " + (total === 1 ? "article" : "articles"); + } + } + } + + function selectYear(year) { + var value = year || "all"; + setActiveButton(value); + applyFilter(value); + setYearInUrl(value); + } + + function initYear() { + var fromUrl = getYearFromUrl(); + if (fromUrl) { + var match = root.querySelector('[data-news-year-btn="' + fromUrl + '"]'); + if (match) return fromUrl; + } + var active = root.querySelector(".news-page__year-btn.is-active"); + if (active) { + return active.getAttribute("data-news-year-btn") || "all"; + } + var fallback = root.getAttribute("data-news-default-year"); + return fallback || "all"; + } + + buttons.forEach(function (btn) { + btn.addEventListener("click", function () { + selectYear(btn.getAttribute("data-news-year-btn")); + }); + }); + + selectYear(initYear()); + + window.addEventListener("popstate", function () { + selectYear(getYearFromUrl() || "all"); + }); +})(); diff --git a/assets/js/publications-year-filter.js b/assets/js/publications-year-filter.js new file mode 100644 index 0000000..0fd82af --- /dev/null +++ b/assets/js/publications-year-filter.js @@ -0,0 +1,122 @@ +(function () { + "use strict"; + + var RECENT_YEAR_COUNT = 2; + + var root = document.querySelector("[data-publications-year-filter]"); + if (!root) return; + + var selectEl = root.querySelector("[data-publications-year-select]"); + var countEl = root.querySelector("[data-publications-count]"); + var allSections = root.querySelectorAll("[data-publication-year]"); + if (!selectEl || !allSections.length) return; + + var allYears = []; + allSections.forEach(function (section) { + var year = section.getAttribute("data-publication-year"); + if (year && allYears.indexOf(year) === -1) { + allYears.push(year); + } + }); + allYears.sort(function (a, b) { + return Number(b) - Number(a); + }); + + var recentYears = allYears.slice(0, RECENT_YEAR_COUNT); + + var currentYear = "all"; + + 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 updateCount(visible, showAll, year) { + if (!countEl) return; + if (showAll) { + countEl.textContent = + visible + + " " + + (visible === 1 ? "publication" : "publications") + + " (" + + recentYears.join(", ") + + ")"; + } else { + countEl.textContent = + visible + + " " + + (visible === 1 ? "publication" : "publications") + + " (" + + year + + ")"; + } + } + + function applyFilter(year) { + var showAll = !year || year === "all"; + var visible = 0; + + allSections.forEach(function (section) { + var sectionYear = section.getAttribute("data-publication-year") || ""; + var show = showAll + ? recentYears.indexOf(sectionYear) !== -1 + : sectionYear === year; + section.hidden = !show; + section.setAttribute("aria-hidden", show ? "false" : "true"); + if (show) { + visible += section.querySelectorAll(".publication-entry").length; + } + }); + + updateCount(visible, showAll, year); + } + + function selectYear(year) { + if (year !== "all" && allYears.indexOf(year) === -1) { + year = "all"; + } + currentYear = year; + selectEl.value = year; + applyFilter(year); + setYearInUrl(year); + + if (year !== "all") { + var target = root.querySelector("#year-" + year); + if (target && typeof target.scrollIntoView === "function") { + target.scrollIntoView({ behavior: "smooth", block: "start" }); + } + } + } + + function initYear() { + var fromUrl = getYearFromUrl(); + if (fromUrl === "all") return "all"; + if (fromUrl && allYears.indexOf(fromUrl) !== -1) { + return fromUrl; + } + return "all"; + } + + selectEl.addEventListener("change", function () { + selectYear(selectEl.value); + }); + + selectYear(initYear()); + + window.addEventListener("popstate", function () { + selectYear(initYear()); + }); +})(); diff --git a/assets/js/swiper.js b/assets/js/swiper.js index 0e864ba..4f60288 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 a5c38f6..feaaf43 100644 --- a/config.yaml +++ b/config.yaml @@ -15,6 +15,18 @@ 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 @@ -65,6 +77,10 @@ languages: # defaultYear: "2026" defaultToLatestYear: false emptyMessage: No news items for the selected year. + calendarSection: + eyebrow: Community + title: Community calendar + subtitle: Upcoming OpenMS meetings, workshops, and community events. trustedBySection: eyebrow: Trusted by title: As used by leading teams @@ -89,6 +105,11 @@ languages: image: OpenMS_transparent_blackFont.png link: / altText: OpenMS + navbarSearch: + enabled: true + placeholder: Search OpenMS… + minChars: 2 + maxResults: 8 hero: titleBefore: "The " titleHighlight: open-source framework @@ -97,8 +118,10 @@ languages: Build sophisticated LC/MS data analysis tools with C++ or Python. Process large datasets at scale. Create high-performance algorithms. Join 1000+ researchers worldwide. - buttontext: Get Started Now buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html + secondaryButtonText: Explore the library + secondaryButtonLink: /openms-lib/ + microcopy: Open source · Free to use · Trusted by researchers worldwide stats: - value: 10 suffix: "+" @@ -110,13 +133,27 @@ languages: decimals: 1 label: Latest Version + homePage: + pathwaysEyebrow: Get started + pathwaysTitle: Choose your entry point + pathways: + - title: Documentation + text: Installation, tutorials, and workflow guides on Read the Docs. + url: https://openms.readthedocs.io/en/latest/ + - title: OpenMS library + text: Capabilities for users, developers, and what OpenMS includes. + url: /openms-lib/ + - title: All applications + text: Community web apps and tools built on OpenMS. + url: /applications/ + homeSponsors: - enabled: true + enabled: false label: Supported by description: OpenMS receives direct funding from leading life-science organizations. cta: text: Our sponsors - url: /about#sponsors + url: /sponsor-us/ sponsors: - name: deNBI url: https://www.denbi.de @@ -265,7 +302,7 @@ languages: tagline: The open-source framework for mass spectrometry. sponsor: text: Sponsor us - link: /about#sponsors + link: /sponsor-us/ donate: text: Donate link: /about#donate @@ -324,16 +361,7 @@ languages: navbar: - title: Infrastructure - sublinks: - - title: OpenMS-lib - url: https://openms.readthedocs.io/en/latest/develop-with-openms/openms-cpp-core-library.html - is_external: true - - title: pyOpenMS - url: https://pyopenms.readthedocs.io/en/latest/ - is_external: true - - title: WebApp-template - url: https://github.com/OpenMS/streamlit-template - is_external: true + url: /openms-lib/ - title: Projects url: /applications sublinks: @@ -361,7 +389,10 @@ languages: url: https://openms.readthedocs.io/en/latest/manual/glossary.html is_external: true - title: Community + url: /calendar/ sublinks: + - title: Calendar + url: /calendar/ - title: News url: /news - title: Getting Involved @@ -379,20 +410,20 @@ languages: - title: Publications url: /publications - title: Contact - url: /#contact + url: /contact/ - title: Partner with OpenMS - url: /about#institutional-partners + url: /research-partnerships/ is_emphasized: true sublinks: - title: Research Partnerships - url: /about#institutional-partners + url: /research-partnerships/ - title: Scientific and Technical Support url: /help - title: Sponsor Us - url: /about#sponsors + url: /sponsor-us/ - title: Sponsor us shortTitle: Sponsor - url: /about#sponsors + url: /sponsor-us/ button: true buttonVariant: sponsor - title: Donate diff --git a/content/en/about.md b/content/en/about.md index 88c6ba2..f98ec4f 100644 --- a/content/en/about.md +++ b/content/en/about.md @@ -1,27 +1,78 @@ --- title: OpenMS Inc. sidebar: false +hideShortcuts: true +hidePageTitle: true --- -OpenMS Inc. is the corporate entity and fiscal home of the OpenMS project. As a Pennsylvania–based nonprofit organization recognized as a 501(c)(3) public charity, OpenMS Inc. supports the continued development, governance, and community stewardship of the OpenMS open-source software ecosystem. Through nonprofit oversight and dedicated fiscal management, we ensure that OpenMS remains freely available, sustainable, and driven by the needs of its scientific community. As a registered 501(c)(3) nonprofit organization. Contributions are tax-deductible to the extent permitted by law. EIN: 93-3818533 +
+
+

About us

+

+ Built for sustainability, guided by community. +

+

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

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

Who we are

+

OpenMS Inc.

+

+ Through nonprofit oversight and dedicated fiscal management, OpenMS Inc. + helps ensure OpenMS remains freely available, sustainable, and community-driven. +

+

+ Contributions are tax-deductible to the extent permitted by law. EIN: 93-3818533. +

+
+
+

Board of directors

+

Leadership

+
    +
  • Dr. Samuel Wein (chief executive officer)
    • +
  • Prof. Dr. Oliver Kohlbacher (chief scientific officer)
    • +
  • Dr. Timo Sachsenberg (chief technology officer)
    • +
+
+
-## Sponsors {#sponsors} +
+

Sponsors

+

+ OpenMS receives direct funding from organizations that sponsor the project. + See sponsor us for current sponsors and how to support OpenMS financially. +

+
-OpenMS receives direct funding from the following sources: -{{< sponsors >}} +
+

Institutional Partners

+

+ Institutional partners are organizations that support the project by employing people + who contribute to OpenMS as part of their work. + See the research partnerships page for partner + institutions and how to collaborate. +

+
- -## Institutional Partners {#institutional-partners} - -Institutional Partners are organizations that support the project by employing people that contribute to OpenMS as part of their job. Current Institutional Partners include: - -{{< 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/calendar.md b/content/en/calendar.md new file mode 100644 index 0000000..028d086 --- /dev/null +++ b/content/en/calendar.md @@ -0,0 +1,6 @@ +--- +title: Community Calendar +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- diff --git a/content/en/contact.md b/content/en/contact.md new file mode 100644 index 0000000..10414a3 --- /dev/null +++ b/content/en/contact.md @@ -0,0 +1,88 @@ +--- +title: Contact us +sidebar: false +hidePageTitle: true +hideShortcuts: true +--- + +
+ +
+

Contact

+

+ Let's talk about your workflow +

+

+ Whether you need help with pipelines, integrations, consulting, or joining the + community — reach out and we will point you to the right next step. +

+
+ Open contact form + Email us +
+
+ +
+
+

Message

+

Contact form

+

+ Share your question, partnership idea, or support request. We typically reply + within one to two business days. +

+

+ Send a message +

+
+
+

Direct

+

Email

+

+ Prefer email? Write to the OpenMS team for technical questions, website + feedback, or collaboration inquiries. +

+

+ webmaster@openms.de +

+
+
+

Community

+

Discord & GitHub

+

+ Join discussions, report issues, and connect with contributors on our community + channels. +

+

+ View community channels +

+
+
+

Support

+

Help & consulting

+

+ Browse help resources or learn about paid scientific and technical support + options. +

+

+ OpenMS help +

+
+
+ +
+

Supporting OpenMS

+

+ You can also support the project as a + sponsor or through + donations. For governance and partnerships, see + Research partnerships and + About OpenMS Inc. +

+
+ +
diff --git a/content/en/contribute.md b/content/en/contribute.md index 5244aae..9a2bfe4 100644 --- a/content/en/contribute.md +++ b/content/en/contribute.md @@ -160,7 +160,7 @@ The most important repositories in the OpenMS GitHub organization are: - **[streamlit-template](https://github.com/OpenMS/streamlit-template)** — A template for building lightweight web applications around OpenMS tools -- **[OpenMS-website](https://github.com/OpenMS/OpenMS-website)** — Source repository for the OpenMS project website +- **[OpenMS-website](https://github.com/OpenMS/OpenMS-website)** — Source repository for the OpenMS project website. For updating news or homepage text without front-end experience, see the [website maintainer guide](https://github.com/OpenMS/OpenMS-website/blob/main/docs/README.md) in that repository. There are additional repositories for tutorials, experimental features, and supporting infrastructure. diff --git a/content/en/governance.md b/content/en/governance.md index 70ebafa..364fcda 100644 --- a/content/en/governance.md +++ b/content/en/governance.md @@ -1,70 +1,94 @@ --- title: "Governance" +hidePageTitle: 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" >}}). +
+
+

OpenMS governance

+

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

+
+ +
+
+

Corporate Governance

+

OpenMS Inc.

+

+ OpenMS Inc. is a U.S. nonprofit corporation under 501(c)(3) + that provides legal and financial infrastructure for the project. +

+
    +
  • Board of Directors handles fiduciary and legal oversight
    • +
  • Supports fundraising, compliance, and organizational continuity
    • +
+

+ OpenMS Inc. provides legal, financial, and organizational stewardship for the project. +

+
+
+

Project Governance

+

Executive Committee

+

+ The Executive Committee is the primary governance body + for the software project. It is composed of core developers and led by an elected Executive Chairperson. +

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

+ See committee details and procedures +

+
+
+ +
+

How Core Developers Fit In

+

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

+
+
Review and approve contributions
+
Guide technical direction
+
Mentor new contributors
+
Participate in governance votes
+
+

+ New core developers are added by majority vote of the Executive Committee. + Core developers may step down voluntarily or be removed for inactivity or Code of Conduct violations by a two-thirds vote. +

+
+ +
+

Separation of Responsibilities

+
+
+

Corporate (Board of Directors)

+

Legal entity, nonprofit compliance, financial stewardship.

+
+
+

Project (Executive Committee)

+

Software roadmap, contributor governance, technical/community decisions.

+
+
+

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

+
+ + +
diff --git a/content/en/news/_index.md b/content/en/news/_index.md new file mode 100644 index 0000000..bdab8ed --- /dev/null +++ b/content/en/news/_index.md @@ -0,0 +1,4 @@ +--- +title: News +subtitle: Announcements, releases, workshops, and community updates from OpenMS. +--- diff --git a/content/en/news/gsoc2025.md b/content/en/news/gsoc2025.md index c545adb..4cef78a 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 0000000..89e0fd9 --- /dev/null +++ b/content/en/openms-lib.md @@ -0,0 +1,129 @@ +--- +title: OpenMS-lib +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+ +
+ +
+

Infrastructure

+

+ Built for mass spectrometry, powered by open source. +

+

+ OpenMS-lib is the high-performance, BSD-licensed C++ foundation behind TOPP tools, + pyOpenMS, and community software—built for LC-MS data management, analysis, and + visualization at scale. +

+
+ pyOpenMS + WebApp template +
+
+ + + +
+
+

Core library

+

C++ algorithms & data structures

+

+ File I/O for mzML, mzXML, TraML, mzIdentML, and related formats, plus signal + processing, identification, and quantification building blocks. +

+
    +
  • Modular, extensible C++ API
    • +
  • Cross-platform builds (Windows, macOS, Linux)
    • +
  • Released under a three-clause BSD license
    • +
+
+
+

Ecosystem

+

Built on OpenMS-lib

+

+ Most users interact with OpenMS through tools and bindings that share the same core. +

+
    +
  • TOPP tools — command-line utilities for proteomics and metabolomics
    • +
  • pyOpenMS — Python bindings for scripting and workflows
    • +
  • Web applications — community projects on this site
    • +
+

+ Source on GitHub → +

+
+
+ +
+ +
+
+ {{< keyfeatures >}} +
+
+ {{< heroitems variant="users" >}} +
+
+ {{< heroitems variant="developers" >}} +
+
+ +
+ +
+

Get started developing

+

+ New contributors typically begin with the + OpenMS repository + and its + contrib + dependency bundle. The wiki and developer guides cover building from source, + adding a TOPP tool, and following project coding conventions. +

+
+
Developer FAQ
+
Add a TOPP tool
+
C++ guide
+
Developer manual
+
pyOpenMS docs
+
Browse projects
+
+

+ See the contributing guide and + develop your own OpenMS tools + for a broader project overview. +

+
+ C++ library documentation + View on GitHub +
+
+ +
+ +
diff --git a/content/en/publications.md b/content/en/publications.md index 40ae701..fcc0055 100644 --- a/content/en/publications.md +++ b/content/en/publications.md @@ -1,237 +1,233 @@ -# List of OpenMS Publications - -## 2025 - - -- Müller, Tom David; Siraj, Arslan; Walter, Axel; Kim, Jihyung; Wein, Samuel; von Kleist, Johannes; Feroz, Ayesha; Pilz, Matteo; Jeong, Kyowon; Sing, Justin Cyril; *OpenMS WebApps: Building User-Friendly Solutions for MS Analysis*. Journal of Proteome Research. 2025. [Link](https://www.ncbi.nlm.nih.gov/pubmed/39881492) - -- Sing, Justin Cyril; Charkow, Joshua; Walter, Axel; Gao, Mingxuan; Muller, Tom David; Bittremieux, Wout; Sachsenberg, Timo; Röst, Hannes Luc; *pyOpenMS-viz: Streamlining Mass Spectrometry Data Visualization with pandas*. Journal of Proteome Research. 2025. [Link](https://www.ncbi.nlm.nih.gov/pubmed/40019346) -*** -## 2024 - - -- Kim, Jihyung; Jeong, Kyowon; Kaulich, Philipp T; Winkels, Konrad; Tholey, Andreas; Kohlbacher, Oliver; *FLASHQuant: a fast algorithm for proteoform quantification in top-down proteomics*. Analytical Chemistry. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/39424290) - -- Siraj, Arslan; Bouwmeester, Robbin; Declercq, Arthur; Welp, Luisa; Chernev, Aleksandar; Wulf, Alexander; Urlaub, Henning; Martens, Lennart; Degroeve, Sven; Kohlbacher, Oliver; *Intensity and retention time prediction improves the rescoring of protein‐nucleic acid cross‐links*. Proteomics. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/38629965) - -- Pfeuffer, Julianus; Bielow, Chris; Wein, Samuel; Jeong, Kyowon; Netz, Eugen; Walter, Axel; Alka, Oliver; Nilse, Lars; Colaianni, Pasquale Domenico; McCloskey, Douglas; *OpenMS 3 enables reproducible analysis of large-scale mass spectrometry data*. Nature methods. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/38366242) - -- Dai, Chengxin; Pfeuffer, Julianus; Wang, Hong; Zheng, Ping; Käll, Lukas; Sachsenberg, Timo; Demichev, Vadim; Bai, Mingze; Kohlbacher, Oliver; Perez-Riverol, Yasset; *quantms: a cloud-based pipeline for quantitative proteomics enables the reanalysis of public proteomics data*. Nature Methods. 2024. [Link](https://www.ncbi.nlm.nih.gov/pubmed/38965444) -*** -## 2023 - - -- Kontou, Eftychia E; Walter, Axel; Alka, Oliver; Pfeuffer, Julianus; Sachsenberg, Timo; Mohite, Omkar S; Nuhamunada, Matin; Kohlbacher, Oliver; Weber, Tilmann; *UmetaFlow: an untargeted metabolomics workflow for high-throughput data processing and analysis*. Journal of Cheminformatics. 2023. [Link](https://www.ncbi.nlm.nih.gov/pubmed/37173725) - -- Bittremieux, Wout; Levitsky, Lev; Pilz, Matteo; Sachsenberg, Timo; Huber, Florian; Wang, Mingxun; Dorrestein, Pieter C; *Unified and standardized mass spectrometry data processing in Python using spectrum_utils*. Journal of proteome research. 2023. [Link](https://www.ncbi.nlm.nih.gov/pubmed/36688502) -*** -## 2022 - - -- Luo, Xiyang; Bittremieux, Wout; Griss, Johannes; Deutsch, Eric W; Sachsenberg, Timo; Levitsky, Lev I; Ivanov, Mark V; Bubis, Julia A; Gabriels, Ralf; Webel, Henry; *A comprehensive evaluation of consensus spectrum generation methods in proteomics*. Journal of proteome research. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/35549218) - -- Jeong, Kyowon; Babović, Maša; Gorshkov, Vladimir; Kim, Jihyung; Jensen, Ole N; Kohlbacher, Oliver; *FLASHIda enables intelligent data acquisition for top–down proteomics to boost proteoform identification counts*. Nature communications. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/35906205) - -- Umer, Husen M; Audain, Enrique; Zhu, Yafeng; Pfeuffer, Julianus; Sachsenberg, Timo; Lehtiö, Janne; Branca, Rui M; Perez-Riverol, Yasset; *Generation of ENSEMBL-based proteogenomics databases boosts the identification of non-canonical peptides*. Bioinformatics. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/34904638) - -- Jeong, Kyowon; Kim, Jihyung; Kohlbacher, Oliver; *Mass Deconvolution of Top-Down Mass Spectrometry Datasets by FLASHDeconv*. Proteoform Identification: Methods and Protocols. 2022. [Link](https://www.ncbi.nlm.nih.gov/pubmed/35657592) -*** -## 2021 - - -- Dai, Chengxin; Füllgrabe, Anja; Pfeuffer, Julianus; Solovyeva, Elizaveta M; Deng, Jingwen; Moreno, Pablo; Kamatchinathan, Selvakumar; Kundu, Deepti Jaiswal; George, Nancy; Fexova, Silvie; *A proteomics sample metadata representation for multiomics integration and big data analysis*. Nature Communications. 2021. [Link](https://www.ncbi.nlm.nih.gov/pubmed/34615866) - -- Bichmann, Leon; Gupta, Shubham; Rosenberger, George; Kuchenbecker, Leon; Sachsenberg, Timo; Ewels, Phil; Alka, Oliver; Pfeuffer, Julianus; Kohlbacher, Oliver; Rost, Hannes; *DIAproteomics: A multifunctional data analysis pipeline for data-independent acquisition proteomics and peptidomics*. Journal of proteome research. 2021 - -- Marcu, Ana; Bichmann, Leon; Kuchenbecker, Leon; Kowalewski, Daniel Johannes; Freudenmann, Lena Katharina; Backert, Linus; Mühlenbruch, Lena; Szolek, András; Lübke, Maren; Wagner, Philipp; *HLA Ligand Atlas: a benign reference of HLA-presented peptides to improve T-cell-based cancer immunotherapy*. Journal for immunotherapy of cancer. 2021 -*** -## 2020 - - -- Wein, Samuel; Andrews, Byron; Sachsenberg, Timo; Santos-Rosa, Helena; Kohlbacher, Oliver; Kouzarides, Tony; Garcia, Benjamin A; Weisser, Hendrik; *A computational platform for high-throughput analysis of RNA sequences and modifications by mass spectrometry*. Nature communications. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/32066737) - -- Stützer, Alexandra; Welp, Luisa M; Raabe, Monika; Sachsenberg, Timo; Kappert, Christin; Wulf, Alexander; Lau, Andy M; David, Stefan-Sebastian; Chernev, Aleksandar; Kramer, Katharina; *Analysis of protein-DNA interactions in chromatin by UV induced cross-linking and mass spectrometry*. Nature communications. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/33067435) - -- Jeong, Kyowon; Kim, Jihyung; Gaikwad, Manasi; Hidayah, Siti Nurul; Heikaus, Laura; Schlüter, Hartmut; Kohlbacher, Oliver; *FLASHDeconv: ultrafast, high-quality feature deconvolution for top-down proteomics*. Cell Systems. 2020 - -- Nothias, Louis-Félix; Petras, Daniel; Schmid, Robin; Dührkop, Kai; Rainer, Johannes; Sarvepalli, Abinesh; Protsyuk, Ivan; Ernst, Madeleine; Tsugawa, Hiroshi; Fleischauer, Markus; *Feature-based molecular networking in the GNPS analysis environment*. Nature methods. 2020 - -- Rurik, Marc; Alka, Oliver; Aicheler, Fabian; Kohlbacher, Oliver; *Metabolomics data processing using OpenMS*. Computational Methods and Data Analysis for Metabolomics. 2020 - -- Netz, Eugen; Dijkstra, Tjeerd MH; Sachsenberg, Timo; Zimmermann, Lukas; Walzer, Mathias; Monecke, Thomas; Ficner, Ralf; Dybkov, Olexandr; Urlaub, Henning; Kohlbacher, Oliver; *OpenPepXL: an open-source tool for sensitive identification of cross-linked peptides in XL-MS*. Molecular & Cellular Proteomics. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/33067342) - -- Scheidt, Tamara; Alka, Oliver; Gonczarowska-Jorge, Humberto; Gruber, Wolfgang; Rathje, Florian; Dell’Aica, Margherita; Rurik, Marc; Kohlbacher, Oliver; Zahedi, René P; Aberger, Fritz; *Phosphoproteomics of short-term hedgehog signaling in human medulloblastoma cells*. Cell Communication and Signaling. 2020 - -- Kutuzova, Svetlana; Colaianni, Pasquale; Rost, Hannes; Sachsenberg, Timo; Alka, Oliver; Kohlbacher, Oliver; Burla, Bo; Torta, Federico; Schrubbers, Lars; Kristensen, Mette; *SmartPeak automates targeted and quantitative metabolomics data processing*. Analytical Chemistry. 2020. [Link](https://www.ncbi.nlm.nih.gov/pubmed/33269929) - -- Starke, Robert; Oliphant, Kaitlyn; Jehmlich, Nico; Schäpe, Stephanie Serena; Sachsenberg, Timo; Kohlbacher, Oliver; Allen-Vercoe, Emma; von Bergen, Martin; *Tracing incorporation of heavy water into proteins for species-specific metabolic activity in complex communities*. Journal of Proteomics. 2020 -*** -## 2019 - - -- Pfeuffer, Julianus; Sachsenberg, Timo; Dijkstra, Tjeerd MH; Serang, Oliver; Reinert, Knut; Kohlbacher, Oliver; *EPIFANY-A method for efficient high-confidence protein inference*. Journal of proteome research. 2019 - -- Cain, Nicolas; Alka, Oliver; Segelke, Torben; von Wuthenau, Kristian; Kohlbacher, Oliver; Fischer, Markus; *Food fingerprinting: Mass spectrometric determination of the cocoa shell content (Theobroma cacao L.) in cocoa products by HPLC-QTOF-MS*. Food chemistry. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31260999) - -- Bichmann, Leon; Nelde, Annika; Ghosh, Michael; Heumos, Lukas; Mohr, Christopher; Peltzer, Alexander; Kuchenbecker, Leon; Sachsenberg, Timo; Walz, Juliane S; Stevanovic, Stefan; *MHCquant: automated and reproducible data analysis for immunopeptidomics*. Journal of proteome research. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31589052) - -- Löffler, Markus W; Mohr, Christopher; Bichmann, Leon; Freudenmann, Lena Katharina; Walzer, Mathias; Schroeder, Christopher M; Trautwein, Nico; Hilke, Franz J; Zinser, Raphael S; Mühlenbruch, Lena; *Multi-omics discovery of exome-derived neoantigens in hepatocellular carcinoma*. Genome medicine. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31039795) - -- Gruening, Bjorn; Sallou, Olivier; Moreno, Pablo; da Veiga Leprevost, Felipe; Ménager, Hervé; Søndergaard, Dan; Röst, Hannes; Sachsenberg, Timo; O'connor, Brian; Madeira, Fábio; *Recommendations for the packaging and containerizing of bioinformatics software*. F1000Research. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31543945) - -- Hulstaert, Niels; Shofstahl, Jim; Sachsenberg, Timo; Walzer, Mathias; Barsnes, Harald; Martens, Lennart; Perez-Riverol, Yasset; *ThermoRawFileParser: modular, scalable, and cross-platform RAW file conversion*. Journal of proteome research. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31755270) - -- Licha, David; Vidali, Silvia; Aminzadeh-Gohari, Sepideh; Alka, Oliver; Breitkreuz, Leander; Kohlbacher, Oliver; Reischl, Roland J; Feichtinger, René G; Kofler, Barbara; Huber, Christian G; *Untargeted metabolomics reveals molecular effects of ketogenic diet on healthy and tumor xenograft mouse models*. International journal of molecular sciences. 2019. [Link](https://www.ncbi.nlm.nih.gov/pubmed/31398922) -*** -## 2018 - - -- Kahles, André; Lehmann, Kjong-Van; Toussaint, Nora C; Hüser, Matthias; Stark, Stefan G; Sachsenberg, Timo; Stegle, Oliver; Kohlbacher, Oliver; Sander, Chris; Caesar-Johnson, Samantha J; *Comprehensive analysis of alternative splicing across tumors from 8,705 patients*. Cancer cell. 2018. [Link](https://www.ncbi.nlm.nih.gov/pubmed/30078747) -*** -## 2017 - - -- Röst, Hannes L; Aebersold, Ruedi; Schubert, Olga T; *Automated SWATH data analysis using targeted extraction of ion chromatograms*. Proteomics: Methods and Protocols. 2017. [Link](https://www.ncbi.nlm.nih.gov/pubmed/28188537) - -- da Veiga Leprevost, Felipe; Grüning, Björn A; Alves Aflitos, Saulo; Röst, Hannes L; Uszkoreit, Julian; Barsnes, Harald; Vaudel, Marc; Moreno, Pablo; Gatto, Laurent; Weber, Jonas; *BioContainers: an open-source and community-driven framework for software standardization*. Bioinformatics. 2017. [Link](https://www.ncbi.nlm.nih.gov/pubmed/28379341) - -- Audain, Enrique; Uszkoreit, Julian; Sachsenberg, Timo; Pfeuffer, Julianus; Liang, Xiao; Hermjakob, Henning; Sanchez, Aniel; Eisenacher, Martin; Reinert, Knut; Tabb, David L; *In-depth analysis of protein inference algorithms using multiple search engines and well-defined metrics*. Journal of proteomics. 2017. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27498275) - -- Pfeuffer, Julianus; Sachsenberg, Timo; Alka, Oliver; Walzer, Mathias; Fillbrunn, Alexander; Nilse, Lars; Schilling, Oliver; Reinert, Knut; Kohlbacher, Oliver; *OpenMS–a platform for reproducible analysis of mass spectrometry data*. Journal of biotechnology. 2017 - -- Weisser, Hendrik; Choudhary, Jyoti S; *Targeted feature detection for data-dependent shotgun proteomics*. Journal of proteome research. 2017 - -- Vizcaíno, Juan Antonio; Mayer, Gerhard; Perkins, Simon R; Barsnes, Harald; Vaudel, Marc; Perez-Riverol, Yasset; Ternent, Tobias; Uszkoreit, Julian; Eisenacher, Martin; Fischer, Lutz; *The mzIdentML data standard version 1.2, supporting advances in proteome informatics*. Molecular & Cellular Proteomics. 2017 -*** -## 2016 - - -- Navarro, Pedro; Kuharev, Jörg; Gillet, Ludovic C; Bernhardt, Oliver M; MacLean, Brendan; Röst, Hannes L; Tate, Stephen A; Tsou, Chih-Chiang; Reiter, Lukas; Distler, Ute; *A multicenter study benchmarks software tools for label-free proteome quantification*. Nature biotechnology. 2016. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27701404) - -- Weisser, Hendrik; Wright, James C; Mudge, Jonathan M; Gutenbrunner, Petra; Choudhary, Jyoti S; *Flexible data analysis pipeline for high-confidence proteogenomics*. Journal of Proteome Research. 2016. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27786492) - -- Veit, Johannes; Sachsenberg, Timo; Chernev, Aleksandar; Aicheler, Fabian; Urlaub, Henning; Kohlbacher, Oliver; *LFQProfiler and RNPxl: open-source tools for label-free quantification and protein–RNA cross-linking integrated into proteome discoverer*. Journal of proteome research. 2016. [Link](https://www.ncbi.nlm.nih.gov/pubmed/27476824) - -- Röst, Hannes L; Sachsenberg, Timo; Aiche, Stephan; Bielow, Chris; Weisser, Hendrik; Aicheler, Fabian; Andreotti, Sandro; Ehrlich, Hans-Christian; Gutenbrunner, Petra; Kenar, Erhan; *OpenMS: a flexible open-source software platform for mass spectrometry data analysis*. Nature methods. 2016 - -- Perez-Riverol, Yasset; Gatto, Laurent; Wang, Rui; Sachsenberg, Timo; Uszkoreit, Julian; da Veiga Leprevost, Felipe; Fufezan, Christian; Ternent, Tobias; Eglen, Stephen J; Katz, Daniel S; *Ten simple rules for taking advantage of Git and GitHub*. PLoS computational biology. 2016 -*** -## 2015 - - -- Röst, Hannes L; Rosenberger, George; Aebersold, Ruedi; Malmström, Lars; *Efficient visualization of high-throughput targeted proteomics experiments: TAPIR*. Bioinformatics. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25788625) - -- Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars; *Fast and efficient XML data access for next-generation mass spectrometry*. PloS one. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25927999) - -- Sachsenberg, Timo; Herbst, Florian-Alexander; Taubert, Martin; Kermer, Rene; Jehmlich, Nico; Von Bergen, Martin; Seifert, Jana; Kohlbacher, Oliver; *MetaProSIP: automated inference of stable isotope incorporation rates in proteins for functional metaproteomics*. Journal of proteome research. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25412983) - -- Ranninger, Christina; Rurik, Marc; Limonciel, Alice; Ruzek, Silke; Reischl, Roland; Wilmes, Anja; Jennings, Paul; Hewitt, Philip; Dekant, Wolfgang; Kohlbacher, Oliver; *Nephron toxicity profiling via untargeted metabolome analysis employing a high performance liquid chromatography-mass spectrometry-based experimental and computational pipeline*. Journal of Biological Chemistry. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/26055719) - -- Aicheler, Fabian; Li, Jia; Hoene, Miriam; Lehmann, Rainer; Xu, Guowang; Kohlbacher, Oliver; *Retention time prediction improves identification in nontargeted lipidomics approaches*. Analytical chemistry. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/26145158) - -- Nilse, Lars; Sigloch, Florian Christoph; Biniossek, Martin L; Schilling, Oliver; *Toward improved peptide feature detection in quantitative proteomics using stable isotope labeling*. PROTEOMICS–Clinical Applications. 2015. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25931027) - -- Aiche, Stephan; Sachsenberg, Timo; Kenar, Erhan; Walzer, Mathias; Wiswedel, Bernd; Kristl, Theresa; Boyles, Matthew; Duschl, Albert; Huber, Christian G; Berthold, Michael R; *Workflows for automated downstream data analysis and visualization in large‐scale computational mass spectrometry*. Proteomics. 2015 -*** -## 2014 - - -- Kenar, Erhan; Franken, Holger; Forcisi, Sara; Wörmann, Kilian; Häring, Hans-Ulrich; Lehmann, Rainer; Schmitt-Kopplin, Philippe; Zell, Andreas; Kohlbacher, Oliver; *Automated label-free quantification of metabolites from liquid chromatography–mass spectrometry data*. Molecular & Cellular Proteomics. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/24176773) - -- Röst, Hannes L; Rosenberger, George; Navarro, Pedro; Gillet, Ludovic; Miladinović, Saša M; Schubert, Olga T; Wolski, Witold; Collins, Ben C; Malmström, Johan; Malmström, Lars; *OpenSWATH enables automated, targeted analysis of data-independent acquisition MS data*. Nature biotechnology. 2014 - -- Kramer, Katharina; Sachsenberg, Timo; Beckmann, Benedikt M; Qamar, Saadia; Boon, Kum-Loong; Hentze, Matthias W; Kohlbacher, Oliver; Urlaub, Henning; *Photo-cross-linking and high-resolution mass spectrometry for assignment of RNA-binding sites in RNA-binding proteins*. Nature methods. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/25173706) - -- Griss, Johannes; Jones, Andrew R; Sachsenberg, Timo; Walzer, Mathias; Gatto, Laurent; Hartler, Jürgen; Thallinger, Gerhard G; Salek, Reza M; Steinbeck, Christoph; Neuhauser, Nadin; *The mzTab data exchange format: communicating mass-spectrometry-based proteomics and metabolomics experimental results to a wider audience*. Molecular & Cellular Proteomics. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/24980485) - -- Röst, Hannes L; Schmitt, Uwe; Aebersold, Ruedi; Malmström, Lars; *pyOpenMS: a Python‐based interface to the OpenMS mass‐spectrometry algorithm library*. Proteomics. 2014 - -- Walzer, Mathias; Pernas, Lucia Espona; Nasso, Sara; Bittremieux, Wout; Nahnsen, Sven; Kelchtermans, Pieter; Pichler, Peter; van den Toorn, Henk WP; Staes, An; Vandenbussche, Jonathan; *qcML: an exchange format for quality control metrics from mass spectrometry experiments*. Molecular & Cellular Proteomics. 2014. [Link](https://www.ncbi.nlm.nih.gov/pubmed/24760958) -*** -## 2013 - - -- Weisser, Hendrik; Nahnsen, Sven; Grossmann, Jonas; Nilse, Lars; Quandt, Andreas; Brauer, Hendrik; Sturm, Marc; Kenar, Erhan; Kohlbacher, Oliver; Aebersold, Ruedi; *An automated pipeline for high-throughput label-free quantitative proteomics*. Journal of proteome research. 2013 - -- Walzer, Mathias; Qi, Da; Mayer, Gerhard; Uszkoreit, Julian; Eisenacher, Martin; Sachsenberg, Timo; Gonzalez-Galarza, Faviel F; Fan, Jun; Bessant, Conrad; Deutsch, Eric W; *The mzQuantML data standard for mass spectrometry-based quantitative studies in proteomics*. Molecular & Cellular Proteomics. 2013 - -- Nahnsen, Sven; Bielow, Chris; Reinert, Knut; Kohlbacher, Oliver; *Tools for label-free peptide quantification*. Molecular & Cellular Proteomics. 2013 -*** -## 2012 - - -- Nahnsen, Sven; Kohlbacher, Oliver; *In silico design of targeted SRM-based experiments*. BMC bioinformatics. 2012. [Link](https://www.ncbi.nlm.nih.gov/pubmed/23176520) - -- Junker, Johannes; Bielow, Chris; Bertsch, Andreas; Sturm, Marc; Reinert, Knut; Kohlbacher, Oliver; *TOPPAS: a graphical workflow editor for the analysis of high-throughput proteomics data*. Journal of proteome research. 2012. [Link](https://www.ncbi.nlm.nih.gov/pubmed/22583024) - -- Jones, Andrew R; Eisenacher, Martin; Mayer, Gerhard; Kohlbacher, Oliver; Siepen, Jennifer; Hubbard, Simon J; Selley, Julian N; Searle, Brian C; Shofstahl, James; Seymour, Sean L; *The mzIdentML data standard for mass spectrometry-based proteomics results*. Molecular & cellular proteomics. 2012 -*** -## 2011 - - -- Bielow, Chris; Aiche, Stephan; Andreotti, Sandro; Reinert, Knut; *MSSimulator: Simulation of mass spectrometry data*. Journal of proteome research. 2011. [Link](https://www.ncbi.nlm.nih.gov/pubmed/21526843) - -- Bertsch, Andreas; Gröpl, Clemens; Reinert, Knut; Kohlbacher, Oliver; *OpenMS and TOPP: open source software for LC-MS data analysis*. Data Mining in Proteomics: From Standards to Applications. 2011 - -- Nahnsen, Sven; Bertsch, Andreas; Rahnenführer, Jörg; Nordheim, Alfred; Kohlbacher, Oliver; *Probabilistic consensus scoring improves tandem mass spectrometry peptide identification*. Journal of proteome research. 2011. [Link](https://www.ncbi.nlm.nih.gov/pubmed/21644507) -*** -## 2010 - - -- Bertsch, Andreas; Jung, Stephan; Zerck, Alexandra; Pfeifer, Nico; Nahnsen, Sven; Henneges, Carsten; Nordheim, Alfred; Kohlbacher, Oliver; *Optimal de novo design of MRM experiments for rapid assay development in targeted proteomics*. Journal of proteome research. 2010. [Link](https://www.ncbi.nlm.nih.gov/pubmed/20201589) - -- Gesing, Sandra; van Hemert, Jano; Koetsier, Jos; Bertsch, Andreas; Kohlbacher, Oliver; *TOPP goes Rapid The OpenMS Proteomics Pipeline in a Grid-Enabled Web Portal*. Proceedings of the 2010 10th IEEE/ACM International Conference on Cluster, Cloud and Grid Computing. 2010 -*** -## 2009 - - -- Bertsch, Andreas; Leinenbach, Andreas; Pervukhin, Anton; Lubeck, Markus; Hartmer, Ralf; Baessmann, Carsten; Elnakady, Yasser Abbas; Müller, Rolf; Böcker, Sebastian; Huber, Christian G; *De novo peptide sequencing by tandem MS using complementary CID and electron transfer dissociation*. Electrophoresis. 2009 - -- Pfeifer, Nico; Leinenbach, Andreas; Huber, Christian G; Kohlbacher, Oliver; *Improving peptide identification in proteome analysis by a two-dimensional retention time filtering approach*. Journal of proteome research. 2009. [Link](https://www.ncbi.nlm.nih.gov/pubmed/19492844) - -- Reinert, Knut; Kohlbacher, Oliver; *OpenMS and TOPP: open source software for LC-MS data analysis*. Proteome Bioinformatics. 2009 - -- Nilse, Lars; Sturm, Marc; Trudgian, David; Salek, Mogjiborahman; Sims, Paul FG; Carroll, Kathleen M; Hubbard, Simon J; *SILACAnalyzer-a tool for differential quantitation of stable isotope derived data*. International Meeting on Computational Intelligence Methods for Bioinformatics and Biostatistics. 2009 - -- Sturm, Marc; Kohlbacher, Oliver; *TOPPView: an open-source viewer for mass spectrometry data*. Journal of proteome research. 2009. [Link](https://www.ncbi.nlm.nih.gov/pubmed/19425593) -*** -## 2008 - - -- Lange, Eva; *Analysis of mass spectrometric data: peak picking and map alignment*. Freie Universtaet Berlin. 2008 - -- Schulz-Trieglaff, Ole; Hussong, Rene; Gröpl, Clemens; Leinenbach, Andreas; Hildebrandt, Andreas; Huber, Christian; Reinert, Knut; *Computational quantification of peptides from LC-MS data*. Journal of Computational Biology. 2008 - -- Lange, Eva; Tautenhahn, Ralf; Neumann, Steffen; Gröpl, Clemens; *Critical assessment of alignment procedures for LC-MS proteomics and metabolomics measurements*. BMC bioinformatics. 2008. [Link](https://www.ncbi.nlm.nih.gov/pubmed/18793413) - -- Schulz-Trieglaff, Ole; Pfeifer, Nico; Gröpl, Clemens; Kohlbacher, Oliver; Reinert, Knut; *LC-MSsim–a simulation software for liquid chromatography mass spectrometry data*. BMC bioinformatics. 2008. [Link](https://www.ncbi.nlm.nih.gov/pubmed/18842122) - -- Sturm, Marc; Bertsch, Andreas; Gröpl, Clemens; Hildebrandt, Andreas; Hussong, Rene; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Zerck, Alexandra; Reinert, Knut; *OpenMS–an open-source software framework for mass spectrometry*. BMC bioinformatics. 2008 -*** -## 2007 - - -- Schulz-Trieglaff, Ole; Hussong, Rene; Gröpl, Clemens; Hildebrandt, Andreas; Reinert, Knut; *A fast and accurate algorithm for the quantification of peptides from mass spectrometry data*. Research in Computational Molecular Biology: 11th Annual International Conference, RECOMB 2007, Oakland, CA, USA, April 21-25, 2007. Proceedings 11. 2007 - -- Lange, Eva; Gröpl, Clemens; Schulz-Trieglaff, Ole; Leinenbach, Andreas; Huber, Christian; Reinert, Knut; *A geometric approach for the alignment of liquid chromatography—mass spectrometry data*. Bioinformatics. 2007 - -- Sturm, Marc; *TOPP The OpenMS Proteomics Pipeline*. Proceedings of the 5th European. 2007 - -- Kohlbacher, Oliver; Reinert, Knut; Gröpl, Clemens; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Sturm, Marc; *TOPP—the OpenMS proteomics pipeline*. Bioinformatics. 2007. [Link](https://www.ncbi.nlm.nih.gov/pubmed/17237091) -*** -## 2006 - - -- Lange, Eva; Gröpl, Clemens; Reinert, Knut; Kohlbacher, Oliver; Hildebrandt, Andreas; *High-accuracy peak picking of proteomics data using wavelet techniques*. Biocomputing 2006. 2006. [Link](https://www.ncbi.nlm.nih.gov/pubmed/17094243) -*** -## 2005 - - -- Groepl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L; *Absolute quantification of myoglobin content in blood serum using HPLC/MS through automatic bioinformatics analysis*. MOLECULAR & CELLULAR PROTEOMICS. 2005 - -- Gröpl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L; *Algorithms for the automated absolute quantification of diagnostic markers in complex proteomics samples*. Computational Life Sciences: First International Symposium, CompLife 2005, Konstanz, Germany, September 25-27, 2005. Proceedings 1. 2005 - -- Lange, E; Reinert, K; Groepl, C; Kohlbacher, O; Sturm, M; Hildebrandt, A; *OPENMS; a generic open source framework for chromatography/MS-based proteomics*. Molecular & Cellular Proteomics. 2005 - -- Gröpl, C; Hildebrandt, A; Kohlbacher, O; Lange, E; Lövenich, S; Sturm, M; *OpenMS-Software for Mass Spectrometry*. Poster presented at the MBI Workshop on Computational Proteomics and Mass Spectrometry. 2005 -*** +--- +title: Publications +sidebar: false +hideShortcuts: true +hidePageTitle: true +--- + +
+

How to cite OpenMS

+

+ When you use OpenMS in your research, please cite the + key publications below and the tools you used where applicable. + See also the Citing OpenMS page for citation guidance. +

+
+ +
+ +

+ Primary references when citing OpenMS software and the Python interface. +

+ +
+ +
+ {{< publications-year-select >}} +

+
+ +
+

2025

+ +
+
+

2024

+ +
+
+

2023

+ +
+
+

2022

+ +
+
+

2021

+
    +

  • A proteomics sample metadata representation for multiomics integration and big data analysis

    Nature Communications · 2021

    Dai, Chengxin; Füllgrabe, Anja; Pfeuffer, Julianus; Solovyeva, Elizaveta M; Deng, Jingwen; Moreno, Pablo; Kamatchinathan, Selvakumar; Kundu, Deepti Jaiswal; George, Nancy; Fexova, Silvie

    • +

  • DIAproteomics: A multifunctional data analysis pipeline for data-independent acquisition proteomics and peptidomics

    Journal of proteome research · 2021

    Bichmann, Leon; Gupta, Shubham; Rosenberger, George; Kuchenbecker, Leon; Sachsenberg, Timo; Ewels, Phil; Alka, Oliver; Pfeuffer, Julianus; Kohlbacher, Oliver; Rost, Hannes

    • +

  • HLA Ligand Atlas: a benign reference of HLA-presented peptides to improve T-cell-based cancer immunotherapy

    Journal for immunotherapy of cancer · 2021

    Marcu, Ana; Bichmann, Leon; Kuchenbecker, Leon; Kowalewski, Daniel Johannes; Freudenmann, Lena Katharina; Backert, Linus; Mühlenbruch, Lena; Szolek, András; Lübke, Maren; Wagner, Philipp

    • +
+
+
+

2020

+
    +

  • A computational platform for high-throughput analysis of RNA sequences and modifications by mass spectrometry

    Nature communications · 2020

    Wein, Samuel; Andrews, Byron; Sachsenberg, Timo; Santos-Rosa, Helena; Kohlbacher, Oliver; Kouzarides, Tony; Garcia, Benjamin A; Weisser, Hendrik

    • +

  • Analysis of protein-DNA interactions in chromatin by UV induced cross-linking and mass spectrometry

    Nature communications · 2020

    Stützer, Alexandra; Welp, Luisa M; Raabe, Monika; Sachsenberg, Timo; Kappert, Christin; Wulf, Alexander; Lau, Andy M; David, Stefan-Sebastian; Chernev, Aleksandar; Kramer, Katharina

    • +

  • FLASHDeconv: ultrafast, high-quality feature deconvolution for top-down proteomics

    Cell Systems · 2020

    Jeong, Kyowon; Kim, Jihyung; Gaikwad, Manasi; Hidayah, Siti Nurul; Heikaus, Laura; Schlüter, Hartmut; Kohlbacher, Oliver

    • +

  • Feature-based molecular networking in the GNPS analysis environment

    Nature methods · 2020

    Nothias, Louis-Félix; Petras, Daniel; Schmid, Robin; Dührkop, Kai; Rainer, Johannes; Sarvepalli, Abinesh; Protsyuk, Ivan; Ernst, Madeleine; Tsugawa, Hiroshi; Fleischauer, Markus

    • +

  • Metabolomics data processing using OpenMS

    Computational Methods and Data Analysis for Metabolomics · 2020

    Rurik, Marc; Alka, Oliver; Aicheler, Fabian; Kohlbacher, Oliver

    • +

  • OpenPepXL: an open-source tool for sensitive identification of cross-linked peptides in XL-MS

    Molecular & Cellular Proteomics · 2020

    Netz, Eugen; Dijkstra, Tjeerd MH; Sachsenberg, Timo; Zimmermann, Lukas; Walzer, Mathias; Monecke, Thomas; Ficner, Ralf; Dybkov, Olexandr; Urlaub, Henning; Kohlbacher, Oliver

    • +

  • Phosphoproteomics of short-term hedgehog signaling in human medulloblastoma cells

    Cell Communication and Signaling · 2020

    Scheidt, Tamara; Alka, Oliver; Gonczarowska-Jorge, Humberto; Gruber, Wolfgang; Rathje, Florian; Dell’Aica, Margherita; Rurik, Marc; Kohlbacher, Oliver; Zahedi, René P; Aberger, Fritz

    • +

  • SmartPeak automates targeted and quantitative metabolomics data processing

    Analytical Chemistry · 2020

    Kutuzova, Svetlana; Colaianni, Pasquale; Rost, Hannes; Sachsenberg, Timo; Alka, Oliver; Kohlbacher, Oliver; Burla, Bo; Torta, Federico; Schrubbers, Lars; Kristensen, Mette

    • +

  • Tracing incorporation of heavy water into proteins for species-specific metabolic activity in complex communities

    Journal of Proteomics · 2020

    Starke, Robert; Oliphant, Kaitlyn; Jehmlich, Nico; Schäpe, Stephanie Serena; Sachsenberg, Timo; Kohlbacher, Oliver; Allen-Vercoe, Emma; von Bergen, Martin

    • +
+
+
+

2019

+ +
+
+

2018

+ +
+
+

2017

+
    +

  • Automated SWATH data analysis using targeted extraction of ion chromatograms

    Proteomics: Methods and Protocols · 2017

    Röst, Hannes L; Aebersold, Ruedi; Schubert, Olga T

    • +

  • BioContainers: an open-source and community-driven framework for software standardization

    Bioinformatics · 2017

    da Veiga Leprevost, Felipe; Grüning, Björn A; Alves Aflitos, Saulo; Röst, Hannes L; Uszkoreit, Julian; Barsnes, Harald; Vaudel, Marc; Moreno, Pablo; Gatto, Laurent; Weber, Jonas

    • +

  • In-depth analysis of protein inference algorithms using multiple search engines and well-defined metrics

    Journal of proteomics · 2017

    Audain, Enrique; Uszkoreit, Julian; Sachsenberg, Timo; Pfeuffer, Julianus; Liang, Xiao; Hermjakob, Henning; Sanchez, Aniel; Eisenacher, Martin; Reinert, Knut; Tabb, David L

    • +

  • OpenMS–a platform for reproducible analysis of mass spectrometry data

    Journal of biotechnology · 2017

    Pfeuffer, Julianus; Sachsenberg, Timo; Alka, Oliver; Walzer, Mathias; Fillbrunn, Alexander; Nilse, Lars; Schilling, Oliver; Reinert, Knut; Kohlbacher, Oliver

    • +

  • Targeted feature detection for data-dependent shotgun proteomics

    Journal of proteome research · 2017

    Weisser, Hendrik; Choudhary, Jyoti S

    • +

  • The mzIdentML data standard version 1.2, supporting advances in proteome informatics

    Molecular & Cellular Proteomics · 2017

    Vizcaíno, Juan Antonio; Mayer, Gerhard; Perkins, Simon R; Barsnes, Harald; Vaudel, Marc; Perez-Riverol, Yasset; Ternent, Tobias; Uszkoreit, Julian; Eisenacher, Martin; Fischer, Lutz

    • +
+
+
+

2016

+ +
+
+

2015

+ +
+
+

2014

+ +
+
+

2013

+
    +

  • An automated pipeline for high-throughput label-free quantitative proteomics

    Journal of proteome research · 2013

    Weisser, Hendrik; Nahnsen, Sven; Grossmann, Jonas; Nilse, Lars; Quandt, Andreas; Brauer, Hendrik; Sturm, Marc; Kenar, Erhan; Kohlbacher, Oliver; Aebersold, Ruedi

    • +

  • The mzQuantML data standard for mass spectrometry-based quantitative studies in proteomics

    Molecular & Cellular Proteomics · 2013

    Walzer, Mathias; Qi, Da; Mayer, Gerhard; Uszkoreit, Julian; Eisenacher, Martin; Sachsenberg, Timo; Gonzalez-Galarza, Faviel F; Fan, Jun; Bessant, Conrad; Deutsch, Eric W

    • +

  • Tools for label-free peptide quantification

    Molecular & Cellular Proteomics · 2013

    Nahnsen, Sven; Bielow, Chris; Reinert, Knut; Kohlbacher, Oliver

    • +
+
+
+

2012

+ +
+
+

2011

+ +
+
+

2010

+
    +

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

    Journal of proteome research · 2010

    Bertsch, Andreas; Jung, Stephan; Zerck, Alexandra; Pfeifer, Nico; Nahnsen, Sven; Henneges, Carsten; Nordheim, Alfred; Kohlbacher, Oliver

    • +

  • TOPP goes Rapid The OpenMS Proteomics Pipeline in a Grid-Enabled Web Portal

    Proceedings of the 2010 10th IEEE/ACM International Conference on Cluster, Cloud and Grid Computing · 2010

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

    • +
+
+
+

2009

+
    +

  • De novo peptide sequencing by tandem MS using complementary CID and electron transfer dissociation

    Electrophoresis · 2009

    Bertsch, Andreas; Leinenbach, Andreas; Pervukhin, Anton; Lubeck, Markus; Hartmer, Ralf; Baessmann, Carsten; Elnakady, Yasser Abbas; Müller, Rolf; Böcker, Sebastian; Huber, Christian G

    • +

  • Improving peptide identification in proteome analysis by a two-dimensional retention time filtering approach

    Journal of proteome research · 2009

    Pfeifer, Nico; Leinenbach, Andreas; Huber, Christian G; Kohlbacher, Oliver

    • +

  • OpenMS and TOPP: open source software for LC-MS data analysis

    Proteome Bioinformatics · 2009

    Reinert, Knut; Kohlbacher, Oliver

    • +

  • SILACAnalyzer-a tool for differential quantitation of stable isotope derived data

    International Meeting on Computational Intelligence Methods for Bioinformatics and Biostatistics · 2009

    Nilse, Lars; Sturm, Marc; Trudgian, David; Salek, Mogjiborahman; Sims, Paul FG; Carroll, Kathleen M; Hubbard, Simon J

    • +

  • TOPPView: an open-source viewer for mass spectrometry data

    Journal of proteome research · 2009

    Sturm, Marc; Kohlbacher, Oliver

    • +
+
+
+

2008

+
    +

  • Analysis of mass spectrometric data: peak picking and map alignment

    Freie Universtaet Berlin · 2008

    Lange, Eva

    • +

  • Computational quantification of peptides from LC-MS data

    Journal of Computational Biology · 2008

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

    • +

  • Critical assessment of alignment procedures for LC-MS proteomics and metabolomics measurements

    BMC bioinformatics · 2008

    Lange, Eva; Tautenhahn, Ralf; Neumann, Steffen; Gröpl, Clemens

    • +

  • LC-MSsim–a simulation software for liquid chromatography mass spectrometry data

    BMC bioinformatics · 2008

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

    • +

  • OpenMS–an open-source software framework for mass spectrometry

    BMC bioinformatics · 2008

    Sturm, Marc; Bertsch, Andreas; Gröpl, Clemens; Hildebrandt, Andreas; Hussong, Rene; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Zerck, Alexandra; Reinert, Knut

    • +
+
+
+

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 11 · 2007

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

    • +

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

    Bioinformatics · 2007

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

    • +

  • TOPP The OpenMS Proteomics Pipeline

    Proceedings of the 5th European · 2007

    Sturm, Marc

    • +

  • TOPP—the OpenMS proteomics pipeline

    Bioinformatics · 2007

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

    • +
+
+
+

2006

+ +
+
+

2005

+
    +

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

    MOLECULAR & CELLULAR PROTEOMICS · 2005

    Groepl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L

    • +

  • Algorithms for the automated absolute quantification of diagnostic markers in complex proteomics samples

    Computational Life Sciences: First International Symposium, CompLife 2005, Konstanz, Germany, September 25-27, 2005. Proceedings 1 · 2005

    Gröpl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L

    • +

  • OPENMS; a generic open source framework for chromatography/MS-based proteomics

    Molecular & Cellular Proteomics · 2005

    Lange, E; Reinert, K; Groepl, C; Kohlbacher, O; Sturm, M; Hildebrandt, A

    • +

  • OpenMS-Software for Mass Spectrometry

    Poster presented at the MBI Workshop on Computational Proteomics and Mass Spectrometry · 2005

    Gröpl, C; Hildebrandt, A; Kohlbacher, O; Lange, E; Lövenich, S; Sturm, M

    • +
+
diff --git a/content/en/research-partnerships.md b/content/en/research-partnerships.md new file mode 100644 index 0000000..6cfb545 --- /dev/null +++ b/content/en/research-partnerships.md @@ -0,0 +1,86 @@ +--- +title: Research Partnerships +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + +
+
+

Partner with OpenMS

+

+ Research partnerships that scale with your science. +

+

+ OpenMS grows through long-term collaboration with universities, institutes, and + research groups that contribute software, methods, and training as part of their work. +

+
+ Discuss a partnership + Scientific & technical support +
+
+ +
+
+

Institutional partners

+

Who we partner with

+

+ Institutional partners are organizations that support OpenMS by employing people + who develop, maintain, and apply the software as part of their research missions. +

+
    +
  • University and institute research groups
    • +
  • Core facilities and national infrastructure projects
    • +
  • Consortia building shared mass spectrometry tooling
    • +
+
+
+

Collaboration

+

What partnerships can include

+

+ Partnerships take many forms—from funded software engineering to joint methods + papers and training for your lab or facility. +

+
    +
  • Co-development of algorithms, workflows, and web applications
    • +
  • Integration with lab pipelines, KNIME, and cloud platforms
    • +
  • Workshops, user meetings, and contributor onboarding
    • +
+

+ Ways to contribute → +

+
+
+ +
+

Partner institutions

+

+ The groups below employ contributors who advance OpenMS as part of their research. + Logos link to partner home pages where available. +

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

Start a conversation

+

+ Tell us about your group, infrastructure needs, or ideas for joint development. + We can help you find the right channel—partnership discussion, sponsorship, or + technical support. +

+
+ Contact us + Sponsor OpenMS +
+
+ +
+

Related

+ +
+
diff --git a/content/en/sponsor-us.md b/content/en/sponsor-us.md new file mode 100644 index 0000000..cf32e78 --- /dev/null +++ b/content/en/sponsor-us.md @@ -0,0 +1,87 @@ +--- +title: Sponsor us +hidePageTitle: true +hideShortcuts: true +sidebar: false +--- + + diff --git a/data/community_events.yaml b/data/community_events.yaml new file mode 100644 index 0000000..05e4ee7 --- /dev/null +++ b/data/community_events.yaml @@ -0,0 +1,40 @@ +# 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: 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 0000000..4a1ccb7 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,83 @@ +# 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) | +| Edit About, Contribute, Governance, etc. | [Edit a page](common-tasks/edit-a-page.md) | +| Add or replace an image | [Add images](common-tasks/add-images.md) | +| Preview the site on my computer | [Preview locally](getting-started/preview-locally.md) | +| Edit without installing anything | [Edit via GitHub](getting-started/edit-via-github.md) | +| Open a pull request | [Pull requests](workflow/pull-requests.md) | +| Understand what happens when we merge | [Deployment](workflow/deployment.md) | +| Find who can approve or help | [Who to ask](workflow/who-to-ask.md) | + +## What you can change safely + +| Level | Folders / files | Typical edits | +|-------|-----------------|---------------| +| **Safe** | `content/en/**/*.md` | News, about text, application guides | +| **Config** | `config.yaml` (`languages.en.params`) | Hero, banner, webapps, footer, trusted-by list | +| **Ask first** | `layouts/`, `assets/css/`, `static/js/` | Layout, colors, partner marquee HTML | +| **Do not edit** | `themes/scientific-python-hugo-theme/` | Upstream theme (use overrides in `layouts/` instead) | + +## Documentation map + +``` +docs/ +├── README.md ← you are here +├── getting-started/ +│ ├── preview-locally.md +│ └── edit-via-github.md +├── common-tasks/ +│ ├── add-news-post.md +│ ├── update-news-banner.md +│ ├── edit-homepage-hero.md +│ ├── add-webapp-to-homepage.md +│ ├── edit-footer-or-navbar.md +│ ├── edit-a-page.md +│ └── add-images.md +├── reference/ +│ ├── content-front-matter.md +│ ├── config-yaml-guide.md +│ ├── shortcodes.md +│ └── file-locations.md +├── workflow/ +│ ├── pull-requests.md +│ ├── deployment.md +│ └── who-to-ask.md +└── troubleshooting/ + └── common-errors.md +``` + +## Quick start (no local install) + +1. Open the file you need on GitHub (e.g. `content/en/news/my-post.md` or `config.yaml`). +2. Click **Edit** (pencil) or create a new file on a branch. +3. Save and open a **pull request**. +4. Wait for the **Netlify deploy preview** on the PR (see [Pull requests](workflow/pull-requests.md)). +5. Ask a web-team reviewer to merge. + +For local preview, see [Preview locally](getting-started/preview-locally.md). + +## Related links + +- Developer setup (short): [README.md](../README.md) in the repo root +- OpenMS software docs: [openms.readthedocs.io](https://openms.readthedocs.io/) +- Hugo docs (advanced): [gohugo.io/documentation](https://gohugo.io/documentation/) diff --git a/docs/common-tasks/add-images.md b/docs/common-tasks/add-images.md new file mode 100644 index 0000000..e8b10e5 --- /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 0000000..df9badf --- /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 0000000..35f695c --- /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/edit-a-page.md b/docs/common-tasks/edit-a-page.md new file mode 100644 index 0000000..7df4f33 --- /dev/null +++ b/docs/common-tasks/edit-a-page.md @@ -0,0 +1,87 @@ +# Edit a page + +Most site pages are Markdown files in **`content/en/`**. The filename (without `.md`) becomes the URL path. + +## Examples + +| Page | File | URL | +|------|------|-----| +| About | `content/en/about.md` | `/about/` | +| Contribute | `content/en/contribute.md` | `/contribute/` | +| Governance | `content/en/governance.md` | `/governance/` | +| Application guide | `content/en/applications/nuxl.md` | `/applications/nuxl/` | +| News index | `content/en/news/_index.md` | `/news/` | + +## Basic structure + +```markdown +--- +title: Contributing to OpenMS +sidebar: false +--- + +# Contributing to OpenMS + +Your content here... +``` + +| Front matter | Typical use | +|--------------|-------------| +| `title` | Page title (browser tab, headings) | +| `sidebar: false` | Hides sidebar on many pages | +| `subtitle` | Optional subtitle (some layouts) | + +## Headings and links + +```markdown +## Section title + +Link to another page on this site: [Governance](/governance/) + +External link: [Read the docs](https://openms.readthedocs.io/) + +Anchor on same page: [Sponsors](#sponsors) +``` + +Define anchors with `{#id}` in a heading: + +```markdown +## Sponsors {#sponsors} +``` + +## Shortcodes (special blocks) + +Used on several pages: + +```markdown +{{< sponsors >}} +{{< partners >}} +{{< button normal https://example.com >}} +Click me +{{< /button >}} +``` + +Full list: [Shortcodes](../reference/shortcodes.md). + +## Pages that use shortcodes instead of plain text + +- **`about.md`**: `{{< sponsors >}}` and `{{< partners >}}` pull in sponsor/partner blocks (partners partial is shared with homepage; sponsors are defined in a layout shortcode). + +## Draft pages + +Add to front matter to hide until ready: + +```yaml +draft: true +``` + +Local preview with drafts: `make serve` (includes `-D`). + +## Preview + +- `/about/`, `/contribute/`, etc. on localhost or Netlify preview. + +## Do not edit for text-only changes + +- `layouts/_default/single.html` — page wrapper +- Theme files under `themes/scientific-python-hugo-theme/` diff --git a/docs/common-tasks/edit-footer-or-navbar.md b/docs/common-tasks/edit-footer-or-navbar.md new file mode 100644 index 0000000..36b0066 --- /dev/null +++ b/docs/common-tasks/edit-footer-or-navbar.md @@ -0,0 +1,91 @@ +# Edit footer or navbar + +Navigation and footer content are defined in **`config.yaml`** under `languages.en.params`. + +## Navbar (top menu) + +```yaml +navbar: + - title: Infrastructure + url: /openms-lib/ + - title: Projects + url: /applications + sublinks: + - title: Featured Projects + url: /applications + - title: Partner with OpenMS + url: /research-partnerships/ + is_emphasized: true + - title: Donate + url: /about#donate + button: true +``` + +| Field | Meaning | +|-------|---------| +| `title` | Menu label | +| `url` | Link for top-level item (if no dropdown) | +| `sublinks` | Dropdown items | +| `is_external: true` | Opens external docs in new tab (theme behavior) | +| `is_emphasized: true` | Highlighted style | +| `button: true` | Renders as a button (e.g. Donate) | + +**Logo** (top left): + +```yaml +navbarlogo: + image: OpenMS_transparent_blackFont.png + link: / + altText: OpenMS +``` + +Logo file lives under `static/images/` (theme resolves the filename). + +## Footer + +```yaml +footer: + title: OpenMS + tagline: The open-source framework for mass spectrometry. + logo: + image: OpenMS_transparent_blackFont.png + link: / + altText: OpenMS + sponsor: + text: Sponsor us + link: /sponsor-us/ + donate: + text: Donate + link: /about#donate + socialmedia: + - link: https://discord.com/invite/v9tv5BxPch + icon: discord + - link: https://github.com/openMS + icon: github + quicklinks: + column1: + heading: RESOURCES + links: + - text: Install + link: https://openms.readthedocs.io/... + column2: + heading: COMMUNITY + links: ... +``` + +- **Four columns** under `quicklinks`: `column1` … `column4`. +- **Social icons**: `discord`, `linkedin`, `github` (theme-supported names). +- **Sponsor logos** in footer: `sponsorLogo1`, `sponsorLogo2`, `sponsorLogo3` — paths under `/images/...`. + +## Preview + +Check every page — navbar and footer are global. Use homepage + one inner page on the PR preview. + +## Hardcoded navigation (web team only) + +Some blocks are **not** in `config.yaml`: + +- **University partners** marquee: `layouts/partials/university-partners.html` +- **Sponsors** on About page shortcode: `layouts/shortcodes/sponsors.html` + +To change those without editing HTML, ask the web team to move them into `config.yaml` or a data file. diff --git a/docs/common-tasks/edit-homepage-hero.md b/docs/common-tasks/edit-homepage-hero.md new file mode 100644 index 0000000..fbeade3 --- /dev/null +++ b/docs/common-tasks/edit-homepage-hero.md @@ -0,0 +1,133 @@ +# Edit the homepage hero and key sections + +Most homepage content is in **`config.yaml`**, not in `content/en/`. Search for the section name below. + +**File:** `config.yaml` → `languages` → `en` → `params` + +## Hero (top of page) + +```yaml +hero: + titleBefore: "The " + titleHighlight: "open-source framework" + titleAfter: " for Mass Spectrometry" + description: >- + Build sophisticated LC/MS data analysis tools... + buttontext: Get Started Now + buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html + stats: + - value: 10 + suffix: "+" + label: Years Active + - value: 1000 + suffix: "+" + label: Researchers + - value: 3.5 + decimals: 1 + label: Latest Version +``` + +| Field | What it controls | +|-------|------------------| +| `titleBefore` / `titleHighlight` / `titleAfter` | Main headline (highlight is styled) | +| `description` | Paragraph under the headline (`>-` allows a folded multi-line string) | +| `buttontext` / `buttonlink` | Primary CTA button | +| `stats` | Three stat blocks; use `suffix` for `+`, `decimals` for version numbers | + +## Hero sponsors (“Supported by”) + +```yaml +homeSponsors: + enabled: true + label: Supported by + description: OpenMS receives direct funding... + 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 +``` + +Set `enabled: false` to hide the block. + +## “What is OpenMS?” + +This block lives on the **[OpenMS-lib](/openms-lib/)** page (not the homepage). Edit `keyfeatures` in `config.yaml`; it is rendered via `{{< keyfeatures >}}` in `content/en/openms-lib.md`. + +## “OpenMS allows users to” / developer sections + +These blocks live on the **[OpenMS-lib](/openms-lib/)** page (not the homepage). They are defined under `heroGroup` in `config.yaml` and rendered via the `{{< heroitems >}}` shortcode in `content/en/openms-lib.md`. + +Two blocks — each has `title`, `variant` (`users` or `developers`), `heroItems` (cards with image, subtitle, buttons). + +```yaml +heroGroup: + - title: "OpenMS allows users to:" + variant: users + heroItems: + - title: Run existing workflows + subtitle: ... + image: knime-analytics.png + buttonText: Get Started + buttonLink: "https://..." +``` + +Images here are **filenames** resolved from the theme/static image paths (same as existing entries). + +## “What is OpenMS?” (key features) + +```yaml +keyfeatures: + eyebrow: Overview + title: What is OpenMS? + description: >- + OpenMS is an open-source C++ library... + features: + - title: Open source + text: BSD-licensed core library... + note: >- + Our community is committed... +``` + +The `note` field supports Markdown links, e.g. `[Code of Conduct](/code-of-conduct)`. + +## Trusted by section + +```yaml +trustedBySection: + eyebrow: Trusted by + title: As used by leading teams + titleHighlight: leading teams + subtitle: Researchers and organizations worldwide... + linkLabel: Visit website + +trustedBy: + - name: Immatics + abbr: I + url: https://immatics.com/ + - name: University of Toronto + abbr: UofT + logo: /images/logos/toronto.jpeg +``` + +- Use `logo` for an image, or `abbr` for a letter avatar when no logo is set. +- `url` is optional. + +## YAML tips + +- Keep indentation consistent (2 spaces). +- URLs with special characters: wrap in quotes. +- Multi-line text: `>-` after the key folds newlines into a single line. + +## What not to change without web team + +- `layouts/index.html` — order of homepage sections +- `layouts/partials/hero.html`, `heroitems.html`, `keyfeatures.html` — structure and markup +- `assets/css/*` — colors and spacing + +## Preview + +`make serve` → http://localhost:1313/ or Netlify PR preview. diff --git a/docs/common-tasks/update-community-calendar.md b/docs/common-tasks/update-community-calendar.md new file mode 100644 index 0000000..876bb08 --- /dev/null +++ b/docs/common-tasks/update-community-calendar.md @@ -0,0 +1,48 @@ +# Update the community calendar + +Community events on **/calendar/** come from a single data file—no layout or JavaScript changes needed for routine updates. + +## Edit the event list + +1. Open **`data/community_events.yaml`** in the repository ([on GitHub](https://github.com/OpenMS/OpenMS-website/blob/main/data/community_events.yaml)). +2. Add a new item under `events:` or edit an existing one. +3. Open a pull request (or commit on your branch) and merge after review. + +## Event fields + +| Field | Required | Example | +|-------|----------|---------| +| `title` | Yes | `OpenMS Developer Meeting 2026` | +| `start` | Yes | `2026-03-23` (YYYY-MM-DD) | +| `end` | No | `2026-03-27` (multi-day events) | +| `location` | No | `University of Helsinki, Finland` | +| `summary` | No | Short description shown in the sidebar | +| `url` | No | Registration or external link | +| `news_url` | No | `/news/devmeeting2026/` — link to a news post on this site | +| `category` | No | `developer-meeting`, `workshop`, or `outreach` (for styling) | + +Example: + +```yaml + - title: My workshop + start: 2026-06-15 + end: 2026-06-16 + location: Berlin, Germany + category: workshop + summary: Hands-on OpenMS training. + url: https://example.org/register + news_url: /news/my-workshop/ +``` + +## Preview locally + +```bash +make serve +``` + +Visit [http://localhost:1313/calendar/](http://localhost:1313/calendar/). + +## Page copy and layout + +- Hero text: `config.yaml` → `params.calendarSection` +- Calendar UI: `layouts/partials/community-calendar-main.html`, `assets/js/community-calendar.js`, `assets/css/community-calendar.css` diff --git a/docs/common-tasks/update-news-banner.md b/docs/common-tasks/update-news-banner.md new file mode 100644 index 0000000..5c9b013 --- /dev/null +++ b/docs/common-tasks/update-news-banner.md @@ -0,0 +1,59 @@ +# Update the news banner + +The **news banner** is the announcement strip at the top of the homepage (when enabled). It is controlled entirely in configuration — no Markdown file. + +## File to edit + +`config.yaml` → under `languages` → `en` → `params` → `newsBanner` + +Current structure (example): + +```yaml +newsBanner: + enabled: true + label: News + text: Workshop at University of Helsinki on April 30th 2026. +``` + +## Fields + +| Field | Purpose | +|-------|---------| +| `enabled` | `true` to show the banner, `false` to hide it | +| `label` | Small eyebrow text (e.g. `News`) | +| `text` | Main announcement message | + +## Examples + +**Turn off the banner** + +```yaml +newsBanner: + enabled: false + label: News + text: "" +``` + +**New announcement** + +```yaml +newsBanner: + enabled: true + label: News + text: OpenMS 3.5 released — see the release notes on our news page. +``` + +## Preview + +1. Save `config.yaml`. +2. Local: `make serve` → homepage. +3. Or: open PR and use Netlify preview on the homepage. + +## Related + +- Full news article: [Add a news post](add-news-post.md) +- News listing labels (`yearFilterLabel`, etc.): `config.yaml` → `newsSection` — see [Config YAML guide](../reference/config-yaml-guide.md) + +## Implementation note (for web team) + +Rendering is in `layouts/partials/news-banner.html`. Only edit that file if you need to change layout or styling, not the text. diff --git a/docs/getting-started/edit-via-github.md b/docs/getting-started/edit-via-github.md new file mode 100644 index 0000000..ab9963e --- /dev/null +++ b/docs/getting-started/edit-via-github.md @@ -0,0 +1,81 @@ +# Edit via GitHub (no local install) + +You can update most site content using only the GitHub website. Netlify will build a **preview** of your changes on each pull request. + +## When to use this workflow + +- Adding or editing **news posts** (`content/en/news/`) +- Editing **text pages** (`content/en/about.md`, etc.) +- Small changes to **`config.yaml`** (banner text, hero copy, webapps list) + +For large `config.yaml` edits, a local preview is helpful but not required. + +## Steps + +### 1. Find the file + +Examples: + +| What you want to change | File | +|-------------------------|------| +| New news article | Create `content/en/news/your-slug.md` | +| News banner on homepage | `config.yaml` → search for `newsBanner` | +| About page | `content/en/about.md` | + +Use the repo search (GitHub **t** shortcut) to find text that is already on the site. + +### 2. Edit on a branch + +**Option A — Edit existing file** + +1. Browse to the file on GitHub. +2. Click the **pencil** (Edit). +3. GitHub offers to create a branch — accept the default or name it e.g. `news/helsinki-workshop-2026`. +4. Make your changes. +5. Click **Commit changes** (use a clear message, e.g. `Add news post for Helsinki workshop`). + +**Option B — New file** + +1. Go to `content/en/news/` (or the right folder). +2. **Add file** → name it `my-event.md` (lowercase, hyphens, no spaces). +3. Paste content from an existing news file and adjust (see [Add a news post](../common-tasks/add-news-post.md)). + +### 3. Open a pull request + +After committing, GitHub usually shows **Compare & pull request**. If not: + +1. Go to **Pull requests** → **New pull request**. +2. Base: `main` (or the default branch), compare: your branch. +3. Fill in the description (what changed, link to preview when ready). +4. Create the pull request. + +### 4. Check the Netlify preview + +On the pull request, look for a **deploy preview** check or comment from Netlify. Open that URL and verify: + +- Homepage (if you changed `config.yaml`) +- `/news` and your new article (if you added news) +- The specific page you edited + +Details: [Deployment](../workflow/deployment.md). + +### 5. Request review + +Tag or assign someone from the **web team** (see [Who to ask](../workflow/who-to-ask.md)). They merge when the preview looks correct. + +## Tips + +- **YAML indentation**: In `config.yaml`, use spaces only (2 spaces per level). Tabs break the build. +- **Copy an existing news file** instead of starting from a blank file. +- **Images**: upload to `static/images/...` in the same PR (see [Add images](../common-tasks/add-images.md)). +- Do not commit passwords, API keys, or private URLs. + +## If the build fails + +Open the failed check on the PR and read the log. Common causes: + +- Invalid YAML in `config.yaml` +- Missing quote on a string with special characters +- Hugo Extended required on Netlify (already configured in `netlify.toml`) + +See [Common errors](../troubleshooting/common-errors.md). diff --git a/docs/getting-started/preview-locally.md b/docs/getting-started/preview-locally.md new file mode 100644 index 0000000..08313ac --- /dev/null +++ b/docs/getting-started/preview-locally.md @@ -0,0 +1,67 @@ +# Preview the site locally + +Use this when you want to see changes in a browser before opening a pull request. + +## Requirements + +1. **Hugo Extended** (required — the theme compiles SASS) + - Install: [Hugo installing guide](https://gohugo.io/getting-started/installing/) + - You must have the **extended** edition. On Linux, a tarball from [Hugo releases](https://github.com/gohugoio/hugo/releases) is often easiest. + - Verify: `hugo version` should mention `extended`. + +2. **Git** (to clone the repo and init the theme submodule) + +3. **Make** (optional; Windows users can run `hugo` directly) + +## One-time setup + +```bash +git clone https://github.com/OpenMS/OpenMS-website.git +cd OpenMS-website +git submodule update --init --recursive +``` + +The submodule pulls in `themes/scientific-python-hugo-theme`. Without it, the build fails. + +## Start the dev server + +```bash +make serve +``` + +Or without Make: + +```bash +hugo server +``` + +Open **http://localhost:1313** in your browser. + +- The server reloads when you save files. +- **Draft** pages (`draft: true` in front matter) are included when using `make serve` (it passes `-D`). + +## Build static HTML (like production) + +```bash +make html +``` + +Output is written to `public/`. You can open `public/index.html` in a browser or run a simple static server on that folder. + +## Clean build artifacts + +```bash +make clean +``` + +Removes the `public/` directory. + +## Common local issues + +| Symptom | Fix | +|---------|-----| +| `TOCSS: failed to transform "style.sass"` | Install **Hugo Extended**, not standard Hugo | +| Theme / layout errors after pull | Run `git submodule update --init --recursive` | +| Port 1313 in use | `hugo server --port 1314` | + +More errors: [Common errors](../troubleshooting/common-errors.md). diff --git a/docs/reference/config-yaml-guide.md b/docs/reference/config-yaml-guide.md new file mode 100644 index 0000000..53a4663 --- /dev/null +++ b/docs/reference/config-yaml-guide.md @@ -0,0 +1,110 @@ +# config.yaml guide + +Site-wide settings and most homepage content live in **`config.yaml`** at the repository root. + +**Path to editable content:** `languages` → `en` → `params` + +> Technical site settings (`baseURL`, `theme`, `markup`) are at the top of the file. Change those only with web-team approval. + +## Top-level (usually leave unchanged) + +| Key | Purpose | +|-----|---------| +| `baseURL` | Production URL (`https://openms.de/`) | +| `theme` | `scientific-python-hugo-theme` | +| `disableKinds` | Disables taxonomy pages | +| `markup.goldmark.renderer.unsafe` | Allows HTML in Markdown | + +## params — homepage & global UI + +### newsBanner + +Homepage announcement strip. See [Update the news banner](../common-tasks/update-news-banner.md). + +### newsSection + +Labels for `/news` listing: + +| Key | Default purpose | +|-----|-----------------| +| `eyebrow` | Small label above title | +| `title` / `subtitle` | Page heading (can override `_index.md`) | +| `yearFilterLabel` | “Filter by year” | +| `allYearsLabel` | “All” button | +| `readMoreLabel` | Card link text | +| `backToNewsLabel` | Single article back link | +| `defaultYear` | Pre-select a year (string, e.g. `"2026"`) | +| `defaultToLatestYear` | If true and no `defaultYear`, select newest year | +| `emptyMessage` | Shown when filter has no posts | + +### trustedBySection + trustedBy + +“Trusted by” block on homepage. List of organizations (`name`, `abbr`, optional `logo`, optional `url`). + +### navbarlogo + +Site logo in header (`image`, `link`, `altText`). + +### hero + +Main homepage hero: titles, description, CTA button, `stats` array. + +### homeSponsors + +“Supported by” logos under hero (`enabled`, `sponsors` list with `name`, `url`, `logo`, `alt`). + +### heroGroup + +Two large sections (users / developers) with `heroItems` cards. + +### keyfeatures + +“What is OpenMS?” four feature boxes + `note` (Markdown allowed). + +### webappsSection + webapps + +Homepage projects carousel. See [Add a webapp](../common-tasks/add-webapp-to-homepage.md). + +### footer + +Tagline, quick link columns, social links, sponsor footer logos. + +### navbar + +Top navigation menu and dropdowns. See [Edit footer or navbar](../common-tasks/edit-footer-or-navbar.md). + +## Analytics (do not remove without discussion) + +```yaml +plausible: + dataDomain: openms.de +matomo: + url: "https://openms.matomo.cloud/" + siteId: "1" +``` + +## Fonts + +```yaml +font: # headings — Montserrat +bodyFont: # body — Raleway +monoFont: # monospace — JetBrains Mono +``` + +Changing fonts affects the whole site; coordinate with web team. + +## YAML rules + +1. **Spaces only** for indentation (2 spaces per level). +2. **Quotes** for strings containing `:`, `#`, or leading special characters. +3. **Multi-line strings**: `>-` folds lines; `|` preserves line breaks. +4. **Lists**: each item starts with `-` aligned under the parent key. + +## Validate before merging + +- Open PR and confirm Netlify build succeeds. +- Optionally run locally: `make serve` and scan homepage + `/news`. + +## Splitting config in the future + +`config.yaml` is large. The web team may later move lists (partners, webapps) to `data/*.yaml`. This guide will be updated when that happens. diff --git a/docs/reference/content-front-matter.md b/docs/reference/content-front-matter.md new file mode 100644 index 0000000..40c9cc2 --- /dev/null +++ b/docs/reference/content-front-matter.md @@ -0,0 +1,74 @@ +# Content front matter reference + +Front matter is the YAML block between `---` at the top of a Markdown file. Hugo uses it for titles, dates, and layout options. + +## News posts (`content/en/news/*.md`) + +```yaml +--- +title: Article headline +authors: ["Name One", "Name Two"] +date: 2025-05-20 +summary: One or two sentences for the news listing card. +type: news +draft: false +--- +``` + +| Field | Required | Description | +|-------|----------|-------------| +| `title` | Yes | Article title | +| `date` | Yes | `YYYY-MM-DD`; sorting and year filter on `/news` | +| `summary` | Yes | Teaser on news index | +| `authors` | No | YAML list of strings | +| `type` | Yes | Use `news` | +| `draft` | No | `true` = hidden in production build | + +## Standard pages (`content/en/*.md`) + +```yaml +--- +title: Page title +sidebar: false +--- +``` + +| Field | Description | +|-------|-------------| +| `title` | Page title | +| `sidebar` | `false` hides sidebar on many templates | +| `subtitle` | Optional; used on some section pages | + +## News section index (`content/en/news/_index.md`) + +```yaml +--- +title: News +subtitle: Announcements, releases, workshops... +--- +``` + +Listing UI labels (filter, “Read more”) come from **`config.yaml`** → `newsSection`, not from this file. + +## Application pages (`content/en/applications/*.md`) + +```yaml +--- +title: NuXL +subtitle: Protein-RNA and DNA cross-linking +sidebar: false +--- +``` + +## Section index (`content/en/applications/_index.md`) + +Controls the applications listing page; same general fields as other section `_index.md` files. + +## Dates + +- Always use ISO format: `2026-04-30` +- News without a valid `date` may not appear correctly in the year filter + +## Body content + +After the closing `---`, the rest of the file is **Markdown** (and optional shortcodes). See [Shortcodes](shortcodes.md). diff --git a/docs/reference/file-locations.md b/docs/reference/file-locations.md new file mode 100644 index 0000000..00a8a4b --- /dev/null +++ b/docs/reference/file-locations.md @@ -0,0 +1,65 @@ +# File locations — quick lookup + +“I want to change X” → edit Y. + +## Content (Markdown) + +| What | Where | +|------|--------| +| News article | `content/en/news/.md` | +| News listing intro | `content/en/news/_index.md` | +| About, governance, legal, etc. | `content/en/.md` | +| Application documentation | `content/en/applications/.md` | +| Key features detail pages | `content/en/keyfeatures/*.md` | + +## Configuration + +| What | Where | +|------|--------| +| Homepage hero, stats, CTA | `config.yaml` → `params.hero` | +| News banner (top strip) | `config.yaml` → `params.newsBanner` | +| News page labels / filter | `config.yaml` → `params.newsSection` | +| Key features (“What is OpenMS?”) | `config.yaml` → `params.keyfeatures` | +| Homepage webapps carousel | `config.yaml` → `params.webapps` | +| Trusted by section | `config.yaml` → `params.trustedBy` | +| Community calendar events | `data/community_events.yaml` | +| Community calendar page | `content/en/calendar.md`, `layouts/partials/community-calendar-main.html` | +| Navbar & footer | `config.yaml` → `params.navbar`, `params.footer` | +| Site URL, theme, analytics | `config.yaml` (top) | + +## Images & static files + +| What | Where | +|------|--------| +| Any static asset | `static/` → URL `/...` | +| Logos | `static/images/logos/` | +| Webapp logos | `static/images/webapp/logo/` | +| App screenshots | `static/images/content_images/applications/` | + +## Layout & style (web team) + +| What | Where | +|------|--------| +| Homepage section order | `layouts/index.html` | +| News list / article layout | `layouts/news/` | +| Homepage partials | `layouts/partials/` (hero, webapps, news-banner, …) | +| Site CSS overrides | `assets/css/*.css` | +| Custom shortcodes | `layouts/shortcodes/` | +| Base theme | `themes/scientific-python-hugo-theme/` (avoid editing) | + +## Build & deploy + +| What | Where | +|------|--------| +| Local build commands | `Makefile` | +| Hugo version for Netlify | `netlify.toml` | +| Maintainer docs | `docs/` (this folder) | + +## Hardcoded content (needs code change today) + +| What | Where | +|------|--------| +| University partners marquee | `layouts/partials/university-partners.html` | +| Sponsor logos on About (`{{< sponsors >}}`) | `layouts/shortcodes/sponsors.html` | + +Consider moving these to `config.yaml` or `data/` in a future improvement. diff --git a/docs/reference/shortcodes.md b/docs/reference/shortcodes.md new file mode 100644 index 0000000..a21f98d --- /dev/null +++ b/docs/reference/shortcodes.md @@ -0,0 +1,107 @@ +# Shortcodes + +Shortcodes are special `{{< ... >}}` blocks in Markdown. They render HTML via templates in `layouts/shortcodes/`. + +## notice + +Callout boxes for notes, warnings, tips. + +```markdown +{{< notice note >}} +This is a note. +{{< /notice >}} + +{{< notice info >}} +Information. +{{< /notice >}} + +{{< notice warning >}} +Warning text. +{{< /notice >}} + +{{< notice tip >}} +Helpful tip. +{{< /notice >}} +``` + +Types: `note`, `info`, `warning`, `tip`. + +## button + +Icon button linking externally. + +```markdown +{{< button normal https://example.com >}} +Normal Button +{{< /button >}} + +{{< button download https://example.com/file.zip >}} +Download +{{< /button >}} + +{{< button github https://github.com/OpenMS/OpenMS >}} +GitHub +{{< /button >}} + +{{< button rocket https://example.com >}} +Rocket +{{< /button >}} +``` + +First argument: `normal`, `download`, `github`, or `rocket`. Second argument: URL. + +## sponsors + +On **About** page — renders sponsor logos. + +```markdown +{{< sponsors >}} +``` + +Implementation: `layouts/shortcodes/sponsors.html` (hardcoded logos/links). To add a sponsor here, ask web team or edit that file. + +### `keyfeatures` + +Renders the “What is OpenMS?” section from `config.yaml` → `keyfeatures` (used on [OpenMS-lib](/openms-lib/)). + +```markdown +{{< keyfeatures >}} +``` + +### `heroitems` + +Renders capability cards from `config.yaml` → `heroGroup` (used on [OpenMS-lib](/openms-lib/)). + +```markdown +{{< heroitems >}} +``` + +Optional: `{{< heroitems variant="users" >}}` or `variant="developers"` to show one block only. + +## partners + +Institutional partners block. + +```markdown +{{< partners >}} +``` + +Renders `layouts/partials/university-partners.html` without the section header. Partner list is currently **hardcoded in the partial** — not in `config.yaml`. + +## figure (theme shortcode) + +Used heavily in application guides: + +```markdown +{{< figure src="/images/content_images/applications/NuXL.png" >}} +``` + +Optional: wrap in `
...
` for centered images (existing pages use this pattern). + +## Theme shortcodes + +The scientific-python Hugo theme may provide additional shortcodes under `themes/scientific-python-hugo-theme/layouts/shortcodes/`. Prefer OpenMS copies in `layouts/shortcodes/` when both exist. + +## Adding a new shortcode + +Requires a new `.html` file in `layouts/shortcodes/` — **web team task**, not typical for content editors. diff --git a/docs/troubleshooting/common-errors.md b/docs/troubleshooting/common-errors.md new file mode 100644 index 0000000..088307f --- /dev/null +++ b/docs/troubleshooting/common-errors.md @@ -0,0 +1,101 @@ +# Common errors + +## `TOCSS: failed to transform "style.sass"` + +**Cause:** Standard Hugo is installed instead of **Hugo Extended**. + +**Fix:** Install [Hugo Extended](https://gohugo.io/getting-started/installing/) and verify: + +```bash +hugo version +# should include "extended" +``` + +--- + +## Theme not found / missing layouts + +**Cause:** Git submodule not initialized. + +**Fix:** + +```bash +git submodule update --init --recursive +``` + +--- + +## Netlify build failed after editing `config.yaml` + +**Cause:** Invalid YAML (wrong indentation, tab characters, unquoted `:` in strings). + +**Fix:** + +- Use 2 spaces per indent level; no tabs. +- Quote strings with special characters: `text: "Workshop: April 30"` +- Compare your edit with the surrounding block in the same file. +- Use an online YAML validator on the `params` section if needed. + +--- + +## News post does not appear on `/news` + +**Check:** + +1. File is under `content/en/news/` (not another folder). +2. Front matter includes `date: YYYY-MM-DD` and `type: news`. +3. `draft: true` is removed for production (drafts are hidden unless building with drafts). +4. Year filter: try **All** on the news page if a year filter is selected. + +--- + +## Image broken (404) + +**Check:** + +1. File exists under `static/images/...`. +2. Markdown or config uses `/images/...` (leading slash, no `static/`). +3. Filename case matches exactly (Linux build is case-sensitive). + +--- + +## Two news files with similar names (GSoC2025 vs gsoc2025) + +**Cause:** Case-insensitive Mac vs case-sensitive Linux/Netlify. + +**Fix:** Keep one file; use lowercase slugs only. + +--- + +## `make: command not found` (Windows) + +**Fix:** Run Hugo directly: + +```bash +git submodule update --init --recursive +hugo server +``` + +--- + +## Port already in use + +```bash +hugo server --port 1314 +``` + +--- + +## Changes not visible on openms.de after merge + +1. Wait a few minutes for Netlify production deploy. +2. Hard refresh (Ctrl+Shift+R / Cmd+Shift+R) or try incognito. +3. Confirm the PR was merged to the branch Netlify watches (usually `main`). + +--- + +## Still stuck? + +1. Copy the **full error** from Netlify build log or terminal. +2. Open a GitHub Issue with steps to reproduce and link to your PR. +3. See [Who to ask](../workflow/who-to-ask.md). diff --git a/docs/workflow/deployment.md b/docs/workflow/deployment.md new file mode 100644 index 0000000..8249184 --- /dev/null +++ b/docs/workflow/deployment.md @@ -0,0 +1,66 @@ +# Deployment + +The live site **https://openms.de/** is built and hosted on **Netlify** from this GitHub repository. + +## What triggers a deploy + +| Event | Result | +|-------|--------| +| Pull request opened/updated | **Deploy preview** (temporary URL on the PR) | +| Merge to default branch | **Production** deploy to openms.de | + +You do not need to run a manual deploy for normal content changes. + +## Build settings + +- **Hugo version** is pinned in `netlify.toml`: + + ```toml + [build.environment] + HUGO_VERSION = "0.155.0" + ``` + +- Netlify runs `hugo` (equivalent to `make html` locally) and publishes the `public/` folder. +- **Hugo Extended** is required for SASS/CSS (Netlify uses extended builds for this project). + +## Deploy preview on a PR + +1. Open your pull request. +2. Wait for the Netlify check (often named “Netlify” or shows as deploy preview). +3. Click **Details** or the preview link in the Netlify bot comment. +4. Test: + - `/` — homepage (`config.yaml` changes) + - `/news/` — news index + - `/news/your-slug/` — new article + - Any page you edited + +The preview URL looks like a random Netlify subdomain, not openms.de. + +## Production + +After merge, production updates automatically. Status badge in root [README.md](../../README.md) links to [Netlify deploys](https://app.netlify.com/sites/openms/deploys). + +## Submodule note + +The theme lives in a **git submodule**: + +```bash +git submodule update --init --recursive +``` + +Netlify and local builds need the submodule populated. If CI fails with missing theme files, this is a common cause on new clones. + +## Rollback + +If a bad change reaches production: + +1. Revert the merge commit via a new PR, or +2. Ask a maintainer with Netlify access to roll back to a previous deploy in the Netlify UI. + +## Local vs production + +| | Local (`make serve`) | Production | +|--|----------------------|------------| +| URL | http://localhost:1313 | https://openms.de | +| Drafts | Shown (`-D`) | Hidden | +| `baseURL` | May differ for links | `https://openms.de/` | diff --git a/docs/workflow/pull-requests.md b/docs/workflow/pull-requests.md new file mode 100644 index 0000000..a5370b4 --- /dev/null +++ b/docs/workflow/pull-requests.md @@ -0,0 +1,56 @@ +# Pull requests + +All website changes should go through a **pull request (PR)** on GitHub so others can review and Netlify can build a preview. + +## Before you open a PR + +1. Know which files you changed (see [File locations](../reference/file-locations.md)). +2. If you edited `config.yaml`, double-check **indentation** (spaces only). +3. For news: `date`, `summary`, and `type: news` are set. +4. For images: files are under `static/` and paths start with `/images/`. + +## Opening the PR + +1. Push your branch (or use GitHub’s web editor — it creates a branch automatically). +2. Target the default branch (usually `main`). +3. Title: short and specific, e.g. `Add news post: Helsinki workshop 2026`. +4. Description: + - What changed and why + - Links to preview URLs once Netlify finishes + - Screenshots for visible UI changes (optional but helpful) + +## Netlify deploy preview + +After opening the PR: + +1. Find the **Netlify** check or bot comment. +2. Open the **deploy preview** URL (not the production site). +3. Verify every page you touched. + +Production **openms.de** updates only after the PR is **merged**. + +## Review checklist (for authors) + +- [ ] Build / Netlify check is green +- [ ] Previewed on deploy preview (or locally) +- [ ] No accidental edits to `themes/` submodule +- [ ] No secrets or internal-only URLs committed +- [ ] News posts: correct date and summary +- [ ] External links open correctly + +## Review checklist (for reviewers) + +- [ ] Content accurate (dates, names, links) +- [ ] Accessible images (alt text where applicable) +- [ ] YAML valid if `config.yaml` changed +- [ ] Scope matches PR description + +## After merge + +Netlify deploys production automatically. Allow a few minutes, then hard-refresh openms.de if you do not see changes (cache). + +Details: [Deployment](deployment.md). + +## Getting help + +See [Who to ask](who-to-ask.md). diff --git a/docs/workflow/who-to-ask.md b/docs/workflow/who-to-ask.md new file mode 100644 index 0000000..d7bd1f7 --- /dev/null +++ b/docs/workflow/who-to-ask.md @@ -0,0 +1,32 @@ +# Who to ask + +## For website content (news, text, config) + +1. Open a **pull request** and request review from someone on the **OpenMS web team** or a repo maintainer with merge rights on `OpenMS-website`. +2. Use GitHub **@mentions** in the PR description if you know who maintains the site. +3. Broader community questions: [OpenMS Discord](https://discord.com/invite/v9tv5BxPch) (link also in site footer). + +## For OpenMS software (not the website) + +- Installation, workflows, C++ / pyOpenMS: [openms.readthedocs.io](https://openms.readthedocs.io/) +- Code contributions: [OpenMS CONTRIBUTING.md](https://github.com/OpenMS/OpenMS/blob/develop/CONTRIBUTING.md) +- Website contribution overview: [content/en/contribute.md](../../content/en/contribute.md) on the site + +## When you need the web team (layout / design / build) + +Ask for help if you need to: + +- Change colors, fonts, or spacing (`assets/css/`) +- Reorder homepage sections (`layouts/index.html`) +- Edit university partners marquee or sponsors shortcode HTML +- Fix a failing Netlify build you do not understand +- Add a new shortcode or page template + +## Repository + +- **Website repo:** [github.com/OpenMS/OpenMS-website](https://github.com/OpenMS/OpenMS-website) +- **Issues:** Use GitHub Issues for bugs (broken layout, wrong deploy, broken link on production) + +## Updating this page + +Replace generic “web team” references with named GitHub handles or a link to your team roster when you have a maintained list (e.g. from OpenMS governance or `web-team` in GitHub org teams). diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..5d2c955 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,13 @@ +{{ define "main" }} +{{- if eq .Section "news" -}} +{{ partial "news-single-main.html" . }} +{{- else if or (eq .File.BaseFileName "publications") (eq .File.Path "publications.md") -}} +{{ partial "publications-main.html" . }} +{{- else if eq .File.BaseFileName "openms-lib" -}} +{{ partial "openms-lib-main.html" . }} +{{- else if eq .File.BaseFileName "calendar" -}} +{{ partial "community-calendar-main.html" . }} +{{- else -}} +{{ partial "single/content.html" . }} +{{- end -}} +{{ end }} diff --git a/layouts/index.html b/layouts/index.html index fa9127a..797c0d1 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,69 +1,49 @@ {{ define "main" }} - {{ if .Site.Params.hero }} -
- {{ partial "hero.html" . }} -
- {{ end }} - - {{ if .Site.Params.panel }} -
- {{ partial "panel.html" . }} -
- {{ end }} - - {{ if .Content }} -
+
+ {{- if .Site.Params.hero }} +
+ {{ partial "hero.html" . }} +
+ {{- end }} + +
+ {{ partial "university-partners.html" (dict "showHeader" true "variant" "home") }} +
+ +
+ {{ partial "webapps.html" (dict "Page" . "embed" "home") }} +
+ + {{- with .Site.Params.keyfeatures }} +
+ {{ partial "keyfeatures.html" (dict "Page" . "embed" "home") }} +
+ {{- end }} + +
+ {{ partial "trusted-by.html" (dict "Site" .Site "variant" "home") }} +
+ +
+ {{ partial "contact-area.html" (dict "variant" "home") }} +
+ + {{- if .Site.Params.panel }} +
+ {{ partial "panel.html" . }} +
+ {{- end }} + + {{- if .Content }} +
+
{{ partial "single/content.html" . }}
- {{ end }} - - {{ if .Site.Params.keyfeatures }} -
- {{ partial "keyfeatures.html" . }} -
- {{ end }} - -
- {{ partial "university-partners.html" (dict "showHeader" true) }} -
- - {{ partial "webapps.html" . }} - - {{ if .Site.Params.heroGroup }} -
- {{ partial "heroitems.html" (dict "Site" .Site "variant" "users") }} -
- {{ end }} +
+ {{- end }} -
- {{ partial "trusted-by.html" . }} -
- -
- {{ partial "contact-area.html" . }} -
- - {{/* quick-facts hidden per UX/UI update */}} - - {{ if .Site.Params.shell }} -
- {{ partial "shell.html" . }} -
- {{ end }} - - {{ if .Site.Params.tabs }} -
- {{ partial "tabs.html" . }} -
- {{ end }} - - {{ if .Site.Params.casestudies }} -
- {{ partial "casestudies.html" . }} -
- {{ end }} - -
- {{ partial "tally.html" . }} -
-{{ end }} \ No newline at end of file + +
+{{ end }} diff --git a/layouts/index.searchindex.json b/layouts/index.searchindex.json new file mode 100644 index 0000000..7b278c7 --- /dev/null +++ b/layouts/index.searchindex.json @@ -0,0 +1,16 @@ +{{- $pages := slice -}} +{{- range .Site.RegularPages -}} + {{- if not .Params.search_exclude -}} + {{- $summary := .Summary | plainify | truncate 200 -}} + {{- if eq $summary "" -}} + {{- $summary = .Plain | plainify | truncate 200 -}} + {{- end -}} + {{- $pages = $pages | append (dict + "title" .Title + "href" .RelPermalink + "section" (.Section | humanize) + "summary" $summary + ) -}} + {{- end -}} +{{- end -}} +{{- $pages | jsonify -}} diff --git a/layouts/news/section.html b/layouts/news/section.html new file mode 100644 index 0000000..702faa4 --- /dev/null +++ b/layouts/news/section.html @@ -0,0 +1,118 @@ +{{ define "main" }} +{{- $cfg := .Site.Params.newsSection | default dict }} +{{- $title := index $cfg "title" | default .Title }} +{{- $subtitle := index $cfg "subtitle" | default .Params.Subtitle }} +{{- $eyebrow := index $cfg "eyebrow" | default "OpenMS" }} +{{- $yearLabel := index $cfg "yearFilterLabel" | default "Filter by year" }} +{{- $allYearsLabel := index $cfg "allYearsLabel" | default "All" }} +{{- $readMore := index $cfg "readMoreLabel" | default "Read article" }} +{{- $defaultYear := index $cfg "defaultYear" | default "" }} +{{- $defaultToLatest := index $cfg "defaultToLatestYear" | default false }} +{{- $pages := .Pages.ByDate.Reverse }} +{{- $years := slice }} +{{- range $pages }} + {{- if not .Date.IsZero }} + {{- $y := .Date.Format "2006" }} + {{- if not (in $years $y) }} + {{- $years = $years | append $y }} + {{- end }} + {{- end }} +{{- end }} +{{- if and (not $defaultYear) $defaultToLatest (gt (len $years) 0) }} + {{- $defaultYear = index $years 0 }} +{{- end }} +
+
+
+ {{- with $eyebrow }} +

{{ . }}

+ {{- end }} +

{{ $title }}

+ {{- with $subtitle }} +

{{ . }}

+ {{- end }} +
+
+ +
+ {{- if gt (len $years) 0 }} +
+

{{ $yearLabel }}

+
+ + {{- range $years }} + + {{- end }} +
+

+
+ {{- end }} + + {{- if .Content }} +
{{ .Content }}
+ {{- end }} + +
+ {{- $lastYear := "" }} + {{- range $pages }} + {{- $year := "" }} + {{- if not .Date.IsZero }} + {{- $year = .Date.Format "2006" }} + {{- if ne $year $lastYear }} +

{{ $year }}

+ {{- $lastYear = $year }} + {{- end }} + {{- end }} +
+
+ {{ partial "news-date-badge.html" . }} +
+

+ {{ .Title }} +

+ {{- with or .Params.authors .Params.Authors }} +

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

+ {{- end }} + {{- with .Summary }} +

{{ . }}

+ {{- end }} + + {{ $readMore }} + +
+
+
+ {{- end }} +
+ + +
+
+{{ end }} diff --git a/layouts/news/single.html b/layouts/news/single.html new file mode 100644 index 0000000..e1d0b9a --- /dev/null +++ b/layouts/news/single.html @@ -0,0 +1,3 @@ +{{ define "main" }} +{{ partial "news-single-main.html" . }} +{{ end }} diff --git a/layouts/partials/community-calendar-main.html b/layouts/partials/community-calendar-main.html new file mode 100644 index 0000000..a980212 --- /dev/null +++ b/layouts/partials/community-calendar-main.html @@ -0,0 +1,58 @@ +{{- $cfg := .Site.Params.calendarSection | default dict -}} +{{- $title := index $cfg "title" | default "Community calendar" -}} +{{- $subtitle := index $cfg "subtitle" | default "Upcoming OpenMS meetings, workshops, and community events." -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Community" -}} +{{- $data := .Site.Data.community_events | default dict -}} +{{- $events := index $data "events" | default (slice) -}} +
+
+
+
+

{{ $eyebrow }}

+

+ Community calendar +

+

{{ $subtitle }}

+
+ +
+

Updating events

+

+ Events are maintained in + data/community_events.yaml + on GitHub. Add or edit entries via pull request—see + how to update the calendar. +

+
+ +
+
+ +

+ + +
+ +
+
+ +
+
+ + +
+
+ + +
+
+
diff --git a/layouts/partials/contact-area.html b/layouts/partials/contact-area.html index 86d513b..ea7e0ce 100644 --- a/layouts/partials/contact-area.html +++ b/layouts/partials/contact-area.html @@ -1,7 +1,50 @@ +{{- $variant := .variant | default "" -}} +{{- $home := or (eq $variant "home") (eq $variant "saas") -}} +{{- $contactPageUrl := "/contact/" -}} +{{- $docsUrl := "https://openms.readthedocs.io/en/latest/about/installation.html" -}} +{{- if $home }} +
+
+
+
+

+ + Contact +

+

+ Take control of your mass spec workflows today +

+

+ Tell us about your pipeline, integrations, or tooling goals. +

+
+
+ Contact us + +

Usually replies within 1–2 business days.

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

Contact

+
+

+ + Contact +

Let us build with you

Tell us about your workflow, integrations, or tooling goals. We will point you to the @@ -10,31 +53,28 @@

Let us build with youUsually replies within 1-2 business days.

We can offer paid consulting services. You can also support OpenMS as - Sponsor or Donate. + Sponsor or Donate.

-

+
+ Contact us + + - Contact us + Send a message
- - - - Email - webmaster@openms.de - - + webmaster@openms.de
+{{- end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 157690e..1dda9b4 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -43,7 +43,7 @@ {{- if or $sponsor $donate }}
{{- with $sponsor }} - {{ .text }} {{- end }} @@ -71,7 +71,7 @@

{{ .heading }}

{{- if and (eq $groupHeading "ABOUT") (eq .text "Governance") }}
  • - Contact us + Contact us
    • {{- end }} {{- end }} @@ -83,14 +83,15 @@

    {{ .heading }}

    Supported by

    - - Deployed by Netlify - Supported by deNBI - + Supported by Elixir @@ -104,6 +105,17 @@

    {{ .heading }}

    © {{ now.Year }} {{ $title }}. All rights reserved.

    + {{- with $deployedBy }} +     + + + {{- end }}
    diff --git a/layouts/partials/hero-stat-card.html b/layouts/partials/hero-stat-card.html new file mode 100644 index 0000000..4b9f068 --- /dev/null +++ b/layouts/partials/hero-stat-card.html @@ -0,0 +1,14 @@ +{{- $stat := .stat -}} +{{- $modifier := .modifier | default "" -}} +
    + +

    + 0{{ $stat.suffix | default "" }} +

    +

    {{ $stat.label }}

    +
    diff --git a/layouts/partials/hero-stats.html b/layouts/partials/hero-stats.html index ea67344..1e0d050 100644 --- a/layouts/partials/hero-stats.html +++ b/layouts/partials/hero-stats.html @@ -1,11 +1,39 @@ {{- $stats := .stats }} {{- $class := .class | default "hero-modern__stats" }} +{{- $layout := .layout | default "" }} {{- $below := in $class "hero-modern__stats--below" }} +{{- $homeMetrics := eq $class "hero-home__metrics" }} +{{- $bento := eq $layout "bento" }} {{- with $stats }} +{{- if $bento }} +{{- $featured := index . 1 -}} +{{- $sideA := index . 0 -}} +{{- $sideB := index . 2 -}} +
    +
    + {{ partial "hero-stat-card.html" (dict "stat" $featured "modifier" "featured") }} +
    + {{ partial "hero-stat-card.html" (dict "stat" $sideA) }} + {{ partial "hero-stat-card.html" (dict "stat" $sideB "modifier" "accent") }} +
    +
    +
    +{{- else }} {{- $statCount := len . }}
    {{- range $index, $stat := . }} -
    +
    + {{- if $homeMetrics }} +
    + {{ $stat.label }} +
    +
    0{{ $stat.suffix | default "" }}
    + {{- else }}
    - {{- if lt (add $index 1) $statCount }} + {{- if and (not $homeMetrics) (lt (add $index 1) $statCount) }} {{- end }} {{- end }}
    {{- end }} +{{- end }} diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index c902459..c289567 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -7,31 +7,24 @@ {{- $buttonLink := index $hero "buttonlink" }} {{- $secondaryText := index $hero "secondaryButtonText" }} {{- $secondaryLink := index $hero "secondaryButtonLink" }} +{{- $microcopy := index $hero "microcopy" }} {{- $stats := index $hero "stats" }} -
    -
    -
    -
    -

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

    OpenMS

    +

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

    {{- with $description }} -

    {{ . }}

    +

    {{ . }}

    {{- end }} -
    - -
    -
    +
    {{- if $buttonText }} {{- end }} {{- if and $secondaryText $secondaryLink }} >{{ $secondaryText }} {{- end }}
    + {{- with $microcopy }} +

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

    + {{- end }}
    + +
    - {{ partial "hero-stats.html" (dict "stats" $stats "class" "hero-modern__stats hero-modern__stats--below") }}
    diff --git a/layouts/partials/heroitems.html b/layouts/partials/heroitems.html index d50e89a..c46f5ee 100644 --- a/layouts/partials/heroitems.html +++ b/layouts/partials/heroitems.html @@ -1,5 +1,6 @@ {{- $site := .Site -}} {{- $filterVariant := .variant -}} +{{- $embed := .embed -}} {{- $heroGroup := $site.Params.heroGroup -}} {{- range $heroGroup }} {{- if and $filterVariant (ne (.variant | default "") $filterVariant) }}{{- continue }}{{- end }} @@ -9,11 +10,11 @@ {{- $subtitle := .subtitle }} {{- $variant := .variant | default "default" }}
    -
    +
    {{- with $eyebrow }}

    {{ . }}

    @@ -33,7 +34,7 @@

    {{- range $index, $item := .heroItems }}
  • -
    +

    • + {{< sponsor-tiers >}} +

    Current sponsors

    @@ -72,7 +74,7 @@ sidebar: false

    @@ -80,7 +82,7 @@ sidebar: false

    Related

    • Research partnerships — institutional collaboration and partner groups
      • -
    • Donate — individual and community giving
      • +
    • Donate — individual and community giving
    • Contribute — volunteer code, docs, and community work
    diff --git a/docs/README.md b/docs/README.md index 4a1ccb7..bb848b0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -20,6 +20,7 @@ This guide is for **non–front-end contributors** who update [openms.de](https: | Change homepage headline, stats, or “What is OpenMS?” | [Edit the homepage hero & key features](common-tasks/edit-homepage-hero.md) | | Add or reorder a project on the homepage carousel | [Add a webapp to the homepage](common-tasks/add-webapp-to-homepage.md) | | Change footer links, navbar, or social links | [Edit footer or navbar](common-tasks/edit-footer-or-navbar.md) | +| Set up Zeffy on the donate page | [Configure the donate page (Zeffy)](common-tasks/configure-donate-zeffy.md) | | Edit About, Contribute, Governance, etc. | [Edit a page](common-tasks/edit-a-page.md) | | Add or replace an image | [Add images](common-tasks/add-images.md) | | Preview the site on my computer | [Preview locally](getting-started/preview-locally.md) | diff --git a/docs/common-tasks/configure-donate-zeffy.md b/docs/common-tasks/configure-donate-zeffy.md new file mode 100644 index 0000000..4445b67 --- /dev/null +++ b/docs/common-tasks/configure-donate-zeffy.md @@ -0,0 +1,47 @@ +# Configure the donate page (Zeffy) + +The **Donate** button and footer link go to **`/donate/`**. Donations are collected through [Zeffy](https://www.zeffy.com/) (embedded on the page when configured), with Open Collective as an optional alternative. + +## 1. Create or open your Zeffy form + +In the [Zeffy dashboard](https://www.zeffy.com/), go to **Donations → My forms** and use the form for OpenMS Inc. + +## 2. Get the embed URL (recommended) + +1. Click **Share** next to your donation form. +2. Open **Embed your form on your site** and choose your language. +3. Copy the **iframe** link (URL only, or the full ` +
    + {{- else if $hasZeffyForm -}} + + {{- else -}} + + {{- end -}} + + {{- if $showOC -}} + + {{- end -}} +
    + +
    +

    Related

    +
      +
    • Sponsor us — organizational sponsorship and foundation tiers
      • +
    • Contribute — volunteer code, docs, and community work
      • +
    • Contact — questions about giving or partnerships
      • +
    +
    +
    + + diff --git a/layouts/partials/navbar-clone.html b/layouts/partials/navbar-clone.html index 1228822..a612764 100644 --- a/layouts/partials/navbar-clone.html +++ b/layouts/partials/navbar-clone.html @@ -54,6 +54,8 @@ {{- end }} + {{ partial "navbar-mobile-ctas.html" (dict "Site" .Site "placement" "menu") }} +
    {{ partial "navbar-search.html" (dict "Site" .Site "variant" "desktop" "inputId" "navbar-search-input-clone") }} {{- range $navbar }} @@ -63,7 +65,6 @@ {{- end }}
    - {{ partial "navbar-mobile-ctas.html" . }} {{ partial "navbar-social.html" . }} diff --git a/layouts/partials/navbar-mobile-ctas.html b/layouts/partials/navbar-mobile-ctas.html index a419ce4..d29ee7a 100644 --- a/layouts/partials/navbar-mobile-ctas.html +++ b/layouts/partials/navbar-mobile-ctas.html @@ -1,5 +1,8 @@ -{{- $navbar := .Site.Params.navbar }} -
    +{{- $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" . }} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 4373479..6d45683 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -54,6 +54,8 @@ {{- end }}
    + {{ partial "navbar-mobile-ctas.html" (dict "Site" .Site "placement" "menu") }} +
    {{ partial "navbar-search.html" (dict "Site" .Site "variant" "desktop" "inputId" "navbar-search-input") }} {{- range $navbar }} @@ -63,7 +65,6 @@ {{- end }}
    - {{ partial "navbar-mobile-ctas.html" . }} {{ partial "navbar-social.html" . }}
    diff --git a/layouts/partials/news-single-main.html b/layouts/partials/news-single-main.html index f645f2c..b25e7a5 100644 --- a/layouts/partials/news-single-main.html +++ b/layouts/partials/news-single-main.html @@ -9,39 +9,44 @@ {{- if $year }} {{- $newsUrl = printf "%s?year=%s" $newsUrl $year }} {{- end }} -
    -
    -
    -

    {{ $eyebrow }} · News

    -

    {{ .Title }}

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

    {{ . }}

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

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

    +
    +
    +
    +
    +

    {{ $eyebrow }} · News

    +

    {{ .Title }}

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

    {{ . }}

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

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

    + {{- end }} +
    - -
    +
    + {{ .Content }} +
    + + +
    +
    +
    diff --git a/layouts/partials/openms-lib-main.html b/layouts/partials/openms-lib-main.html index bebe93d..65c90a9 100644 --- a/layouts/partials/openms-lib-main.html +++ b/layouts/partials/openms-lib-main.html @@ -1,5 +1,7 @@
    -
    - {{ .Content }} +
    +
    + {{ .Content }} +
    diff --git a/layouts/partials/sponsor-tiers.html b/layouts/partials/sponsor-tiers.html new file mode 100644 index 0000000..0743b80 --- /dev/null +++ b/layouts/partials/sponsor-tiers.html @@ -0,0 +1,35 @@ +{{- $tiers := .Site.Params.sponsorTiers | default dict -}} +{{- $levels := index $tiers "levels" | default (slice) -}} +{{- if gt (len $levels) 0 -}} + +{{- end -}} diff --git a/layouts/shortcodes/sponsor-tiers.html b/layouts/shortcodes/sponsor-tiers.html new file mode 100644 index 0000000..df5168a --- /dev/null +++ b/layouts/shortcodes/sponsor-tiers.html @@ -0,0 +1 @@ +{{ partial "sponsor-tiers.html" .Page }} From ced578d4bebd79fda1cd3bcedc3897ce184acf5e Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Mon, 8 Jun 2026 11:18:36 +0100 Subject: [PATCH 13/20] Use icon color instead of blue background on footer social hover. Footer social links and partner logos now highlight via icon tint on hover rather than a blue fill behind the icon. Co-authored-by: Cursor --- assets/css/styles_override.css | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index ed58314..c692371 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -502,7 +502,6 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { .footer-socials a:focus-visible, .footer-sponsors__logos a:focus-visible { - color: var(--openms-white); outline: 2px solid var(--openms-yellow); outline-offset: 3px; } @@ -555,7 +554,7 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { .footer-sponsors__logos a:hover, .footer-sponsors__logos a:focus-visible { - background: var(--openms-blue); + background: transparent; } .footer-sponsors__logos a:hover img, @@ -626,28 +625,30 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { justify-content: center; min-width: 2.875rem; min-height: 2.875rem; - color: var(--openms-white); + color: rgba(var(--openms-white-rgb), 0.82); border-radius: 0.5rem; - transition: color 0.2s ease, background 0.2s ease; + transition: color 0.2s ease; } -.footer-socials a:hover { - color: var(--openms-white); - background: var(--openms-blue); +.footer-socials a:hover, +.footer-socials a:focus-visible { + color: var(--openms-blue); + background: transparent; } .footer-socials svg.icon { width: 1.5rem; height: 1.5rem; - fill: var(--openms-white); + fill: currentColor; } .footer-socials a svg, .footer-socials a svg * { - fill: var(--openms-white) !important; - stroke: var(--openms-white) !important; - color: var(--openms-white) !important; + fill: currentColor !important; + stroke: currentColor !important; + color: currentColor !important; opacity: 1 !important; + transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .footer-copyright { From 9233bc04512877c32bcbb0b5a766ba12afbd1fff Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 9 Jun 2026 15:24:12 +0100 Subject: [PATCH 14/20] Unify key pages with shared heroes, navbar-style CTAs, and a clearer news banner. Migrate about, contact, governance, help, research partnerships, and sponsor pages to the openms-lib hero pattern, apply consistent pill button styling across sections, and improve the announcement banner for readability. Co-authored-by: Cursor --- assets/css/about.css | 231 ++- assets/css/applications-page.css | 156 +- assets/css/community-calendar.css | 172 +- assets/css/contact-area.css | 24 +- assets/css/contact-page.css | 182 +- assets/css/contribute-page.css | 142 +- assets/css/governance.css | 152 +- assets/css/help-page.css | 167 +- assets/css/hero-saas.css | 25 +- assets/css/hero.css | 33 +- assets/css/home.css | 339 +++- assets/css/navbar-responsive.css | 97 +- assets/css/news-banner.css | 86 +- assets/css/news-section.css | 194 +- assets/css/openms-buttons.css | 197 +- assets/css/openms-lib.css | 1790 +++++++++++++---- assets/css/publications.css | 146 +- assets/css/research-partnerships-page.css | 209 ++ assets/css/shortcuts_override.css | 29 +- assets/css/sponsor-us-page.css | 209 ++ assets/css/styles_override.css | 59 +- assets/css/typography.css | 3 +- assets/css/webapps.css | 56 +- assets/js/home-scroll-reveal.js | 155 ++ config.yaml | 94 +- content/en/about.md | 120 +- content/en/contact.md | 137 +- content/en/governance.md | 152 +- content/en/help.md | 180 +- content/en/openms-lib.md | 254 ++- content/en/research-partnerships.md | 129 +- content/en/sponsor-us.md | 135 +- layouts/_default/single.html | 12 + layouts/applications/section.html | 35 +- layouts/news/section.html | 39 +- layouts/partials/about-main.html | 27 + layouts/partials/community-calendar-main.html | 94 +- layouts/partials/contact-main.html | 32 + layouts/partials/contribute-main.html | 36 +- layouts/partials/governance-main.html | 27 + layouts/partials/help-main.html | 27 + layouts/partials/heroitems.html | 60 +- layouts/partials/keyfeatures.html | 61 +- layouts/partials/navbar-search.html | 4 +- layouts/partials/news-banner.html | 6 +- layouts/partials/news-single-main.html | 30 +- layouts/partials/openms-lib-main.html | 8 +- layouts/partials/publications-main.html | 38 +- .../partials/research-partnerships-main.html | 27 + layouts/partials/sponsor-us-main.html | 26 + layouts/partials/webapps.html | 24 +- 51 files changed, 5152 insertions(+), 1515 deletions(-) create mode 100644 assets/css/research-partnerships-page.css create mode 100644 assets/css/sponsor-us-page.css create mode 100644 assets/js/home-scroll-reveal.js create mode 100644 layouts/partials/about-main.html create mode 100644 layouts/partials/contact-main.html create mode 100644 layouts/partials/governance-main.html create mode 100644 layouts/partials/help-main.html create mode 100644 layouts/partials/research-partnerships-main.html create mode 100644 layouts/partials/sponsor-us-main.html diff --git a/assets/css/about.css b/assets/css/about.css index 2660eb9..6bac4ad 100644 --- a/assets/css/about.css +++ b/assets/css/about.css @@ -1,5 +1,31 @@ -.content-padding:has(.about-page) .content-container { - max-width: min(100%, 64rem); +.about-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --about-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.about-page-layout__content { + width: min(100%, var(--about-max)); + max-width: var(--about-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.about-page-hero { + margin-bottom: var(--olib-section-y); +} + +.about-page-hero .openms-lib-hero__title { + max-width: 24ch; } .about-page, @@ -8,7 +34,6 @@ display: grid; gap: clamp(2rem, 3.8vw, 3.2rem); margin: 0; - overflow-x: clip; } .research-partnerships-page__actions, @@ -219,10 +244,129 @@ .about-donate-actions { display: flex; flex-wrap: wrap; - gap: 0.75rem; + gap: calc(var(--openms-btn-glow-size, 6px) * 2 + 1rem); margin-top: 1rem; } +.about-page .about-donate-actions { + align-items: stretch; + gap: 0.75rem; + width: fit-content; + max-width: 100%; +} + +.about-page .about-donate-actions > a { + box-sizing: border-box; + flex: 1 1 11.75rem; + min-width: 11.75rem; + height: 2.75rem; + margin-top: 0; + text-align: center; +} + +/* Navbar-style CTA motion (about page) */ +.about-page-layout .openms-lib-btn, +.about-page-layout .about-page .about-donate-actions > a { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + text-decoration: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.about-page-layout .openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.about-page-layout .openms-lib-btn--ghost, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.about-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.about-page-layout .openms-lib-btn--primary:hover, +.about-page-layout .openms-lib-btn--primary:focus-visible, +.about-page-layout .openms-lib-btn--primary:active, +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:hover, +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:focus-visible, +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:active { + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.about-page-layout .openms-lib-btn--primary:hover, +.about-page-layout .openms-lib-btn--primary:focus-visible, +.about-page-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:hover, +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:focus-visible, +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:active { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; +} + +.about-page-layout .openms-lib-btn--ghost:hover, +.about-page-layout .openms-lib-btn--ghost:focus-visible, +.about-page-layout .openms-lib-btn--ghost:active, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:hover, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:focus-visible, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:active { + background: transparent; + background-color: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.about-page-layout .openms-lib-btn--primary:focus-visible, +.about-page-layout .about-page .about-donate-actions > .openms-btn-primary:focus-visible { + box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +.about-page-layout .openms-lib-btn--ghost:focus-visible, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + /* Sponsor tiers (Apache-style levels) */ .sponsor-tiers__intro { max-width: 65ch; @@ -356,6 +500,44 @@ } } +@media (max-width: 720px) { + .about-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .about-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .about-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .about-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .about-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } + + .about-page .about-donate-actions { + flex-direction: column; + width: 100%; + } + + .about-page .about-donate-actions > a { + flex: 1 1 auto; + width: 100%; + min-width: 0; + } +} + @media (max-width: 860px) { .sponsor-tiers__grid { grid-template-columns: 1fr; @@ -365,15 +547,6 @@ gap: 1.8rem; } - .about-hero { - padding: 1rem 1rem 1.25rem; - } - - .about-hero__title { - max-width: none; - font-size: clamp(1.8rem, 8vw, 2.4rem); - } - .about-sponsors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; @@ -404,25 +577,6 @@ margin: 0; } - .about-hero { - padding: 0.95rem 0.9rem 1.1rem; - } - - .about-hero__eyebrow { - margin-bottom: 0.4rem; - } - - .about-hero__title { - font-size: clamp(1.55rem, 8vw, 2rem); - line-height: 1.12; - } - - .about-hero__description { - margin-top: 0.7rem; - font-size: var(--openms-text-min); - line-height: 1.45; - } - .about-section p { max-width: none; } @@ -448,10 +602,6 @@ font-size: 0.72rem; } - .about-donate-actions .about-cta-btn { - width: 100%; - } - .about-page .uni-partners { padding-block: 1.2rem; } @@ -478,3 +628,12 @@ grid-template-columns: 1fr; } } + +@media (prefers-reduced-motion: reduce) { + .about-page-layout .openms-lib-btn:hover, + .about-page-layout .openms-lib-btn:focus-visible, + .about-page-layout .about-page .about-donate-actions > a:hover, + .about-page-layout .about-page .about-donate-actions > a:focus-visible { + transform: none; + } +} diff --git a/assets/css/applications-page.css b/assets/css/applications-page.css index 8597ce2..f8d3728 100644 --- a/assets/css/applications-page.css +++ b/assets/css/applications-page.css @@ -1,18 +1,37 @@ +.applications-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)); + --apps-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.applications-page-layout__content { + width: min(100%, var(--apps-max)); + max-width: var(--apps-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + .applications-page { + display: grid; + gap: clamp(2rem, 3.8vw, 3.2rem); margin-top: 0; } -.applications-page-layout__container { - max-width: min(100%, 64rem); +.applications-page-hero { + margin-bottom: var(--olib-section-y); } -.applications-page-layout .governance-hero { - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - padding-left: clamp(2rem, 5vw, 3.5rem); - padding-right: clamp(1.25rem, 3vw, 2rem); +.applications-page-hero + .applications-page-layout__content .applications-page { + gap: clamp(1.75rem, 3vw, 2.5rem); } .applications-page__intro { @@ -60,8 +79,127 @@ color: rgba(var(--openms-dark-rgb), 0.65); } +/* Navbar-style CTA motion (applications page) */ +.applications-page-layout .openms-lib-btn, +.applications-page-layout .applications-page__card .governance-card__link a { + 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); +} + +.applications-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; +} + +.applications-page-layout .openms-lib-btn--ghost, +.applications-page-layout .applications-page__card .governance-card__link a { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.applications-page-layout .applications-page__card .governance-card__link a { + margin-top: 0; +} + +.applications-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.applications-page-layout .openms-lib-btn--primary:hover, +.applications-page-layout .openms-lib-btn--primary:focus-visible, +.applications-page-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.applications-page-layout .openms-lib-btn--ghost:hover, +.applications-page-layout .openms-lib-btn--ghost:focus-visible, +.applications-page-layout .openms-lib-btn--ghost:active, +.applications-page-layout .applications-page__card .governance-card__link a:hover, +.applications-page-layout .applications-page__card .governance-card__link a:focus-visible, +.applications-page-layout .applications-page__card .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; +} + +.applications-page-layout .openms-lib-btn--primary:focus-visible { + box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +.applications-page-layout .openms-lib-btn--ghost:focus-visible, +.applications-page-layout .applications-page__card .governance-card__link a:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + @media (max-width: 860px) { .applications-page__list { grid-template-columns: 1fr; } } + +@media (max-width: 720px) { + .applications-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .applications-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .applications-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .applications-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .applications-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + +@media (prefers-reduced-motion: reduce) { + .applications-page-layout .openms-lib-btn:hover, + .applications-page-layout .openms-lib-btn:focus-visible, + .applications-page-layout .applications-page__card .governance-card__link a:hover, + .applications-page-layout .applications-page__card .governance-card__link a:focus-visible { + transform: none; + } +} diff --git a/assets/css/community-calendar.css b/assets/css/community-calendar.css index 6a337a5..e11973e 100644 --- a/assets/css/community-calendar.css +++ b/assets/css/community-calendar.css @@ -1,22 +1,33 @@ -/* Community calendar page — same width rhythm as news */ +/* Community calendar page */ -.community-calendar-page { - margin-top: 0; -} +.community-calendar-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --calendar-max: 64rem; -.content-padding:has(.community-calendar-layout) .content-container, -.content-container.community-calendar-layout__container { - max-width: min(100%, 64rem); + display: block; width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); } -.community-calendar-layout .governance-hero { - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - padding-left: clamp(2rem, 5vw, 3.5rem); - padding-right: clamp(1.25rem, 3vw, 2rem); +.community-calendar-layout__content { + width: min(100%, var(--calendar-max)); + max-width: var(--calendar-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.community-calendar-page { + margin-top: 0; +} + +.community-calendar-hero { + margin-bottom: var(--olib-section-y); } .community-calendar-page__main { @@ -261,6 +272,101 @@ font-weight: 600; } +/* Navbar-style CTA motion (calendar page) */ +.community-calendar-layout .openms-lib-btn, +.community-calendar-layout .community-calendar__nav, +.community-calendar-layout .community-calendar__today { + 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); +} + +.community-calendar-layout .openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.community-calendar-layout .openms-lib-btn--ghost, +.community-calendar-layout .community-calendar__nav, +.community-calendar-layout .community-calendar__today { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; + cursor: pointer; +} + +.community-calendar-layout .community-calendar__nav { + width: 2.75rem; + min-width: 2.75rem; + padding-inline: 0; +} + +.community-calendar-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.community-calendar-layout .community-calendar__toolbar { + gap: 0.75rem 0.85rem; +} + +.community-calendar-layout .openms-lib-btn--primary:hover, +.community-calendar-layout .openms-lib-btn--primary:focus-visible, +.community-calendar-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.community-calendar-layout .openms-lib-btn--ghost:hover, +.community-calendar-layout .openms-lib-btn--ghost:focus-visible, +.community-calendar-layout .openms-lib-btn--ghost:active, +.community-calendar-layout .community-calendar__nav:hover, +.community-calendar-layout .community-calendar__nav:focus-visible, +.community-calendar-layout .community-calendar__nav:active, +.community-calendar-layout .community-calendar__today:hover, +.community-calendar-layout .community-calendar__today:focus-visible, +.community-calendar-layout .community-calendar__today: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; +} + +.community-calendar-layout .openms-lib-btn--primary:focus-visible { + box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +.community-calendar-layout .openms-lib-btn--ghost:focus-visible, +.community-calendar-layout .community-calendar__nav:focus-visible, +.community-calendar-layout .community-calendar__today:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + @media (max-width: 860px) { .community-calendar__body { grid-template-columns: 1fr; @@ -270,3 +376,41 @@ margin-left: 0; } } + +@media (max-width: 720px) { + .community-calendar-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .community-calendar-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .community-calendar-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .community-calendar-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .community-calendar-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + +@media (prefers-reduced-motion: reduce) { + .community-calendar-layout .openms-lib-btn:hover, + .community-calendar-layout .openms-lib-btn:focus-visible, + .community-calendar-layout .community-calendar__nav:hover, + .community-calendar-layout .community-calendar__nav:focus-visible, + .community-calendar-layout .community-calendar__today:hover, + .community-calendar-layout .community-calendar__today:focus-visible { + transform: none; + } +} diff --git a/assets/css/contact-area.css b/assets/css/contact-area.css index ef0a0e5..4273104 100644 --- a/assets/css/contact-area.css +++ b/assets/css/contact-area.css @@ -8,7 +8,8 @@ .home-page__trust + .home-page__cta .contact-home { background: linear-gradient( 180deg, - var(--openms-white) 0%, + var(--home-bg-mist, #f8fafc) 0%, + var(--openms-white) 18%, rgba(var(--openms-blue-rgb), 0.04) 55%, rgba(var(--openms-blue-rgb), 0.07) 100% ); @@ -77,8 +78,7 @@ main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redes align-items: center; justify-content: center; min-height: 2.75rem; - padding: 0.7rem 1.5rem; - border-radius: 0.5rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); font-size: var(--openms-text-min); font-weight: 600; text-decoration: none; @@ -254,22 +254,26 @@ main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redes align-items: center; justify-content: center; min-height: 2.75rem; - padding: 0.75rem 1.5rem; - border: 1px solid rgba(var(--openms-navy-rgb), 0.16); - border-radius: 0.5rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + border: 2px solid rgba(var(--openms-navy-rgb), 0.2); + border-radius: var(--openms-btn-pill-radius, 999px); background: transparent; color: var(--openms-navy); font-family: var(--openms-font-body); font-size: var(--openms-text-min); font-weight: 600; text-decoration: none; - transition: border-color 0.2s ease, color 0.2s ease; + 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-blue-rgb), 0.4); - color: var(--openms-blue); + 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; } @@ -282,7 +286,7 @@ main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redes .contact-area__actions .contact-area__cta { width: 100%; - border-radius: 0.5rem; + border-radius: var(--openms-btn-pill-radius, 999px); } .contact-area__details { diff --git a/assets/css/contact-page.css b/assets/css/contact-page.css index 175f32d..7938ab3 100644 --- a/assets/css/contact-page.css +++ b/assets/css/contact-page.css @@ -1,5 +1,35 @@ -.content-padding:has(.contact-page) .content-container { - max-width: min(100%, 64rem); +.contact-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --contact-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.contact-page-layout__content { + width: min(100%, var(--contact-max)); + max-width: var(--contact-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.contact-page-hero { + margin-bottom: var(--olib-section-y); +} + +.contact-page-hero .openms-lib-hero__title { + max-width: 22ch; +} + +.contact-page { + margin-top: 0; } .contact-page__channels { @@ -15,7 +45,7 @@ align-items: center; justify-content: center; min-height: 2.75rem; - padding: 0.65rem 1.5rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); border-radius: 999px; text-decoration: none; } @@ -34,8 +64,154 @@ border: 1px solid rgba(var(--openms-blue-rgb), 0.14); } +/* Navbar-style CTA motion (contact page) */ +.contact-page-layout .openms-lib-btn, +.contact-page-layout .contact-page__channel-btn, +.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-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); +} + +.contact-page-layout .openms-lib-btn--primary, +.contact-page-layout .contact-page__channel-btn { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.contact-page-layout .openms-lib-btn--primary { + border-color: var(--openms-navy); + background: var(--openms-navy); +} + +.contact-page-layout .openms-lib-btn--ghost, +.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn) { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.contact-page-layout .contact-page__channel .governance-card__link a { + margin-top: 0; +} + +.contact-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.contact-page-layout .openms-lib-btn--primary:hover, +.contact-page-layout .openms-lib-btn--primary:focus-visible, +.contact-page-layout .openms-lib-btn--primary:active, +.contact-page-layout .contact-page__channel-btn:hover, +.contact-page-layout .contact-page__channel-btn:focus-visible, +.contact-page-layout .contact-page__channel-btn: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; +} + +.contact-page-layout .openms-lib-btn--primary:hover, +.contact-page-layout .openms-lib-btn--primary:focus-visible, +.contact-page-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.contact-page-layout .contact-page__channel-btn:hover, +.contact-page-layout .contact-page__channel-btn:focus-visible, +.contact-page-layout .contact-page__channel-btn:active { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; +} + +.contact-page-layout .openms-lib-btn--ghost:hover, +.contact-page-layout .openms-lib-btn--ghost:focus-visible, +.contact-page-layout .openms-lib-btn--ghost:active, +.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn):hover, +.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn):focus-visible, +.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn):active { + background: transparent; + background-color: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.contact-page-layout .openms-lib-btn--primary:focus-visible, +.contact-page-layout .contact-page__channel-btn: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); +} + +.contact-page-layout .openms-lib-btn--ghost:focus-visible, +.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-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); +} + +@media (max-width: 720px) { + .contact-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .contact-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .contact-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .contact-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .contact-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + @media (max-width: 860px) { .contact-page__channels { grid-template-columns: 1fr; } } + +@media (prefers-reduced-motion: reduce) { + .contact-page-layout .openms-lib-btn:hover, + .contact-page-layout .openms-lib-btn:focus-visible, + .contact-page-layout .contact-page__channel-btn:hover, + .contact-page-layout .contact-page__channel-btn:focus-visible, + .contact-page-layout .contact-page__channel .governance-card__link a:hover, + .contact-page-layout .contact-page__channel .governance-card__link a:focus-visible { + transform: none; + } +} diff --git a/assets/css/contribute-page.css b/assets/css/contribute-page.css index 279fab5..20ff72c 100644 --- a/assets/css/contribute-page.css +++ b/assets/css/contribute-page.css @@ -1,18 +1,31 @@ -.contribute-page { - margin-top: 0; +.contribute-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --contribute-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); } -.contribute-page-layout__container { - max-width: min(100%, 64rem); +.contribute-page-layout__content { + width: min(100%, var(--contribute-max)); + max-width: var(--contribute-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); } -.contribute-page-layout .governance-hero { - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - padding-left: clamp(2rem, 5vw, 3.5rem); - padding-right: clamp(1.25rem, 3vw, 2rem); +.contribute-page { + margin-top: 0; +} + +.contribute-page-hero { + margin-bottom: var(--olib-section-y); } .contribute-page__content { @@ -74,3 +87,110 @@ .contribute-page__content a:hover { color: var(--openms-navy); } + +/* Navbar-style CTA motion (contribute page) */ +.contribute-page-layout .openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + text-decoration: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.contribute-page-layout .openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.contribute-page-layout .openms-lib-btn--ghost { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.contribute-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.contribute-page-layout .openms-lib-btn--primary:hover, +.contribute-page-layout .openms-lib-btn--primary:focus-visible, +.contribute-page-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.contribute-page-layout .openms-lib-btn--ghost:hover, +.contribute-page-layout .openms-lib-btn--ghost:focus-visible, +.contribute-page-layout .openms-lib-btn--ghost:active { + background: transparent; + background-color: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.contribute-page-layout .openms-lib-btn--primary:focus-visible { + box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +.contribute-page-layout .openms-lib-btn--ghost:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +@media (max-width: 720px) { + .contribute-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .contribute-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .contribute-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .contribute-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .contribute-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + +@media (prefers-reduced-motion: reduce) { + .contribute-page-layout .openms-lib-btn:hover, + .contribute-page-layout .openms-lib-btn:focus-visible { + transform: none; + } +} diff --git a/assets/css/governance.css b/assets/css/governance.css index 1634a28..980b70c 100644 --- a/assets/css/governance.css +++ b/assets/css/governance.css @@ -1,11 +1,37 @@ -.content-padding:has(.governance-main-page) .content-container { - max-width: min(100%, 64rem); +.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-hero .openms-lib-hero__title { + max-width: 24ch; } .governance-page { display: grid; gap: clamp(2rem, 3.8vw, 3.2rem); - margin-top: 0.5rem; + margin-top: 0; } .governance-hero { @@ -317,12 +343,123 @@ text-underline-offset: 0.14em; } +/* Navbar-style CTA motion (governance page) */ +.governance-page-layout .openms-lib-btn, +.governance-page-layout .governance-card__link a { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + text-decoration: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.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, +.governance-page-layout .governance-card__link a { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.governance-page-layout .governance-card__link a { + margin-top: 0; +} + +.governance-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.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, +.governance-page-layout .governance-card__link a:hover, +.governance-page-layout .governance-card__link a:focus-visible, +.governance-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; +} + +.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, +.governance-page-layout .governance-card__link a:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + @media (max-width: 1024px) { .infrastructure-links { grid-template-columns: 1fr; } } +@media (max-width: 720px) { + .governance-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .governance-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .governance-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .governance-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .governance-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + @media (max-width: 860px) { .governance-grid, .governance-pillars, @@ -356,3 +493,12 @@ padding-left: 1.05rem; } } + +@media (prefers-reduced-motion: reduce) { + .governance-page-layout .openms-lib-btn:hover, + .governance-page-layout .openms-lib-btn:focus-visible, + .governance-page-layout .governance-card__link a:hover, + .governance-page-layout .governance-card__link a:focus-visible { + transform: none; + } +} diff --git a/assets/css/help-page.css b/assets/css/help-page.css index c597563..9502304 100644 --- a/assets/css/help-page.css +++ b/assets/css/help-page.css @@ -1,5 +1,35 @@ -.content-padding:has(.help-page) .content-container { - max-width: min(100%, 64rem); +.help-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --help-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.help-page-layout__content { + width: min(100%, var(--help-max)); + max-width: var(--help-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.help-page-hero { + margin-bottom: var(--olib-section-y); +} + +.help-page-hero .openms-lib-hero__title { + max-width: 26ch; +} + +.help-page { + margin-top: 0; } .help-page__hint { @@ -16,6 +46,130 @@ grid-column: 1 / -1; } +.help-page-layout .help-page__resources .governance-card__link { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; + margin-top: 1rem; + font-size: 0; +} + +.help-page-layout .help-page__resources .governance-card__link a { + font-size: var(--openms-text-min); +} + +/* Navbar-style CTA motion (help page) */ +.help-page-layout .openms-lib-btn, +.help-page-layout .help-page__resources .governance-card__link a { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + text-decoration: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.help-page-layout .openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.help-page-layout .openms-lib-btn--ghost, +.help-page-layout .help-page__resources .governance-card__link a { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.help-page-layout .help-page__resources .governance-card__link a { + margin-top: 0; +} + +.help-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.help-page-layout .openms-lib-btn--primary:hover, +.help-page-layout .openms-lib-btn--primary:focus-visible, +.help-page-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.help-page-layout .openms-lib-btn--ghost:hover, +.help-page-layout .openms-lib-btn--ghost:focus-visible, +.help-page-layout .openms-lib-btn--ghost:active, +.help-page-layout .help-page__resources .governance-card__link a:hover, +.help-page-layout .help-page__resources .governance-card__link a:focus-visible, +.help-page-layout .help-page__resources .governance-card__link a:active { + background: transparent; + background-color: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.help-page-layout .openms-lib-btn--primary:focus-visible { + box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +.help-page-layout .openms-lib-btn--ghost:focus-visible, +.help-page-layout .help-page__resources .governance-card__link a:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +@media (max-width: 720px) { + .help-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .help-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .help-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .help-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .help-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + @media (max-width: 860px) { .help-page__resources { grid-template-columns: 1fr; @@ -25,3 +179,12 @@ grid-column: auto; } } + +@media (prefers-reduced-motion: reduce) { + .help-page-layout .openms-lib-btn:hover, + .help-page-layout .openms-lib-btn:focus-visible, + .help-page-layout .help-page__resources .governance-card__link a:hover, + .help-page-layout .help-page__resources .governance-card__link a:focus-visible { + transform: none; + } +} diff --git a/assets/css/hero-saas.css b/assets/css/hero-saas.css index 84f88ba..bafe848 100644 --- a/assets/css/hero-saas.css +++ b/assets/css/hero-saas.css @@ -40,9 +40,9 @@ .hero-home__eyebrow { display: inline-block; margin: 0 0 0.85rem; - padding: 0.3rem 0.72rem; + padding: 0.25rem 0.62rem; font-family: var(--openms-font-body); - font-size: var(--openms-text-min); + font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; @@ -98,33 +98,30 @@ align-items: center; justify-content: center; min-height: 2.75rem; - padding: 0.75rem 1.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; - border-radius: 0.5rem; text-decoration: none; - transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, - border-color 0.2s ease; -} - -.hero-home__btn--primary.openms-btn-primary { - border-radius: 0.5rem; } .hero-home__btn--secondary { color: var(--openms-navy); background: var(--openms-white); border: 2px solid rgba(var(--openms-navy-rgb), 0.18); - box-shadow: none; + border-radius: var(--openms-btn-pill-radius, 999px); + box-shadow: 0 0 0 0 rgba(var(--openms-blue-rgb), 0.18); + transition: var(--openms-btn-motion, transform 0.35s cubic-bezier(0.44, 0, 0.56, 1), + box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1)); } .hero-home__btn--secondary:hover, .hero-home__btn--secondary:focus-visible { - border-color: rgba(var(--openms-blue-rgb), 0.45); - color: var(--openms-blue); - transform: translateY(-2px); + border-color: rgba(var(--openms-navy-rgb), 0.18); + color: var(--openms-navy); + transform: scale(var(--openms-btn-hover-scale, 1.03)); + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-blue-rgb), 0.18); outline: none; } diff --git a/assets/css/hero.css b/assets/css/hero.css index d9663cf..937d8c2 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -352,14 +352,14 @@ align-items: center; justify-content: center; min-height: 2.75rem; - padding: 0.75rem 1.75rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); font-size: var(--openms-body-size-lg); font-weight: 600; - border-radius: 0.5rem; + border-radius: var(--openms-btn-pill-radius, 999px); text-decoration: none; cursor: pointer; - transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, - border-color 0.2s ease, color 0.2s ease; + 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 { @@ -379,14 +379,15 @@ color: var(--openms-white); background: var(--openms-blue-secondary); border: 2px solid var(--openms-blue-secondary); - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-secondary-rgb), 0.35); + box-shadow: 0 0 0 0 rgba(var(--openms-blue-secondary-rgb), 0.22); } -.hero-modern__btn--primary:hover { - transform: translateY(-2px); - background: var(--openms-navy); - border-color: var(--openms-navy); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); +.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); } @@ -395,11 +396,15 @@ 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 { - background: rgba(var(--openms-white-rgb), 0.25); - border-color: var(--openms-yellow); +.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); } @@ -763,7 +768,7 @@ width: 100%; box-sizing: border-box; min-height: 2.75rem; - padding: 0.75rem 1.25rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); } .hero-modern__visual { diff --git a/assets/css/home.css b/assets/css/home.css index 58deae8..fd6a130 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -9,11 +9,220 @@ --home-head: clamp(1.85rem, 3.8vw, 2.65rem); --home-lead: var(--openms-body-size-lg); --home-line: rgba(var(--openms-navy-rgb), 0.1); + --home-reveal-distance: 1.5rem; + --home-reveal-duration: 0.65s; + --home-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); + --home-bg-base: #ffffff; + --home-bg-soft: #f4f6fa; + --home-bg-mist: #f8fafc; display: flex; flex-direction: column; margin: 0; padding: 0; - background: var(--openms-white); + background: var(--home-bg-base); +} + +/* ── Section background blends (smooth transitions between blocks) ── */ +.home-page__hero .hero-home { + background: linear-gradient( + 180deg, + var(--home-bg-base) 0%, + var(--home-bg-base) 84%, + var(--home-bg-mist) 100% + ); +} + +.home-page__block--partners { + background: linear-gradient( + 180deg, + var(--home-bg-mist) 0%, + var(--home-bg-base) 14%, + var(--home-bg-base) 72%, + var(--home-bg-soft) 100% + ); +} + +.home-page__block--projects:has(+ .home-page__block--overview) { + background: linear-gradient( + 180deg, + var(--home-bg-soft) 0%, + var(--home-bg-soft) 76%, + var(--home-bg-base) 100% + ); +} + +.home-page__block--projects:not(:has(+ .home-page__block--overview)) { + background: linear-gradient( + 180deg, + var(--home-bg-soft) 0%, + var(--home-bg-soft) 76%, + var(--home-bg-mist) 100% + ); +} + +.home-page__block--overview { + background: linear-gradient( + 180deg, + var(--home-bg-base) 0%, + var(--home-bg-base) 14%, + var(--home-bg-base) 76%, + var(--home-bg-mist) 100% + ); +} + +/* ── Homepage scroll / load reveal ── */ +.home-page--motion .home-page__block--partners, +.home-page--motion .home-page__block--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--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 — scroll in from the sides */ +.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__content { + opacity: 0; + transform: translate3d(-2.75rem, 0, 0); +} + +.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__aside { + opacity: 0; + transform: translate3d(2.75rem, 0, 0); +} + +.home-page--motion .home-page__cta .contact-home__content, +.home-page--motion .home-page__cta .contact-home__aside { + 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__content { + opacity: 1; + transform: translate3d(0, 0, 0); + transition-delay: 0.1s; +} + +.home-page--motion .home-page__cta.is-revealed .contact-home__aside { + opacity: 1; + transform: translate3d(0, 0, 0); + transition-delay: 0.22s; +} + +/* Hero — load entrance (copy from left, panel from right, bento cards stagger) */ +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home::before { + opacity: 0; +} + +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__eyebrow, +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__title, +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__description, +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__note, +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__actions .hero-home__btn { + opacity: 0; + transform: translate3d(-0.85rem, 1.1rem, 0); +} + +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__panel { + opacity: 0; + transform: translate3d(1.35rem, 0.5rem, 0) scale(0.97); +} + +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__bento-card { + opacity: 0; + transform: translate3d(0, 1rem, 0) scale(0.96); +} + +.home-page--motion .home-page__hero .hero-home::before { + transition: opacity 0.9s var(--home-reveal-ease); +} + +.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__note, +.home-page--motion .home-page__hero .hero-home__actions .hero-home__btn, +.home-page--motion .home-page__hero .hero-home__panel, +.home-page--motion .home-page__hero .hero-home__bento-card { + transition: + opacity 0.75s var(--home-reveal-ease), + transform 0.75s var(--home-reveal-ease); +} + +.home-page--motion .home-page__hero.is-revealed .hero-home::before { + opacity: 1; + transition-delay: 0.05s; +} + +.home-page--motion .home-page__hero.is-revealed .hero-home__eyebrow { + opacity: 1; + transform: translate3d(0, 0, 0); + transition-delay: 0.08s; +} + +.home-page--motion .home-page__hero.is-revealed .hero-home__title { + opacity: 1; + transform: translate3d(0, 0, 0); + transition-delay: 0.18s; +} + +.home-page--motion .home-page__hero.is-revealed .hero-home__description { + opacity: 1; + transform: translate3d(0, 0, 0); + transition-delay: 0.3s; +} + +.home-page--motion .home-page__hero.is-revealed .hero-home__actions .hero-home__btn { + opacity: 1; + transform: translate3d(0, 0, 0); + transition-delay: calc(0.42s + var(--hero-reveal-index, 0) * 0.1s); +} + +.home-page--motion .home-page__hero.is-revealed .hero-home__note { + opacity: 1; + transform: translate3d(0, 0, 0); + transition-delay: 0.58s; +} + +.home-page--motion .home-page__hero.is-revealed .hero-home__panel { + opacity: 1; + transform: translate3d(0, 0, 0) scale(1); + transition-delay: 0.22s; +} + +.home-page--motion .home-page__hero.is-revealed .hero-home__bento-card { + opacity: 1; + transform: translate3d(0, 0, 0) scale(1); + transition-delay: calc(0.34s + var(--hero-reveal-index, 0) * 0.11s); +} + +.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, @@ -101,7 +310,13 @@ ═══════════════════════════════════════════ */ .home-page__trust { padding: var(--home-section-pad) var(--home-pad-x); - background: var(--openms-white); + 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; } @@ -694,7 +909,7 @@ --kf-section-pad-block: var(--home-section-pad); margin: 0; padding: var(--home-section-pad) var(--home-pad-x); - background: var(--openms-white); + background: transparent; border: none; color: var(--openms-navy); } @@ -923,7 +1138,7 @@ ═══════════════════════════════════════════ */ .home-page__block--projects .webapps-featured--home { padding: var(--home-section-pad) var(--home-pad-x); - background: #f4f6fa; + background: transparent; color: var(--openms-navy); border: none; } @@ -1030,6 +1245,38 @@ height: 100%; } +.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); +} + .home-page__block--projects .webapps-project-card--bento { display: flex; width: 100%; @@ -1135,8 +1382,7 @@ } .home-page__block--projects .webapps-featured__show-all { - border-radius: 0.5rem; - padding: 0.75rem 1.75rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); } /* ═══════════════════════════════════════════ @@ -1144,18 +1390,21 @@ ═══════════════════════════════════════════ */ .home-page__block--partners .uni-partners--home { padding: var(--home-section-pad) 0; - background: var(--openms-white); + background: transparent; border: none; } .home-page__block--partners .uni-partners--home .uni-partners__inner { - max-width: none; + width: min(100%, 60rem); + max-width: 60rem; + margin-inline: auto; + padding-inline: var(--home-pad-x); } .home-page__block--partners .uni-partners--home .uni-partners__header--trust { - max-width: none; + max-width: 44rem; margin: 0 auto; - padding-inline: var(--home-pad-x); + padding-inline: 0; text-align: center; } @@ -1184,29 +1433,33 @@ .home-page__block--partners .uni-partners--home .uni-partners__marquee::before, .home-page__block--partners .uni-partners--home .uni-partners__marquee::after { - width: clamp(3rem, 8vw, 6rem); + width: clamp(2.5rem, 6vw, 4.5rem); } .home-page__block--partners .uni-partners--home .uni-partners__track { - padding: 0.35rem 0; - animation-duration: 36s; + padding: 0.15rem 0; + animation-duration: 32s; } .home-page__block--partners .uni-partners--home .uni-partners__row { - gap: clamp(2.5rem, 6vw, 4.5rem); - padding: 0 clamp(2rem, 5vw, 3.5rem); + gap: clamp(1.5rem, 3.5vw, 2.25rem); + padding: 0 clamp(1.25rem, 3vw, 2rem); } .home-page__block--partners .uni-partners--home { - --uni-home-logo-w: clamp(10rem, 14vw, 12.5rem); - --uni-home-logo-h: clamp(3.25rem, 5.5vh, 4rem); + --uni-home-logo-slot-w: 8.5rem; + --uni-home-logo-slot-h: 3.25rem; } .home-page__block--partners .uni-partners--home .uni-partners__item { - flex: 0 0 var(--uni-home-logo-w); - width: var(--uni-home-logo-w); - height: var(--uni-home-logo-h); - min-width: var(--uni-home-logo-w); + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 var(--uni-home-logo-slot-w); + width: var(--uni-home-logo-slot-w); + height: var(--uni-home-logo-slot-h); + min-width: var(--uni-home-logo-slot-w); + max-width: var(--uni-home-logo-slot-w); padding: 0; border: none; border-radius: 0; @@ -1220,10 +1473,11 @@ } .home-page__block--partners .uni-partners--home .uni-partners__item img { - width: var(--uni-home-logo-w); - height: var(--uni-home-logo-h); - max-width: var(--uni-home-logo-w); - max-height: var(--uni-home-logo-h); + display: block; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; object-fit: contain; object-position: center; opacity: 0.55; @@ -1238,13 +1492,19 @@ } @media (max-width: 768px) { + .home-page__block--partners .uni-partners--home .uni-partners__inner { + width: min(100%, 37rem); + max-width: 37rem; + } + .home-page__block--partners .uni-partners--home { - --uni-home-logo-w: 9rem; - --uni-home-logo-h: 3.25rem; + --uni-home-logo-slot-w: 6.75rem; + --uni-home-logo-slot-h: 2.65rem; } .home-page__block--partners .uni-partners--home .uni-partners__row { - gap: 2rem; + gap: 1.35rem; + padding-inline: 1rem; } } @@ -1373,6 +1633,29 @@ } @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__content, + .home-page--motion .home-page__cta .contact-home__aside, + .home-page--motion .home-page__hero .hero-home::before, + .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__note, + .home-page--motion .home-page__hero .hero-home__panel, + .home-page--motion .home-page__hero .hero-home__bento-card, + .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--bento .webapps-project-card__surface:hover, .home-page__block--projects .webapps-project-card__surface:hover, diff --git a/assets/css/navbar-responsive.css b/assets/css/navbar-responsive.css index 9d489ee..e3db982 100644 --- a/assets/css/navbar-responsive.css +++ b/assets/css/navbar-responsive.css @@ -301,7 +301,7 @@ .site-header #nav.navbar.is-fresh .navbar-actions, #navbar-clone.navbar.is-fresh .navbar-actions { - gap: 0.35rem; + gap: 0.65rem; } .navbar.is-fresh .navbar-item, @@ -320,7 +320,7 @@ #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary, #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate { min-height: 2.35rem; - padding: 0.45rem 1rem !important; + padding: 0.45rem 0.9rem !important; font-size: 0.875rem; } } @@ -555,7 +555,7 @@ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; - gap: 0.5rem; + gap: calc(var(--openms-btn-glow-size, 6px) * 2 + 0.85rem); width: 100%; flex-shrink: 0; margin-top: 0; @@ -587,11 +587,71 @@ width: 100% !important; max-width: none; min-height: 2.75rem; - padding: 0.65rem 1.25rem !important; - border-radius: 0.65rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem) !important; + border-radius: var(--openms-btn-pill-radius, 999px); + border-bottom: none !important; font-size: 0.9375rem; text-align: center; white-space: nowrap; + transition: var(--openms-btn-motion, transform 0.35s cubic-bezier(0.44, 0, 0.56, 1), + box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1)); + } + + /* Framer CTA — override flat mobile nav link styles */ + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta { + border: 2px solid var(--openms-blue) !important; + background: var(--openms-blue) !important; + background-color: var(--openms-blue) !important; + color: var(--openms-white) !important; + box-shadow: 0 0 0 0 var(--openms-btn-glow, rgba(var(--openms-blue-rgb), 0.22)) !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate { + border: 2px solid var(--openms-blue) !important; + background: transparent !important; + background-color: transparent !important; + color: var(--openms-blue) !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:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-blue) !important; + color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale, 1.03)); + 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.openms-btn-primary .navbar-cta-label, @@ -613,10 +673,10 @@ display: none !important; } - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .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-clone.navbar.is-fresh .navbar-menu .navbar-item, + #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 { width: 100%; @@ -878,7 +938,7 @@ min-height: 2.65rem; padding: 0.55rem 0.75rem !important; font-size: 0.8125rem; - border-radius: 0.55rem; + border-radius: var(--openms-btn-pill-radius, 999px); } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-links, @@ -888,11 +948,11 @@ padding: 0.5rem 0; } - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .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, + #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 { @@ -932,11 +992,11 @@ box-shadow: none; } - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .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, + #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 { @@ -1133,10 +1193,10 @@ visibility: visible; } - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item, + .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, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link { padding-left: 1.35rem; @@ -1163,7 +1223,7 @@ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas--menu { grid-template-columns: 1fr; - gap: 0.45rem; + gap: 0.75rem; padding: 0.75rem 1rem 0.65rem; } @@ -1197,6 +1257,13 @@ #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { transition: none; } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:focus-visible, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item:focus-visible { + transform: none; + } } } diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css index 3134b1e..af06b3a 100644 --- a/assets/css/news-banner.css +++ b/assets/css/news-banner.css @@ -1,28 +1,11 @@ -/* Site announcement — same visual language as hero-modern */ +/* Site announcement — light band for readability (aligned with page heroes) */ .news-banner { position: relative; z-index: 100; overflow: hidden; - color: var(--openms-white); - background: var(--openms-navy); - border-bottom: 1px solid rgba(var(--openms-white-rgb), 0.1); -} - -.news-banner::before { - content: ""; - position: absolute; - top: -120%; - right: -5%; - width: 18rem; - height: 18rem; - border-radius: 50%; - pointer-events: none; - background: radial-gradient( - circle, - rgba(var(--openms-white-rgb), 0.1) 0%, - transparent 70% - ); + color: var(--openms-navy); + background: #f4f6f9; } .news-banner__inner { @@ -33,81 +16,78 @@ justify-content: center; max-width: 75rem; margin: 0 auto; - padding: 0.875rem clamp(1.25rem, 4vw, 2.5rem); + padding: 1rem clamp(1.25rem, 4vw, 2.5rem); } -.news-banner__header { +.news-banner__content { display: flex; + flex-wrap: wrap; align-items: center; justify-content: center; - gap: 0.75rem 1rem; - margin: 0; - min-width: 0; - max-width: 100%; - width: auto; + gap: 0.65rem 0.85rem; + width: min(100%, 52rem); + margin: 0 auto; text-align: center; } .news-banner__eyebrow { flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; margin: 0; - padding: 0.08rem 0.42rem; + padding: 0.28rem 0.72rem; font-family: var(--openms-font-body); - font-size: 0.68rem; - font-weight: 600; + font-size: 0.72rem; + font-weight: 700; line-height: 1.2; - letter-spacing: 0.05em; + letter-spacing: 0.06em; text-transform: uppercase; color: var(--openms-white); background: var(--openms-orange); - border: 1px solid var(--openms-orange); - border-radius: 0.25rem; + border: 1px solid color-mix(in srgb, var(--openms-orange) 88%, var(--openms-navy)); + border-radius: 999px; + box-shadow: 0 1px 2px rgba(var(--openms-navy-rgb), 0.12); } .news-banner__headline { margin: 0; min-width: 0; flex: 0 1 auto; + max-width: 42rem; font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); - font-weight: var(--openms-body-weight); - line-height: 1.45; - color: rgba(var(--openms-white-rgb), 0.94); + font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); + font-weight: 700; + line-height: 1.55; + color: var(--openms-navy); + text-align: center; text-wrap: pretty; } @media (max-width: 768px) { .news-banner__inner { - padding-block: 0.85rem; - } - - .news-banner__header { - flex-direction: row; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 0.55rem; + padding-block: 0.95rem; } .news-banner__headline { - font-size: clamp(0.9rem, 2.8vw, 1rem); - line-height: 1.4; + font-size: clamp(0.9375rem, 2.9vw, 1.02rem); + line-height: 1.5; } } @media (max-width: 520px) { .news-banner__inner { - padding: 0.75rem 1rem; + padding: 0.9rem 1rem; } .news-banner__eyebrow { - padding: 0.08rem 0.36rem; - font-size: 0.62rem; + padding: 0.24rem 0.62rem; + font-size: 0.68rem; } .news-banner__headline { - font-size: 0.88rem; - line-height: 1.35; + font-size: 0.9375rem; + line-height: 1.5; overflow-wrap: break-word; } } diff --git a/assets/css/news-section.css b/assets/css/news-section.css index 9c2b5f2..9b0321f 100644 --- a/assets/css/news-section.css +++ b/assets/css/news-section.css @@ -1,20 +1,41 @@ -/* News — governance layout (listing & single articles) */ +/* News — listing & single articles */ + +.news-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --news-max: 64rem; + + display: block; + width: 100%; + max-width: none; + 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); +} .news-page { margin-top: 0; } -.news-page-layout__container { - max-width: min(100%, 64rem); +.news-page-hero { + margin-bottom: var(--olib-section-y); } -.news-page-layout .governance-hero { - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - padding-left: clamp(2rem, 5vw, 3.5rem); - padding-right: clamp(1.25rem, 3vw, 2rem); +.news-page-hero--article .openms-lib-hero__title { + max-width: 28ch; +} + +.news-page-hero--article .openms-lib-hero__content { + max-width: 52rem; } .news-page__main { @@ -294,6 +315,132 @@ display: none; } +/* Navbar-style CTA motion (news page) */ +.news-page-layout .openms-lib-btn, +.news-page-layout .news-card__read-more, +.news-page-layout .news-page__year-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); + cursor: pointer; +} + +.news-page-layout .openms-lib-btn--primary, +.news-page-layout .news-page__year-btn.is-active { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.news-page-layout .openms-lib-btn--ghost, +.news-page-layout .news-card__read-more, +.news-page-layout .news-page__year-btn:not(.is-active) { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.news-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.news-page-layout .news-page__years { + gap: 0.75rem; +} + +.news-page-layout .openms-lib-btn--primary:hover, +.news-page-layout .openms-lib-btn--primary:focus-visible, +.news-page-layout .openms-lib-btn--primary:active, +.news-page-layout .news-page__year-btn.is-active:hover, +.news-page-layout .news-page__year-btn.is-active:focus-visible, +.news-page-layout .news-page__year-btn.is-active: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; +} + +.news-page-layout .openms-lib-btn--ghost:hover, +.news-page-layout .openms-lib-btn--ghost:focus-visible, +.news-page-layout .openms-lib-btn--ghost:active, +.news-page-layout .news-card__read-more:hover, +.news-page-layout .news-card__read-more:focus-visible, +.news-page-layout .news-card__read-more:active, +.news-page-layout .news-page__year-btn:not(.is-active):hover, +.news-page-layout .news-page__year-btn:not(.is-active):focus-visible, +.news-page-layout .news-page__year-btn:not(.is-active):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; +} + +.news-page-layout .openms-lib-btn--primary:focus-visible, +.news-page-layout .news-page__year-btn.is-active: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); +} + +.news-page-layout .openms-lib-btn--ghost:focus-visible, +.news-page-layout .news-card__read-more:focus-visible, +.news-page-layout .news-page__year-btn:not(.is-active):focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +@media (max-width: 720px) { + .news-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .news-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .news-page-hero--article .openms-lib-hero__title { + max-width: none; + } + + .news-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .news-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .news-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + @media (max-width: 768px) { .news-page__toolbar { flex-direction: column; @@ -448,26 +595,26 @@ align-items: center; gap: 0.35rem; min-height: 2.75rem; - padding: 0.75rem 1.75rem; - border-radius: 0.5rem; + 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.5rem 1.5rem rgba(var(--openms-navy-rgb), 0.35); + 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: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, - border-color 0.2s ease; + 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: translateY(-2px); - background: var(--openms-blue); - border-color: var(--openms-blue); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + 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); } @@ -488,4 +635,13 @@ .news-article__back-link:focus-visible { transform: none; } + + .news-page-layout .openms-lib-btn:hover, + .news-page-layout .openms-lib-btn:focus-visible, + .news-page-layout .news-card__read-more:hover, + .news-page-layout .news-card__read-more:focus-visible, + .news-page-layout .news-page__year-btn:hover, + .news-page-layout .news-page__year-btn:focus-visible { + transform: none; + } } diff --git a/assets/css/openms-buttons.css b/assets/css/openms-buttons.css index 8ea9056..355913a 100644 --- a/assets/css/openms-buttons.css +++ b/assets/css/openms-buttons.css @@ -1,3 +1,17 @@ +/* Shared CTA system — Framer-style pill + glow ring on hover (no fill/color shift) */ + +:root { + --openms-btn-pill-radius: 999px; + --openms-btn-glow: rgba(var(--openms-blue-rgb), 0.22); + --openms-btn-glow-size: 6px; + --openms-btn-hover-scale: 1.03; + --openms-btn-padding-y: 0.7rem; + --openms-btn-padding-x: 1.25rem; + --openms-btn-padding: var(--openms-btn-padding-y) var(--openms-btn-padding-x); + --openms-btn-motion: transform 0.35s cubic-bezier(0.44, 0, 0.56, 1), + box-shadow 0.35s cubic-bezier(0.44, 0, 0.56, 1); +} + /* Primary blue CTA — same design as Contact us (.openms-step__cta) */ .openms-btn-primary, @@ -17,8 +31,8 @@ gap: 0.35rem; width: fit-content; min-height: 2.75rem; - padding: 0.75rem 1.75rem; - border-radius: 0.5rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); border: 2px solid var(--openms-blue); background: var(--openms-blue); color: var(--openms-white) !important; @@ -28,8 +42,8 @@ line-height: 1.3; text-decoration: none; white-space: nowrap; - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.35); - transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); } .openms-btn-primary:visited, @@ -47,30 +61,42 @@ .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 { - background: var(--openms-navy); - border-color: var(--openms-navy); +.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: none; - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + 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, @@ -85,43 +111,25 @@ .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.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + 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.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !important; -} - -/* Default + hover — force Contact us colors (overrides Bulma .navbar-item / .button) */ -.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; -} - -.footer-redesign .footer-sponsor-btn:hover, -.footer-redesign .footer-sponsor-btn:focus-visible, -.footer-redesign .footer-sponsor-btn:active { - background: var(--openms-navy) !important; - background-color: var(--openms-navy) !important; - border-color: var(--openms-navy) !important; - color: var(--openms-white) !important; - transform: translateY(-2px); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !important; + 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 { +.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; @@ -129,32 +137,6 @@ color: var(--openms-white) !important; } -.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-navy) !important; - background-color: var(--openms-navy) !important; - border-color: var(--openms-navy) !important; - color: var(--openms-white) !important; - transform: translateY(-2px); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !important; -} - .contact-area__actions .contact-area__cta:hover, .contact-area__actions .contact-area__cta:focus-visible, .contact-area__actions .contact-area__cta:active { @@ -166,7 +148,6 @@ width: 100%; } -/* Hero on navy — keep white text; primary uses brand blue */ .hero-modern__btn.openms-btn-primary { font-family: var(--openms-font-body); font-size: var(--openms-text-min); @@ -175,13 +156,6 @@ color: var(--openms-white) !important; } -.hero-modern__btn.openms-btn-primary:hover, -.hero-modern__btn.openms-btn-primary:focus-visible { - background: var(--openms-navy) !important; - border-color: var(--openms-navy) !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, @@ -191,12 +165,18 @@ .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: 0.75rem 1.75rem !important; + padding: var(--openms-btn-padding) !important; min-height: 2.75rem; font-size: var(--openms-text-min); line-height: 1.3; } +/* Extra space between Sponsor and Donate — room for hover glow + scale */ +.navbar.is-fresh .navbar-actions .navbar-cta-item + .navbar-cta-item, +#navbar-clone.navbar.is-fresh .navbar-actions .navbar-cta-item + .navbar-cta-item { + margin-inline-start: calc(var(--openms-btn-glow-size) * 2 + 0.85rem); +} + .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-btn-primary .navbar-cta-label, .navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta .navbar-cta-label, .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate .navbar-cta-label, @@ -212,7 +192,7 @@ line-height: inherit; } -/* Outline Donate CTA — blue border, no fill (fills on hover) */ +/* Outline Donate CTA — blue border, no fill */ .about-cta-btn--donate, .footer-redesign .footer-donate-btn.signup-button.secondary-btn, @@ -221,8 +201,8 @@ align-items: center; justify-content: center; min-height: 2.75rem; - padding: 0.75rem 1.75rem; - border-radius: 0.5rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); border: 2px solid var(--openms-blue); background: transparent; background-color: transparent; @@ -233,9 +213,8 @@ font-weight: 600; line-height: 1.3; white-space: nowrap; - box-shadow: none; - transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, - box-shadow 0.2s ease; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); } .about-cta-btn--donate:visited, @@ -245,50 +224,63 @@ .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 { - background: var(--openms-blue); - background-color: var(--openms-blue); +.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-white) !important; - transform: translateY(-2px); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + 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.75rem 2rem rgba(var(--openms-blue-rgb), 0.35); + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); } +/* Footer donate — white text on navy footer, Framer glow on hover */ .footer-redesign .footer-donate-btn.signup-button.secondary-btn, .footer-redesign .footer-donate-btn.signup-button.secondary-btn:visited { min-height: 2.75rem; - padding: 0.75rem 1.75rem !important; + height: auto !important; + padding: var(--openms-btn-padding) !important; font-size: var(--openms-text-min) !important; line-height: 1.3 !important; + border-radius: var(--openms-btn-pill-radius) !important; background: transparent !important; background-color: transparent !important; border: 2px solid var(--openms-blue) !important; border-color: var(--openms-blue) !important; color: var(--openms-white) !important; - box-shadow: none !important; + text-decoration: none; + text-shadow: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow) !important; + transition: var(--openms-btn-motion) !important; } .footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, -.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible { - background: var(--openms-blue) !important; - background-color: var(--openms-blue) !important; +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible, +.footer-redesign .footer-donate-btn.signup-button.secondary-btn:active { + background: transparent !important; + background-color: transparent !important; border-color: var(--openms-blue) !important; color: var(--openms-white) !important; - transform: translateY(-2px); - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow) !important; + outline: none; + text-decoration: none; + text-shadow: none; } .footer-redesign .footer-donate-btn.signup-button.secondary-btn:focus-visible { box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), - 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !important; + 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, @@ -299,7 +291,6 @@ border: 2px solid var(--openms-blue) !important; border-color: var(--openms-blue) !important; color: var(--openms-blue) !important; - box-shadow: none !important; } .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, @@ -311,11 +302,10 @@ .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, .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active { - background: var(--openms-blue) !important; - background-color: var(--openms-blue) !important; + background: transparent !important; + background-color: transparent !important; border-color: var(--openms-blue) !important; - color: var(--openms-white) !important; - box-shadow: 0 0.75rem 2rem rgba(var(--openms-blue-rgb), 0.35) !important; + color: var(--openms-blue) !important; } @media (prefers-reduced-motion: reduce) { @@ -327,12 +317,6 @@ .about-cta-btn--sponsor:focus-visible, .footer-redesign .footer-sponsor-btn:hover, .footer-redesign .footer-sponsor-btn:focus-visible, - .openms-btn-primary:hover, - .openms-btn-primary:focus-visible, - .openms-step__cta:hover, - .openms-step__cta: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, @@ -340,10 +324,7 @@ #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 { - transform: none; - } - + #navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.openms-step__cta:focus-visible, .about-cta-btn--donate:hover, .about-cta-btn--donate:focus-visible, .footer-redesign .footer-donate-btn.signup-button.secondary-btn:hover, @@ -351,7 +332,13 @@ .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-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, + .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:hover, + .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-btn-primary:focus-visible, + .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:hover, + .navbar-menu .navbar-mobile-ctas .navbar-cta-item.openms-step__cta:focus-visible, + .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover, + .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible { transform: none; } } diff --git a/assets/css/openms-lib.css b/assets/css/openms-lib.css index c8854f2..58e9468 100644 --- a/assets/css/openms-lib.css +++ b/assets/css/openms-lib.css @@ -1,591 +1,1593 @@ -/* OpenMS-lib (Infrastructure) — same width rhythm as news */ +/* OpenMS-lib — unified section & list-row design system */ .openms-lib-layout .shortcuts-container, .content-padding:has(.openms-lib-layout) .shortcuts-container { display: none; } -.content-padding:has(.openms-lib-layout) .content-container, -.content-container.openms-lib-layout__container { - max-width: min(100%, 64rem); +.openms-lib-layout { + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.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(4rem, 8vh, 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(1.5rem, 3vw, 2.5rem); + + color: var(--openms-navy); + background: var(--openms-white); +} + +.openms-lib-page__intro { width: 100%; + max-width: none; + margin-inline: 0; + padding-inline: 0; +} + +.openms-lib-page__body, +.openms-lib-page__outro { + width: min(100%, var(--olib-max)); + max-width: var(--olib-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); + overflow-x: clip; +} + +.openms-lib-page__anchor { + scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem); } -.openms-lib-layout__shell { +.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-lib-page { +.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(2rem, 4vw, 3rem); + 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; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--olib-text-muted); + background: none; + border: none; + border-radius: 0; +} + +.openms-lib-block__eyebrow::before, +.keyfeatures-modern--overview .keyfeatures-modern__eyebrow::before, +.openms-steps--lib-list .openms-steps__eyebrow::before { + content: ""; + flex-shrink: 0; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: var(--openms-blue); +} + +.openms-lib-block__title, +.keyfeatures-modern--overview .keyfeatures-modern__title, +.openms-steps--lib-list .openms-steps__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.75rem, 3.4vw, 2.5rem); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.1; + letter-spacing: -0.02em; + color: var(--openms-navy); + text-wrap: balance; +} + +.openms-lib-block__title-accent, +.keyfeatures-modern--overview .keyfeatures-modern__title-accent { + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.openms-steps--lib-list .openms-steps__title-accent { + color: var(--openms-blue); + background: none; + -webkit-text-fill-color: currentColor; +} + +.openms-lib-block__lead, +.keyfeatures-modern--overview .keyfeatures-modern__lead, +.openms-steps--lib-list .openms-steps__subtitle { + margin: 0.35rem 0 0; + max-width: 42ch; + font-size: var(--openms-body-size-lg); + line-height: 1.65; + color: var(--olib-text-muted); + text-align: center; +} + +.openms-lib-block__lead p, +.keyfeatures-modern--overview .keyfeatures-modern__lead p { + margin: 0; +} + +.openms-lib-block__lead a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: none; +} + +.openms-lib-block__lead a:hover, +.openms-lib-block__lead a:focus-visible { + color: var(--openms-navy); + text-decoration: underline; +} + +/* ── Shared list container ── */ +.openms-lib-list, +.keyfeatures-modern--overview .keyfeatures-modern__topics, +.openms-steps--lib-list .openms-steps__grid { + display: flex; + flex-direction: column; + gap: 0; + margin: 0; + padding: 0; + list-style: none; + border: 1px solid var(--olib-line); + border-radius: 0.65rem; + overflow: hidden; + background: var(--openms-white); } -/* Intro / outro — readable column (About rhythm) */ -.openms-lib-page__intro.governance-page, -.openms-lib-page__outro.governance-page { +.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--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; - gap: clamp(2rem, 3.8vw, 3.2rem); + 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--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--tiles):not(.openms-lib-list--resource-grid) + .openms-lib-list__row:focus-within, +.keyfeatures-modern--overview:not(.keyfeatures-modern--lib-tiles) .keyfeatures-modern__topic-card--overview:hover, +.keyfeatures-modern--overview:not(.keyfeatures-modern--lib-tiles) .keyfeatures-modern__topic-card--overview:focus-within, +.openms-steps--lib-list:not(.openms-steps--lib-capabilities):not(.openms-steps--lib-developers) .openms-step--list-row:hover, +.openms-steps--lib-list:not(.openms-steps--lib-capabilities):not(.openms-steps--lib-developers) .openms-step--list-row:focus-within { + background: var(--olib-bg-soft); +} + +.openms-lib-list__index, +.keyfeatures-modern--overview .keyfeatures-modern__topic-index, +.openms-steps--lib-list .openms-step__index { + grid-area: index; + display: block; + align-self: start; + margin-top: 0.15rem; + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 2vw, 1.55rem); + font-weight: 800; + line-height: 1; + letter-spacing: -0.03em; + color: rgba(var(--openms-blue-rgb), 0.22); +} + +.openms-lib-list__media, +.keyfeatures-modern--overview .keyfeatures-modern__topic-media, +.openms-steps--lib-list .openms-step__media { + grid-area: media; + display: flex; + align-items: center; + justify-content: center; + width: var(--olib-thumb); + height: var(--olib-thumb); + margin: 0; + padding: 0.55rem; + border: 1px solid var(--olib-line); + border-radius: 0.5rem; + background: var(--olib-bg-soft); + overflow: hidden; +} + +.openms-lib-list__mark, +.keyfeatures-modern--overview .keyfeatures-modern__topic-mark { + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 2vw, 1.6rem); + font-weight: 800; + line-height: 1; + color: var(--openms-blue); +} + +.openms-lib-list__img, +.keyfeatures-modern--overview .keyfeatures-modern__topic-img, +.openms-steps--lib-list .openms-step__img, +.openms-steps--lib-list .openms-step__img.img-fit { + display: block; + width: auto; + max-width: 100%; + height: auto; + max-height: var(--olib-img-max); + min-height: 0; + margin: 0 auto; + object-fit: contain; + object-position: center; + filter: none; +} + +.openms-lib-list__body, +.keyfeatures-modern--overview .keyfeatures-modern__topic-body, +.openms-steps--lib-list .openms-step__content { + grid-area: content; + display: flex; + flex-direction: column; + gap: 0.4rem; + min-width: 0; + padding: 0; +} + +.openms-lib-list__tags, +.keyfeatures-modern--overview .keyfeatures-modern__topic-tags, +.openms-steps--lib-list .openms-step__tags { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; +} + +.openms-lib-list__tag, +.keyfeatures-modern--overview .keyfeatures-modern__topic-tag, +.openms-steps--lib-list .openms-step__tag { + display: inline-flex; + margin: 0; + padding: 0.18rem 0.5rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.07); + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + border-radius: 999px; +} + +.openms-lib-list__title, +.keyfeatures-modern--overview .keyfeatures-modern__topic-title, +.openms-steps--lib-list .openms-step__title { + margin: 0; + padding: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-secondary-heading-size-lg); + font-weight: var(--openms-secondary-heading-weight); + line-height: 1.35; + color: var(--openms-navy); +} + +.openms-lib-list__text, +.keyfeatures-modern--overview .keyfeatures-modern__topic-text, +.openms-steps--lib-list .openms-step__subtitle { + margin: 0; + max-width: 52ch; + font-size: var(--openms-body-size); + line-height: 1.62; + color: var(--olib-text-muted); +} + +.openms-lib-list__bullets { + margin: 0.15rem 0 0; + padding-left: 1.15rem; + font-size: var(--openms-body-size); + line-height: 1.6; + color: var(--olib-text-muted); +} + +.openms-lib-list__bullets li + li { + margin-top: 0.25rem; +} + +.openms-lib-list__bullets a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: none; +} + +.openms-lib-list__bullets a:hover, +.openms-lib-list__bullets a:focus-visible { + text-decoration: underline; +} + +.openms-lib-list__link, +.openms-steps--lib-list .openms-step__cta { + display: inline-flex; + align-items: center; + align-self: flex-start; + gap: 0.3rem; + margin-top: 0.25rem; + padding: 0; + min-height: 0; + width: auto; + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-blue) !important; + background: none; + border: none; + border-radius: 0; + box-shadow: none; + text-decoration: none; + transition: color 0.15s ease; +} + +.openms-lib-list__link:hover, +.openms-lib-list__link:focus-visible, +.openms-steps--lib-list .openms-step__cta:hover, +.openms-steps--lib-list .openms-step__cta:focus-visible { + color: var(--openms-navy) !important; + background: none; + border: none; + box-shadow: none; + transform: none; +} + +.openms-steps--lib-list .openms-step__cta-arrow { + transition: transform 0.15s ease; +} + +.openms-steps--lib-list .openms-step__cta:hover .openms-step__cta-arrow, +.openms-steps--lib-list .openms-step__cta:focus-visible .openms-step__cta-arrow { + transform: translateX(0.15rem); +} + +/* ── Shared footnote ── */ +.openms-lib-block__note, +.keyfeatures-modern--overview .keyfeatures-modern__note { max-width: none; + margin: clamp(1rem, 2vw, 1.25rem) 0 0; + padding: clamp(0.85rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.25rem); + font-size: var(--openms-body-size); + line-height: 1.62; + color: var(--olib-text-muted); + background: var(--olib-bg-soft); + border: 1px solid var(--olib-line); + border-radius: 0.65rem; +} + +.openms-lib-block__note p, +.keyfeatures-modern--overview .keyfeatures-modern__note p { margin: 0; - padding-inline: 0; } -.openms-lib-page__intro { - padding-top: 0.5rem; +.openms-lib-block__note a, +.keyfeatures-modern--overview .keyfeatures-modern__note a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: none; +} + +.openms-lib-block__note a:hover, +.openms-lib-block__note a:focus-visible, +.keyfeatures-modern--overview .keyfeatures-modern__note a:hover, +.keyfeatures-modern--overview .keyfeatures-modern__note a:focus-visible { + color: var(--openms-navy); + text-decoration: underline; +} + +/* ── Developer terminal row ── */ +.openms-steps--lib-list .openms-step--terminal .openms-step__media { + padding: 0.5rem; + background: #141820; + border-color: rgba(var(--openms-navy-rgb), 0.2); +} + +.openms-steps--lib-list .openms-step--terminal .openms-step__terminal { + width: 100%; + height: 100%; +} + +.openms-steps--lib-list .openms-step--terminal .openms-step__terminal .terminal-window { + width: 100%; + height: 100%; + min-height: calc(var(--olib-thumb) - 1.1rem); + margin: 0; + border-radius: 0.35rem; + border: 1px solid rgba(var(--openms-white-rgb), 0.1); + box-shadow: none; +} + +.openms-steps--lib-list .openms-step--terminal .terminal-window section.terminal { + font-size: clamp(0.5rem, 0.75vw, 0.62rem); + line-height: 1.45; +} + +/* ── Feature icon (Stratex-style navy tile) ── */ +.openms-lib-feature-icon { + display: flex; + align-items: center; + justify-content: center; + width: 3.35rem; + height: 3.35rem; + margin-inline: auto; + padding: 0.55rem; + border: none; + border-radius: var(--olib-radius-sm); + background: var(--openms-navy); + box-shadow: none; +} + +.openms-lib-feature-icon .openms-lib-list__mark { + font-family: var(--openms-font-heading); + font-size: 1.15rem; + font-weight: 700; + color: var(--openms-white); +} + +.openms-lib-list--capabilities .openms-lib-feature-icon, +.openms-lib-list--developers .openms-lib-feature-icon, +.openms-steps--lib-capabilities .openms-lib-feature-icon, +.openms-steps--lib-developers .openms-lib-feature-icon { + flex-shrink: 0; + width: 3.35rem; + height: 3.35rem; + min-height: 0; + max-height: 3.35rem; +} + +.openms-lib-feature-icon .openms-lib-list__img, +.openms-lib-feature-icon .openms-step__img, +.openms-steps--lib-capabilities .openms-step__img, +.openms-steps--lib-developers .openms-step__img { + display: block; + width: auto; + max-width: 2rem; + max-height: 2rem; + min-height: 0; + height: auto; + margin: 0; + object-fit: contain; + filter: none; +} + +.openms-lib-feature-icon .openms-step__terminal, +.openms-lib-feature-icon .openms-step__terminal .terminal-window { + width: 100%; + min-height: 0; + height: 2.35rem; + border-radius: 0.35rem; + overflow: hidden; +} + +.openms-lib-feature-icon .terminal-window section.terminal { + font-size: 0.45rem; + line-height: 1.35; +} + +/* ── Hero (full-viewport background band) ── */ +.openms-lib-hero { + position: relative; + box-sizing: border-box; + width: 100%; + margin: 0 0 var(--olib-section-y); + padding: clamp(2rem, 4.5vw, 3.25rem) var(--olib-pad-x) clamp(2.5rem, 5vw, 3.5rem); + 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--overview { + width: min(100%, var(--olib-max)); + max-width: var(--olib-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.openms-lib-hero + .openms-lib-block--overview { + padding-top: 0; +} + +.openms-lib-hero__content { + position: relative; + width: 100%; + max-width: 46rem; + margin-inline: auto; +} + +.openms-lib-hero__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.45rem; + margin: 0 auto 0.85rem; + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.02em; + text-transform: none; + color: var(--olib-text-muted); +} + +.openms-lib-hero__eyebrow::before { + content: ""; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: var(--openms-blue); +} + +.openms-lib-hero__title { + margin: 0 auto; + max-width: 22ch; + font-family: var(--openms-font-heading); + font-size: clamp(2rem, 4.8vw, 3.2rem); + font-weight: var(--openms-heading-xl-weight); + line-height: 1.08; + letter-spacing: -0.02em; + color: var(--openms-navy); + text-align: center; + text-wrap: balance; +} + +.openms-lib-hero__accent { + color: var(--openms-blue); +} + +.openms-lib-hero__accent--warm { + color: var(--openms-pink); +} + +.openms-lib-hero__lead { + margin: 1rem auto 0; + max-width: 46ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: var(--openms-body-weight); + line-height: 1.65; + color: var(--olib-text-muted); + text-align: center; +} + +.openms-lib-hero__chips { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.45rem; + margin: 1.25rem 0 0; + padding: 0; + list-style: none; +} + +.openms-lib-hero__chip { + display: inline-flex; + padding: 0.32rem 0.7rem; + font-size: 0.72rem; + font-weight: 600; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.07); + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + border-radius: 999px; +} + +.openms-lib-hero__actions { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.75rem; + margin-top: 1.5rem; +} + +/* ── Buttons (hero only) ── */ +.openms-lib-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.5rem; + padding: 0.5rem 1rem; + border-radius: 999px; + border: 1px solid transparent; + font-size: var(--openms-text-min); + font-weight: 600; + text-decoration: none; + transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; +} + +.openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.openms-lib-hero .openms-lib-btn--primary::after { + content: "→"; + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.65rem; + height: 1.65rem; + border-radius: 50%; + font-size: 0.85rem; + line-height: 1; + background: var(--openms-white); + color: var(--openms-navy); +} + +.openms-lib-btn--primary:hover, +.openms-lib-btn--primary:focus-visible { + background: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue)); + border-color: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue)); + color: var(--openms-white) !important; +} + +.openms-lib-btn--ghost { + padding-inline: 0.15rem; + background: transparent; + border-color: transparent; + color: var(--openms-blue) !important; + text-decoration: underline; + text-underline-offset: 0.2em; +} + +.openms-lib-btn--ghost:hover, +.openms-lib-btn--ghost:focus-visible { + background: transparent; + color: var(--openms-navy) !important; +} + +.openms-lib-btn--navy { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.openms-lib-btn--navy:hover, +.openms-lib-btn--navy:focus-visible { + background: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue)); + border-color: color-mix(in srgb, var(--openms-navy) 88%, var(--openms-blue)); + color: var(--openms-white) !important; +} + +.openms-lib-btn--outline { + background: var(--openms-white); + border-color: var(--olib-line); + color: var(--openms-navy) !important; +} + +.openms-lib-btn--outline:hover, +.openms-lib-btn--outline:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.35); + background: var(--olib-bg-soft); + color: var(--openms-navy) !important; +} + +/* ── Navbar-style CTA motion (openms-lib page only) ── */ +.openms-lib-page .openms-lib-btn, +.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta, +.openms-lib-page .openms-steps--openms-lib.openms-steps--lib-developers .openms-step__cta, +.openms-lib-page .openms-lib-block--overview .openms-lib-list__link { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + text-decoration: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.openms-lib-page .openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + 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__outro { - padding-bottom: clamp(2rem, 5vh, 3rem); +.openms-lib-page .openms-lib-btn--navy { + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; } -.openms-lib-layout .openms-lib-page__intro .governance-hero { - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - padding-left: clamp(2rem, 5vw, 3.5rem); - padding-right: clamp(1.25rem, 3vw, 2rem); +.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__infra-btns a.openms-btn-primary { - min-height: 2.5rem; - padding: 0.55rem 1.25rem; - border-radius: 0.5rem; - font-size: var(--openms-text-min); - font-weight: 600; +.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; - background: rgba(var(--openms-white-rgb), 0.14); - border: 1px solid rgba(var(--openms-white-rgb), 0.35); - box-shadow: none; } -.openms-lib-page__infra-btns a.openms-btn-primary:hover, -.openms-lib-page__infra-btns a.openms-btn-primary:focus-visible { - background: rgba(var(--openms-yellow-rgb), 0.28); - border-color: rgba(var(--openms-white-rgb), 0.5); +.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__intro .governance-jump-links { - margin-top: -0.15rem; +.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__anchor { - scroll-margin-top: 5.5rem; +.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); } -/* Capability modules — full width within page column (like governance hero) */ -.openms-lib-page__modules { - display: grid; - gap: 0; - margin-block: clamp(0.5rem, 2vh, 1rem); - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - border-block: 1px solid rgba(var(--openms-navy-rgb), 0.08); - background: var(--openms-white); +.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-band__inner { - width: 100%; - max-width: none; - margin-inline: auto; - padding-inline: clamp(1.25rem, 4vw, 2.5rem); +.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); } -/* ── What is OpenMS? (light governance style) ── */ -.keyfeatures-modern--openms-lib { - --kf-layout-gap: clamp(1.5rem, 3vh, 2rem); - --kf-radius: 0.85rem; +/* ── 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(2rem, 4vw, 2.75rem); + padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.6rem); + border-radius: calc(var(--olib-radius) * 1.1); + text-align: center; + background: var(--olib-bg-soft); + border: 1px solid var(--olib-line); +} + +.openms-lib-page__cta-text { margin: 0; - padding: clamp(2.5rem, 5vh, 3.5rem) 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; color: var(--openms-navy); - background: linear-gradient( - 180deg, - rgba(var(--openms-blue-rgb), 0.04) 0%, - var(--openms-white) 28% - ); - border-top: none; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__inner { - padding-block: 0; +.openms-lib-page__cta-actions { + display: flex; + flex-wrap: wrap; + gap: 0.55rem; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__layout { - gap: var(--kf-layout-gap); -} +/* ══════════════════════════════════════════ + Section variants — Stratex-inspired feature grids + ══════════════════════════════════════════ */ -.keyfeatures-modern--openms-lib .keyfeatures-modern__header { - position: static; - max-width: none; - margin: 0; - padding-top: 0; - text-align: left; +/* 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; - gap: clamp(0.85rem, 2vw, 1.15rem); + 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; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__eyebrow { - color: var(--openms-blue); - background: rgba(var(--openms-blue-rgb), 0.1); - border-color: rgba(var(--openms-blue-rgb), 0.2); +.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; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__title { - font-size: clamp(1.65rem, 3.2vw, 2.15rem); - color: var(--openms-navy); +.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; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__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; +.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; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__lead { - color: rgba(var(--openms-navy-rgb), 0.78); - font-size: var(--openms-body-size-lg); - line-height: 1.62; +.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; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topics { - gap: clamp(0.85rem, 1.6vw, 1.1rem); +/* 1. Overview */ +.openms-lib-block--overview { + padding-bottom: 0; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card { - position: relative; - display: flex; - flex-direction: column; - gap: 0.65rem; - min-height: 100%; - padding: 1.15rem 1.1rem 1.2rem 1.4rem; - border: 1px solid rgba(var(--openms-navy-rgb), 0.1); - border-radius: var(--kf-radius); - background: var(--openms-white); - box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.06); - transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +.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; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card::before { - content: ""; - position: absolute; - left: 0; - top: 0.65rem; - bottom: 0.65rem; - width: 0.24rem; - border-radius: 999px; - background: linear-gradient(180deg, var(--openms-blue) 0%, var(--openms-purple) 100%); +.openms-lib-list--split .openms-lib-list__row:hover, +.openms-lib-list--split .openms-lib-list__row:focus-within { + background: transparent; + transform: none; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card:hover, -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card:focus-within { - transform: translateY(-3px); - border-color: rgba(var(--openms-blue-rgb), 0.22); - box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.12); +.openms-lib-list--split .openms-lib-list__bullets { + text-align: left; + margin-inline: auto; + max-width: 28ch; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-icon { - width: 2.5rem; - height: 2.5rem; - border-color: rgba(var(--openms-blue-rgb), 0.18); - background: rgba(var(--openms-blue-rgb), 0.08); +/* 2. What is OpenMS? */ +.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles { + padding: var(--olib-section-y) 0; + background: transparent; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-icon img { - filter: none; - opacity: 0.95; +.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles::before { + display: none; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-icon--mark { - color: var(--openms-blue); +.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); + border: none; + background: transparent; + overflow: visible; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-title { - color: var(--openms-navy); - font-size: clamp(1rem, 1.15vw, 1.08rem); +.openms-lib-list--tiles > li + li, +.openms-lib-list--tiles > .keyfeatures-modern__topic + .keyfeatures-modern__topic { + border-top: none; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__topic-text { - color: rgba(var(--openms-navy-rgb), 0.74); +.openms-lib-list--tiles > li, +.openms-lib-list--tiles > .keyfeatures-modern__topic { + display: flex; } -.keyfeatures-modern--openms-lib .keyfeatures-modern__note { - max-width: none; - color: rgba(var(--openms-navy-rgb), 0.88); - background: rgba(var(--openms-blue-rgb), 0.06); - border: 1px solid rgba(var(--openms-blue-rgb), 0.14); - border-left: 4px solid var(--openms-yellow); +.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--openms-lib .keyfeatures-modern__note a { - color: var(--openms-blue); +.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); } -.keyfeatures-modern--openms-lib .keyfeatures-modern__note a:hover, -.keyfeatures-modern--openms-lib .keyfeatures-modern__note a:focus-visible { +/* 3. Capabilities */ +.openms-steps--openms-lib.openms-steps--lib-capabilities { color: var(--openms-navy); + background: var(--openms-white); } -/* ── Capabilities (users) ── */ -.openms-steps--openms-lib.openms-steps--users { - padding: clamp(2.5rem, 5vh, 3.5rem) 0; - border-top: 1px solid rgba(var(--openms-navy-rgb), 0.08); - background: var(--openms-white); +.openms-lib-list--capabilities, +.openms-steps--lib-capabilities .openms-steps__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--olib-feature-gap); + border: none; + background: transparent; + overflow: visible; } -.openms-steps--openms-lib.openms-steps--users::before, -.openms-steps--openms-lib.openms-steps--users::after { - opacity: 0.65; +.openms-lib-list--capabilities > li + li, +.openms-lib-list--capabilities > .openms-steps__item + .openms-steps__item { + border-top: none; } -.openms-steps--openms-lib .openms-steps__header { - max-width: none; - margin: 0 0 clamp(1.5rem, 3vh, 2rem); - text-align: left; +.openms-lib-list--capabilities > li, +.openms-lib-list--capabilities > .openms-steps__item { + display: flex; } -.openms-steps--openms-lib .openms-steps__eyebrow { - margin-bottom: 0.65rem; +.openms-lib-list--capabilities .openms-lib-list__index, +.openms-steps--lib-capabilities .openms-step__index { + display: none; } -.openms-steps--openms-lib.openms-steps--users .openms-steps__eyebrow { - color: var(--openms-blue); - background: rgba(var(--openms-blue-rgb), 0.1); - border-color: rgba(var(--openms-blue-rgb), 0.2); +/* 4. For developers */ +.openms-steps--openms-lib.openms-steps--lib-developers { + overflow: visible; + color: var(--openms-navy); + background: var(--openms-white); + border-top-color: transparent; } -.openms-steps--openms-lib .openms-steps__title { - font-size: clamp(1.65rem, 3.2vw, 2.15rem); - text-wrap: balance; +.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--users .openms-steps__subtitle { - margin-left: 0; - margin-right: 0; - max-width: 60ch; - text-align: left; +.openms-steps--openms-lib.openms-steps--lib-developers .openms-steps__inner { + position: static; + z-index: auto; } -.openms-steps--openms-lib.openms-steps--users .openms-step--showcase { - border-radius: 0.85rem; - border-color: rgba(var(--openms-navy-rgb), 0.1); - box-shadow: 0 0.3rem 1rem rgba(var(--openms-navy-rgb), 0.06); +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row { + display: grid; + flex-direction: unset; + align-items: stretch; + min-height: 0; } -.openms-steps--openms-lib.openms-steps--users .openms-step--showcase:hover { - border-color: rgba(var(--openms-blue-rgb), 0.28); - box-shadow: 0 0.7rem 1.85rem rgba(var(--openms-blue-rgb), 0.14); +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__media { + order: unset; } -.openms-steps--openms-lib.openms-steps--users .openms-step--showcase .openms-step__media { - background: linear-gradient( - 165deg, - rgba(var(--openms-blue-rgb), 0.07) 0%, - var(--openms-white) 100% - ); +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__content { + order: unset; } -.openms-steps--openms-lib .openms-step__cta.openms-btn-primary { - min-height: 2.5rem; - padding: 0.55rem 1.25rem; - font-size: var(--openms-text-min); +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step:nth-child(even) .openms-step__media, +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step:nth-child(even) .openms-step__content { + order: unset; } -/* ── Advanced users / developers ── */ -.openms-steps--openms-lib.openms-steps--developers { - --dev-card-media-min-h: clamp(11rem, 22vw, 14rem); - --dev-logo-max-h: clamp(5rem, 12vw, 7.5rem); - --dev-terminal-h: clamp(10rem, 18vw, 12.5rem); +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__title { + padding-right: 0; +} - position: relative; +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .openms-step__media { + width: 3.35rem; + height: 3.35rem; + min-height: 0; + max-height: 3.35rem; + margin-inline: auto; + padding: 0.35rem; + border-radius: var(--olib-radius-sm); + background: var(--openms-navy); overflow: hidden; - padding: clamp(2.75rem, 5.5vh, 3.75rem) 0; - border-top: none; - color: var(--openms-white); - background: linear-gradient( - 135deg, - var(--openms-navy) 0%, - #1a2f8f 48%, - #2a4fd4 100% - ); } -.openms-steps--openms-lib.openms-steps--developers::before, -.openms-steps--openms-lib.openms-steps--developers::after { - opacity: 1; +.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%; + height: 2.35rem; + min-height: 0; + max-height: 2.35rem; + border-radius: 0.25rem; + overflow: hidden; } -.openms-steps--openms-lib.openms-steps--developers .openms-steps__header { - text-align: left; - max-width: none; - margin: 0 0 clamp(1.65rem, 3.5vh, 2.25rem); +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .terminal-window section.terminal { + font-size: 0.4rem; + line-height: 1.3; } -.openms-steps--openms-lib.openms-steps--developers .openms-steps__eyebrow { - color: var(--openms-yellow); - background: rgba(var(--openms-white-rgb), 0.1); - border-color: rgba(var(--openms-white-rgb), 0.22); +.openms-lib-list--developers, +.openms-steps--lib-developers .openms-steps__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--olib-feature-gap); + border: none; + background: transparent; + overflow: visible; } -.openms-steps--openms-lib.openms-steps--developers .openms-steps__title { - color: var(--openms-white); +.openms-lib-list--developers > li + li, +.openms-lib-list--developers > .openms-steps__item + .openms-steps__item { + border-top: none; } -.openms-steps--openms-lib.openms-steps--developers .openms-steps__title-accent { - background: linear-gradient( - 90deg, - var(--openms-yellow) 0%, - var(--openms-orange) 45%, - var(--openms-pink) 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; +.openms-lib-list--developers > li, +.openms-lib-list--developers > .openms-steps__item { + display: flex; } -.openms-steps--openms-lib.openms-steps--developers .openms-steps__subtitle { - margin-left: 0; - text-align: left; - max-width: 58ch; - color: rgba(var(--openms-white-rgb), 0.92); - line-height: 1.62; +.openms-lib-list--developers .openms-lib-list__index, +.openms-steps--lib-developers .openms-step__index { + display: none; } -.openms-steps--openms-lib.openms-steps--developers .openms-steps__grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: clamp(1.1rem, 2.2vw, 1.5rem); - align-items: stretch; +/* 5. Get started — feature-style resource grid */ +.openms-lib-block--resources .openms-lib-block__head { + max-width: 46rem; } -/* White showcase cards on navy band (matches users section pattern) */ -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer { - display: flex; - flex-direction: column; - min-height: 100%; - padding: 0; - border: 1px solid rgba(var(--openms-white-rgb), 0.22); - border-radius: 1rem; - background: var(--openms-white); - box-shadow: 0 0.5rem 1.75rem rgba(var(--openms-dark-rgb), 0.22); - overflow: hidden; - transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; +.openms-lib-list--resource-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--olib-feature-gap); + border: none; + background: transparent; + overflow: visible; } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer:hover { - transform: translateY(-5px); - border-color: rgba(var(--openms-yellow-rgb), 0.55); - box-shadow: 0 1rem 2.5rem rgba(var(--openms-dark-rgb), 0.32); +.openms-lib-resource-card { + text-decoration: none; + color: inherit; + cursor: pointer; + transition: border-color 0.2s var(--olib-ease), background-color 0.2s var(--olib-ease), + box-shadow 0.2s var(--olib-ease), transform 0.2s var(--olib-ease); } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__index { - display: none; +.openms-lib-list--resource-grid .openms-lib-list__row, +.openms-lib-list--resource-grid .openms-lib-resource-card { + 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; } -/* Consistent top media / bottom content (no alternating layout) */ -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__media, -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer:nth-child(even) .openms-step__media { - order: -1; - width: 100%; - min-height: var(--dev-card-media-min-h); - margin: 0; - padding: clamp(1rem, 2vw, 1.35rem); - border: none; - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08); +.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; - background: linear-gradient( - 165deg, - rgba(var(--openms-blue-rgb), 0.1) 0%, - rgba(var(--openms-navy-rgb), 0.04) 55%, - color-mix(in srgb, var(--openms-steps-accent) 22%, var(--openms-white)) 100% - ); } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__content, -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer:nth-child(even) .openms-step__content { - order: 2; - display: flex; - flex-direction: column; - flex: 1 1 auto; - gap: 0.55rem; - padding: clamp(1.15rem, 2.2vw, 1.4rem) clamp(1.2rem, 2.4vw, 1.5rem) - clamp(1.25rem, 2.4vw, 1.55rem); +.openms-lib-list--resource-grid .openms-lib-list__row:hover, +.openms-lib-list--resource-grid .openms-lib-list__row:focus-visible, +.openms-lib-resource-card:hover, +.openms-lib-resource-card:focus-visible { + background: transparent; + transform: none; + outline: none; } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__tag { - margin: 0; - padding: 0.32rem 0.65rem; - font-size: var(--openms-text-min); - 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) 50%, transparent); - border-radius: 999px; +.openms-lib-list--resource-grid .openms-lib-list__index { + display: none; } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__title { - padding-right: 0; - font-size: clamp(1.12rem, 1.55vw, 1.28rem); - line-height: 1.28; - color: var(--openms-navy); +.openms-lib-list--resource-grid .openms-lib-list__media { + width: 3.35rem; + height: 3.35rem; + margin-inline: auto; + padding: 0; + border: none; + border-radius: var(--olib-radius-sm); + background: var(--openms-navy); } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__subtitle { - flex: 1 1 auto; - font-size: clamp(0.92rem, 1.05vw, 1.02rem); - line-height: 1.55; - color: rgba(var(--openms-navy-rgb), 0.76); - display: block; - overflow: visible; - -webkit-line-clamp: unset; +.openms-lib-list--resource-grid .openms-lib-list__mark { + font-size: 1.15rem; + color: var(--openms-white); } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__img, -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__img.img-fit { - display: block; - width: auto; - max-width: min(100%, 14rem); - height: auto; - max-height: var(--dev-logo-max-h); - min-height: 4.5rem; - margin: 0 auto; - object-fit: contain; - filter: none; +.openms-lib-list--resource-grid .openms-lib-list__body { + align-items: center; } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta { - align-self: flex-start; - margin-top: auto; - padding-top: 0.35rem; +.openms-lib-resource-card__tag { + display: none; } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta.openms-btn-primary { - background: var(--openms-blue); - border-color: var(--openms-blue); - color: var(--openms-white) !important; +.openms-lib-list--resource-grid .openms-lib-list__title { + font-size: 1rem; } -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta.openms-btn-primary:hover, -.openms-steps--openms-lib.openms-steps--developers .openms-step--developer .openms-step__cta.openms-btn-primary:focus-visible { - background: var(--openms-navy); - border-color: var(--openms-navy); - color: var(--openms-white) !important; +.openms-lib-list--resource-grid .openms-lib-list__text { + display: block; + max-width: 26ch; + margin-inline: auto; + font-size: var(--openms-body-size); + line-height: 1.55; + color: var(--olib-text-muted); + text-align: center; } -/* Terminal card */ -.openms-steps--openms-lib.openms-steps--developers .openms-step--terminal .openms-step__media { - padding: clamp(0.75rem, 1.5vw, 1rem); - background: linear-gradient(180deg, #1a1d24 0%, #0f1118 100%); - border-bottom-color: rgba(var(--openms-navy-rgb), 0.12); +.openms-lib-resource-card .openms-lib-list__link { + align-self: center; + margin-top: 0.25rem; + font-size: var(--openms-text-min); + pointer-events: none; } -.openms-steps--openms-lib.openms-steps--developers .openms-step--terminal .openms-step__terminal { - width: 100%; +.openms-lib-block--resources .openms-lib-block__note { + max-width: 40rem; + margin-inline: auto; + text-align: center; + border: 1px solid var(--olib-line); + border-left: none; + border-radius: var(--olib-radius-sm); } -.openms-steps--openms-lib.openms-steps--developers .openms-step--terminal .openms-step__terminal .terminal-window { - width: 100%; - height: var(--dev-terminal-h); - min-height: var(--dev-terminal-h); - margin: 0; - border-radius: 0.6rem; - border: 1px solid rgba(var(--openms-white-rgb), 0.12); - box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.35); +/* ── 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-steps--developers .openms-step--terminal .terminal-window section.terminal { - font-size: clamp(0.58rem, 0.85vw, 0.68rem); - line-height: 1.5; +.openms-steps--openms-lib .openms-step__cta { + width: auto; } -/* Outro */ -.openms-lib-page__outro .governance-pillars { - grid-template-columns: repeat(3, minmax(0, 1fr)); +.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 { + min-height: 0; + max-height: 2rem; } -.openms-lib-actions { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - margin-top: 1.25rem; +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__media { + order: unset; + width: 3.35rem; + min-height: 0; + border: none; } -.openms-lib-page__outro .governance-section p, -.openms-lib-page__intro .governance-card p { - max-width: 72ch; +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__content { + order: unset; } -.openms-lib-page__intro .governance-card a { - font-weight: 600; +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step:nth-child(even) .openms-step__media, +.openms-steps--openms-lib.openms-steps--lib-developers .openms-step:nth-child(even) .openms-step__content { + order: unset; } -@media (max-width: 1000px) { - .keyfeatures-modern--openms-lib .keyfeatures-modern__topics { +@media (max-width: 1024px) { + .openms-lib-list--capabilities, + .openms-steps--lib-capabilities .openms-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .openms-steps--openms-lib.openms-steps--users .openms-steps__grid { - grid-template-columns: 1fr; + .openms-lib-list--resource-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 860px) { - .openms-lib-layout .openms-lib-page__intro .governance-hero { - margin-left: calc(-1 * clamp(0.75rem, 4vw, 1.25rem)); - margin-right: calc(-1 * clamp(0.75rem, 4vw, 1.25rem)); - width: calc(100% + 2 * clamp(0.75rem, 4vw, 1.25rem)); - padding-left: clamp(1.25rem, 4vw, 1.75rem); - padding-right: clamp(1rem, 3vw, 1.25rem); +@media (max-width: 720px) { + .openms-lib-page { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-feature-gap: clamp(1.25rem, 4vw, 1.75rem); + --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-page__outro .governance-pillars { + .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 { grid-template-columns: 1fr; } - .openms-lib-actions .openms-step__cta, - .openms-lib-actions .about-cta-btn { + .openms-lib-list--split .openms-lib-list__bullets { + max-width: none; + width: 100%; + } + + .openms-lib-list--split .openms-lib-list__text, + .openms-lib-list--tiles .openms-lib-list__text, + .keyfeatures-modern--lib-tiles .keyfeatures-modern__topic-text, + .openms-lib-list--capabilities .openms-lib-list__text, + .openms-steps--lib-capabilities .openms-step__subtitle, + .openms-lib-list--developers .openms-lib-list__text, + .openms-steps--lib-developers .openms-step__subtitle, + .openms-lib-list--resource-grid .openms-lib-list__text { + max-width: none; + } + + .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .openms-lib-hero__actions .openms-lib-btn--primary { width: 100%; justify-content: center; } -} -@media (max-width: 640px) { - .keyfeatures-modern--openms-lib .keyfeatures-modern__topics { - grid-template-columns: 1fr; + .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; } - .openms-steps--openms-lib.openms-steps--developers .openms-steps__grid { - grid-template-columns: 1fr; + .openms-lib-page__cta { + align-items: stretch; + text-align: center; } - .openms-steps--openms-lib.openms-steps--developers { - --dev-card-media-min-h: clamp(10rem, 28vw, 12rem); - --dev-logo-max-h: clamp(4.5rem, 14vw, 6rem); - --dev-terminal-h: clamp(9rem, 24vw, 11rem); + .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 (min-width: 1100px) { - .openms-steps--openms-lib.openms-steps--developers { - --dev-card-media-min-h: 13.5rem; - --dev-logo-max-h: 7rem; - --dev-terminal-h: 12rem; +@media (max-width: 480px) { + .openms-lib-hero__chip { + font-size: 0.68rem; + } + + .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); } } @media (prefers-reduced-motion: reduce) { - .keyfeatures-modern--openms-lib .keyfeatures-modern__topic-card:hover, - .openms-steps--openms-lib .openms-step--showcase:hover, - .openms-steps--openms-lib.openms-steps--developers .openms-step--developer:hover { + .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-resource-card { + transition: none; + } + + .openms-lib-list--tiles .openms-lib-list__row:hover, + .openms-lib-resource-card:hover { transform: none; } } diff --git a/assets/css/publications.css b/assets/css/publications.css index 2687a96..e013468 100644 --- a/assets/css/publications.css +++ b/assets/css/publications.css @@ -1,19 +1,37 @@ -/* Publications page — extends governance layout */ +/* Publications page */ + +.publications-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)); + --publications-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.publications-page-layout__content { + width: min(100%, var(--publications-max)); + max-width: var(--publications-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + .publications-page { margin-top: 0; } -.publications-layout__container { - max-width: min(100%, 64rem); +.publications-page-hero { + margin-bottom: var(--olib-section-y); } -.publications-layout .governance-hero { - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - padding-left: clamp(2rem, 5vw, 3.5rem); - padding-right: clamp(1.25rem, 3vw, 2rem); +.publications-page-hero .openms-lib-hero__title { + max-width: 24ch; } .publications-body { @@ -231,8 +249,116 @@ color: rgba(var(--openms-navy-rgb), 0.78); } +/* Navbar-style CTA motion (publications page) */ +.publications-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); +} + +.publications-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; +} + +.publications-page-layout .openms-lib-btn--ghost { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.publications-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.publications-page-layout .openms-lib-btn--primary:hover, +.publications-page-layout .openms-lib-btn--primary:focus-visible, +.publications-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; +} + +.publications-page-layout .openms-lib-btn--ghost:hover, +.publications-page-layout .openms-lib-btn--ghost:focus-visible, +.publications-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; +} + +.publications-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); +} + +.publications-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: 720px) { + .publications-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .publications-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .publications-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .publications-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .publications-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } +} + @media (max-width: 640px) { .publication-title { font-size: var(--openms-body-size); } } + +@media (prefers-reduced-motion: reduce) { + .publications-page-layout .openms-lib-btn:hover, + .publications-page-layout .openms-lib-btn:focus-visible { + transform: none; + } +} diff --git a/assets/css/research-partnerships-page.css b/assets/css/research-partnerships-page.css new file mode 100644 index 0000000..03bf13c --- /dev/null +++ b/assets/css/research-partnerships-page.css @@ -0,0 +1,209 @@ +.research-partnerships-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --partnerships-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.research-partnerships-page-layout__content { + width: min(100%, var(--partnerships-max)); + max-width: var(--partnerships-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.research-partnerships-page-hero { + margin-bottom: var(--olib-section-y); +} + +.research-partnerships-page-hero .openms-lib-hero__title { + max-width: 26ch; +} + +.about-donate-actions.research-partnerships-page__actions { + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: 0.75rem; + width: fit-content; + max-width: 100%; +} + +.about-donate-actions.research-partnerships-page__actions > a { + box-sizing: border-box; + flex: 1 1 11.75rem; + min-width: 11.75rem; + height: 2.75rem; + margin-top: 0; + text-align: center; +} + +/* Navbar-style CTA motion (research partnerships page) */ +.research-partnerships-page-layout .openms-lib-btn, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > a, +.research-partnerships-page-layout .governance-card__link a { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + text-decoration: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.research-partnerships-page-layout .openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.research-partnerships-page-layout .openms-lib-btn--ghost, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate, +.research-partnerships-page-layout .governance-card__link a { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.research-partnerships-page-layout .governance-card__link a { + margin-top: 0; +} + +.research-partnerships-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.research-partnerships-page-layout .openms-lib-btn--primary:hover, +.research-partnerships-page-layout .openms-lib-btn--primary:focus-visible, +.research-partnerships-page-layout .openms-lib-btn--primary:active, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:hover, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:focus-visible, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:active { + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.research-partnerships-page-layout .openms-lib-btn--primary:hover, +.research-partnerships-page-layout .openms-lib-btn--primary:focus-visible, +.research-partnerships-page-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:hover, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:focus-visible, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:active { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; +} + +.research-partnerships-page-layout .openms-lib-btn--ghost:hover, +.research-partnerships-page-layout .openms-lib-btn--ghost:focus-visible, +.research-partnerships-page-layout .openms-lib-btn--ghost:active, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:hover, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:focus-visible, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:active, +.research-partnerships-page-layout .governance-card__link a:hover, +.research-partnerships-page-layout .governance-card__link a:focus-visible, +.research-partnerships-page-layout .governance-card__link a:active { + background: transparent; + background-color: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.research-partnerships-page-layout .openms-lib-btn--primary:focus-visible, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .openms-btn-primary:focus-visible { + box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +.research-partnerships-page-layout .openms-lib-btn--ghost:focus-visible, +.research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > .about-cta-btn--donate:focus-visible, +.research-partnerships-page-layout .governance-card__link a:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +@media (max-width: 720px) { + .research-partnerships-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .research-partnerships-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .research-partnerships-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .research-partnerships-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .research-partnerships-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } + + .about-donate-actions.research-partnerships-page__actions { + flex-direction: column; + width: 100%; + } + + .about-donate-actions.research-partnerships-page__actions > a { + flex: 1 1 auto; + width: 100%; + min-width: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .research-partnerships-page-layout .openms-lib-btn:hover, + .research-partnerships-page-layout .openms-lib-btn:focus-visible, + .research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > a:hover, + .research-partnerships-page-layout .about-donate-actions.research-partnerships-page__actions > a:focus-visible, + .research-partnerships-page-layout .governance-card__link a:hover, + .research-partnerships-page-layout .governance-card__link a:focus-visible { + transform: none; + } +} diff --git a/assets/css/shortcuts_override.css b/assets/css/shortcuts_override.css index 747c3f1..d617c64 100644 --- a/assets/css/shortcuts_override.css +++ b/assets/css/shortcuts_override.css @@ -43,37 +43,52 @@ } /* Governance page: use top jump links only (hide left TOC) */ -.content-padding:has(.governance-page) .shortcuts-container { +.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 { +.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 { +.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(.news-page-layout) .shortcuts-container, +.news-page-layout .shortcuts-container { display: none; } /* Community calendar: hide left TOC */ -.content-padding:has(.community-calendar-layout) .shortcuts-container { +.content-padding:has(.community-calendar-layout) .shortcuts-container, +.community-calendar-layout .shortcuts-container { display: none; } /* Contribute page: hide left TOC */ -.content-padding:has(.contribute-page-layout) .shortcuts-container { +.content-padding:has(.contribute-page-layout) .shortcuts-container, +.contribute-page-layout .shortcuts-container { display: none; } /* Applications listing: hide left TOC */ -.content-padding:has(.applications-page-layout) .shortcuts-container { +.content-padding:has(.applications-page-layout) .shortcuts-container, +.applications-page-layout .shortcuts-container { display: none; } diff --git a/assets/css/sponsor-us-page.css b/assets/css/sponsor-us-page.css new file mode 100644 index 0000000..367092e --- /dev/null +++ b/assets/css/sponsor-us-page.css @@ -0,0 +1,209 @@ +.sponsor-us-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --sponsor-us-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.sponsor-us-page-layout__content { + width: min(100%, var(--sponsor-us-max)); + max-width: var(--sponsor-us-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.sponsor-us-page-hero { + margin-bottom: var(--olib-section-y); +} + +.sponsor-us-page-hero .openms-lib-hero__title { + max-width: 26ch; +} + +.about-donate-actions.sponsor-us-page__actions { + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: 0.75rem; + width: fit-content; + max-width: 100%; +} + +.about-donate-actions.sponsor-us-page__actions > a { + box-sizing: border-box; + flex: 1 1 12.25rem; + min-width: 12.25rem; + height: 2.75rem; + margin-top: 0; + text-align: center; +} + +/* Navbar-style CTA motion (sponsor us page) */ +.sponsor-us-page-layout .openms-lib-btn, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > a, +.sponsor-us-page-layout .governance-card__link a { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + width: fit-content; + min-height: 2.75rem; + padding: var(--openms-btn-padding); + border-radius: var(--openms-btn-pill-radius); + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + text-decoration: none; + box-shadow: 0 0 0 0 var(--openms-btn-glow); + transition: var(--openms-btn-motion); +} + +.sponsor-us-page-layout .openms-lib-btn--primary { + gap: 0.5rem; + padding-inline: 1.15rem; + border: 2px solid var(--openms-navy); + background: var(--openms-navy); + color: var(--openms-white) !important; +} + +.sponsor-us-page-layout .openms-lib-btn--ghost, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate, +.sponsor-us-page-layout .governance-card__link a { + border: 2px solid var(--openms-blue); + background: transparent; + background-color: transparent; + color: var(--openms-blue) !important; +} + +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary { + border: 2px solid var(--openms-blue); + background: var(--openms-blue); + color: var(--openms-white) !important; +} + +.sponsor-us-page-layout .governance-card__link a { + margin-top: 0; +} + +.sponsor-us-page-layout .openms-lib-hero__actions { + gap: 0.75rem; +} + +.sponsor-us-page-layout .openms-lib-btn--primary:hover, +.sponsor-us-page-layout .openms-lib-btn--primary:focus-visible, +.sponsor-us-page-layout .openms-lib-btn--primary:active, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:hover, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:focus-visible, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:active { + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.sponsor-us-page-layout .openms-lib-btn--primary:hover, +.sponsor-us-page-layout .openms-lib-btn--primary:focus-visible, +.sponsor-us-page-layout .openms-lib-btn--primary:active { + background: var(--openms-navy); + border-color: var(--openms-navy); + color: var(--openms-white) !important; +} + +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:hover, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:focus-visible, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:active { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; +} + +.sponsor-us-page-layout .openms-lib-btn--ghost:hover, +.sponsor-us-page-layout .openms-lib-btn--ghost:focus-visible, +.sponsor-us-page-layout .openms-lib-btn--ghost:active, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:hover, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:focus-visible, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:active, +.sponsor-us-page-layout .governance-card__link a:hover, +.sponsor-us-page-layout .governance-card__link a:focus-visible, +.sponsor-us-page-layout .governance-card__link a:active { + background: transparent; + background-color: transparent; + border-color: var(--openms-blue); + color: var(--openms-blue) !important; + transform: scale(var(--openms-btn-hover-scale)); + box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); + outline: none; + text-decoration: none; +} + +.sponsor-us-page-layout .openms-lib-btn--primary:focus-visible, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .openms-btn-primary:focus-visible { + box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +.sponsor-us-page-layout .openms-lib-btn--ghost:focus-visible, +.sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > .about-cta-btn--donate:focus-visible, +.sponsor-us-page-layout .governance-card__link a:focus-visible { + box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), + 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); +} + +@media (max-width: 720px) { + .sponsor-us-page-layout { + --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + } + + .sponsor-us-page-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.75rem, 7vw, 2.25rem); + } + + .sponsor-us-page-hero .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + } + + .sponsor-us-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + width: 100%; + justify-content: center; + } + + .sponsor-us-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { + align-self: center; + } + + .about-donate-actions.sponsor-us-page__actions { + flex-direction: column; + width: 100%; + } + + .about-donate-actions.sponsor-us-page__actions > a { + flex: 1 1 auto; + width: 100%; + min-width: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .sponsor-us-page-layout .openms-lib-btn:hover, + .sponsor-us-page-layout .openms-lib-btn:focus-visible, + .sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > a:hover, + .sponsor-us-page-layout .about-donate-actions.sponsor-us-page__actions > a:focus-visible, + .sponsor-us-page-layout .governance-card__link a:hover, + .sponsor-us-page-layout .governance-card__link a:focus-visible { + transform: none; + } +} diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index c692371..75526a1 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -14,13 +14,13 @@ .navbar.is-fresh .navbar-item:not(.navbar-cta-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-menu .navbar-item:not(.navbar-cta-item), .navbar.is-fresh .navbar-dropdown .navbar-item, .navbar.is-fresh .navbar-dropdown-heading, #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, -#navbar-clone.navbar.is-fresh .navbar-menu .navbar-item, +#navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item, #navbar-clone.navbar.is-fresh .navbar-dropdown-heading { font-size: var(--openms-navbar-font-size); @@ -181,13 +181,6 @@ flex-shrink: 0; } -.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 { - transform: none; -} - .navbar.is-fresh .navbar-burger, #navbar-clone.navbar.is-fresh .navbar-burger { color: var(--openms-dark); @@ -424,6 +417,17 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { display: inline-flex !important; } +/* Footer donate — beat Bulma .button hover/focus defaults */ +#footer.footer-redesign .footer-donate-btn.button:hover, +#footer.footer-redesign .footer-donate-btn.button:focus, +#footer.footer-redesign .footer-donate-btn.button:focus-visible, +#footer.footer-redesign .footer-donate-btn.button:active { + background: transparent !important; + background-color: transparent !important; + border-color: var(--openms-blue) !important; + color: var(--openms-white) !important; +} + /* Footer Donate — secondary blue (openms-buttons.css) */ .footer-title { @@ -477,26 +481,25 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { padding: 0.2rem 0.4rem; margin: 0 -0.4rem; border-radius: 0.375rem; - color: rgba(var(--openms-white-rgb), 0.85); + color: rgba(var(--openms-white-rgb), 0.72); font-size: var(--openms-body-size); text-decoration: none; - transition: color 0.2s ease, background-color 0.2s ease; + transition: color 0.2s ease; } .footer-link-group ul li a.footer-link-contact-us { font-size: var(--openms-text-min); } -/* Match navbar link hover (color + light blue tint, no underline) */ .footer-link-group ul li a:hover, .footer-link-group ul li a:focus-visible { - color: var(--openms-blue); - background-color: rgba(var(--openms-blue-rgb), 0.1); + color: var(--openms-white); + background: transparent; text-decoration: none; } .footer-link-group ul li a:focus-visible { - outline: 2px solid var(--openms-blue); + outline: 2px solid var(--openms-yellow); outline-offset: 2px; } @@ -538,7 +541,7 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { width: auto; object-fit: contain; filter: brightness(0) invert(1); - opacity: 0.8; + opacity: 0.72; transition: opacity 0.2s ease; } @@ -625,14 +628,14 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { justify-content: center; min-width: 2.875rem; min-height: 2.875rem; - color: rgba(var(--openms-white-rgb), 0.82); + color: rgba(var(--openms-white-rgb), 0.72); border-radius: 0.5rem; - transition: color 0.2s ease; + transition: color 0.2s ease, opacity 0.2s ease; } .footer-socials a:hover, .footer-socials a:focus-visible { - color: var(--openms-blue); + color: var(--openms-white); background: transparent; } @@ -1294,21 +1297,3 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { } } -/* Publications layout */ -.publications-layout__container { - max-width: min(100%, 64rem); -} - -.publications-layout .governance-hero { - margin-left: calc(-1 * clamp(1rem, 3vw, 2rem)); - margin-right: calc(-1 * clamp(1rem, 3vw, 2rem)); - width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); - max-width: 100vw; - padding-left: clamp(2rem, 5vw, 3.5rem); - padding-right: clamp(1.25rem, 3vw, 2rem); -} - -.publications-body { - display: grid; - gap: clamp(1.5rem, 3vw, 2.5rem); -} diff --git a/assets/css/typography.css b/assets/css/typography.css index 29e24b8..c207a6f 100644 --- a/assets/css/typography.css +++ b/assets/css/typography.css @@ -32,8 +32,7 @@ button, .content-container, .subtitle:not(.is-1):not(.is-2):not(.is-3), .navbar-item, -.navbar-link, -.news-banner__headline { +.navbar-link { font-family: var(--openms-font-body); font-weight: var(--openms-body-weight); } diff --git a/assets/css/webapps.css b/assets/css/webapps.css index 8328217..8b51982 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -318,11 +318,58 @@ section.webapps-featured::after { .webapps-featured__footer { margin-top: clamp(2rem, 4vh, 2.75rem); display: flex; - justify-content: center; + flex-direction: column; + align-items: center; + gap: clamp(1.25rem, 2.5vw, 1.75rem); +} + +.webapps-featured__extras { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(1rem, 2.5vw, 1.5rem); + width: 100%; + max-width: 42rem; +} + +.webapps-featured__extra { + display: grid; + gap: 0.35rem; + text-align: center; +} + +.webapps-featured__extra-link { + display: inline-block; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 600; + color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.14em; + transition: color 0.2s ease; +} + +.webapps-featured__extra-desc { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.5; + color: rgba(var(--openms-dark-rgb), 0.72); +} + +.webapps-featured__extra-link:hover, +.webapps-featured__extra-link:focus-visible { + color: var(--openms-navy); + outline: none; +} + +.webapps-featured__extra-link:focus-visible { + outline: 2px solid var(--openms-yellow); + outline-offset: 3px; + border-radius: 0.125rem; } .webapps-featured__show-all { - min-width: min(100%, 16rem); + min-width: min(100%, 13rem); } .webapps-featured__show-all:focus { @@ -346,6 +393,11 @@ section.webapps-featured::after { gap: 0.75rem; } + .webapps-featured__extras { + grid-template-columns: 1fr; + max-width: 28rem; + } + .webapps-featured__show-all { width: 100%; max-width: none; diff --git a/assets/js/home-scroll-reveal.js b/assets/js/home-scroll-reveal.js new file mode 100644 index 0000000..2305286 --- /dev/null +++ b/assets/js/home-scroll-reveal.js @@ -0,0 +1,155 @@ +(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--partners, .home-page__block--projects, .home-page__block--overview, .home-page__trust, .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 = []; + + projectItems.forEach(function (item) { + var surface = item.querySelector(".webapps-project-card__surface"); + projectRevealTargets.push({ item: item, observerTarget: surface || item }); + }); + + if (projectsFooter) { + projectRevealTargets.push({ item: projectsFooter, observerTarget: projectsFooter }); + } + + if (hero) { + hero.querySelectorAll(".hero-home__bento-card").forEach(function (card, index) { + card.style.setProperty("--hero-reveal-index", String(index)); + }); + + hero.querySelectorAll(".hero-home__actions .hero-home__btn").forEach(function (btn, index) { + btn.style.setProperty("--hero-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(); + } + } + + 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 revealHero() { + if (hero) hero.classList.add("is-revealed"); + } + + function revealAll() { + revealHero(); + scrollSections.forEach(reveal); + revealProjectCards(); + } + + page.classList.add("home-page--motion"); + + if (prefersReducedMotion) { + revealAll(); + return; + } + + if (hero) { + window.setTimeout(revealHero, 80); + } + + if (!("IntersectionObserver" in window)) { + scrollSections.forEach(reveal); + revealProjectCards(); + window.addEventListener("scroll", revealProjectCardsInView, { passive: true }); + window.addEventListener("resize", revealProjectCardsInView, { 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); + } + }); + }, + { root: null, rootMargin: "0px 0px -5% 0px", threshold: 0 } + ); + + scrollSections.forEach(function (section) { + observer.observe(section); + }); + + projectRevealTargets.forEach(function (entry) { + cardObserver.observe(entry.observerTarget); + }); + + var scrollTicking = false; + + function onScrollOrResize() { + if (scrollTicking) return; + scrollTicking = true; + + window.requestAnimationFrame(function () { + revealProjectCardsInView(); + scrollTicking = false; + }); + } + + window.addEventListener("scroll", onScrollOrResize, { passive: true }); + window.addEventListener("resize", onScrollOrResize, { passive: true }); + + revealProjectCardsInView(); + window.setTimeout(revealProjectCardsInView, 120); +})(); diff --git a/config.yaml b/config.yaml index f32ca34..c44d197 100644 --- a/config.yaml +++ b/config.yaml @@ -71,6 +71,43 @@ languages: subtitle: >- Learn how to get involved with code, documentation, outreach, fundraising, and more — whether you are new to OpenMS or a seasoned contributor. + aboutPage: + eyebrow: About us + subtitle: >- + OpenMS Inc. is the corporate entity and fiscal home of the OpenMS project. + As a Pennsylvania-based 501(c)(3) public charity, it supports development, + governance, and long-term stewardship of the OpenMS ecosystem. + governancePage: + eyebrow: OpenMS governance + subtitle: >- + OpenMS combines a nonprofit corporation for legal and financial stewardship + with an Executive Committee that leads technical direction and community governance. + publicationsPage: + eyebrow: Research + subtitle: >- + A curated bibliography of scientific publications that reference OpenMS software, + methods, and workflows. Showing publications from the two most recent years. + Use the dropdown to switch between them. + contactPage: + eyebrow: Contact + subtitle: >- + Whether you need help with pipelines, integrations, consulting, or joining the + community — reach out and we will point you to the right next step. + researchPartnershipsPage: + eyebrow: Partner with OpenMS + subtitle: >- + OpenMS grows through long-term collaboration with universities, institutes, and + research groups that contribute software, methods, and training as part of their work. + sponsorUsPage: + eyebrow: Support OpenMS + subtitle: >- + Sponsorship provides direct funding for software engineering, documentation, + community events, and the long-term sustainability of the OpenMS ecosystem. + helpPage: + eyebrow: Support + subtitle: >- + Find the right channel for user questions, development issues, documentation, + and community discussion — from Stack Overflow to the OpenMS mailing list. applicationsPage: eyebrow: Projects readMoreLabel: Read application @@ -232,36 +269,40 @@ languages: alt: LiBiS — Life Science Informatics heroGroup: - - title: "OpenMS allows users to:" + - title: "Three ways to use OpenMS" variant: users eyebrow: Capabilities - titleHighlight: "allows users to" + 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:" + - title: "Scale OpenMS for advanced work" variant: developers eyebrow: For developers - titleHighlight: developers - subtitle: Scale workflows on HPC clusters and extend OpenMS with high-performance C++ tools. + titleHighlight: advanced + subtitle: Run large workflows on HPC clusters or extend OpenMS with high-performance C++ tools. bgColor: FFCB4F heroItems: - title: Analyze large datasets @@ -279,21 +320,25 @@ languages: buttonLink: "https://abibuilder.cs.uni-tuebingen.de/archive/openms/Documentation/nightly/html/OpenMS_tutorial.html" keyfeatures: - eyebrow: Overview - title: What is OpenMS? + eyebrow: What is OpenMS? + title: The open-source LC-MS library + titleHighlight: open-source description: >- - OpenMS is an open-source C++ library with Python bindings for LC/MS - data management, analysis, and visualization—built for rapid - development of mass spectrometry software. + 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 - text: BSD-licensed core library and tools you can extend, share, and ship. + 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 - text: Build and run on Windows, macOS, and Linux with the same toolchain. + tag: Windows · macOS · Linux + text: Build and run on all major platforms with the same toolchain. - title: TOPP pipeline - text: Nearly 200 ready-made tools for proteomics and metabolomics analysis. + 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 @@ -311,12 +356,15 @@ languages: showAll: text: Show all projects url: /applications + links: + - text: TOPP Tools + url: https://openms.readthedocs.io/en/latest/getting-started/topp-tools.html + description: Command-line tools for proteomics and metabolomics data analysis. + - text: pyOpenMS + url: https://pyopenms.readthedocs.io/en/latest/ + description: Python bindings for scripting workflows, prototyping, and integrations. webapps: - - name: TOPP Tools - url: https://openms.readthedocs.io/en/latest/getting-started/topp-tools.html - logo: /images/logo.svg - description: Collection of command line tools for mass spectrometry data analysis. - name: FLASH App url: http://flashapp.webapps.openms.org/ logo: /images/webapp/logo/flashapp.png diff --git a/content/en/about.md b/content/en/about.md index cd994fa..1091ff7 100644 --- a/content/en/about.md +++ b/content/en/about.md @@ -5,74 +5,60 @@ hideShortcuts: true hidePageTitle: true --- -
    -
    -

    About us

    -

    - Built for sustainability, guided by community. -

    -

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

    -
    - -
    -
    -

    Who we are

    -

    OpenMS Inc.

    -

    - Through nonprofit oversight and dedicated fiscal management, OpenMS Inc. - helps ensure OpenMS remains freely available, sustainable, and community-driven. -

    -

    - Contributions are tax-deductible to the extent permitted by law. EIN: 93-3818533. -

    -
    -
    -

    Board of directors

    -

    Leadership

    -
      -
    • Dr. Samuel Wein (chief executive officer)
      • -
    • Prof. Dr. Oliver Kohlbacher (chief scientific officer)
      • -
    • Dr. Timo Sachsenberg (chief technology officer)
      • -
    -
    -
    - -
    -

    Sponsors

    +
    +
    +

    Who we are

    +

    OpenMS Inc.

    - OpenMS receives direct funding from organizations that sponsor the project. - See sponsor us for current sponsors and how to support OpenMS financially. + Through nonprofit oversight and dedicated fiscal management, OpenMS Inc. + helps ensure OpenMS remains freely available, sustainable, and community-driven.

    -
    - -
    -

    Institutional Partners

    -

    - Institutional partners are organizations that support the project by employing people - who contribute to OpenMS as part of their work. - See the research partnerships page for partner - institutions and how to collaborate. +

    + Contributions are tax-deductible to the extent permitted by law. EIN: 93-3818533.

    -
    + +
    +

    Board of directors

    +

    Leadership

    +
      +
    • Dr. Samuel Wein (chief executive officer)
      • +
    • Prof. Dr. Oliver Kohlbacher (chief scientific officer)
      • +
    • Dr. Timo Sachsenberg (chief technology officer)
      • +
    +
    +
    - -
    +
    +

    Sponsors

    +

    + OpenMS receives direct funding from organizations that sponsor the project. + See sponsor us for current sponsors and how to support OpenMS financially. +

    +
    + +
    +

    Institutional Partners

    +

    + Institutional partners are organizations that support the project by employing people + who contribute to OpenMS as part of their work. + See the research partnerships page for partner + institutions and how to collaborate. +

    +
    + + diff --git a/content/en/contact.md b/content/en/contact.md index 5183d2f..e9e2ed2 100644 --- a/content/en/contact.md +++ b/content/en/contact.md @@ -5,84 +5,65 @@ hidePageTitle: true hideShortcuts: true --- -
    - -
    -

    Contact

    -

    - Let's talk about your workflow -

    -

    - Whether you need help with pipelines, integrations, consulting, or joining the - community — reach out and we will point you to the right next step. +

    +
    +

    Message

    +

    Contact form

    +

    + Share your question, partnership idea, or support request. We typically reply + within one to two business days.

    -
    - Open contact form - Email us -
    -
    - -
    -
    -

    Message

    -

    Contact form

    -

    - Share your question, partnership idea, or support request. We typically reply - within one to two business days. -

    -

    - Send a message -

    -
    -
    -

    Direct

    -

    Email

    -

    - Prefer email? Write to the OpenMS team for technical questions, website - feedback, or collaboration inquiries. -

    -

    - webmaster@openms.de -

    -
    -
    -

    Community

    -

    Discord & GitHub

    -

    - Join discussions, report issues, and connect with contributors on our community - channels. -

    -

    - View community channels -

    -
    -
    -

    Support

    -

    Help & consulting

    -

    - Browse help resources or learn about paid scientific and technical support - options. -

    -

    - OpenMS help -

    -
    -
    - -
    -

    Supporting OpenMS

    -

    - You can also support the project as a - sponsor or through - donations. For governance and partnerships, see - Research partnerships and - About OpenMS Inc. +

    + Send a message +

    + +
    +

    Direct

    +

    Email

    +

    + Prefer email? Write to the OpenMS team for technical questions, website + feedback, or collaboration inquiries. +

    +

    + webmaster@openms.de +

    +
    +
    +

    Community

    +

    Discord & GitHub

    +

    + Join discussions, report issues, and connect with contributors on our community + channels. +

    +

    + View community channels +

    +
    +
    +

    Support

    +

    Help & consulting

    +

    + Browse help resources or learn about paid scientific and technical support + options. +

    +

    + OpenMS help

    -
    + + -
    +
    +

    Supporting OpenMS

    +

    + You can also support the project as a + sponsor or through + donations. For governance and partnerships, see + Research partnerships and + About OpenMS Inc. +

    +
    diff --git a/content/en/governance.md b/content/en/governance.md index 6fa8417..d72cffe 100644 --- a/content/en/governance.md +++ b/content/en/governance.md @@ -1,94 +1,82 @@ --- title: "Governance" hidePageTitle: true +hideShortcuts: true --- -
    -
    -

    OpenMS governance

    -

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

    +
    +

    Corporate Governance

    +

    OpenMS Inc.

    +

    + OpenMS Inc. is a U.S. nonprofit corporation under 501(c)(3) + that provides legal and financial infrastructure for the project.

    -
    - -
    -
    -

    Corporate Governance

    -

    OpenMS Inc.

    -

    - OpenMS Inc. is a U.S. nonprofit corporation under 501(c)(3) - that provides legal and financial infrastructure for the project. -

    -
      -
    • Board of Directors handles fiduciary and legal oversight
      • -
    • Supports fundraising, compliance, and organizational continuity
      • -
    -

    - OpenMS Inc. provides legal, financial, and organizational stewardship for the project. -

    -
    -
    -

    Project Governance

    -

    Executive Committee

    -

    - The Executive Committee is the primary governance body - for the software project. It is composed of core developers and led by an elected Executive Chairperson. -

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

    - See committee details and procedures -

    -
    -
    - -
    -

    How Core Developers Fit In

    +
      +
    • Board of Directors handles fiduciary and legal oversight
      • +
    • Supports fundraising, compliance, and organizational continuity
      • +
    +

    + OpenMS Inc. provides legal, financial, and organizational stewardship for the project. +

    + +
    +

    Project Governance

    +

    Executive Committee

    - Core developers are trusted maintainers who review contributions, - mentor contributors, and participate in project governance decisions through the Executive Committee. + The Executive Committee is the primary governance body + for the software project. It is composed of core developers and led by an elected Executive Chairperson.

    -
    -
    Review and approve contributions
    -
    Guide technical direction
    -
    Mentor new contributors
    -
    Participate in governance votes
    -
    -

    - New core developers are added by majority vote of the Executive Committee. - Core developers may step down voluntarily or be removed for inactivity or Code of Conduct violations by a two-thirds vote. +

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

    + See committee details and procedures

    -
    + + + +
    +

    How Core Developers Fit In

    +

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

    +
    +
    Review and approve contributions
    +
    Guide technical direction
    +
    Mentor new contributors
    +
    Participate in governance votes
    +
    +

    + New core developers are added by majority vote of the Executive Committee. + Core developers may step down voluntarily or be removed for inactivity or Code of Conduct violations by a two-thirds vote. +

    +
    -
    -

    Separation of Responsibilities

    -
    -
    -

    Corporate (Board of Directors)

    -

    Legal entity, nonprofit compliance, financial stewardship.

    -
    -
    -

    Project (Executive Committee)

    -

    Software roadmap, contributor governance, technical/community decisions.

    -
    +
    +

    Separation of Responsibilities

    +
    +
    +

    Corporate (Board of Directors)

    +

    Legal entity, nonprofit compliance, financial stewardship.

    -

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

    -
    +
    +

    Project (Executive Committee)

    +

    Software roadmap, contributor governance, technical/community decisions.

    +
    +
    +

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

    +
    - -
    + diff --git a/content/en/help.md b/content/en/help.md index f20bf09..1202830 100644 --- a/content/en/help.md +++ b/content/en/help.md @@ -5,106 +5,90 @@ hidePageTitle: true hideShortcuts: true --- -
    -
    -

    Support

    -

    - Scientific & technical help for OpenMS. -

    -

    - Find the right channel for user questions, development issues, documentation, - and community discussion — from Stack Overflow to the OpenMS mailing list. +

    +

    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.

    -
    - Contact us - Community channels -
    -
    -
    -

    Where to start

    + +
    +

    Development

    +

    GitHub issue tracker

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

    - Development issues: For OpenMS development-related matters (e.g. - bug reports), please see Community. + 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 +

    +
    +
    -
    -
    -

    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/openms-lib.md b/content/en/openms-lib.md index 38a2909..7b2f47a 100644 --- a/content/en/openms-lib.md +++ b/content/en/openms-lib.md @@ -6,71 +6,90 @@ sidebar: false ---
    -
    -
    -

    Infrastructure

    -

    - Built for mass spectrometry, powered by open source. -

    -

    - OpenMS-lib is the high-performance, BSD-licensed C++ foundation behind TOPP tools, - pyOpenMS, and community software—built for LC-MS data management, analysis, and - visualization at scale. -

    -
    - pyOpenMS - WebApp template -
    -
    - -
    -
    -

    Core library

    -

    C++ algorithms & data structures

    -

    - File I/O for mzML, mzXML, TraML, mzIdentML, and related formats, plus signal - processing, identification, and quantification building blocks. +

    +
    +
    +
    +

    Infrastructure

    +

    + Built for mass spectrometry, powered by open source. +

    +

    + OpenMS-lib is the BSD-licensed C++ foundation behind TOPP tools, pyOpenMS, and community + software—for LC-MS data management, analysis, and visualization.

    -
      -
    • Modular, extensible C++ API
      • -
    • Cross-platform builds (Windows, macOS, Linux)
      • -
    • Released under a three-clause BSD license
      • +
        +
      • BSD-3 license
        • +
      • C++ & Python
        • +
      • Cross-platform
        • +
      • 200+ TOPP tools
      -
    -
    + + +
    +
    +

    At a glance

    +

    Core library & ecosystem

    +

    + One C++ core powers command-line tools, Python bindings, and community web apps.

    -
    + +
    +
    + +
    +
    Core library
    +

    C++ algorithms & data structures

    +

    + File I/O for mzML, mzXML, TraML, mzIdentML, and related formats, plus signal + processing, identification, and quantification building blocks. +

    +
      +
    • Modular, extensible C++ API
      • +
    • Cross-platform (Windows, macOS, Linux)
      • +
    • Three-clause BSD license
      • +
    +
    +
    +
    + +
    +
    Ecosystem
    +

    Built on OpenMS-lib

    +

    + Most users interact with OpenMS through tools and bindings that share the same core. +

    +
      +
    • TOPP tools — command-line utilities
      • +
    • pyOpenMS — Python bindings
      • +
    • Web apps — community projects
      • +
    + Source on GitHub +
    +
    +
    -
    +
    {{< keyfeatures >}}
    @@ -81,38 +100,91 @@ sidebar: false {{< heroitems variant="developers" >}}
    -
    -
    -

    Get started developing

    -

    - New contributors typically begin with the - OpenMS repository - and its - contrib - dependency bundle. The wiki and developer guides cover building from source, - adding a TOPP tool, and following project coding conventions. -

    -
    -
    Developer FAQ
    -
    Add a TOPP tool
    -
    C++ guide
    -
    Developer manual
    -
    pyOpenMS docs
    -
    Browse projects
    +
    +
    +
    +

    Get started

    +

    Start building with OpenMS-lib

    +

    + Clone the + OpenMS repository + and + contrib + bundle, then follow the wiki and developer guides to build from source. +

    +
    +
    + + +
    + Wiki +

    Developer FAQ

    +

    Common setup, build, and contribution questions.

    + Read FAQ +
    +     + + +
    + TOPP +

    Add a TOPP tool

    +

    Add your own tool to the TOPP suite.

    + Add a tool +
    +     + + +
    + C++ +

    C++ guide

    +

    Coding conventions for OpenMS C++.

    + C++ guide +
    +     + + +
    + Docs +

    Developer manual

    +

    Official build and extension docs.

    + Developer manual +
    +     + + +
    + pyOpenMS +

    Python bindings

    +

    Script workflows with pyOpenMS.

    + pyOpenMS docs +
    +     + + +
    + Community +

    Browse projects

    +

    Community web apps built on OpenMS.

    + Browse projects +
    +
    -

    - See the contributing guide and - develop your own OpenMS tools - for a broader project overview. -

    -
    - C++ library documentation - View on GitHub + +
    +

    Ready to contribute or extend OpenMS?

    +
    + View on GitHub + Contribute +
    diff --git a/content/en/research-partnerships.md b/content/en/research-partnerships.md index 6cfb545..e37832b 100644 --- a/content/en/research-partnerships.md +++ b/content/en/research-partnerships.md @@ -5,82 +5,65 @@ hideShortcuts: true sidebar: false --- -
    -
    -

    Partner with OpenMS

    -

    - Research partnerships that scale with your science. -

    -

    - OpenMS grows through long-term collaboration with universities, institutes, and - research groups that contribute software, methods, and training as part of their work. -

    -
    - Discuss a partnership - Scientific & technical support -
    -
    - -
    -
    -

    Institutional partners

    -

    Who we partner with

    -

    - Institutional partners are organizations that support OpenMS by employing people - who develop, maintain, and apply the software as part of their research missions. -

    -
      -
    • University and institute research groups
      • -
    • Core facilities and national infrastructure projects
      • -
    • Consortia building shared mass spectrometry tooling
      • -
    -
    -
    -

    Collaboration

    -

    What partnerships can include

    -

    - Partnerships take many forms—from funded software engineering to joint methods - papers and training for your lab or facility. -

    -
      -
    • Co-development of algorithms, workflows, and web applications
      • -
    • Integration with lab pipelines, KNIME, and cloud platforms
      • -
    • Workshops, user meetings, and contributor onboarding
      • -
    -

    - Ways to contribute → -

    -
    -
    - -
    -

    Partner institutions

    +
    +
    +

    Institutional partners

    +

    Who we partner with

    - The groups below employ contributors who advance OpenMS as part of their research. - Logos link to partner home pages where available. + Institutional partners are organizations that support OpenMS by employing people + who develop, maintain, and apply the software as part of their research missions.

    - {{< partners >}} -
    - -
    -

    Start a conversation

    +
      +
    • University and institute research groups
      • +
    • Core facilities and national infrastructure projects
      • +
    • Consortia building shared mass spectrometry tooling
      • +
    + +
    +

    Collaboration

    +

    What partnerships can include

    - Tell us about your group, infrastructure needs, or ideas for joint development. - We can help you find the right channel—partnership discussion, sponsorship, or - technical support. + Partnerships take many forms—from funded software engineering to joint methods + papers and training for your lab or facility.

    -
    - Contact us - Sponsor OpenMS -
    -
    - -
    -

    Related

      -
    • About OpenMS Inc. — nonprofit stewardship and governance
      • -
    • Sponsor us — organizations that fund OpenMS directly
      • -
    • Governance — how the project is led and maintained
      • +
    • Co-development of algorithms, workflows, and web applications
      • +
    • Integration with lab pipelines, KNIME, and cloud platforms
      • +
    • Workshops, user meetings, and contributor onboarding
    -
    -
    +

    + Ways to contribute → +

    + +
    + +
    +

    Partner institutions

    +

    + The groups below employ contributors who advance OpenMS as part of their research. + Logos link to partner home pages where available. +

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

    Start a conversation

    +

    + Tell us about your group, infrastructure needs, or ideas for joint development. + We can help you find the right channel—partnership discussion, sponsorship, or + technical support. +

    +
    + Contact us + Sponsor OpenMS +
    +
    + +
    +

    Related

    + +
    diff --git a/content/en/sponsor-us.md b/content/en/sponsor-us.md index 533a754..6747f72 100644 --- a/content/en/sponsor-us.md +++ b/content/en/sponsor-us.md @@ -5,85 +5,68 @@ hideShortcuts: true sidebar: false --- - +

    + About OpenMS Inc. → +

    + + + +{{< sponsor-tiers >}} + +
    +

    Current sponsors

    +

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

    + {{< sponsors >}} +
    + +
    +

    Become a sponsor

    +

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

    + +
    + +
    +

    Related

    + +
    diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4661f59..9e957cc 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -11,6 +11,18 @@ {{ partial "donate-main.html" . }} {{- else if eq .File.BaseFileName "contribute" -}} {{ partial "contribute-main.html" . }} +{{- else if eq .File.BaseFileName "about" -}} +{{ partial "about-main.html" . }} +{{- else if eq .File.BaseFileName "governance" -}} +{{ partial "governance-main.html" . }} +{{- else if eq .File.BaseFileName "contact" -}} +{{ partial "contact-main.html" . }} +{{- else if eq .File.BaseFileName "research-partnerships" -}} +{{ partial "research-partnerships-main.html" . }} +{{- else if eq .File.BaseFileName "help" -}} +{{ partial "help-main.html" . }} +{{- else if eq .File.BaseFileName "sponsor-us" -}} +{{ partial "sponsor-us-main.html" . }} {{- else -}} {{ partial "single/content.html" . }} {{- end -}} diff --git a/layouts/applications/section.html b/layouts/applications/section.html index 7820219..9583b9c 100644 --- a/layouts/applications/section.html +++ b/layouts/applications/section.html @@ -5,28 +5,37 @@ {{- $eyebrow := index $cfg "eyebrow" | default "Projects" }} {{- $readMore := index $cfg "readMoreLabel" | default "Read more" }} {{- $pages := .Pages.ByTitle }} -
    -
    -
    -
    -

    {{ $eyebrow }}

    -

    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    {{- if or (eq $title "OpenMS Applications") (eq $title "Applications") -}} - OpenMS applications. + OpenMS applications. {{- else -}} {{ $title }} {{- end }}

    {{- with $subtitle }} -

    {{ . }}

    +

    {{ . }}

    {{- end }} -
    - TOPP tools - Contribute - OpenMS-lib +
    + TOPP tools + Contribute + OpenMS-lib
    -
    +

    +
    + +
    +
    {{- if .Content }}
    {{ .Content }} diff --git a/layouts/news/section.html b/layouts/news/section.html index 3ac9d51..e5374da 100644 --- a/layouts/news/section.html +++ b/layouts/news/section.html @@ -21,29 +21,38 @@ {{- if and (not $defaultYear) $defaultToLatest (gt (len $years) 0) }} {{- $defaultYear = index $years 0 }} {{- end }} -
    -
    -
    -
    -

    {{ $eyebrow }}

    -

    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    {{- if eq $title "News" -}} - OpenMS news. + OpenMS news. {{- else -}} {{ $title }} {{- end }}

    {{- with $subtitle }} -

    {{ . }}

    +

    {{ . }}

    {{- end }} -
    +
    + Community calendar + Contribute + Projects +
    +

    +
    + +
    +
    {{- if gt (len $years) 0 }}
    diff --git a/layouts/partials/about-main.html b/layouts/partials/about-main.html new file mode 100644 index 0000000..43d75fe --- /dev/null +++ b/layouts/partials/about-main.html @@ -0,0 +1,27 @@ +{{- $cfg := .Site.Params.aboutPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "About us" -}} +{{- $subtitle := index $cfg "subtitle" | default "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." -}} +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Built for sustainability, guided by community. +

    +

    {{ $subtitle }}

    +
    + Governance + Donate + Sponsor us +
    +
    +
    +
    + +
    +
    + {{ .Content }} +
    +
    +
    diff --git a/layouts/partials/community-calendar-main.html b/layouts/partials/community-calendar-main.html index 94dc4a5..6236e49 100644 --- a/layouts/partials/community-calendar-main.html +++ b/layouts/partials/community-calendar-main.html @@ -4,56 +4,70 @@ {{- $eyebrow := index $cfg "eyebrow" | default "Community" -}} {{- $data := .Site.Data.community_events | default dict -}} {{- $events := index $data "events" | default (slice) -}} -
    -
    +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Community calendar +

    +

    {{ $subtitle }}

    +
    + Add an event + Contribute + News +
    +
    +
    +
    + +
    -
    -

    {{ $eyebrow }}

    -

    - Community calendar -

    -

    {{ $subtitle }}

    -
    -
    -
    -

    Updating events

    -

    - Events are maintained in - data/community_events.yaml - on GitHub. Add or edit entries via pull request—see - how to update the calendar. -

    -
    +
    +

    Updating events

    +

    + Events are maintained in + data/community_events.yaml + on GitHub. Add or edit entries via pull request—see + how to update the calendar. +

    +
    -
    -
    - -

    - - -
    +
    +
    + +

    + + +
    -
    -
    -
    -
    - +
    diff --git a/layouts/partials/contact-main.html b/layouts/partials/contact-main.html new file mode 100644 index 0000000..dd8078e --- /dev/null +++ b/layouts/partials/contact-main.html @@ -0,0 +1,32 @@ +{{- $cfg := .Site.Params.contactPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Contact" -}} +{{- $subtitle := index $cfg "subtitle" | default "Whether you need help with pipelines, integrations, consulting, or joining the community — reach out and we will point you to the right next step." -}} +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Let's talk about your workflow +

    +

    {{ $subtitle }}

    +
    + Open contact form + Email us + Community channels +
    +
    +
    +
    + +
    +
    + {{ .Content }} +
    +
    +
    diff --git a/layouts/partials/contribute-main.html b/layouts/partials/contribute-main.html index 7fb0973..a0b6c1e 100644 --- a/layouts/partials/contribute-main.html +++ b/layouts/partials/contribute-main.html @@ -1,21 +1,31 @@ {{- $cfg := .Site.Params.contributePage | default dict -}} {{- $eyebrow := index $cfg "eyebrow" | default "Community" -}} {{- $subtitle := index $cfg "subtitle" | default "Learn how to get involved with code, documentation, outreach, fundraising, and more — whether you are new to OpenMS or a seasoned contributor." -}} -
    -
    -
    -
    -

    {{ $eyebrow }}

    -

    - Contribute to OpenMS. +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Contribute to OpenMS.

    -

    {{ $subtitle }}

    -
    - CONTRIBUTING.md - Community channels - Governance +

    {{ $subtitle }}

    +
    + CONTRIBUTING.md + Community channels + Governance
    -
    +

    +
    + + +
    +
    {{ .Content }}
    diff --git a/layouts/partials/governance-main.html b/layouts/partials/governance-main.html new file mode 100644 index 0000000..10db43f --- /dev/null +++ b/layouts/partials/governance-main.html @@ -0,0 +1,27 @@ +{{- $cfg := .Site.Params.governancePage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "OpenMS governance" -}} +{{- $subtitle := index $cfg "subtitle" | default "OpenMS combines a nonprofit corporation for legal and financial stewardship with an Executive Committee that leads technical direction and community governance." -}} +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Built for stability, guided by community. +

    +

    {{ $subtitle }}

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

    {{ $eyebrow }}

    +

    + Scientific & technical help for OpenMS. +

    +

    {{ $subtitle }}

    +
    + Contact us + Community channels + Contribute +
    +
    +
    +
    + +
    +
    + {{ .Content }} +
    +
    +
    diff --git a/layouts/partials/heroitems.html b/layouts/partials/heroitems.html index c46f5ee..cbea731 100644 --- a/layouts/partials/heroitems.html +++ b/layouts/partials/heroitems.html @@ -9,17 +9,18 @@ {{- $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 }} @@ -27,42 +28,69 @@

    {{- with $subtitle }} -

    {{ . }}

    +

    {{ . }}

    {{- end }}

    -
      +
        {{- range $index, $item := .heroItems }}
      • -
        - +
        + {{- if and $isLibList .buttonLink (and (ne $variant "users") (ne $variant "developers")) }} + + {{- end }} + -
    +
    +
    diff --git a/layouts/partials/openms-lib-main.html b/layouts/partials/openms-lib-main.html index 65c90a9..8e179a0 100644 --- a/layouts/partials/openms-lib-main.html +++ b/layouts/partials/openms-lib-main.html @@ -1,7 +1,3 @@ -
    -
    -
    - {{ .Content }} -
    -
    +
    + {{ .Content }}
    diff --git a/layouts/partials/publications-main.html b/layouts/partials/publications-main.html index eac9a18..b6d7e71 100644 --- a/layouts/partials/publications-main.html +++ b/layouts/partials/publications-main.html @@ -1,17 +1,31 @@ -
    -
    -
    -
    -

    Research

    -

    - OpenMS in peer-reviewed publications. +{{- $cfg := .Site.Params.publicationsPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Research" -}} +{{- $subtitle := index $cfg "subtitle" | default "A curated bibliography of scientific publications that reference OpenMS software, methods, and workflows. Showing publications from the two most recent years. Use the dropdown to switch between them." -}} +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + OpenMS in peer-reviewed publications.

    -

    - A curated bibliography of scientific publications that reference OpenMS software, methods, and workflows. - Showing publications from the two most recent years. Use the dropdown to switch between them. -

    -
    +

    {{ $subtitle }}

    +
    + Citing OpenMS + OpenMS-lib + Documentation +
    +

    +
    + +
    +
    {{ .Content }}
    diff --git a/layouts/partials/research-partnerships-main.html b/layouts/partials/research-partnerships-main.html new file mode 100644 index 0000000..9efe8f9 --- /dev/null +++ b/layouts/partials/research-partnerships-main.html @@ -0,0 +1,27 @@ +{{- $cfg := .Site.Params.researchPartnershipsPage | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Partner with OpenMS" -}} +{{- $subtitle := index $cfg "subtitle" | default "OpenMS grows through long-term collaboration with universities, institutes, and research groups that contribute software, methods, and training as part of their work." -}} +
    +
    +
    +
    +

    {{ $eyebrow }}

    +

    + Research partnerships that scale with your science. +

    +

    {{ $subtitle }}

    +
    + Discuss a partnership + Scientific & technical support + Contribute +
    +
    +
    +
    + +
    +
    + {{ .Content }} +
    +
    +
    diff --git a/layouts/partials/sponsor-us-main.html b/layouts/partials/sponsor-us-main.html new file mode 100644 index 0000000..63e7a05 --- /dev/null +++ b/layouts/partials/sponsor-us-main.html @@ -0,0 +1,26 @@ +{{- $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." -}} + diff --git a/layouts/partials/webapps.html b/layouts/partials/webapps.html index 01d9bdc..7fb18ae 100644 --- a/layouts/partials/webapps.html +++ b/layouts/partials/webapps.html @@ -10,6 +10,7 @@ {{- $description := index $section "description" }} {{- $ctaText := index $section "ctaText" | default "View project" }} {{- $showAll := index $section "showAll" }} +{{- $extraLinks := index $section "links" | default (slice) }} {{- $cardCtx := dict "ctaText" $ctaText }}
    @@ -69,12 +70,33 @@

    {{- end }} - {{- with $showAll }} + {{- if or $extraLinks $showAll }}
    + {{- if $extraLinks }} +
    + {{- range $extraLinks }} +
    + {{ .text }} + {{- with .description }} +

    {{ . }}

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

    From b61f2c8214eae5b974d47c3d87266efd60727b21 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Tue, 9 Jun 2026 21:26:22 +0100 Subject: [PATCH 15/20] Redesign the contact page with an embedded Tally form and a two-column layout. Co-authored-by: Cursor --- assets/css/contact-page.css | 582 ++++++++++++++++++--- content/en/contact.md | 63 --- layouts/partials/contact-alternatives.html | 57 ++ layouts/partials/contact-area.html | 4 +- layouts/partials/contact-email-aside.html | 17 + layouts/partials/contact-main.html | 29 +- layouts/partials/contact-support.html | 104 ++++ layouts/partials/tally-form-embed.html | 34 ++ 8 files changed, 748 insertions(+), 142 deletions(-) create mode 100644 layouts/partials/contact-alternatives.html create mode 100644 layouts/partials/contact-email-aside.html create mode 100644 layouts/partials/contact-support.html create mode 100644 layouts/partials/tally-form-embed.html diff --git a/assets/css/contact-page.css b/assets/css/contact-page.css index 7938ab3..c61ee8c 100644 --- a/assets/css/contact-page.css +++ b/assets/css/contact-page.css @@ -4,13 +4,14 @@ --olib-bg-soft: #f4f6f9; --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); - --contact-max: 64rem; + --contact-max: 72rem; display: block; width: 100%; max-width: none; margin: 0; padding: 0 0 clamp(2.5rem, 5vh, 4rem); + scroll-behavior: smooth; } .contact-page-layout__content { @@ -20,8 +21,13 @@ padding-inline: var(--olib-pad-x); } -.contact-page-hero { - margin-bottom: var(--olib-section-y); +.contact-page-layout .contact-page-hero.openms-lib-hero { + margin-bottom: clamp(0.35rem, 1vw, 0.75rem); + padding-bottom: clamp(1rem, 2.5vw, 1.5rem); +} + +.contact-page-layout .contact-page-hero .openms-lib-hero__chips { + margin-bottom: 0; } .contact-page-hero .openms-lib-hero__title { @@ -29,45 +35,481 @@ } .contact-page { + display: grid; + gap: clamp(2rem, 3.8vw, 3.2rem); margin-top: 0; } -.contact-page__channels { - grid-template-columns: repeat(2, minmax(0, 1fr)); +/* Form + email layout */ + +.contact-page__main-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); + gap: clamp(1.15rem, 2.5vw, 2rem); + align-items: start; + margin-top: -0.25rem; + margin-bottom: clamp(2.5rem, 5vw, 4rem); +} + +.contact-page__form-section { + min-width: 0; + scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem); +} + +.contact-page__email-aside { + position: sticky; + top: calc(var(--openms-header-height, 4.25rem) + 1rem); } -.contact-page__channel .governance-card__link { - margin-top: 1rem; +.contact-page__email-panel { + display: grid; + gap: 0.55rem; + padding: clamp(1.25rem, 2.5vw, 1.65rem); + border-radius: 1rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + background: linear-gradient( + 180deg, + rgba(var(--openms-blue-rgb), 0.05) 0%, + var(--openms-white) 100% + ); + box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); } -.contact-page__channel-btn { +.contact-page__email-icon { display: inline-flex; align-items: center; justify-content: center; - min-height: 2.75rem; - padding: var(--openms-btn-padding, 0.7rem 1.25rem); + width: 2.75rem; + height: 2.75rem; + border-radius: 0.65rem; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); +} + +.contact-page__email-eyebrow { + margin: 0; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.contact-page__email-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.15rem, 2vw, 1.35rem); + font-weight: 700; + line-height: 1.2; + color: var(--openms-navy); +} + +.contact-page__email-desc, +.contact-page__email-meta { + margin: 0; + font-size: 0.92rem; + line-height: 1.55; + color: var(--olib-text-muted); +} + +.contact-page__email-meta { + font-size: 0.82rem; + color: rgba(var(--openms-navy-rgb), 0.55); +} + +.contact-page__email-link { + display: inline-flex; + align-items: center; + justify-content: center; + width: fit-content; + margin-top: 0.35rem; + padding: 0.65rem 1rem; border-radius: 999px; + border: 2px solid var(--openms-blue); + background: var(--openms-white); + color: var(--openms-blue) !important; + font-size: var(--openms-text-min); + font-weight: 600; + text-decoration: none; + word-break: break-all; + transition: var(--openms-btn-motion, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease); +} + +.contact-page__email-link:hover, +.contact-page__email-link:focus-visible { + background: var(--openms-blue); + border-color: var(--openms-blue); + color: var(--openms-white) !important; + transform: scale(var(--openms-btn-hover-scale, 1.02)); + outline: none; +} + +.contact-page__form-embed { + overflow: visible; + padding: clamp(0.65rem, 1.5vw, 0.9rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.35rem); + border-radius: 1rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.12); + background: var(--openms-white); + box-shadow: + 0 1px 2px rgba(15, 23, 42, 0.04), + 0 8px 32px rgba(15, 23, 42, 0.06); +} + +.contact-page__tally-iframe { + display: block; + width: 100%; + min-height: 16rem; + border: 0; + background: transparent; +} + +/* Alternative channels */ + +.contact-page__alternatives { + padding-top: clamp(2rem, 4vw, 3rem); + border-top: 1px solid rgba(var(--openms-blue-rgb), 0.1); +} + +.contact-page__alternatives-header { + display: grid; + gap: 0.45rem; + max-width: 40rem; + margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); + text-align: center; +} + +.contact-page__alternatives-eyebrow { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.contact-page__alternatives-header h2 { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 2.5vw, 1.75rem); + font-weight: 700; + color: var(--openms-navy); +} + +.contact-page__alternatives-lead { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: var(--olib-text-muted); +} + +.contact-page__channel-list { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(0.85rem, 1.8vw, 1.15rem); + margin: 0; + padding: 0; + list-style: none; +} + +.contact-page__channel-list--duo { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.contact-page__channel-list > li { + display: flex; + min-width: 0; +} + +.contact-page__channel-card { + display: grid; + grid-template-rows: auto 1fr auto; + gap: 0.85rem; + width: 100%; + min-height: 100%; + padding: clamp(1.15rem, 2.2vw, 1.5rem); + border-radius: 0.85rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.12); + background: var(--openms-white); + color: inherit; text-decoration: none; + box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease, + background-color 0.2s ease; } -.contact-page__channel .governance-card__link a:not(.contact-page__channel-btn) { +.contact-page__channel-card:hover, +.contact-page__channel-card:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.3); + background: rgba(var(--openms-blue-rgb), 0.02); + box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); + transform: translateY(-2px); + outline: none; +} + +.contact-page__channel-card:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-navy), + 0 0 0 5px var(--openms-yellow), + 0 10px 30px rgba(15, 23, 42, 0.08); +} + +.contact-page__channel-card-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.65rem; + height: 2.65rem; + border-radius: 0.65rem; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.09); +} + +.contact-page__channel-card-body { + display: grid; + gap: 0.35rem; + align-content: start; +} + +.contact-page__channel-card-label { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.contact-page__channel-card-title { + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.8vw, 1.2rem); + font-weight: 700; + line-height: 1.25; + color: var(--openms-navy); +} + +.contact-page__channel-card-desc { + font-size: 0.95rem; + line-height: 1.55; + color: var(--olib-text-muted); +} + +.contact-page__channel-card-meta { + font-size: 0.82rem; + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.55); +} + +.contact-page__channel-card-action { + display: inline-flex; + align-items: center; + gap: 0.2rem; + margin-top: auto; + padding-top: 0.35rem; + font-size: var(--openms-text-min); font-weight: 600; color: var(--openms-blue); - text-decoration: underline; - text-underline-offset: 0.14em; } -.contact-page__note { - padding: clamp(1.25rem, 2.5vw, 1.75rem); +.contact-page__channel-card:hover .contact-page__channel-card-action, +.contact-page__channel-card:focus-visible .contact-page__channel-card-action { + color: var(--openms-navy); +} + +.contact-page__channel-card-action svg { + flex-shrink: 0; + transition: transform 0.2s ease; +} + +.contact-page__channel-card:hover .contact-page__channel-card-action svg, +.contact-page__channel-card:focus-visible .contact-page__channel-card-action svg { + transform: translateX(2px); +} + +/* Supporting OpenMS */ + +.contact-page__support { + margin-top: clamp(2rem, 4vw, 3rem); + padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: 1rem; - background: rgba(var(--openms-blue-rgb), 0.06); - border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + background: linear-gradient( + 135deg, + rgba(var(--openms-blue-rgb), 0.06) 0%, + rgba(var(--openms-blue-rgb), 0.02) 55%, + rgba(var(--openms-navy-rgb), 0.03) 100% + ); + border: 1px solid rgba(var(--openms-blue-rgb), 0.12); +} + +.contact-page__support-header { + display: grid; + gap: 0.45rem; + max-width: 40rem; + margin: 0 auto clamp(1.35rem, 2.8vw, 2rem); + text-align: center; +} + +.contact-page__support-eyebrow { + margin: 0; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.contact-page__support-header h2 { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.35rem, 2.5vw, 1.75rem); + font-weight: 700; + color: var(--openms-navy); +} + +.contact-page__support-lead { + margin: 0; + font-size: var(--openms-body-size-lg); + line-height: 1.55; + color: var(--olib-text-muted); +} + +.contact-page__support-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(0.85rem, 1.8vw, 1.15rem); + margin: 0; + padding: 0; + list-style: none; +} + +.contact-page__support-list > li { + display: flex; + min-width: 0; +} + +.contact-page__support-card { + display: grid; + grid-template-rows: auto 1fr auto; + gap: 0.85rem; + width: 100%; + min-height: 100%; + padding: clamp(1.15rem, 2.2vw, 1.45rem); + border-radius: 0.85rem; + border: 1px solid rgba(var(--openms-blue-rgb), 0.12); + background: var(--openms-white); + color: inherit; + text-decoration: none; + box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease, + background-color 0.2s ease; +} + +.contact-page__support-card--featured { + border-color: rgba(var(--openms-navy-rgb), 0.2); + background: linear-gradient( + 180deg, + rgba(var(--openms-navy-rgb), 0.03) 0%, + var(--openms-white) 100% + ); +} + +.contact-page__support-card:hover, +.contact-page__support-card:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.3); + background: rgba(var(--openms-blue-rgb), 0.02); + box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); + transform: translateY(-2px); + outline: none; +} + +.contact-page__support-card--featured:hover, +.contact-page__support-card--featured:focus-visible { + border-color: rgba(var(--openms-navy-rgb), 0.35); +} + +.contact-page__support-card:focus-visible { + box-shadow: + 0 0 0 3px var(--openms-navy), + 0 0 0 5px var(--openms-yellow), + 0 10px 30px rgba(15, 23, 42, 0.08); +} + +.contact-page__support-card-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.65rem; + height: 2.65rem; + border-radius: 0.65rem; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.09); +} + +.contact-page__support-card--featured .contact-page__support-card-icon { + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.08); +} + +.contact-page__support-card-body { + display: grid; + gap: 0.35rem; + align-content: start; +} + +.contact-page__support-card-label { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.contact-page__support-card-title { + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.8vw, 1.2rem); + font-weight: 700; + line-height: 1.25; + color: var(--openms-navy); +} + +.contact-page__support-card-desc { + font-size: 0.95rem; + line-height: 1.55; + color: var(--olib-text-muted); +} + +.contact-page__support-card-action { + display: inline-flex; + align-items: center; + gap: 0.2rem; + margin-top: auto; + padding-top: 0.35rem; + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--openms-blue); +} + +.contact-page__support-card:hover .contact-page__support-card-action, +.contact-page__support-card:focus-visible .contact-page__support-card-action { + color: var(--openms-navy); +} + +.contact-page__support-card-action svg { + flex-shrink: 0; + transition: transform 0.2s ease; +} + +.contact-page__support-card:hover .contact-page__support-card-action svg, +.contact-page__support-card:focus-visible .contact-page__support-card-action svg { + transform: translateX(2px); } /* Navbar-style CTA motion (contact page) */ -.contact-page-layout .openms-lib-btn, -.contact-page-layout .contact-page__channel-btn, -.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn) { +.contact-page-layout .openms-lib-btn { display: inline-flex; align-items: center; justify-content: center; @@ -86,42 +528,28 @@ transition: var(--openms-btn-motion); } -.contact-page-layout .openms-lib-btn--primary, -.contact-page-layout .contact-page__channel-btn { +.contact-page-layout .openms-lib-btn--primary { gap: 0.5rem; padding-inline: 1.15rem; - border: 2px solid var(--openms-blue); - background: var(--openms-blue); - color: var(--openms-white) !important; -} - -.contact-page-layout .openms-lib-btn--primary { - border-color: var(--openms-navy); + border: 2px solid var(--openms-navy); background: var(--openms-navy); + color: var(--openms-white) !important; } -.contact-page-layout .openms-lib-btn--ghost, -.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn) { +.contact-page-layout .openms-lib-btn--ghost { border: 2px solid var(--openms-blue); background: transparent; background-color: transparent; color: var(--openms-blue) !important; } -.contact-page-layout .contact-page__channel .governance-card__link a { - margin-top: 0; -} - .contact-page-layout .openms-lib-hero__actions { gap: 0.75rem; } .contact-page-layout .openms-lib-btn--primary:hover, .contact-page-layout .openms-lib-btn--primary:focus-visible, -.contact-page-layout .openms-lib-btn--primary:active, -.contact-page-layout .contact-page__channel-btn:hover, -.contact-page-layout .contact-page__channel-btn:focus-visible, -.contact-page-layout .contact-page__channel-btn:active { +.contact-page-layout .openms-lib-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; @@ -136,20 +564,9 @@ color: var(--openms-white) !important; } -.contact-page-layout .contact-page__channel-btn:hover, -.contact-page-layout .contact-page__channel-btn:focus-visible, -.contact-page-layout .contact-page__channel-btn:active { - background: var(--openms-blue); - border-color: var(--openms-blue); - color: var(--openms-white) !important; -} - .contact-page-layout .openms-lib-btn--ghost:hover, .contact-page-layout .openms-lib-btn--ghost:focus-visible, -.contact-page-layout .openms-lib-btn--ghost:active, -.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn):hover, -.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn):focus-visible, -.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn):active { +.contact-page-layout .openms-lib-btn--ghost:active { background: transparent; background-color: transparent; border-color: var(--openms-blue); @@ -160,18 +577,38 @@ text-decoration: none; } -.contact-page-layout .openms-lib-btn--primary:focus-visible, -.contact-page-layout .contact-page__channel-btn:focus-visible { +.contact-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); } -.contact-page-layout .openms-lib-btn--ghost:focus-visible, -.contact-page-layout .contact-page__channel .governance-card__link a:not(.contact-page__channel-btn):focus-visible { +.contact-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: 960px) { + .contact-page__main-grid { + grid-template-columns: 1fr; + } + + .contact-page__email-aside { + position: static; + } + + .contact-page__channel-list, + .contact-page__channel-list--duo, + .contact-page__support-list { + grid-template-columns: 1fr; + } +} + +@media (min-width: 961px) and (max-width: 1100px) { + .contact-page__channel-card-action { + flex-wrap: wrap; + } +} + @media (max-width: 720px) { .contact-page-layout { --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); @@ -197,21 +634,38 @@ .contact-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { align-self: center; } -} -@media (max-width: 860px) { - .contact-page__channels { - grid-template-columns: 1fr; + .contact-page__form-embed { + padding: 0.55rem 1rem 0.85rem; + } + + .contact-page__email-link { + width: 100%; + justify-content: center; } } @media (prefers-reduced-motion: reduce) { + .contact-page-layout { + scroll-behavior: auto; + } + + .contact-page__channel-card:hover, + .contact-page__channel-card:focus-visible, + .contact-page__support-card:hover, + .contact-page__support-card:focus-visible { + transform: none; + } + + .contact-page__channel-card:hover .contact-page__channel-card-action svg, + .contact-page__channel-card:focus-visible .contact-page__channel-card-action svg, + .contact-page__support-card:hover .contact-page__support-card-action svg, + .contact-page__support-card:focus-visible .contact-page__support-card-action svg { + transform: none; + } + .contact-page-layout .openms-lib-btn:hover, - .contact-page-layout .openms-lib-btn:focus-visible, - .contact-page-layout .contact-page__channel-btn:hover, - .contact-page-layout .contact-page__channel-btn:focus-visible, - .contact-page-layout .contact-page__channel .governance-card__link a:hover, - .contact-page-layout .contact-page__channel .governance-card__link a:focus-visible { + .contact-page-layout .openms-lib-btn:focus-visible { transform: none; } } diff --git a/content/en/contact.md b/content/en/contact.md index e9e2ed2..4961542 100644 --- a/content/en/contact.md +++ b/content/en/contact.md @@ -4,66 +4,3 @@ sidebar: false hidePageTitle: true hideShortcuts: true --- - -
    -
    -

    Message

    -

    Contact form

    -

    - Share your question, partnership idea, or support request. We typically reply - within one to two business days. -

    -

    - Send a message -

    -
    -
    -

    Direct

    -

    Email

    -

    - Prefer email? Write to the OpenMS team for technical questions, website - feedback, or collaboration inquiries. -

    -

    - webmaster@openms.de -

    -
    -
    -

    Community

    -

    Discord & GitHub

    -

    - Join discussions, report issues, and connect with contributors on our community - channels. -

    -

    - View community channels -

    -
    -
    -

    Support

    -

    Help & consulting

    -

    - Browse help resources or learn about paid scientific and technical support - options. -

    -

    - OpenMS help -

    -
    -
    - -
    -

    Supporting OpenMS

    -

    - You can also support the project as a - sponsor or through - donations. For governance and partnerships, see - Research partnerships and - About OpenMS Inc. -

    -
    diff --git a/layouts/partials/contact-alternatives.html b/layouts/partials/contact-alternatives.html new file mode 100644 index 0000000..9df14bf --- /dev/null +++ b/layouts/partials/contact-alternatives.html @@ -0,0 +1,57 @@ +
    +
    +

    Need another route?

    +

    Other ways to reach us

    +

    + Prefer community chat or self-service help? Choose the channel that fits. +

    +
    + + +
    diff --git a/layouts/partials/contact-area.html b/layouts/partials/contact-area.html index a4b9874..d5fa431 100644 --- a/layouts/partials/contact-area.html +++ b/layouts/partials/contact-area.html @@ -66,9 +66,7 @@

    Let us build with you Send a message diff --git a/layouts/partials/contact-email-aside.html b/layouts/partials/contact-email-aside.html new file mode 100644 index 0000000..be75cb0 --- /dev/null +++ b/layouts/partials/contact-email-aside.html @@ -0,0 +1,17 @@ + diff --git a/layouts/partials/contact-main.html b/layouts/partials/contact-main.html index dd8078e..ef468dd 100644 --- a/layouts/partials/contact-main.html +++ b/layouts/partials/contact-main.html @@ -10,23 +10,28 @@

    Let's talk about your workflow

    {{ $subtitle }}

    -
    - Open contact form - Email us - Community channels -
    +
      +
    • Replies in 1–2 business days
      • +
    • Free & open to everyone
      • +
    -
    - {{ .Content }} +
    +
    + {{ partial "tally-form-embed.html" . }} +
    + + {{ partial "contact-email-aside.html" . }}
    + + {{ partial "contact-alternatives.html" . }} + {{ partial "contact-support.html" . }}
    diff --git a/layouts/partials/contact-support.html b/layouts/partials/contact-support.html new file mode 100644 index 0000000..e974a6c --- /dev/null +++ b/layouts/partials/contact-support.html @@ -0,0 +1,104 @@ +
    +
    +

    Give back

    +

    Supporting OpenMS

    +

    + Help sustain open-source mass spectrometry software, community programs, and + long-term development. +

    +
    + + +
    diff --git a/layouts/partials/tally-form-embed.html b/layouts/partials/tally-form-embed.html new file mode 100644 index 0000000..019f728 --- /dev/null +++ b/layouts/partials/tally-form-embed.html @@ -0,0 +1,34 @@ +
    + +
    + + From dba2ceb3f01d601df9e058d83433097ddb85eb73 Mon Sep 17 00:00:00 2001 From: Raphaela Gil <128820385+RaphaGil@users.noreply.github.com> Date: Thu, 18 Jun 2026 20:04:32 +0100 Subject: [PATCH 16/20] improved layout and design of the website --- assets/css/about.css | 61 +- assets/css/applications-page.css | 285 ++- assets/css/brand-palette.css | 42 +- assets/css/community-calendar.css | 33 +- assets/css/community-events-home.css | 287 +++ assets/css/community-home.css | 186 ++ assets/css/contact-area.css | 273 ++- assets/css/contact-page.css | 548 ++---- assets/css/contribute-page.css | 31 - assets/css/donate-page.css | 26 + assets/css/governance.css | 97 +- assets/css/help-page.css | 35 - assets/css/hero-saas.css | 318 ++-- assets/css/home.css | 649 +++++-- assets/css/navbar-responsive.css | 218 ++- assets/css/navbar-search.css | 227 ++- assets/css/navbar-surface.css | 131 ++ assets/css/news-banner.css | 125 +- assets/css/news-section.css | 547 ++---- assets/css/openms-buttons.css | 14 +- assets/css/openms-lib.css | 1679 +++++++++++++++-- assets/css/publications.css | 430 +++-- assets/css/research-partnerships-page.css | 33 - assets/css/shortcuts_override.css | 6 + assets/css/site-header.css | 79 +- assets/css/sponsor-us-page.css | 33 - assets/css/styles_override.css | 482 +++-- assets/css/university-partners.css | 15 + assets/css/webapps.css | 26 +- assets/js/home-scroll-reveal.js | 4 +- assets/js/navbar-search.js | 63 +- assets/js/news-year-filter.js | 108 +- assets/js/publications-year-filter.js | 102 +- config.yaml | 103 +- content/en/about.md | 12 +- content/en/applications/_index.md | 19 +- content/en/help.md | 17 - content/en/openms-lib.md | 59 +- content/en/publications.md | 127 +- data/community_events.yaml | 29 + layouts/applications/section.html | 54 +- layouts/index.html | 10 +- layouts/news/section.html | 153 +- layouts/partials/about-main.html | 2 - layouts/partials/community-calendar-main.html | 9 +- layouts/partials/community-events-home.html | 118 ++ layouts/partials/community-home.html | 52 + layouts/partials/contact-alternatives.html | 84 +- layouts/partials/contact-area.html | 68 +- layouts/partials/contact-email-aside.html | 28 +- layouts/partials/contact-main.html | 37 +- layouts/partials/contact-support.html | 11 +- layouts/partials/donate-main.html | 28 +- layouts/partials/hero-stat-card.html | 18 +- layouts/partials/hero-stats.html | 13 +- layouts/partials/hero.html | 61 +- layouts/partials/heroitems.html | 6 +- layouts/partials/navbar-clone.html | 3 +- layouts/partials/navbar-search.html | 53 +- layouts/partials/navbar.html | 3 +- layouts/partials/news-banner.html | 22 +- layouts/partials/news-year-select.html | 16 + layouts/partials/publications-main.html | 2 +- .../partials/publications-year-select.html | 35 +- layouts/partials/tally-form-embed.html | 2 +- layouts/partials/university-partner-item.html | 31 + layouts/partials/university-partners.html | 94 +- layouts/partials/webapps-project-card.html | 12 +- layouts/partials/webapps.html | 29 +- layouts/shortcodes/partners.html | 2 +- static/images/community/community-tech-bg.svg | 111 ++ static/images/community/community-welcome.svg | 93 + static/images/community/dev-meeting.jpg | Bin 0 -> 235176 bytes .../logos/OpenMS_transparent_whiteFont.svg | 62 + 74 files changed, 5806 insertions(+), 3075 deletions(-) create mode 100644 assets/css/community-events-home.css create mode 100644 assets/css/community-home.css create mode 100644 assets/css/navbar-surface.css create mode 100644 layouts/partials/community-events-home.html create mode 100644 layouts/partials/community-home.html create mode 100644 layouts/partials/news-year-select.html create mode 100644 layouts/partials/university-partner-item.html create mode 100644 static/images/community/community-tech-bg.svg create mode 100644 static/images/community/community-welcome.svg create mode 100644 static/images/community/dev-meeting.jpg create mode 100644 static/images/logos/OpenMS_transparent_whiteFont.svg diff --git a/assets/css/about.css b/assets/css/about.css index 6bac4ad..7da007f 100644 --- a/assets/css/about.css +++ b/assets/css/about.css @@ -24,10 +24,6 @@ margin-bottom: var(--olib-section-y); } -.about-page-hero .openms-lib-hero__title { - max-width: 24ch; -} - .about-page, .research-partnerships-page, .sponsor-us-page { @@ -129,12 +125,18 @@ .about-section h2 { margin-top: 0; margin-bottom: 0.75rem; + font-size: clamp(1.2rem, 3vw, 1.65rem); + line-height: 1.25; + text-wrap: balance; color: var(--openms-navy); } .about-page .governance-links h2 { margin-top: 0; margin-bottom: 0.75rem; + font-size: clamp(1.2rem, 3vw, 1.65rem); + line-height: 1.25; + text-wrap: balance; color: var(--openms-navy) !important; } @@ -144,6 +146,8 @@ .about-section p { max-width: 72ch; + font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg)); + line-height: 1.6; } .about-two-col { @@ -266,7 +270,9 @@ /* Navbar-style CTA motion (about page) */ .about-page-layout .openms-lib-btn, -.about-page-layout .about-page .about-donate-actions > a { +.about-page-layout .about-page .about-donate-actions > a, +.donate-page-layout .openms-lib-btn, +.donate-page-layout .donate-page .about-donate-actions > a { display: inline-flex; align-items: center; justify-content: center; @@ -294,7 +300,9 @@ } .about-page-layout .openms-lib-btn--ghost, -.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate { +.donate-page-layout .openms-lib-btn--ghost, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate, +.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate { border: 2px solid var(--openms-blue); background: transparent; background-color: transparent; @@ -307,10 +315,6 @@ color: var(--openms-white) !important; } -.about-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .about-page-layout .openms-lib-btn--primary:hover, .about-page-layout .openms-lib-btn--primary:focus-visible, .about-page-layout .openms-lib-btn--primary:active, @@ -340,11 +344,17 @@ } .about-page-layout .openms-lib-btn--ghost:hover, +.donate-page-layout .openms-lib-btn--ghost:hover, .about-page-layout .openms-lib-btn--ghost:focus-visible, +.donate-page-layout .openms-lib-btn--ghost:focus-visible, .about-page-layout .openms-lib-btn--ghost:active, +.donate-page-layout .openms-lib-btn--ghost:active, .about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:hover, +.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:hover, .about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:focus-visible, -.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:active { +.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:focus-visible, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:active, +.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:active { background: transparent; background-color: transparent; border-color: var(--openms-blue); @@ -362,7 +372,9 @@ } .about-page-layout .openms-lib-btn--ghost:focus-visible, -.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:focus-visible { +.donate-page-layout .openms-lib-btn--ghost:focus-visible, +.about-page-layout .about-page .about-donate-actions > .about-cta-btn--donate:focus-visible, +.donate-page-layout .donate-page .about-donate-actions > .about-cta-btn--donate:focus-visible { box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); } @@ -501,31 +513,6 @@ } @media (max-width: 720px) { - .about-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .about-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .about-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .about-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .about-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } - .about-page .about-donate-actions { flex-direction: column; width: 100%; diff --git a/assets/css/applications-page.css b/assets/css/applications-page.css index f8d3728..6246add 100644 --- a/assets/css/applications-page.css +++ b/assets/css/applications-page.css @@ -1,87 +1,248 @@ .applications-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)); - --apps-max: 64rem; + --apps-max: 72rem; + --apps-pad-x: clamp(1.25rem, 4vw, 2rem); + --apps-section-y: clamp(4rem, 8vh, 5.5rem); + --apps-bg-soft: #f4f6f9; + --apps-line: rgba(var(--openms-navy-rgb), 0.08); + --apps-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --apps-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--apps-bg-soft)); + --apps-radius: 1.25rem; + --apps-radius-sm: 0.65rem; + --apps-shadow: 0 0.35rem 1.5rem rgba(var(--openms-navy-rgb), 0.06); + --apps-shadow-hover: 0 0.75rem 2rem rgba(var(--openms-navy-rgb), 0.1); + --apps-card-gap: clamp(1rem, 2vw, 1.35rem); + --apps-ease: cubic-bezier(0.22, 1, 0.36, 1); display: block; width: 100%; max-width: none; margin: 0; - padding: 0 0 clamp(2.5rem, 5vh, 4rem); + padding: 0 0 clamp(3rem, 6vh, 4.5rem); + color: var(--openms-navy); + background: var(--openms-white); } .applications-page-layout__content { width: min(100%, var(--apps-max)); max-width: var(--apps-max); margin-inline: auto; - padding-inline: var(--olib-pad-x); + padding-inline: var(--apps-pad-x); } .applications-page { display: grid; - gap: clamp(2rem, 3.8vw, 3.2rem); + gap: clamp(2.5rem, 5vw, 3.5rem); margin-top: 0; } .applications-page-hero { - margin-bottom: var(--olib-section-y); + margin-bottom: clamp(2rem, 4vh, 3rem); } -.applications-page-hero + .applications-page-layout__content .applications-page { - gap: clamp(1.75rem, 3vw, 2.5rem); +.applications-page-hero.openms-lib-hero { + --olib-pad-x: var(--apps-pad-x); + --olib-hero-bg-top: var(--apps-hero-bg-top); } +/* Intro */ .applications-page__intro { display: grid; - gap: 1rem; + gap: clamp(1rem, 2.2vw, 1.35rem); + max-width: 52rem; font-family: var(--openms-font-body); font-size: var(--openms-body-size-lg); - line-height: 1.6; - color: rgba(var(--openms-dark-rgb), 0.88); + line-height: 1.65; + color: rgba(var(--openms-navy-rgb), 0.88); } .applications-page__intro p { margin: 0; } -.applications-page__intro ul { +.applications-page__intro a { + color: var(--openms-blue); + font-weight: 600; + text-decoration: none; +} + +.applications-page__intro a:hover, +.applications-page__intro a:focus-visible { + color: var(--openms-navy); + text-decoration: underline; + text-underline-offset: 0.14em; +} + +.applications-page__callout { + margin: 0; + padding: clamp(1.1rem, 2.2vw, 1.35rem) clamp(1.15rem, 2.5vw, 1.5rem); + border: 1px solid var(--apps-line); + border-left: 4px solid var(--openms-blue); + border-radius: 0 var(--apps-radius-sm) var(--apps-radius-sm) 0; + background: color-mix(in srgb, var(--apps-bg-soft) 55%, var(--openms-white)); +} + +.applications-page__callout > p:first-child, +.applications-page__callout > strong:first-child { + margin: 0 0 0.65rem; + font-size: var(--openms-text-min); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.applications-page__callout > p:first-child strong { + font-weight: inherit; + color: inherit; +} + +.applications-page__callout ul { margin: 0; - padding-left: 1.35rem; + padding-left: 1.2rem; } -.applications-page__intro li + li { +.applications-page__callout li + li { margin-top: 0.35rem; } -.applications-page__intro a { - color: var(--openms-blue); - font-weight: 500; - text-decoration: underline; - text-underline-offset: 0.14em; +.applications-page__callout a { + font-weight: 600; } -.applications-page__list { - grid-template-columns: repeat(2, minmax(0, 1fr)); +/* Catalog */ +.applications-page__catalog { + display: grid; + gap: clamp(1.75rem, 3.5vw, 2.5rem); +} + +.applications-page__catalog-head { + display: grid; + gap: 0.55rem; + justify-items: center; + max-width: 46rem; + margin-inline: auto; + text-align: center; } -.applications-page__authors { +.applications-page__catalog-title { margin: 0; - font-size: var(--openms-text-min); - color: rgba(var(--openms-dark-rgb), 0.72); + font-family: var(--openms-font-heading); + font-size: clamp(1.55rem, 3.2vw, 2rem); + font-weight: var(--openms-heading-lg-weight); + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--openms-navy); + text-wrap: balance; +} + +.applications-page__catalog-lead { + margin: 0; + max-width: 48ch; + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: var(--apps-text-muted); +} + +.applications-page__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--apps-card-gap); + margin: 0; + padding: 0; + list-style: none; } -.applications-page__date { +.applications-page__item { + display: flex; + min-width: 0; +} + +.applications-page__card { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + height: 100%; + padding: clamp(1.15rem, 2.2vw, 1.4rem); + border: 1px solid var(--apps-line); + border-radius: var(--apps-radius); + background: var(--openms-white); + box-shadow: var(--apps-shadow); + color: inherit; + text-decoration: none; + transition: + border-color 0.22s var(--apps-ease), + box-shadow 0.22s var(--apps-ease), + transform 0.22s var(--apps-ease); +} + +.applications-page__card:hover, +.applications-page__card:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.24); + box-shadow: var(--apps-shadow-hover); + transform: translateY(-2px); + outline: none; +} + +.applications-page__card-tag { + display: inline-flex; + margin-bottom: 0.15rem; + padding: 0.18rem 0.5rem; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.08); + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); + border-radius: 999px; +} + +.applications-page__card-title { margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.05rem, 1.9vw, 1.2rem); + font-weight: 700; + line-height: 1.28; + color: var(--openms-navy); + text-wrap: balance; +} + +.applications-page__card-text { + flex: 1 1 auto; + margin: 0.35rem 0 0; + font-size: var(--openms-text-min); + line-height: 1.58; + color: var(--apps-text-muted); +} + +.applications-page__card-meta { + margin: 0.35rem 0 0; + font-size: 0.72rem; + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.55); +} + +.applications-page__card-cta { + display: inline-flex; + align-items: center; + gap: 0.25rem; + margin-top: auto; + padding-top: 0.75rem; font-size: var(--openms-text-min); - color: rgba(var(--openms-dark-rgb), 0.65); + font-weight: 700; + color: var(--openms-blue); + transition: gap 0.15s ease, color 0.15s ease; +} + +.applications-page__card:hover .applications-page__card-cta, +.applications-page__card:focus-visible .applications-page__card-cta { + gap: 0.4rem; + color: var(--openms-navy); } -/* Navbar-style CTA motion (applications page) */ -.applications-page-layout .openms-lib-btn, -.applications-page-layout .applications-page__card .governance-card__link a { +/* Navbar-style CTA motion (hero) */ +.applications-page-layout .openms-lib-btn { display: inline-flex; align-items: center; justify-content: center; @@ -107,22 +268,13 @@ color: var(--openms-white) !important; } -.applications-page-layout .openms-lib-btn--ghost, -.applications-page-layout .applications-page__card .governance-card__link a { +.applications-page-layout .openms-lib-btn--ghost { border: 2px solid var(--openms-blue); background: transparent; background-color: transparent; color: var(--openms-blue) !important; } -.applications-page-layout .applications-page__card .governance-card__link a { - margin-top: 0; -} - -.applications-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .applications-page-layout .openms-lib-btn--primary:hover, .applications-page-layout .openms-lib-btn--primary:focus-visible, .applications-page-layout .openms-lib-btn--primary:active { @@ -137,10 +289,7 @@ .applications-page-layout .openms-lib-btn--ghost:hover, .applications-page-layout .openms-lib-btn--ghost:focus-visible, -.applications-page-layout .openms-lib-btn--ghost:active, -.applications-page-layout .applications-page__card .governance-card__link a:hover, -.applications-page-layout .applications-page__card .governance-card__link a:focus-visible, -.applications-page-layout .applications-page__card .governance-card__link a:active { +.applications-page-layout .openms-lib-btn--ghost:active { background: transparent; background-color: transparent; border-color: var(--openms-blue); @@ -156,50 +305,50 @@ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); } -.applications-page-layout .openms-lib-btn--ghost:focus-visible, -.applications-page-layout .applications-page__card .governance-card__link a:focus-visible { +.applications-page-layout .openms-lib-btn--ghost:focus-visible { box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); } -@media (max-width: 860px) { - .applications-page__list { - grid-template-columns: 1fr; +@media (max-width: 1024px) { + .applications-page__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { - .applications-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + .applications-page__grid { + grid-template-columns: 1fr; } - .applications-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); + .applications-page__card:hover, + .applications-page__card:focus-visible { + transform: none; } - .applications-page-hero .openms-lib-hero__actions { + .applications-page-layout .openms-lib-hero__actions { flex-direction: column; align-items: stretch; - gap: 0.55rem; + max-width: 22rem; + margin-inline: auto; } - .applications-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + .applications-page-layout .openms-lib-hero__actions .openms-lib-btn { width: 100%; justify-content: center; } - - .applications-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } } @media (prefers-reduced-motion: reduce) { + .applications-page__card, + .applications-page-layout .openms-lib-btn { + transition: none; + } + + .applications-page__card:hover, + .applications-page__card:focus-visible, .applications-page-layout .openms-lib-btn:hover, - .applications-page-layout .openms-lib-btn:focus-visible, - .applications-page-layout .applications-page__card .governance-card__link a:hover, - .applications-page-layout .applications-page__card .governance-card__link a:focus-visible { + .applications-page-layout .openms-lib-btn:focus-visible { transform: none; } } diff --git a/assets/css/brand-palette.css b/assets/css/brand-palette.css index 574d1ba..8e61889 100644 --- a/assets/css/brand-palette.css +++ b/assets/css/brand-palette.css @@ -14,9 +14,21 @@ /* Body & secondary headings — Raleway (pt) */ --openms-text-min: 11pt; - --openms-navbar-font-size: 16px; - --openms-navbar-logo-height: 68px; - --openms-header-bar-min-height: calc(var(--openms-navbar-logo-height) + 1.25rem); + --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: transparent; + --openms-navbar-dropdown-border: rgba(var(--openms-navy-rgb), 0.1); + --openms-navbar-container-pad-inline: clamp(1.25rem, 3vw, 2.25rem); + --openms-navbar-container-pad-inline-mobile: 1.15rem; + --openms-navbar-brand-slot-width: 18.5rem; + --openms-navbar-logo-height: 76px; + --openms-header-bar-min-height: calc(var(--openms-navbar-logo-height) + 0.65rem); /* Nav breakpoints: burger < 1280px; compact xl 1280–1535px; full desktop 1536px+ */ --openms-nav-desktop-min: 1280px; --openms-nav-xl-wide-min: 1536px; @@ -58,6 +70,30 @@ --openms-grey-rgb: 194, 186, 188; --openms-white-rgb: 255, 255, 255; + /* Site chrome — unified banner → nav → hero stack */ + --openms-chrome-bg: var(--openms-navy); + --openms-chrome-border: rgba(var(--openms-white-rgb), 0.1); + --openms-chrome-border-strong: rgba(var(--openms-white-rgb), 0.16); + --openms-chrome-text: rgba(var(--openms-white-rgb), 0.92); + --openms-chrome-text-muted: rgba(var(--openms-white-rgb), 0.62); + --openms-chrome-surface: rgba(var(--openms-white-rgb), 0.07); + --openms-chrome-surface-hover: rgba(var(--openms-white-rgb), 0.12); + --openms-chrome-accent: var(--openms-pink); + --openms-chrome-accent-line: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 55%, + var(--openms-pink) 100% + ); + --openms-chrome-banner-bg: var(--openms-white); + --openms-chrome-banner-label: var(--openms-white); + --openms-chrome-banner-label-bg: var(--openms-orange); + --openms-chrome-banner-label-border: var(--openms-orange); + --openms-chrome-banner-text: rgba(var(--openms-navy-rgb), 0.88); + --openms-chrome-banner-border: rgba(var(--openms-navy-rgb), 0.1); + --openms-chrome-nav-surface: rgba(var(--openms-white-rgb), 0.97); + --openms-chrome-nav-border: rgba(var(--openms-navy-rgb), 0.08); + --colorPrimaryDark: var(--openms-blue); --colorPrimaryDarkBtn: var(--openms-blue); --colorPrimary: var(--openms-blue); diff --git a/assets/css/community-calendar.css b/assets/css/community-calendar.css index e11973e..1c80402 100644 --- a/assets/css/community-calendar.css +++ b/assets/css/community-calendar.css @@ -26,7 +26,7 @@ margin-top: 0; } -.community-calendar-hero { +.calendar-page-hero { margin-bottom: var(--olib-section-y); } @@ -317,10 +317,6 @@ padding-inline: 0; } -.community-calendar-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .community-calendar-layout .community-calendar__toolbar { gap: 0.75rem 0.85rem; } @@ -377,33 +373,6 @@ } } -@media (max-width: 720px) { - .community-calendar-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .community-calendar-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .community-calendar-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .community-calendar-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .community-calendar-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } -} - @media (prefers-reduced-motion: reduce) { .community-calendar-layout .openms-lib-btn:hover, .community-calendar-layout .openms-lib-btn:focus-visible, diff --git a/assets/css/community-events-home.css b/assets/css/community-events-home.css new file mode 100644 index 0000000..3c588fb --- /dev/null +++ b/assets/css/community-events-home.css @@ -0,0 +1,287 @@ +/* Homepage upcoming events — stacked list (site color scheme) */ + +.community-events-home { + --events-card-radius: 0.85rem; + --events-grid-gap: 0.85rem; + --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); + + padding: var(--home-section-pad) var(--home-pad-x); + background: var(--openms-white); +} + +.community-events-home__inner { + max-width: var(--home-max, 75rem); + margin: 0 auto; +} + +.community-events-home__header { + margin: 0 0 clamp(1.75rem, 3.5vh, 2.25rem); +} + +.community-events-home__header-main { + max-width: min(100%, 46rem); +} + +.community-events-home__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 0.85rem; + padding: 0.35rem 0.75rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; +} + +.community-events-home__eyebrow-icon { + display: inline-flex; + line-height: 0; + opacity: 0.9; +} + +.community-events-home__eyebrow-icon svg { + display: block; + width: 0.875rem; + height: 0.875rem; +} + +.community-events-home__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(2rem, 4.2vw, 3.15rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + color: var(--openms-navy); + text-wrap: balance; +} + +.community-events-home__title-accent { + display: inline; + background: linear-gradient( + 90deg, + var(--openms-blue-secondary) 0%, + var(--openms-purple) 50%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; +} + +.community-events-home__lead { + margin: 0.85rem 0 0; + max-width: 52ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-dark-rgb), 0.72); + text-wrap: pretty; +} + +.community-events-home__grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: 1fr; + gap: var(--events-grid-gap); +} + +.community-events-home__item { + display: flex; + min-width: 0; +} + +.community-events-home__card { + display: flex; + width: 100%; + margin: 0; +} + +.community-events-home__card-link { + display: flex; + flex-direction: row; + align-items: center; + gap: clamp(0.85rem, 2vw, 1.15rem); + width: 100%; + min-height: 5.5rem; + padding: clamp(0.85rem, 2vw, 1rem) clamp(1rem, 2vw, 1.15rem); + border-radius: var(--events-card-radius); + border: 1px solid var(--events-card-border); + background: var(--events-card-bg); + 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; +} + +.community-events-home__card-link--static { + cursor: default; +} + +.community-events-home__card-link:hover, +.community-events-home__card-link:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.22); + background: var(--events-card-bg); + box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-blue-rgb), 0.1); + transform: translateY(-2px); + 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); + box-shadow: 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05); +} + +.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: 3.75rem; + min-height: 3.75rem; + padding: 0.45rem 0.55rem; + border-radius: 0.55rem; + background: var(--events-date-bg); + border: 1px solid var(--events-date-border); + text-align: center; + line-height: 1; +} + +.community-events-home__date-day { + font-family: var(--openms-font-heading); + font-size: 1.55rem; + font-weight: 800; + letter-spacing: -0.03em; + color: var(--openms-navy); +} + +.community-events-home__date-month { + margin-top: 0.2rem; + font-family: var(--openms-font-body); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--openms-blue); +} + +.community-events-home__card-body { + display: flex; + flex: 1 1 auto; + flex-direction: column; + justify-content: center; + gap: 0.3rem; + min-width: 0; +} + +.community-events-home__card-title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.5vw, 1.15rem); + font-weight: 700; + line-height: 1.35; + color: var(--openms-navy); + text-wrap: pretty; +} + +.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(--openms-blue); +} + +.community-events-home__card-location { + margin: 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.68); +} + +.community-events-home__footer { + margin-top: clamp(1.75rem, 3.5vh, 2.25rem); + text-align: center; +} + +.community-events-home__calendar-btn { + 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; +} + +.community-events-home__empty { + display: grid; + gap: 1rem; + justify-items: center; + padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem); + text-align: center; + border: 1px solid var(--events-card-border); + border-radius: var(--events-card-radius); + background: var(--events-card-bg); +} + +.community-events-home__empty-icon { + display: block; + width: clamp(5.5rem, 12vw, 7rem); + height: auto; +} + +.community-events-home__empty-text { + margin: 0; + max-width: 34rem; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.6; + color: rgba(var(--openms-dark-rgb), 0.78); +} + +@media (max-width: 640px) { + .community-events-home__title { + font-size: clamp(1.75rem, 5vw, 2.35rem); + } + + .community-events-home__card-link { + align-items: flex-start; + min-height: 0; + } + + .community-events-home__date { + min-width: 3.35rem; + min-height: 3.35rem; + } + + .community-events-home__date-day { + font-size: 1.35rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .community-events-home__card-link:hover, + .community-events-home__card-link:focus-visible { + transform: none; + } +} diff --git a/assets/css/community-home.css b/assets/css/community-home.css new file mode 100644 index 0000000..dd8d63f --- /dev/null +++ b/assets/css/community-home.css @@ -0,0 +1,186 @@ +/* Homepage community — minimalist copy over fixed photo */ + +.community-home { + position: relative; + isolation: isolate; + overflow: hidden; + background: #000; +} + +.community-home--has-bg { + min-height: clamp(40rem, 78vh, 56rem); +} + +.community-home__media { + position: absolute; + inset: 0; + z-index: 0; + background-color: #000; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + pointer-events: none; +} + +.community-home__backdrop { + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0.34) 0%, + rgba(0, 0, 0, 0.18) 48%, + rgba(0, 0, 0, 0.06) 100% + ); +} + +.community-home__inner { + position: relative; + z-index: 2; + display: flex; + align-items: center; + min-height: clamp(40rem, 78vh, 56rem); + max-width: var(--home-max, 75rem); + margin: 0 auto; + padding: clamp(4rem, 8vh, 6rem) var(--home-pad-x); +} + +.community-home__content { + max-width: min(100%, 38rem); + min-width: 0; +} + +.community-home__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 0.85rem; + padding: 0.35rem 0.75rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-white); + background: rgba(var(--openms-white-rgb), 0.12); + border: 1px solid rgba(var(--openms-white-rgb), 0.24); + border-radius: 999px; +} + +.community-home__eyebrow-icon { + display: inline-flex; + line-height: 0; + opacity: 0.9; +} + +.community-home__eyebrow-icon svg { + display: block; + width: 0.875rem; + height: 0.875rem; +} + +.community-home__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.85rem, 3.8vw, 2.75rem); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; + color: var(--openms-white); + text-wrap: balance; +} + +.community-home__title-accent { + display: inline; + background: linear-gradient( + 90deg, + var(--openms-blue-secondary) 0%, + var(--openms-purple) 50%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; +} + +.community-home__lead { + margin: 0.85rem 0 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + font-weight: 400; + line-height: 1.6; + color: rgba(var(--openms-white-rgb), 0.92); + text-wrap: pretty; +} + +.community-home__note { + margin: 0.75rem 0 0; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + font-weight: 400; + line-height: 1.55; + color: rgba(var(--openms-white-rgb), 0.8); + text-wrap: pretty; +} + +.community-home__note p { + margin: 0; +} + +.community-home__note a { + color: var(--openms-white); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.community-home__note a:hover, +.community-home__note a:focus-visible { + color: var(--openms-blue-secondary); +} + +.community-home__actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem 1rem; + margin-top: 1.35rem; +} + +.community-home__cta { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + text-decoration: none; + white-space: nowrap; +} + +@media (max-width: 768px) { + .community-home--has-bg, + .community-home__inner { + min-height: clamp(32rem, 72vh, 48rem); + } + + .community-home__media { + background-attachment: scroll; + } + + .community-home__inner { + padding: clamp(3.5rem, 7vh, 5rem) var(--home-pad-x); + } + + .community-home__title { + font-size: clamp(1.55rem, 5vw, 2rem); + } +} + +@media (prefers-reduced-motion: reduce) { + .community-home__media { + background-attachment: scroll; + } +} diff --git a/assets/css/contact-area.css b/assets/css/contact-area.css index 4273104..61069e8 100644 --- a/assets/css/contact-area.css +++ b/assets/css/contact-area.css @@ -1,27 +1,12 @@ -/* Homepage contact — minimal; bridges from Trusted by when adjacent */ +/* Homepage contact — header + action cards */ .contact-home { background: var(--openms-white); border-top: none; } -.home-page__trust + .home-page__cta .contact-home { - background: linear-gradient( - 180deg, - var(--home-bg-mist, #f8fafc) 0%, - var(--openms-white) 18%, - rgba(var(--openms-blue-rgb), 0.04) 55%, - rgba(var(--openms-blue-rgb), 0.07) 100% - ); -} - .contact-home__main { - padding-block: 0; - padding-inline: var(--home-pad-x, clamp(1.25rem, 4vw, 2.5rem)); -} - -.home-page__trust + .home-page__cta .contact-home__main { - padding-top: clamp(3.5rem, 7vh, 5rem); + padding: var(--home-section-pad, clamp(3.5rem, 7vh, 5rem)) var(--home-pad-x, clamp(1.25rem, 4vw, 2.5rem)); } main.home-page > section.home-page__cta:last-of-type .contact-home__main { @@ -38,132 +23,216 @@ main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redes } .contact-home__inner { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: clamp(2rem, 4vw, 4rem); - align-items: end; - max-width: 75rem; - margin: clamp(3.5rem, 7vh, 5rem) auto; + max-width: var(--home-max, 75rem); + margin: 0 auto; } -.contact-home__content, -.contact-home__aside { - min-width: 0; +.contact-home__header { + max-width: min(100%, 46rem); + margin-bottom: clamp(2rem, 4vh, 2.75rem); } -/* Eyebrow, title, description: home.css (matches Trusted by) */ +.contact-home__eyebrow { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0 0 0.85rem; + padding: 0.35rem 0.75rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: none; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.18); + border-radius: 999px; +} -.home-page__cta .contact-home__eyebrow-icon { +.contact-home__eyebrow-icon { display: inline-flex; line-height: 0; - opacity: 0.85; + opacity: 0.9; } -.home-page__cta .contact-home__eyebrow-icon svg { +.contact-home__eyebrow-icon svg { display: block; - width: 0.8125rem; - height: 0.8125rem; + width: 0.875rem; + height: 0.875rem; } -.contact-home__aside { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 0.85rem; - text-align: right; +.contact-home__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(2rem, 4.2vw, 3.15rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.03em; + color: var(--openms-navy); + text-wrap: balance; } -.contact-home__cta { - 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-text-min); - font-weight: 600; - text-decoration: none; - white-space: nowrap; +.contact-home__title-accent { + display: inline; + background: linear-gradient( + 90deg, + var(--openms-blue-secondary) 0%, + var(--openms-purple) 50%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; } -.contact-home__links { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 0.35rem; +.contact-home__description { + margin: 0.85rem 0 0; + max-width: 52ch; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size-lg); + line-height: 1.62; + color: rgba(var(--openms-dark-rgb), 0.72); + text-wrap: pretty; +} + +.contact-home__grid { + list-style: none; margin: 0; padding: 0; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(1rem, 2vw, 1.5rem); + align-items: stretch; } -.contact-home__link { - font-size: var(--openms-text-min); - font-weight: 500; - color: var(--openms-blue); +.contact-home__item { + display: flex; + min-width: 0; +} + +.contact-home__card { + display: flex; + flex-direction: column; + width: 100%; + min-height: 100%; + padding: clamp(1rem, 2vw, 1.2rem); + border-radius: 1rem; + border: 1px solid rgba(var(--openms-navy-rgb), 0.1); + background: var(--openms-white); text-decoration: none; + color: inherit; + box-shadow: 0 0.2rem 0.65rem rgba(var(--openms-navy-rgb), 0.05); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.contact-home__card:hover, +.contact-home__card:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 0.65rem 1.5rem rgba(var(--openms-blue-rgb), 0.1); + transform: translateY(-2px); + outline: none; +} + +.contact-home__card--primary { + border-color: rgba(var(--openms-blue-rgb), 0.2); + background: rgba(var(--openms-blue-rgb), 0.03); +} + +.contact-home__card-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + margin-bottom: 0.85rem; + border-radius: 0.65rem; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.14); } -.contact-home__link:hover, -.contact-home__link:focus-visible { +.contact-home__card-icon svg { + display: block; +} + +.contact-home__card-title { + margin: 0 0 0.45rem; + font-family: var(--openms-font-heading); + font-size: clamp(1rem, 1.4vw, 1.1rem); + font-weight: 700; + line-height: 1.3; color: var(--openms-navy); - text-decoration: underline; - text-underline-offset: 0.14em; - outline: none; } -.contact-home__meta { +.contact-home__card-text { margin: 0; - font-size: var(--openms-text-min); - line-height: 1.45; - color: rgba(var(--openms-dark-rgb), 0.45); + flex: 1 1 auto; + font-family: var(--openms-font-body); + font-size: var(--openms-body-size); + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.72); } -/* After Trusted by — two columns, aligned with hero split */ -@media (min-width: 769px) { - .home-page__trust + .home-page__cta .contact-home__inner { - grid-template-columns: minmax(0, 1.05fr) minmax(14rem, 20rem); - align-items: center; - gap: clamp(2.5rem, 5vw, 5rem); - } +.contact-home__card-cta { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-top: 1rem; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + font-weight: 700; + color: var(--openms-blue); +} - .home-page__trust + .home-page__cta .contact-home__content { - text-align: left; - } +.contact-home__card-cta-icon { + font-size: 1.1em; + line-height: 1; + transition: transform 0.2s ease; +} - .home-page__trust + .home-page__cta .contact-home__description { - max-width: 38rem; - } +.contact-home__card:hover .contact-home__card-cta, +.contact-home__card:focus-visible .contact-home__card-cta { + color: var(--openms-blue); +} - .home-page__trust + .home-page__cta .contact-home__aside { - align-items: flex-end; - text-align: right; - } +.contact-home__card:hover .contact-home__card-cta-icon, +.contact-home__card:focus-visible .contact-home__card-cta-icon { + transform: translateX(3px); +} - .home-page__trust + .home-page__cta .contact-home__links { - align-items: flex-end; - } +.contact-home__meta { + margin: clamp(1.25rem, 2.5vh, 1.75rem) 0 0; + font-family: var(--openms-font-body); + font-size: var(--openms-text-min); + line-height: 1.45; + color: rgba(var(--openms-dark-rgb), 0.5); } -@media (max-width: 768px) { - .contact-home__inner { +@media (max-width: 960px) { + .contact-home__grid { grid-template-columns: 1fr; - gap: 1.5rem; - align-items: start; - } - - .home-page__cta .contact-home__title { - max-width: none; } +} - .contact-home__description { - max-width: none; +@media (max-width: 640px) { + .contact-home__title { + font-size: clamp(1.75rem, 5vw, 2.35rem); } +} - .contact-home__aside { - align-items: flex-start; - text-align: left; +@media (prefers-reduced-motion: reduce) { + .contact-home__card:hover, + .contact-home__card:focus-visible { + transform: none; } - .contact-home__links { - align-items: flex-start; + .contact-home__card:hover .contact-home__card-cta-icon, + .contact-home__card:focus-visible .contact-home__card-cta-icon { + transform: none; } } @@ -207,7 +276,7 @@ main.home-page:has(> section.home-page__cta:last-of-type) + #footer.footer-redes .contact-area__eyebrow-icon svg { display: block; width: 0.8125rem; - height: 0.8125rem; + height: 0.812rem; } .contact-area__title { diff --git a/assets/css/contact-page.css b/assets/css/contact-page.css index c61ee8c..209e3ba 100644 --- a/assets/css/contact-page.css +++ b/assets/css/contact-page.css @@ -4,7 +4,11 @@ --olib-bg-soft: #f4f6f9; --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); - --contact-max: 72rem; + --contact-max: 64rem; + --contact-gap: clamp(2.25rem, 4vw, 3.5rem); + --contact-card-radius: 0.85rem; + --contact-card-border: rgba(var(--openms-navy-rgb), 0.12); + --contact-card-pad: clamp(1rem, 2vw, 1.25rem); display: block; width: 100%; @@ -21,242 +25,135 @@ padding-inline: var(--olib-pad-x); } -.contact-page-layout .contact-page-hero.openms-lib-hero { - margin-bottom: clamp(0.35rem, 1vw, 0.75rem); - padding-bottom: clamp(1rem, 2.5vw, 1.5rem); +.contact-page-hero { + margin-bottom: clamp(2rem, 4vh, 3rem); } -.contact-page-layout .contact-page-hero .openms-lib-hero__chips { +.contact-page-hero .openms-lib-hero__chips { margin-bottom: 0; } -.contact-page-hero .openms-lib-hero__title { - max-width: 22ch; -} - .contact-page { display: grid; - gap: clamp(2rem, 3.8vw, 3.2rem); + gap: var(--contact-gap); margin-top: 0; } -/* Form + email layout */ +/* Shared section headers */ -.contact-page__main-grid { +.contact-page__section-head { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); - gap: clamp(1.15rem, 2.5vw, 2rem); - align-items: start; - margin-top: -0.25rem; - margin-bottom: clamp(2.5rem, 5vw, 4rem); -} - -.contact-page__form-section { - min-width: 0; - scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem); -} - -.contact-page__email-aside { - position: sticky; - top: calc(var(--openms-header-height, 4.25rem) + 1rem); -} - -.contact-page__email-panel { - display: grid; - gap: 0.55rem; - padding: clamp(1.25rem, 2.5vw, 1.65rem); - border-radius: 1rem; - border: 1px solid rgba(var(--openms-blue-rgb), 0.14); - background: linear-gradient( - 180deg, - rgba(var(--openms-blue-rgb), 0.05) 0%, - var(--openms-white) 100% - ); - box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); + gap: 0.4rem; + max-width: 38rem; + margin-bottom: clamp(1.1rem, 2.4vw, 1.5rem); } -.contact-page__email-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2.75rem; - height: 2.75rem; - border-radius: 0.65rem; - color: var(--openms-blue); - background: rgba(var(--openms-blue-rgb), 0.1); -} - -.contact-page__email-eyebrow { +.contact-page__section-label { margin: 0; - font-size: 0.72rem; + font-family: var(--openms-font-body); + font-size: clamp(0.65rem, 2vw, 0.6875rem); font-weight: 700; - letter-spacing: 0.07em; + letter-spacing: 0.1em; text-transform: uppercase; - color: var(--openms-blue); + color: rgba(var(--openms-navy-rgb), 0.55); } -.contact-page__email-title { +.contact-page__section-title { margin: 0; font-family: var(--openms-font-heading); - font-size: clamp(1.15rem, 2vw, 1.35rem); - font-weight: 700; - line-height: 1.2; + font-size: clamp(1.2rem, 3vw, 1.65rem); + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.02em; + text-wrap: balance; color: var(--openms-navy); } -.contact-page__email-desc, -.contact-page__email-meta { +.contact-page__section-lead { margin: 0; - font-size: 0.92rem; - line-height: 1.55; + font-size: clamp(0.9rem, 2.4vw, var(--openms-body-size-lg)); + line-height: 1.6; color: var(--olib-text-muted); } -.contact-page__email-meta { - font-size: 0.82rem; - color: rgba(var(--openms-navy-rgb), 0.55); -} - -.contact-page__email-link { - display: inline-flex; - align-items: center; - justify-content: center; - width: fit-content; - margin-top: 0.35rem; - padding: 0.65rem 1rem; - border-radius: 999px; - border: 2px solid var(--openms-blue); - background: var(--openms-white); - color: var(--openms-blue) !important; - font-size: var(--openms-text-min); - font-weight: 600; - text-decoration: none; - word-break: break-all; - transition: var(--openms-btn-motion, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease); -} +/* Primary — contact form */ -.contact-page__email-link:hover, -.contact-page__email-link:focus-visible { - background: var(--openms-blue); - border-color: var(--openms-blue); - color: var(--openms-white) !important; - transform: scale(var(--openms-btn-hover-scale, 1.02)); - outline: none; +.contact-page__primary { + scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem); } -.contact-page__form-embed { - overflow: visible; - padding: clamp(0.65rem, 1.5vw, 0.9rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.35rem); - border-radius: 1rem; - border: 1px solid rgba(var(--openms-blue-rgb), 0.12); +.contact-page__form-card { + display: grid; + gap: 0; + overflow: hidden; + border: 1px solid var(--contact-card-border); + border-radius: var(--contact-card-radius); background: var(--openms-white); - box-shadow: - 0 1px 2px rgba(15, 23, 42, 0.04), - 0 8px 32px rgba(15, 23, 42, 0.06); -} - -.contact-page__tally-iframe { - display: block; - width: 100%; - min-height: 16rem; - border: 0; - background: transparent; -} - -/* Alternative channels */ - -.contact-page__alternatives { - padding-top: clamp(2rem, 4vw, 3rem); - border-top: 1px solid rgba(var(--openms-blue-rgb), 0.1); + box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); } -.contact-page__alternatives-header { +.contact-page__form-head { display: grid; - gap: 0.45rem; - max-width: 40rem; - margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); - text-align: center; -} - -.contact-page__alternatives-eyebrow { - margin: 0; - font-size: var(--openms-text-min); - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--openms-blue); + gap: 0.4rem; + padding: var(--contact-card-pad); + padding-bottom: 0.5rem; + background: linear-gradient( + 180deg, + rgba(var(--openms-blue-rgb), 0.04) 0%, + var(--openms-white) 100% + ); } -.contact-page__alternatives-header h2 { +.contact-page__form-title { margin: 0; font-family: var(--openms-font-heading); - font-size: clamp(1.35rem, 2.5vw, 1.75rem); - font-weight: 700; + font-size: clamp(1.1rem, 2.6vw, 1.4rem); + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.02em; color: var(--openms-navy); } -.contact-page__alternatives-lead { +.contact-page__form-lead { margin: 0; - font-size: var(--openms-body-size-lg); + max-width: 40rem; + font-size: clamp(0.88rem, 2.2vw, var(--openms-body-size)); line-height: 1.55; color: var(--olib-text-muted); } -.contact-page__channel-list { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: clamp(0.85rem, 1.8vw, 1.15rem); - margin: 0; - padding: 0; - list-style: none; +.contact-page__form-body { + padding: clamp(0.5rem, 1.2vw, 0.75rem) var(--contact-card-pad) var(--contact-card-pad); } -.contact-page__channel-list--duo { - grid-template-columns: repeat(2, minmax(0, 1fr)); +.contact-page__tally-iframe { + display: block; + width: 100%; + min-height: 16rem; + border: 0; + background: transparent; } -.contact-page__channel-list > li { - display: flex; - min-width: 0; -} +/* Paths — email + alternative channels */ -.contact-page__channel-card { - display: grid; - grid-template-rows: auto 1fr auto; - gap: 0.85rem; - width: 100%; - min-height: 100%; - padding: clamp(1.15rem, 2.2vw, 1.5rem); - border-radius: 0.85rem; - border: 1px solid rgba(var(--openms-blue-rgb), 0.12); - background: var(--openms-white); - color: inherit; - text-decoration: none; - box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); - transition: - border-color 0.2s ease, - box-shadow 0.2s ease, - transform 0.2s ease, - background-color 0.2s ease; +.contact-page__paths { + padding-top: 0; } -.contact-page__channel-card:hover, -.contact-page__channel-card:focus-visible { - border-color: rgba(var(--openms-blue-rgb), 0.3); - background: rgba(var(--openms-blue-rgb), 0.02); - box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); - transform: translateY(-2px); - outline: none; +.contact-page__paths-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(1.25rem, 3vw, 2rem); + align-items: start; } -.contact-page__channel-card:focus-visible { - box-shadow: - 0 0 0 3px var(--openms-navy), - 0 0 0 5px var(--openms-yellow), - 0 10px 30px rgba(15, 23, 42, 0.08); +.contact-page__path-item { + display: grid; + gap: 0.75rem; + min-width: 0; } -.contact-page__channel-card-icon { +.contact-page__path-icon { display: inline-flex; align-items: center; justify-content: center; @@ -267,117 +164,68 @@ background: rgba(var(--openms-blue-rgb), 0.09); } -.contact-page__channel-card-body { +.contact-page__path-body { display: grid; gap: 0.35rem; - align-content: start; } -.contact-page__channel-card-label { - font-size: 0.72rem; +.contact-page__path-label { + margin: 0; + font-size: clamp(0.65rem, 2vw, 0.72rem); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--openms-blue); } -.contact-page__channel-card-title { +.contact-page__path-title { + margin: 0; font-family: var(--openms-font-heading); - font-size: clamp(1.05rem, 1.8vw, 1.2rem); + font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 700; - line-height: 1.25; + line-height: 1.3; color: var(--openms-navy); } -.contact-page__channel-card-desc { - font-size: 0.95rem; +.contact-page__path-desc { + margin: 0; + font-size: clamp(0.88rem, 2.2vw, 0.95rem); line-height: 1.55; color: var(--olib-text-muted); } -.contact-page__channel-card-meta { - font-size: 0.82rem; - line-height: 1.45; - color: rgba(var(--openms-navy-rgb), 0.55); -} - -.contact-page__channel-card-action { +.contact-page__path-link { display: inline-flex; align-items: center; - gap: 0.2rem; - margin-top: auto; - padding-top: 0.35rem; - font-size: var(--openms-text-min); + width: fit-content; + margin-top: 0.15rem; + font-size: clamp(0.8rem, 2.2vw, var(--openms-text-min)); font-weight: 600; + line-height: 1.4; color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.14em; + text-decoration-thickness: 0.08em; + word-break: break-word; + transition: color 0.15s ease; } -.contact-page__channel-card:hover .contact-page__channel-card-action, -.contact-page__channel-card:focus-visible .contact-page__channel-card-action { +.contact-page__path-link:hover, +.contact-page__path-link:focus-visible { color: var(--openms-navy); -} - -.contact-page__channel-card-action svg { - flex-shrink: 0; - transition: transform 0.2s ease; -} - -.contact-page__channel-card:hover .contact-page__channel-card-action svg, -.contact-page__channel-card:focus-visible .contact-page__channel-card-action svg { - transform: translateX(2px); + outline: none; } /* Supporting OpenMS */ .contact-page__support { - margin-top: clamp(2rem, 4vw, 3rem); - padding: clamp(1.75rem, 3.5vw, 2.5rem); - border-radius: 1rem; - background: linear-gradient( - 135deg, - rgba(var(--openms-blue-rgb), 0.06) 0%, - rgba(var(--openms-blue-rgb), 0.02) 55%, - rgba(var(--openms-navy-rgb), 0.03) 100% - ); - border: 1px solid rgba(var(--openms-blue-rgb), 0.12); -} - -.contact-page__support-header { - display: grid; - gap: 0.45rem; - max-width: 40rem; - margin: 0 auto clamp(1.35rem, 2.8vw, 2rem); - text-align: center; -} - -.contact-page__support-eyebrow { - margin: 0; - font-size: var(--openms-text-min); - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--openms-blue); -} - -.contact-page__support-header h2 { - margin: 0; - font-family: var(--openms-font-heading); - font-size: clamp(1.35rem, 2.5vw, 1.75rem); - font-weight: 700; - color: var(--openms-navy); -} - -.contact-page__support-lead { - margin: 0; - font-size: var(--openms-body-size-lg); - line-height: 1.55; - color: var(--olib-text-muted); + padding-top: 0; } .contact-page__support-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: clamp(0.85rem, 1.8vw, 1.15rem); + gap: 0.85rem; margin: 0; padding: 0; list-style: none; @@ -390,13 +238,18 @@ .contact-page__support-card { display: grid; - grid-template-rows: auto 1fr auto; - gap: 0.85rem; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + grid-template-areas: + "icon body" + "action action"; + column-gap: 0.85rem; + row-gap: 0.55rem; width: 100%; min-height: 100%; - padding: clamp(1.15rem, 2.2vw, 1.45rem); - border-radius: 0.85rem; - border: 1px solid rgba(var(--openms-blue-rgb), 0.12); + padding: var(--contact-card-pad); + border-radius: var(--contact-card-radius); + border: 1px solid var(--contact-card-border); background: var(--openms-white); color: inherit; text-decoration: none; @@ -404,41 +257,35 @@ transition: border-color 0.2s ease, box-shadow 0.2s ease, - transform 0.2s ease, - background-color 0.2s ease; + transform 0.2s ease; } .contact-page__support-card--featured { - border-color: rgba(var(--openms-navy-rgb), 0.2); - background: linear-gradient( - 180deg, - rgba(var(--openms-navy-rgb), 0.03) 0%, - var(--openms-white) 100% - ); + border-left: 4px solid var(--openms-navy); } .contact-page__support-card:hover, .contact-page__support-card:focus-visible { - border-color: rgba(var(--openms-blue-rgb), 0.3); - background: rgba(var(--openms-blue-rgb), 0.02); - box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08); transform: translateY(-2px); outline: none; } .contact-page__support-card--featured:hover, .contact-page__support-card--featured:focus-visible { - border-color: rgba(var(--openms-navy-rgb), 0.35); + border-left-color: var(--openms-navy); } .contact-page__support-card:focus-visible { box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow), - 0 10px 30px rgba(15, 23, 42, 0.08); + 0 4px 18px rgba(15, 23, 42, 0.08); } .contact-page__support-card-icon { + grid-area: icon; display: inline-flex; align-items: center; justify-content: center; @@ -455,13 +302,15 @@ } .contact-page__support-card-body { + grid-area: body; display: grid; - gap: 0.35rem; + gap: 0.3rem; align-content: start; + min-width: 0; } .contact-page__support-card-label { - font-size: 0.72rem; + font-size: clamp(0.65rem, 2vw, 0.72rem); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; @@ -470,25 +319,25 @@ .contact-page__support-card-title { font-family: var(--openms-font-heading); - font-size: clamp(1.05rem, 1.8vw, 1.2rem); + font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 700; line-height: 1.25; color: var(--openms-navy); } .contact-page__support-card-desc { - font-size: 0.95rem; + font-size: clamp(0.88rem, 2.2vw, 0.95rem); line-height: 1.55; color: var(--olib-text-muted); } .contact-page__support-card-action { + grid-area: action; display: inline-flex; align-items: center; gap: 0.2rem; - margin-top: auto; - padding-top: 0.35rem; - font-size: var(--openms-text-min); + padding-top: 0.1rem; + font-size: clamp(0.75rem, 2.2vw, var(--openms-text-min)); font-weight: 600; color: var(--openms-blue); } @@ -508,140 +357,36 @@ transform: translateX(2px); } -/* Navbar-style CTA motion (contact page) */ -.contact-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); -} - -.contact-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; -} - -.contact-page-layout .openms-lib-btn--ghost { - border: 2px solid var(--openms-blue); - background: transparent; - background-color: transparent; - color: var(--openms-blue) !important; -} - -.contact-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - -.contact-page-layout .openms-lib-btn--primary:hover, -.contact-page-layout .openms-lib-btn--primary:focus-visible, -.contact-page-layout .openms-lib-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; -} - -.contact-page-layout .openms-lib-btn--primary:hover, -.contact-page-layout .openms-lib-btn--primary:focus-visible, -.contact-page-layout .openms-lib-btn--primary:active { - background: var(--openms-navy); - border-color: var(--openms-navy); - color: var(--openms-white) !important; -} - -.contact-page-layout .openms-lib-btn--ghost:hover, -.contact-page-layout .openms-lib-btn--ghost:focus-visible, -.contact-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; -} - -.contact-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); -} - -.contact-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: 960px) { - .contact-page__main-grid { + .contact-page__paths-grid { grid-template-columns: 1fr; + gap: clamp(1.25rem, 3vw, 1.75rem); } - .contact-page__email-aside { - position: static; + .contact-page__path-item { + padding-block: 0; } - .contact-page__channel-list, - .contact-page__channel-list--duo, .contact-page__support-list { grid-template-columns: 1fr; } } -@media (min-width: 961px) and (max-width: 1100px) { - .contact-page__channel-card-action { - flex-wrap: wrap; - } -} - @media (max-width: 720px) { - .contact-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .contact-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .contact-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .contact-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; + .contact-page__form-body { + padding: 0.35rem 0.85rem 0.9rem; } - .contact-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; + .contact-page__form-head { + padding: 0.9rem 0.85rem 0.75rem; } - .contact-page__form-embed { - padding: 0.55rem 1rem 0.85rem; - } - - .contact-page__email-link { - width: 100%; - justify-content: center; + .contact-page__support-card { + grid-template-columns: 1fr; + grid-template-areas: + "icon" + "body" + "action"; } } @@ -650,22 +395,13 @@ scroll-behavior: auto; } - .contact-page__channel-card:hover, - .contact-page__channel-card:focus-visible, .contact-page__support-card:hover, .contact-page__support-card:focus-visible { transform: none; } - .contact-page__channel-card:hover .contact-page__channel-card-action svg, - .contact-page__channel-card:focus-visible .contact-page__channel-card-action svg, .contact-page__support-card:hover .contact-page__support-card-action svg, .contact-page__support-card:focus-visible .contact-page__support-card-action svg { transform: none; } - - .contact-page-layout .openms-lib-btn:hover, - .contact-page-layout .openms-lib-btn:focus-visible { - transform: none; - } } diff --git a/assets/css/contribute-page.css b/assets/css/contribute-page.css index 20ff72c..5fe4a0f 100644 --- a/assets/css/contribute-page.css +++ b/assets/css/contribute-page.css @@ -122,10 +122,6 @@ color: var(--openms-blue) !important; } -.contribute-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .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 { @@ -161,33 +157,6 @@ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); } -@media (max-width: 720px) { - .contribute-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .contribute-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .contribute-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .contribute-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .contribute-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } -} - @media (prefers-reduced-motion: reduce) { .contribute-page-layout .openms-lib-btn:hover, .contribute-page-layout .openms-lib-btn:focus-visible { diff --git a/assets/css/donate-page.css b/assets/css/donate-page.css index e694eaa..256c908 100644 --- a/assets/css/donate-page.css +++ b/assets/css/donate-page.css @@ -1,3 +1,29 @@ +.donate-page-layout { + --olib-pad-x: clamp(1.25rem, 4vw, 2rem); + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-bg-soft: #f4f6f9; + --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); + --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); + --donate-max: 64rem; + + display: block; + width: 100%; + max-width: none; + margin: 0; + padding: 0 0 clamp(2.5rem, 5vh, 4rem); +} + +.donate-page-layout__content { + width: min(100%, var(--donate-max)); + max-width: var(--donate-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); +} + +.donate-page-hero { + margin-bottom: var(--olib-section-y); +} + .donate-page-layout__container { max-width: min(100%, 64rem); } diff --git a/assets/css/governance.css b/assets/css/governance.css index 980b70c..805eb7f 100644 --- a/assets/css/governance.css +++ b/assets/css/governance.css @@ -24,10 +24,6 @@ margin-bottom: var(--olib-section-y); } -.governance-page-hero .openms-lib-hero__title { - max-width: 24ch; -} - .governance-page { display: grid; gap: clamp(2rem, 3.8vw, 3.2rem); @@ -203,6 +199,9 @@ .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); } @@ -223,13 +222,19 @@ .governance-card__eyebrow { margin: 0 0 0.2rem; - font-size: var(--openms-text-min); + 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; @@ -252,9 +257,17 @@ .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)); @@ -267,6 +280,8 @@ .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; } @@ -284,6 +299,8 @@ .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); } @@ -306,10 +323,15 @@ .governance-compare__title { margin-top: 0; margin-bottom: 0.4rem; - color: var(--openms-blue); - font-size: var(--openms-secondary-heading-size-lg); + 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 { @@ -325,6 +347,14 @@ .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 { @@ -344,8 +374,7 @@ } /* Navbar-style CTA motion (governance page) */ -.governance-page-layout .openms-lib-btn, -.governance-page-layout .governance-card__link a { +.governance-page-layout .openms-lib-btn { display: inline-flex; align-items: center; justify-content: center; @@ -372,8 +401,7 @@ color: var(--openms-white) !important; } -.governance-page-layout .openms-lib-btn--ghost, -.governance-page-layout .governance-card__link a { +.governance-page-layout .openms-lib-btn--ghost { border: 2px solid var(--openms-blue); background: transparent; background-color: transparent; @@ -381,11 +409,9 @@ } .governance-page-layout .governance-card__link a { - margin-top: 0; -} - -.governance-page-layout .openms-lib-hero__actions { - gap: 0.75rem; + font-weight: 600; + text-decoration-thickness: 0.08em; + text-underline-offset: 0.14em; } .governance-page-layout .openms-lib-btn--primary:hover, @@ -402,10 +428,7 @@ .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, -.governance-page-layout .governance-card__link a:hover, -.governance-page-layout .governance-card__link a:focus-visible, -.governance-page-layout .governance-card__link a:active { +.governance-page-layout .openms-lib-btn--ghost:active { background: transparent; background-color: transparent; border-color: var(--openms-blue); @@ -421,8 +444,7 @@ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); } -.governance-page-layout .openms-lib-btn--ghost:focus-visible, -.governance-page-layout .governance-card__link a:focus-visible { +.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); } @@ -433,33 +455,6 @@ } } -@media (max-width: 720px) { - .governance-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .governance-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .governance-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .governance-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .governance-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } -} - @media (max-width: 860px) { .governance-grid, .governance-pillars, @@ -496,9 +491,7 @@ @media (prefers-reduced-motion: reduce) { .governance-page-layout .openms-lib-btn:hover, - .governance-page-layout .openms-lib-btn:focus-visible, - .governance-page-layout .governance-card__link a:hover, - .governance-page-layout .governance-card__link a:focus-visible { + .governance-page-layout .openms-lib-btn:focus-visible { transform: none; } } diff --git a/assets/css/help-page.css b/assets/css/help-page.css index 9502304..6f4e958 100644 --- a/assets/css/help-page.css +++ b/assets/css/help-page.css @@ -24,10 +24,6 @@ margin-bottom: var(--olib-section-y); } -.help-page-hero .openms-lib-hero__title { - max-width: 26ch; -} - .help-page { margin-top: 0; } @@ -100,10 +96,6 @@ margin-top: 0; } -.help-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .help-page-layout .openms-lib-btn--primary:hover, .help-page-layout .openms-lib-btn--primary:focus-visible, .help-page-layout .openms-lib-btn--primary:active { @@ -143,33 +135,6 @@ 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); } -@media (max-width: 720px) { - .help-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .help-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .help-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .help-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .help-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } -} - @media (max-width: 860px) { .help-page__resources { grid-template-columns: 1fr; diff --git a/assets/css/hero-saas.css b/assets/css/hero-saas.css index bafe848..e247ae7 100644 --- a/assets/css/hero-saas.css +++ b/assets/css/hero-saas.css @@ -1,9 +1,10 @@ -/* Homepage hero — split layout (copy left, visual panel right) */ +/* Homepage hero — split layout (standard site typography & colors) */ .hero-home { position: relative; overflow: hidden; background: var(--openms-white); + min-height: clamp(34rem, 88vh, 48rem); } .hero-home::before { @@ -25,18 +26,146 @@ .hero-home__main { position: relative; z-index: 1; - padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem); + 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, 1.05fr) minmax(18rem, 0.95fr); - gap: clamp(2rem, 4vw, 3.5rem); - align-items: center; + grid-template-columns: minmax(0, 1fr); + gap: clamp(1.75rem, 4vh, 2.5rem); + align-items: start; + justify-items: center; max-width: 75rem; margin: 0 auto; } +.hero-home__content { + display: grid; + gap: 0; + max-width: 42rem; + margin-inline: auto; + text-align: center; +} + +.hero-home__title { + margin: 0 0 1rem; + font-family: var(--openms-font-heading); + font-size: clamp(2rem, 5vw, 3.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.035em; + color: var(--openms-navy); + text-align: center; + text-wrap: balance; +} + +@media (min-width: 1200px) { + .hero-home__title { + font-size: clamp(3.5rem, 4.5vw, 4.5rem); + } +} + +.hero-home__metrics-row { + width: 100%; + margin-top: clamp(2rem, 5vh, 3.5rem); + padding-top: clamp(1.5rem, 3.5vh, 2.5rem); + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1); +} + +.hero-home__bento { + width: 100%; + max-width: none; + margin-inline: 0; +} + +.hero-home__metrics { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(1.25rem, 3vw, 2.5rem); + width: 100%; +} + +.hero-home__metric { + position: relative; + display: grid; + gap: 0.65rem; + align-content: start; + padding: 0 clamp(1rem, 2vw, 1.75rem); + text-align: left; +} + +.hero-home__metric:not(:first-child)::before { + content: ""; + position: absolute; + top: 0.15rem; + bottom: 0.15rem; + left: 0; + width: 1px; + background: rgba(var(--openms-navy-rgb), 0.12); +} + +.hero-home__metric-label { + margin: 0; + font-family: var(--openms-font-body); + font-size: 0.95rem; + font-weight: 600; + line-height: 1.3; + letter-spacing: -0.01em; + color: var(--openms-navy); + text-wrap: balance; +} + +.hero-home__metric-value { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + gap: 0.1rem 0.15rem; + margin: 0; + font-family: var(--openms-font-heading); + font-weight: 800; + font-variant-numeric: tabular-nums; + line-height: 0.9; + letter-spacing: -0.04em; + color: var(--openms-navy); +} + +.hero-home__metric-prefix, +.hero-home__metric-suffix { + font-size: clamp(2rem, 4.5vw, 3rem); + font-weight: 800; + line-height: 0.9; + letter-spacing: -0.04em; +} + +.hero-home__metric-value .hero-modern__stat-number { + font: inherit; + color: inherit; + font-size: clamp(2.75rem, 6vw, 4.25rem); +} + +.hero-home__metric-description { + margin: 0; + max-width: 18rem; + font-family: var(--openms-font-body); + font-size: 0.9rem; + line-height: 1.55; + color: rgba(var(--openms-dark-rgb), 0.62); + text-wrap: pretty; +} + +.hero-home__actions-block { + display: grid; + gap: 0.85rem; + margin-top: 0.25rem; + justify-items: center; + width: 100%; +} + .hero-home__eyebrow { display: inline-block; margin: 0 0 0.85rem; @@ -52,17 +181,6 @@ border-radius: 999px; } -.hero-home__title { - margin: 0 0 1rem; - font-family: var(--openms-font-heading); - font-size: clamp(2rem, 4.5vw, 3.15rem); - font-weight: 800; - line-height: 1.1; - letter-spacing: -0.03em; - color: var(--openms-navy); - text-wrap: balance; -} - .hero-home__title-accent { display: inline; background: linear-gradient( @@ -77,12 +195,13 @@ } .hero-home__description { - margin: 0 0 1.5rem; + margin: 0 auto 1.5rem; max-width: 42ch; font-family: var(--openms-font-body); font-size: var(--openms-body-size-lg); line-height: 1.65; color: rgba(var(--openms-dark-rgb), 0.82); + text-align: center; text-wrap: pretty; } @@ -91,6 +210,7 @@ flex-wrap: wrap; gap: 0.75rem; align-items: center; + justify-content: center; } .hero-home__btn { @@ -129,8 +249,9 @@ display: flex; flex-wrap: wrap; align-items: center; + justify-content: center; gap: 0.35rem 1.15rem; - margin: 1rem 0 0; + margin: 0; font-family: var(--openms-font-body); font-size: var(--openms-text-min); line-height: 1.5; @@ -142,137 +263,58 @@ user-select: none; } -/* Right panel — Nexilo-style bento metric cards */ .hero-home__panel { display: flex; align-items: center; justify-content: center; - min-height: clamp(14rem, 28vh, 18rem); - background: transparent; - box-shadow: none; + min-height: clamp(16rem, 32vh, 22rem); } -.hero-home__bento { +.hero-home__panel-inner { + display: grid; + gap: 0.75rem; width: 100%; max-width: 22rem; margin-inline: auto; } -.hero-home__bento-stack { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.hero-home__bento-duo { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.75rem; -} - -.hero-home__bento-card { - position: relative; - display: flex; - flex-direction: column; - gap: 0.35rem; - padding: clamp(1.1rem, 2.2vh, 1.35rem) clamp(1rem, 2vw, 1.25rem); - border-radius: 1rem; - background: var(--openms-white); - border: 1px solid rgba(var(--openms-navy-rgb), 0.08); - box-shadow: - 0 0.5rem 1.5rem rgba(var(--openms-navy-rgb), 0.07), - 0 0.15rem 0.4rem rgba(var(--openms-navy-rgb), 0.04); -} - -.hero-home__bento-card--featured { - padding: clamp(1.35rem, 2.8vh, 1.65rem) clamp(1.15rem, 2.5vw, 1.4rem); -} - -.hero-home__bento-card--accent { - background: linear-gradient( - 145deg, - var(--openms-blue) 0%, - #2d4fd4 55%, - var(--openms-navy) 100% - ); - border-color: transparent; - box-shadow: 0 0.65rem 1.75rem rgba(var(--openms-blue-rgb), 0.28); -} - -.hero-home__bento-mark { - position: absolute; - top: 0.85rem; - right: 0.85rem; - width: 0.95rem; - height: 0.95rem; - opacity: 0.35; - background-image: - linear-gradient(currentColor 0 0), - linear-gradient(currentColor 0 0), - linear-gradient(currentColor 0 0), - linear-gradient(currentColor 0 0); - background-size: 38% 38%; - background-position: - 0 0, - 100% 0, - 0 100%, - 100% 100%; - background-repeat: no-repeat; - color: rgba(var(--openms-navy-rgb), 0.35); -} - -.hero-home__bento-card--accent .hero-home__bento-mark { - color: rgba(var(--openms-white-rgb), 0.55); - opacity: 0.7; -} - -.hero-home__bento-value { +.hero-home__panel-label { margin: 0; - font-family: var(--openms-font-heading); - font-weight: 800; - font-variant-numeric: tabular-nums; - line-height: 1; - letter-spacing: -0.03em; - color: var(--openms-navy); -} - -.hero-home__bento-card--featured .hero-home__bento-value { - font-size: clamp(2.35rem, 5vw, 3.15rem); + 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); } -.hero-home__bento-duo .hero-home__bento-value { - font-size: clamp(1.65rem, 3.5vw, 2.15rem); -} +@media (max-width: 720px) { + .hero-home__metrics { + grid-template-columns: 1fr; + gap: 1.75rem; + } -.hero-home__bento-card--accent .hero-home__bento-value { - color: var(--openms-white); -} + .hero-home__metric { + padding: 0; + } -.hero-home__bento-label { - margin: 0; - max-width: 12rem; - font-family: var(--openms-font-body); - font-size: var(--openms-text-min); - font-weight: 500; - line-height: 1.35; - color: rgba(var(--openms-navy-rgb), 0.62); -} + .hero-home__metric:not(:first-child)::before { + display: none; + } -.hero-home__bento-card--accent .hero-home__bento-label { - color: rgba(var(--openms-white-rgb), 0.88); -} + .hero-home__metric:not(:first-child) { + padding-top: 1.75rem; + border-top: 1px solid rgba(var(--openms-navy-rgb), 0.1); + } -.hero-home__bento-card .hero-modern__stat-number { - display: inline; - margin: 0; - font: inherit; - color: inherit; + .hero-home__metric-description { + max-width: none; + } } @media (max-width: 900px) { .hero-home__inner { - grid-template-columns: 1fr; - gap: 1.75rem; + gap: 1.5rem; } .hero-home::before { @@ -285,29 +327,19 @@ .hero-home__description { max-width: none; } - - .hero-home__panel { - max-width: 28rem; - margin-inline: auto; - width: 100%; - } } -/* SM — same bento layout as desktop; panel uses full content width */ @media (max-width: 768px) { - .hero-home__panel { - max-width: none; - width: 100%; - } - - .hero-home__bento { - max-width: 22rem; - width: 100%; + .hero-home__metric-value .hero-modern__stat-number, + .hero-home__metric-prefix, + .hero-home__metric-suffix { + font-size: clamp(2.25rem, 10vw, 3rem); } } @media (prefers-reduced-motion: reduce) { - .hero-home__btn--secondary:hover { + .hero-home__btn--secondary:hover, + .hero-home__btn--secondary:focus-visible { transform: none; } } diff --git a/assets/css/home.css b/assets/css/home.css index fd6a130..d67c04a 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -23,41 +23,219 @@ } /* ── Section background blends (smooth transitions between blocks) ── */ +.site-header:has(.news-banner) #nav.navbar.is-fresh { + border-top: none; +} + .home-page__hero .hero-home { background: linear-gradient( 180deg, - var(--home-bg-base) 0%, - var(--home-bg-base) 84%, - var(--home-bg-mist) 100% + rgba(var(--openms-blue-rgb), 0.07) 0%, + rgba(var(--openms-purple-rgb), 0.04) 12%, + var(--openms-chrome-bg) 28%, + var(--openms-chrome-bg) 100% ); + min-height: clamp(30rem, 78vh, 44rem); } -.home-page__block--partners { +.home-page__hero .hero-home::before { + content: none; +} + +.home-page__hero .hero-home::after { + content: none; +} + +.home-page__hero .hero-home__main { + justify-content: center; + padding-top: clamp(2.5rem, 6vh, 4.5rem); +} + +.home-page__hero .hero-home__inner { + justify-items: center; + width: 100%; +} + +.home-page__hero .hero-home__content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: min(100%, 52rem); + margin-inline: auto; + text-align: center; +} + +.home-page__hero .hero-home__title { + color: var(--openms-white); + text-align: center; + text-wrap: balance; +} + +.home-page__hero .hero-home__description { + color: var(--openms-chrome-text); + max-width: 42ch; + margin-inline: auto; + text-align: center; +} + +.home-page__hero .hero-home__actions-block { + width: 100%; + align-items: center; +} + +.home-page__hero .hero-home__actions { + justify-content: center; +} + +.home-page__hero .hero-home__note { + justify-content: center; + text-align: center; +} + +.home-page__hero .hero-home__title-accent { background: linear-gradient( - 180deg, - var(--home-bg-mist) 0%, - var(--home-bg-base) 14%, - var(--home-bg-base) 72%, - var(--home-bg-soft) 100% + 90deg, + var(--openms-blue-secondary) 0%, + var(--openms-purple) 50%, + var(--openms-pink) 100% ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.home-page__hero .hero-home__actions-block .hero-home__note { + margin-top: 0; +} + +.home-page__hero .hero-home__note { + color: var(--openms-chrome-text-muted); +} + +.home-page__hero .hero-home__note-sep { + color: rgba(var(--openms-white-rgb), 0.22); +} + +.home-page__hero .hero-home__btn--secondary { + color: var(--openms-white); + background: var(--openms-chrome-surface); + border-color: rgba(var(--openms-white-rgb), 0.24); +} + +.home-page__hero .hero-home__btn--secondary:hover, +.home-page__hero .hero-home__btn--secondary:focus-visible { + color: var(--openms-white); + background: var(--openms-chrome-surface-hover); + border-color: rgba(var(--openms-white-rgb), 0.42); + box-shadow: 0 0 0 var(--openms-btn-glow-size, 6px) rgba(var(--openms-white-rgb), 0.1); +} + +.home-page__hero .hero-home__metrics-row { + width: 100%; + max-width: none; + border-top-color: var(--openms-chrome-border); +} + +.home-page__hero .hero-home__metric:not(:first-child)::before { + background: var(--openms-chrome-border); +} + +.home-page__hero .hero-home__metric-label { + color: var(--openms-white); +} + +.home-page__hero .hero-home__metric-value, +.home-page__hero .hero-home__metric-prefix, +.home-page__hero .hero-home__metric-suffix, +.home-page__hero .hero-home__metric-value .hero-modern__stat-number { + color: var(--openms-white); +} + +.home-page__hero .hero-home__metric-description { + color: var(--openms-chrome-text-muted); +} + +@media (max-width: 900px) { + .home-page__hero .hero-home { + min-height: clamp(28rem, 72vh, 38rem); + } + + .home-page__hero .hero-home__main { + padding-top: clamp(2rem, 5vh, 3rem); + padding-bottom: clamp(1.5rem, 4vh, 2.5rem); + } + + .home-page__hero .hero-home__inner { + gap: clamp(1.25rem, 3vh, 1.75rem); + } + + .home-page__hero .hero-home__metrics-row { + width: 100%; + max-width: none; + margin-inline: 0; + } + + .home-page__hero .hero-home__metric:not(:first-child) { + border-top-color: var(--openms-chrome-border); + } + + .home-page__hero .hero-home__content { + max-width: min(100%, 26rem); + } + + .home-page__hero .hero-home__title { + font-size: clamp(1.75rem, 8vw, 2.5rem); + line-height: 1.12; + letter-spacing: -0.025em; + } + + .home-page__hero .hero-home__description { + font-size: clamp(0.9rem, 3.6vw, 1.05rem); + line-height: 1.55; + max-width: 32ch; + } + + .home-page__hero .hero-home::before { + content: none; + } +} + +@media (max-width: 480px) { + .home-page__hero .hero-home__title { + font-size: clamp(1.55rem, 7.2vw, 2rem); + } + + .home-page__hero .hero-home__description { + font-size: 0.92rem; + max-width: 28ch; + } + + .home-page__hero .hero-home__actions { + flex-direction: column; + width: 100%; + } + + .home-page__hero .hero-home__actions .hero-home__btn { + width: 100%; + max-width: 18rem; + } +} + +.home-page__block--partners { + background: var(--home-bg-base); +} + +.home-page__hero + .home-page__block--partners { + background: var(--home-bg-base); } .home-page__block--projects:has(+ .home-page__block--overview) { - background: linear-gradient( - 180deg, - var(--home-bg-soft) 0%, - var(--home-bg-soft) 76%, - var(--home-bg-base) 100% - ); + background: var(--home-bg-base); } .home-page__block--projects:not(:has(+ .home-page__block--overview)) { - background: linear-gradient( - 180deg, - var(--home-bg-soft) 0%, - var(--home-bg-soft) 76%, - var(--home-bg-mist) 100% - ); + background: var(--home-bg-base); } .home-page__block--overview { @@ -92,34 +270,34 @@ transform: translateY(0); } -/* Contact — scroll in from the sides */ -.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__content { +/* Contact — header then action cards */ +.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__header { opacity: 0; - transform: translate3d(-2.75rem, 0, 0); + transform: translate3d(0, 1.75rem, 0); } -.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__aside { +.home-page--motion .home-page__cta:not(.is-revealed) .contact-home__grid { opacity: 0; - transform: translate3d(2.75rem, 0, 0); + transform: translate3d(0, 2rem, 0); } -.home-page--motion .home-page__cta .contact-home__content, -.home-page--motion .home-page__cta .contact-home__aside { +.home-page--motion .home-page__cta .contact-home__header, +.home-page--motion .home-page__cta .contact-home__grid { transition: opacity 0.8s var(--home-reveal-ease), transform 0.8s var(--home-reveal-ease); } -.home-page--motion .home-page__cta.is-revealed .contact-home__content { +.home-page--motion .home-page__cta.is-revealed .contact-home__header { opacity: 1; transform: translate3d(0, 0, 0); - transition-delay: 0.1s; + transition-delay: 0.08s; } -.home-page--motion .home-page__cta.is-revealed .contact-home__aside { +.home-page--motion .home-page__cta.is-revealed .contact-home__grid { opacity: 1; transform: translate3d(0, 0, 0); - transition-delay: 0.22s; + transition-delay: 0.2s; } /* Hero — load entrance (copy from left, panel from right, bento cards stagger) */ @@ -136,12 +314,12 @@ transform: translate3d(-0.85rem, 1.1rem, 0); } -.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__panel { +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__metrics-row { opacity: 0; - transform: translate3d(1.35rem, 0.5rem, 0) scale(0.97); + transform: translate3d(0, 1.1rem, 0); } -.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__bento-card { +.home-page--motion .home-page__hero:not(.is-revealed) .hero-home__metric { opacity: 0; transform: translate3d(0, 1rem, 0) scale(0.96); } @@ -155,8 +333,8 @@ .home-page--motion .home-page__hero .hero-home__description, .home-page--motion .home-page__hero .hero-home__note, .home-page--motion .home-page__hero .hero-home__actions .hero-home__btn, -.home-page--motion .home-page__hero .hero-home__panel, -.home-page--motion .home-page__hero .hero-home__bento-card { +.home-page--motion .home-page__hero .hero-home__metrics-row, +.home-page--motion .home-page__hero .hero-home__metric { transition: opacity 0.75s var(--home-reveal-ease), transform 0.75s var(--home-reveal-ease); @@ -197,13 +375,13 @@ transition-delay: 0.58s; } -.home-page--motion .home-page__hero.is-revealed .hero-home__panel { +.home-page--motion .home-page__hero.is-revealed .hero-home__metrics-row { opacity: 1; - transform: translate3d(0, 0, 0) scale(1); - transition-delay: 0.22s; + transform: translate3d(0, 0, 0); + transition-delay: 0.34s; } -.home-page--motion .home-page__hero.is-revealed .hero-home__bento-card { +.home-page--motion .home-page__hero.is-revealed .hero-home__metric { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-delay: calc(0.34s + var(--hero-reveal-index, 0) * 0.11s); @@ -240,13 +418,9 @@ margin: 0; } -/* Section rhythm — one spacing unit between blocks, no double padding */ -.home-page__hero + .home-page__block--partners .hero-home__main { - padding-bottom: clamp(1rem, 2vh, 1.5rem); -} - +/* Section rhythm — partners follows hero with a flat edge (no navy fade) */ .home-page__hero + .home-page__block--partners .uni-partners--home { - padding-top: clamp(3.5rem, 7vh, 5rem); + padding-top: var(--home-section-pad); } .home-page__block--partners:has(+ .home-page__block--projects) .uni-partners--home { @@ -272,7 +446,37 @@ border-bottom: none; } -.home-page__block--overview + .home-page__trust { +.home-page__block--overview:has(+ .home-page__block--community) .keyfeatures-modern--home { + padding-bottom: 0; + border-bottom: none; +} + +.home-page__block--overview + .home-page__block--community { + padding-top: 0; +} + +.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: 0; +} + +.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; } @@ -293,7 +497,9 @@ display: none; } -.home-page__trust + .home-page__cta .contact-home { +.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; } @@ -303,6 +509,7 @@ .home-page__hero { margin: 0; padding: 0; + background: var(--openms-chrome-bg); } /* ═══════════════════════════════════════════ @@ -364,8 +571,7 @@ text-align: center; } -.home-page__trust .trusted-by__home-eyebrow, -.home-page__cta .contact-home__eyebrow { +.home-page__trust .trusted-by__home-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; @@ -388,8 +594,7 @@ opacity: 0.85; } -.home-page__trust .trusted-by__home-title, -.home-page__cta .contact-home__title { +.home-page__trust .trusted-by__home-title { margin: 0; max-width: 36rem; font-family: var(--openms-font-heading); @@ -406,8 +611,7 @@ text-align: center; } -.home-page__trust .trusted-by__home-title-accent, -.home-page__cta .trusted-by__home-title-accent { +.home-page__trust .trusted-by__home-title-accent { display: inline; background: linear-gradient( 90deg, @@ -420,8 +624,7 @@ -webkit-text-fill-color: transparent; } -.home-page__trust .trusted-by__home-lead, -.home-page__cta .contact-home__description { +.home-page__trust .trusted-by__home-lead { margin: 0.85rem 0 0; max-width: 38rem; font-family: var(--openms-font-body); @@ -523,8 +726,7 @@ gap: 1.25rem 1.5rem; } - .home-page__trust .trusted-by__home-title, - .home-page__cta .contact-home__title { + .home-page__trust .trusted-by__home-title { font-size: clamp(1.5rem, 5vw, 2rem); } @@ -1134,13 +1336,15 @@ } /* ═══════════════════════════════════════════ - 5. PROJECTS — Nexilo-style split header + feature cards + 5. PROJECTS — minimalist catalog grid ═══════════════════════════════════════════ */ .home-page__block--projects .webapps-featured--home { padding: var(--home-section-pad) var(--home-pad-x); background: transparent; color: var(--openms-navy); border: none; + --projects-logo-height: clamp(3.5rem, 8vw, 4.25rem); + --projects-grid-gap: clamp(1rem, 2vw, 1.5rem); } .home-page__block--projects .webapps-featured--home::before { @@ -1157,17 +1361,32 @@ display: block; } -.home-page__block--projects .webapps-featured__header--split { - display: grid; - grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); - gap: clamp(1.5rem, 4vw, 3rem); - align-items: end; +.home-page__block--projects .webapps-featured__header--home { + display: block; margin: 0 0 clamp(2rem, 4vh, 2.75rem); text-align: left; } -.home-page__block--projects .webapps-featured__header-intro { - max-width: 26rem; +.home-page__block--projects .webapps-featured__header-main { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: min(100%, 46rem); + margin-inline: 0; +} + +.home-page__block--projects .webapps-featured__show-all { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: var(--openms-btn-padding, 0.7rem 1.25rem); + white-space: nowrap; +} + +.home-page__block--projects .webapps-featured__explore-icon { + font-size: 1.15em; + line-height: 1; } .home-page__block--projects .webapps-featured__eyebrow { @@ -1176,6 +1395,7 @@ gap: 0.4rem; margin: 0 0 0.85rem; padding: 0.35rem 0.75rem; + font-family: var(--openms-font-body); font-size: var(--openms-text-min); font-weight: 600; letter-spacing: 0.04em; @@ -1186,57 +1406,41 @@ border-radius: 999px; } -.home-page__block--projects .webapps-featured__eyebrow-icon { - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - line-height: 0; - opacity: 0.9; -} - -.home-page__block--projects .webapps-featured__eyebrow-icon svg { - display: block; - width: 0.875rem; - height: 0.875rem; -} - -.home-page__block--projects .webapps-featured__header-title-wrap .webapps-featured__title { +.home-page__block--projects .webapps-featured__title { margin: 0; + font-family: var(--openms-font-heading); font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--openms-navy); text-align: left; - max-width: none; + text-wrap: balance; } .home-page__block--projects .webapps-featured__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; + color: var(--openms-blue); + background: none; + -webkit-background-clip: unset; + background-clip: unset; + -webkit-text-fill-color: unset; } -.home-page__block--projects .webapps-featured__header-intro .webapps-featured__lead { - margin: 0; +.home-page__block--projects .webapps-featured__header-main .webapps-featured__lead { + margin: 0.85rem 0 0; + max-width: 52ch; font-size: var(--openms-body-size-lg); line-height: 1.62; color: rgba(var(--openms-dark-rgb), 0.72); text-align: left; + text-wrap: pretty; } -.home-page__block--projects .webapps-featured__grid--bento { - --webapps-bento-visual-h: clamp(12rem, 22vh, 15rem); +.home-page__block--projects .webapps-featured__grid--catalog { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; - gap: clamp(1rem, 2vw, 1.35rem); + gap: var(--projects-grid-gap); } .home-page__block--projects .webapps-featured__item { @@ -1245,6 +1449,22 @@ height: 100%; } +@media (max-width: 767px) { + .home-page__block--projects .webapps-featured__header--home { + margin-bottom: clamp(1.5rem, 4vh, 2rem); + } + + .home-page__block--projects .webapps-featured__grid--catalog { + grid-template-columns: 1fr; + } +} + +@media (min-width: 768px) and (max-width: 1099px) { + .home-page__block--projects .webapps-featured__grid--catalog { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + .home-page--motion .home-page__block--projects .webapps-featured__item:not(.is-revealed) { opacity: 0; transform: translateY(1.35rem); @@ -1277,102 +1497,118 @@ transform: translateY(0); } -.home-page__block--projects .webapps-project-card--bento { +/* Catalog card */ +.home-page__block--projects .webapps-project-card--catalog { display: flex; width: 100%; height: 100%; min-height: 100%; } -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface { +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface { display: flex; flex-direction: column; + align-items: stretch; height: 100%; + gap: 0; padding: 0; overflow: hidden; - border-radius: 1.15rem; + border-radius: 0.625rem; background: var(--openms-white); - border: 1px solid rgba(var(--openms-navy-rgb), 0.07); - box-shadow: - 0 0.5rem 1.75rem rgba(var(--openms-navy-rgb), 0.07), - 0 0.15rem 0.45rem rgba(var(--openms-navy-rgb), 0.04); - transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; + border: 1px solid var(--home-line); + box-shadow: none; + text-decoration: none; + transition: border-color 0.2s ease; } -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:hover, -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:focus-visible { - transform: translateY(-4px); - border-color: rgba(var(--openms-blue-rgb), 0.2); - box-shadow: - 0 1rem 2.5rem rgba(var(--openms-blue-rgb), 0.12), - 0 0.25rem 0.75rem rgba(var(--openms-navy-rgb), 0.06); +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible { + border-color: rgba(var(--openms-blue-rgb), 0.28); outline: none; } -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__visual { +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible { + box-shadow: 0 0 0 2px rgba(var(--openms-blue-rgb), 0.25); +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__media { display: flex; - flex: 0 0 var(--webapps-bento-visual-h); - align-items: stretch; - justify-content: stretch; - box-sizing: border-box; + align-items: center; + justify-content: center; + flex: 0 0 auto; width: 100%; - min-width: 0; - height: var(--webapps-bento-visual-h); - min-height: var(--webapps-bento-visual-h); - max-height: var(--webapps-bento-visual-h); - padding: clamp(1.25rem, 2.5vh, 2rem); - background: linear-gradient( - 165deg, - rgba(var(--openms-blue-rgb), 0.1) 0%, - rgba(var(--openms-purple-rgb), 0.05) 42%, - rgba(var(--openms-white-rgb), 1) 100% - ); - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.06); + min-height: calc(var(--projects-logo-height) + 2rem); + padding: 1rem 1.15rem; + background: rgba(var(--openms-blue-rgb), 0.05); + border-bottom: 1px solid rgba(var(--openms-blue-rgb), 0.1); } -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__logo { +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__image { display: block; - flex: 1 1 auto; - width: 100%; - height: 100%; - min-width: 0; - min-height: 0; - max-width: none; - max-height: none; + width: auto; + max-width: min(100%, 9.5rem); + height: var(--projects-logo-height); object-fit: contain; object-position: center; - filter: none; } -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:hover .webapps-project-card__logo, -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface:focus-visible .webapps-project-card__logo { - transform: scale(1.03); -} - -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__content { +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__content { display: flex; flex-direction: column; + align-items: flex-start; gap: 0.45rem; flex: 1 1 auto; - padding: clamp(1.15rem, 2.2vh, 1.4rem) clamp(1.25rem, 2.5vw, 1.5rem) - clamp(1.35rem, 2.5vh, 1.6rem); + padding: 1rem 1.15rem 1.1rem; + background: var(--openms-white); + text-align: left; } -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__name { +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__name { margin: 0; font-family: var(--openms-font-heading); - font-size: clamp(1.05rem, 1.8vw, 1.2rem); + font-size: 1.0625rem; font-weight: 700; - line-height: 1.25; + line-height: 1.3; + letter-spacing: -0.01em; color: var(--openms-navy); } -.home-page__block--projects .webapps-project-card--bento .webapps-project-card__text { +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__text { margin: 0; - font-size: var(--openms-body-size); - line-height: 1.55; - color: rgba(var(--openms-dark-rgb), 0.68); - -webkit-line-clamp: 3; + flex: 1 1 auto; + font-family: var(--openms-font-body); + font-size: 0.9375rem; + font-weight: 400; + line-height: 1.58; + color: rgba(var(--openms-dark-rgb), 0.72); + text-wrap: pretty; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta { + display: inline-flex; + align-items: center; + gap: 0.2rem; + margin-top: 0.35rem; + padding: 0; + font-family: var(--openms-font-body); + font-size: 0.875rem; + font-weight: 600; + line-height: 1.2; + color: var(--openms-blue); + background: none; + border: none; + border-radius: 0; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__cta-icon { + color: inherit; + font-size: 1.05rem; + line-height: 1; +} + +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:hover .webapps-project-card__cta, +.home-page__block--projects .webapps-project-card--catalog .webapps-project-card__surface:focus-visible .webapps-project-card__cta { + color: var(--openms-blue); } .home-page__block--projects .webapps-featured__footer { @@ -1381,8 +1617,8 @@ text-align: center; } -.home-page__block--projects .webapps-featured__show-all { - padding: var(--openms-btn-padding, 0.7rem 1.25rem); +.home-page__block--projects .webapps-featured__footer--home { + margin-top: clamp(1.75rem, 3.5vh, 2.25rem); } /* ═══════════════════════════════════════════ @@ -1395,38 +1631,72 @@ } .home-page__block--partners .uni-partners--home .uni-partners__inner { - width: min(100%, 60rem); - max-width: 60rem; + width: min(100%, var(--home-max)); + max-width: var(--home-max); margin-inline: auto; padding-inline: var(--home-pad-x); } .home-page__block--partners .uni-partners--home .uni-partners__header--trust { - max-width: 44rem; + display: block; + max-width: none; margin: 0 auto; padding-inline: 0; text-align: center; } -.home-page__block--partners .uni-partners--home .uni-partners__tagline { +.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 { + display: flex; + flex-direction: column; + align-items: center; + gap: 0; margin: 0; - font-family: var(--openms-font-body); - font-size: clamp(0.8125rem, 1.6vw, 0.9375rem); - font-weight: 500; - line-height: 1.5; - letter-spacing: 0.01em; - color: rgba(var(--openms-navy-rgb), 0.5); + max-width: none; + font-family: var(--openms-font-heading); + font-size: clamp(1.25rem, 2.6vw, 1.75rem); + font-weight: 800; + line-height: 1.12; + letter-spacing: -0.03em; + color: var(--openms-navy); + text-align: center; +} + +.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__tagline-strong { - font-weight: 600; - color: rgba(var(--openms-navy-rgb), 0.72); +.home-page__block--partners .uni-partners--home .uni-partners__trust-title-accent { + display: inline; + margin-top: 0; + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; } .home-page__block--partners .uni-partners--home .uni-partners__marquee { - margin-top: clamp(0.75rem, 1.5vh, 1.25rem); + margin-top: clamp(1.25rem, 2.5vh, 1.75rem); margin-bottom: clamp(3.5rem, 7vh, 5rem); + margin-inline: calc(-1 * var(--home-pad-x)); + width: calc(100% + 2 * var(--home-pad-x)); background: transparent; border: none; } @@ -1436,6 +1706,14 @@ width: clamp(2.5rem, 6vw, 4.5rem); } +.home-page__block--partners .uni-partners--home .uni-partners__marquee::before { + background: linear-gradient(90deg, var(--home-bg-base) 0%, rgba(255, 255, 255, 0) 100%); +} + +.home-page__block--partners .uni-partners--home .uni-partners__marquee::after { + background: linear-gradient(270deg, var(--home-bg-base) 0%, rgba(255, 255, 255, 0) 100%); +} + .home-page__block--partners .uni-partners--home .uni-partners__track { padding: 0.15rem 0; animation-duration: 32s; @@ -1493,8 +1771,8 @@ @media (max-width: 768px) { .home-page__block--partners .uni-partners--home .uni-partners__inner { - width: min(100%, 37rem); - max-width: 37rem; + width: 100%; + max-width: none; } .home-page__block--partners .uni-partners--home { @@ -1506,6 +1784,10 @@ gap: 1.35rem; padding-inline: 1rem; } + + .home-page__block--partners .uni-partners--home .uni-partners__trust-title { + font-size: clamp(1.15rem, 4.2vw, 1.55rem); + } } /* ═══════════════════════════════════════════ @@ -1581,19 +1863,14 @@ position: static; } - .home-page__block--projects .webapps-featured__header--split { - grid-template-columns: 1fr; - align-items: start; + .home-page__block--projects .webapps-featured__header--home { + gap: 1.25rem; } - .home-page__block--projects .webapps-featured__header-title-wrap .webapps-featured__title { + .home-page__block--projects .webapps-featured__title { font-size: clamp(1.75rem, 5vw, 2.35rem); } - .home-page__block--projects .webapps-featured__grid--bento { - grid-template-columns: 1fr; - } - .home-page__block--sponsors .hero-sponsors__inner { grid-template-columns: 1fr; text-align: center; @@ -1638,16 +1915,16 @@ .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__content, - .home-page--motion .home-page__cta .contact-home__aside, + .home-page--motion .home-page__cta .contact-home__header, + .home-page--motion .home-page__cta .contact-home__grid, .home-page--motion .home-page__hero .hero-home::before, .home-page--motion .home-page__hero .hero-home__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__note, - .home-page--motion .home-page__hero .hero-home__panel, - .home-page--motion .home-page__hero .hero-home__bento-card, + .home-page--motion .home-page__hero .hero-home__metrics-row, + .home-page--motion .home-page__hero .hero-home__metric, .home-page--motion .home-page__block--projects .webapps-featured__header, .home-page__block--projects .webapps-featured__item, .home-page__block--projects .webapps-featured__footer { @@ -1657,7 +1934,7 @@ } .home-pathways__step-link:hover, - .home-page__block--projects .webapps-project-card--bento .webapps-project-card__surface: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 { diff --git a/assets/css/navbar-responsive.css b/assets/css/navbar-responsive.css index e3db982..8dbc311 100644 --- a/assets/css/navbar-responsive.css +++ b/assets/css/navbar-responsive.css @@ -49,8 +49,8 @@ /* 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, 68px) !important; - height: var(--openms-navbar-logo-height, 68px) !important; + 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; @@ -95,14 +95,14 @@ .site-header #nav.navbar.is-fresh .container, #navbar-clone.navbar.is-fresh .container { display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: var(--openms-navbar-brand-slot-width) auto minmax(19rem, 1.55fr); align-items: center; width: 100%; max-width: 100%; min-height: var(--openms-header-bar-min-height, 5.5rem); - padding-left: clamp(0.75rem, 1.5vw, 2rem); - padding-right: clamp(0.75rem, 1.5vw, 2rem); - gap: 0.5rem; + padding-left: var(--openms-navbar-container-pad-inline); + padding-right: var(--openms-navbar-container-pad-inline); + gap: 1rem; overflow: visible; } @@ -117,14 +117,16 @@ z-index: 2; min-width: 0; min-height: inherit; - max-width: min(240px, 22vw); + width: var(--openms-navbar-brand-slot-width); + max-width: var(--openms-navbar-brand-slot-width); } .site-header #nav.navbar.is-fresh .navbar-brand-link, #navbar-clone.navbar.is-fresh .navbar-brand-link { - flex: 0 1 auto; + flex: 1 1 auto; min-width: 0; max-width: 100%; + height: 100%; } .navbar.is-fresh .navbar-menu.is-static, @@ -154,9 +156,10 @@ flex-wrap: nowrap; align-items: center; justify-content: center; - gap: 1rem; + justify-self: center; + gap: 0.8rem; min-width: 0; - max-width: min(100%, calc(100vw - 32rem)); + max-width: min(100%, calc(100vw - 36rem)); overflow: visible; pointer-events: auto; position: relative; @@ -176,15 +179,37 @@ flex-shrink: 0; } + /* Invisible bridge — keeps dropdown open while moving pointer from link to panel */ + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable::before, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 100%; + height: 0.5rem; + background: transparent; + pointer-events: auto; + } + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown, #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown { position: absolute; top: 100%; left: auto; right: 0; + margin-top: 0; transform: none; z-index: 400; overflow: visible; + display: none; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown { + display: block !important; } .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link, @@ -213,10 +238,10 @@ flex-wrap: nowrap; align-items: center; justify-content: flex-end; - gap: 0.5rem; + justify-self: end; + gap: 0.85rem; flex-shrink: 0; min-width: max-content; - justify-self: end; pointer-events: auto; position: relative; z-index: 10; @@ -228,20 +253,20 @@ #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: 0.85rem; - padding-right: 0.85rem; + padding-left: 0.6rem; + padding-right: 0.6rem; 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: 0.85rem; + padding-left: 0.6rem; 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: 0.9rem; + padding-left: 0.65rem; } } @@ -255,7 +280,8 @@ .site-header #nav.navbar.is-fresh .navbar-brand, #navbar-clone.navbar.is-fresh .navbar-brand { - max-width: min(180px, 17vw); + width: var(--openms-navbar-brand-slot-width); + max-width: var(--openms-navbar-brand-slot-width); } .navbar.is-fresh .navbar-item, @@ -264,18 +290,18 @@ #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: 0.75rem; - padding-right: 0.75rem; + padding-left: 0.5rem; + padding-right: 0.5rem; } .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link { - padding-left: 0.75rem; + padding-left: 0.5rem; } .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: 0.8rem; + padding-left: 0.55rem; } } @@ -283,25 +309,26 @@ @media (min-width: 1280px) and (max-width: 1535px) { .site-header #nav.navbar.is-fresh .container, #navbar-clone.navbar.is-fresh .container { - gap: 0.35rem; - padding-left: clamp(0.65rem, 1.2vw, 1.25rem); - padding-right: clamp(0.65rem, 1.2vw, 1.25rem); + gap: 0.65rem; + padding-left: var(--openms-navbar-container-pad-inline); + padding-right: var(--openms-navbar-container-pad-inline); } .site-header #nav.navbar.is-fresh .navbar-brand, #navbar-clone.navbar.is-fresh .navbar-brand { - max-width: min(200px, 18vw); + width: var(--openms-navbar-brand-slot-width); + max-width: var(--openms-navbar-brand-slot-width); } .site-header #nav.navbar.is-fresh .navbar-links, #navbar-clone.navbar.is-fresh .navbar-links { gap: 0.5rem; - max-width: min(100%, calc(100vw - 36rem)); + max-width: min(100%, calc(100vw - 37rem)); } .site-header #nav.navbar.is-fresh .navbar-actions, #navbar-clone.navbar.is-fresh .navbar-actions { - gap: 0.65rem; + gap: 0.75rem; } .navbar.is-fresh .navbar-item, @@ -310,8 +337,8 @@ #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: 0.55rem; - padding-right: 0.55rem; + padding-left: 0.4rem; + padding-right: 0.4rem; font-size: 0.9375rem; } @@ -328,14 +355,14 @@ /* XL wide — comfortable link spacing */ @media (min-width: 1536px) { - .site-header #nav.navbar.is-fresh .navbar-brand, - #navbar-clone.navbar.is-fresh .navbar-brand { - max-width: min(320px, 28vw); - } - .site-header #nav.navbar.is-fresh .navbar-links, #navbar-clone.navbar.is-fresh .navbar-links { - gap: 1.25rem; + gap: 0.9rem; + } + + .site-header #nav.navbar.is-fresh .navbar-actions, + #navbar-clone.navbar.is-fresh .navbar-actions { + gap: 0.85rem; } .navbar.is-fresh .navbar-item, @@ -344,18 +371,18 @@ #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: 1rem; - padding-right: 1rem; + padding-left: 0.7rem; + padding-right: 0.7rem; } .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link { - padding-left: 1rem; + padding-left: 0.7rem; } .navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link, #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown > .navbar-link { - padding-right: 0.45rem !important; + padding-right: 0.4rem !important; } } @@ -417,10 +444,10 @@ .site-header #nav.navbar.is-fresh .navbar-brand-link, #navbar-clone.navbar.is-fresh .navbar-brand-link { - flex: 0 1 auto; + flex: 1 1 auto; min-width: 0; max-width: 100%; - padding: 0; + height: 100%; } .site-header #nav.navbar.is-fresh .navbar-logo-text, @@ -501,9 +528,9 @@ z-index: 250; margin: 0; padding: 0; - background: var(--openms-white); - box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); - border-top: 1px solid var(--openms-grey); + background: var(--openms-chrome-bg); + box-shadow: none; + border-top: 1px solid var(--openms-chrome-border); max-height: none; overflow-x: hidden; overflow-y: auto; @@ -611,10 +638,10 @@ .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; + border: 2px solid rgba(var(--openms-white-rgb), 0.34) !important; background: transparent !important; background-color: transparent !important; - 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; } @@ -645,10 +672,10 @@ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:hover, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:focus-visible, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate:active { - background: transparent !important; - background-color: transparent !important; - border-color: var(--openms-blue) !important; - color: var(--openms-blue) !important; + background: var(--openms-chrome-surface-hover) !important; + background-color: var(--openms-chrome-surface-hover) !important; + border-color: rgba(var(--openms-white-rgb), 0.5) !important; + color: var(--openms-white) !important; 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; @@ -685,7 +712,7 @@ min-height: 3rem; padding: 0.8rem 1.25rem; font-weight: 600; - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-bottom: 1px solid var(--openms-chrome-border); } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown, @@ -712,7 +739,7 @@ .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-blue); + color: var(--openms-navbar-link-color) !important; background: transparent; background-color: transparent; } @@ -720,7 +747,7 @@ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after { transform: rotate(180deg); - border-color: var(--openms-blue); + border-color: var(--openms-navbar-link-color) !important; } .navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, @@ -761,6 +788,8 @@ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active .navbar-dropdown { display: block !important; + background: var(--openms-navbar-dropdown-bg) !important; + background-color: var(--openms-navbar-dropdown-bg) !important; } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown, @@ -784,8 +813,8 @@ text-align: center; padding-left: 1.25rem; padding-right: 1.25rem; - border-top-color: rgba(var(--openms-navy-rgb), 0.08); - color: var(--openms-blue); + border-top-color: var(--openms-navbar-dropdown-border); + color: var(--openms-navbar-dropdown-heading) !important; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; @@ -796,7 +825,8 @@ justify-content: center; text-align: center; font-weight: 500; - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.06); + color: var(--openms-navbar-dropdown-text) !important; + border-bottom: 1px solid var(--openms-navbar-dropdown-border); } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested, @@ -854,8 +884,8 @@ .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: 0.75rem; - padding-right: 0.75rem; + 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, @@ -873,7 +903,7 @@ grid-column: 1; max-width: 100%; min-width: 0; - padding: 0.25rem 0; + height: 100%; } .site-header #nav.navbar.is-fresh .navbar-brand-actions, @@ -1025,36 +1055,47 @@ box-shadow: none; } + .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 { + border: none; + background: transparent; + background-color: transparent; + color: var(--openms-navbar-dropdown-text) !important; + } + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item, - #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-heading, - #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item { + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown-heading { border: none; background: transparent; background-color: transparent; + color: var(--openms-navbar-dropdown-heading) !important; } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item):hover, .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link:hover, .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, - .site-header #nav.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link, .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible, - .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-item:not(.navbar-cta-item):hover, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:hover, #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:hover, - #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item.is-secondary:focus-visible, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link, - #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover, - #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link: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 { + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover { background: transparent !important; background-color: transparent !important; - color: var(--openms-blue) !important; + color: var(--openms-navbar-link-hover-color) !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover, + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown a.navbar-item:hover, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-dropdown .navbar-item.is-nested:hover { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-navbar-dropdown-hover-text) !important; + font-weight: 600; } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link, @@ -1065,45 +1106,45 @@ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link:focus-visible { background: transparent !important; background-color: transparent !important; - color: var(--openms-blue) !important; + color: var(--openms-navbar-link-hover-color) !important; } - /* SM–MD icon colors — blue default and on interaction */ + /* SM–MD icon colors */ .navbar-mobile-toolbar .navbar-search--mobile .navbar-search__toggle { - color: var(--openms-blue); + 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-navy); + color: var(--openms-navbar-link-color); background: transparent; } .navbar-mobile-toolbar .navbar-burger { - color: var(--openms-blue); + color: var(--openms-navbar-link-color); } .navbar-mobile-toolbar .navbar-burger span { - background-color: var(--openms-blue); + 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-navy); + background-color: var(--openms-navbar-link-color); } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a { - color: var(--openms-blue); + color: var(--openms-navbar-link-color); } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, .site-header #nav.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:hover, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social a:focus-visible { - color: var(--openms-navy); + color: var(--openms-navbar-link-color); background: transparent; } @@ -1116,7 +1157,7 @@ .site-header #nav.navbar.is-fresh .navbar-menu .navbar-link svg.icon, #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item svg.icon, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link svg.icon { - color: var(--openms-blue); + color: var(--openms-navbar-link-color); fill: currentColor; } @@ -1128,7 +1169,7 @@ #navbar-clone.navbar.is-fresh .navbar-menu a.navbar-item:focus-visible svg.icon, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:hover svg.icon, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-link:focus-visible svg.icon { - color: var(--openms-blue); + color: var(--openms-navbar-link-color); fill: currentColor; } @@ -1136,18 +1177,21 @@ #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link::after { - border-color: var(--openms-blue) !important; + border-color: var(--openms-navbar-link-color) !important; } .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after, .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after, .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible::after, - .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown:hover > .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:hover::after, - #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible::after, + #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown > .navbar-link:focus-visible::after { + border-color: var(--openms-navbar-link-hover-color) !important; + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-menu .navbar-item.has-dropdown.is-active > .navbar-link::after { - border-color: var(--openms-blue) !important; + border-color: var(--openms-navbar-link-color) !important; } /* Tablet / md — right drawer menu, roomier top bar */ diff --git a/assets/css/navbar-search.css b/assets/css/navbar-search.css index 3e92e60..f7bc90c 100644 --- a/assets/css/navbar-search.css +++ b/assets/css/navbar-search.css @@ -1,4 +1,4 @@ -/* Navbar site search — magnifying glass toggles expandable panel */ +/* Navbar site search — minimal underline bar under header */ .navbar-search { position: relative; @@ -19,21 +19,20 @@ border: none; border-radius: 0.5rem; background: transparent; - color: var(--openms-dark); + color: var(--openms-navbar-link-color, #000); cursor: pointer; - transition: color 0.2s ease; + transition: color 0.15s ease; } .navbar-search__toggle:hover, -.navbar-search__toggle:focus-visible { - color: var(--openms-blue); - background: transparent; +.navbar-search.is-open .navbar-search__toggle { + color: var(--openms-navbar-link-hover-color, var(--openms-blue)); outline: none; } -.navbar-search.is-open .navbar-search__toggle { - color: var(--openms-blue); - background: transparent; +.navbar-search__toggle:focus-visible { + color: var(--openms-navbar-link-hover-color, var(--openms-blue)); + outline: none; } .navbar-search__toggle-icon { @@ -42,27 +41,26 @@ height: 1.5rem; } -@media (min-width: 1280px) { - .navbar-search__toggle-icon { - width: 1.625rem; - height: 1.625rem; - } -} - .navbar-search__panel { - position: absolute; - top: 50%; - right: calc(100% + 0.35rem); - transform: translateY(-50%); - z-index: 500; - width: min(16rem, calc(100vw - 8rem)); - min-width: 12rem; + 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; @@ -78,60 +76,80 @@ .navbar-search__field { display: flex; align-items: center; - min-height: 2.5rem; - padding: 0 0.75rem; - border: 1px solid var(--openms-grey); - border-radius: 0.5rem; - background: var(--openms-white); - box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); - transition: border-color 0.2s ease, box-shadow 0.2s ease; + 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-color: var(--openms-blue); - box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.15), - 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); + 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; - width: 100%; border: none; background: transparent; - padding: 0.4rem 0; + padding: 0; font-family: var(--openms-font-body); - font-size: var(--openms-text-min); - font-weight: 500; - line-height: 1.3; + 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.45); + 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 { - position: absolute; - top: calc(100% + 0.35rem); - right: 0; - left: 0; - z-index: 501; - max-height: min(18rem, 50vh); + max-height: min(16rem, 42vh); overflow-x: hidden; overflow-y: auto; - margin: 0; - padding: 0.35rem 0; - list-style: none; - background: var(--openms-white); - border: 1px solid var(--openms-grey); - border-radius: 0.5rem; - box-shadow: 0 0.5rem 1.25rem rgba(var(--openms-dark-rgb), 0.12); + margin: 0.15rem 0 0; + padding: 0; } .navbar-search__results:not([hidden]) { @@ -140,46 +158,54 @@ .navbar-search__result { display: block; - padding: 0.55rem 0.85rem; + padding: 0.55rem 0; text-decoration: none; color: var(--openms-dark); - border-top: 1px solid var(--openms-grey); + 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 { - background: transparent; color: var(--openms-blue); outline: none; } .navbar-search__result-title { display: block; - font-size: var(--openms-navbar-font-size, 16px); - font-weight: 600; - line-height: 1.3; + font-size: 0.94rem; + font-weight: 500; + line-height: 1.35; } .navbar-search__result-meta { display: block; - margin-top: 0.15rem; - font-size: var(--openms-text-min); - color: rgba(var(--openms-dark-rgb), 0.55); - line-height: 1.35; + 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.65rem 0.85rem; - font-size: var(--openms-text-min); - color: rgba(var(--openms-dark-rgb), 0.65); + 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); } -/* Desktop — icon in actions cluster; panel drops below (avoids covering center links) */ @media (min-width: 1280px) { .navbar-search--desktop { display: flex; @@ -191,35 +217,17 @@ display: none !important; } - .navbar-search--desktop .navbar-search__panel { - top: calc(100% + 0.35rem); - right: 0; - left: auto; - transform: none; - width: min(18rem, calc(100vw - 2rem)); - min-width: 14rem; - } - - .navbar-search--desktop .navbar-search__results { - position: static; - max-height: min(16rem, 45vh); - } -} - -/* Compact desktop / lg — keep panel aligned to the right edge */ -@media (min-width: 1280px) and (max-width: 1535px) { - .navbar-search--desktop .navbar-search__panel { - width: min(16rem, calc(100vw - 1.5rem)); - min-width: 12rem; - } - .navbar-search--desktop .navbar-search__toggle { width: 2.5rem; height: 2.5rem; } + + .navbar-search__toggle-icon { + width: 1.625rem; + height: 1.625rem; + } } -/* Mobile — icon in top bar before burger */ @media (max-width: 1279px) { .navbar-search--desktop { display: none !important; @@ -234,40 +242,15 @@ height: 2.5rem; } - .navbar-search--mobile .navbar-search__panel { - position: fixed; - top: var(--openms-header-height, 4.5rem); - right: 0.5rem; - left: 0.5rem; - transform: none; - width: auto; - min-width: 0; - max-width: none; - } - - @media (max-width: 768px) { - .navbar-search--mobile .navbar-search__panel { - right: 0.75rem; - left: 0.75rem; - } - - .navbar-search--mobile .navbar-search__field { - border-radius: 0.65rem; - box-shadow: 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.1); - } - } - - .navbar-search--mobile .navbar-search__field { - min-height: 2.75rem; - } - - .navbar-search--mobile .navbar-search__input { - font-size: var(--openms-navbar-font-size, 16px); + .navbar-search__panel { + padding-block: 0.65rem 0.75rem; } +} - .navbar-search--mobile .navbar-search__results { - position: static; - max-height: min(14rem, 40vh); - margin-top: 0.35rem; +@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 0000000..81bcde7 --- /dev/null +++ b/assets/css/navbar-surface.css @@ -0,0 +1,131 @@ +/* Site chrome navbar — full-width navy bar on all pages */ + +:root { + --openms-navbar-max-width: 100%; + --openms-navbar-float-radius: 0; + --openms-navbar-float-shadow: none; + --openms-navbar-float-pad-y: 0; + --openms-navbar-float-pad-x: 0; +} + +.site-header { + background: transparent; + padding: 0; +} + +.site-header #nav.navbar.is-fresh { + padding: 0; + background: var(--openms-chrome-bg) !important; + border: none !important; + backdrop-filter: none; +} + +.site-header #nav.navbar.is-fresh .container { + width: 100%; + max-width: 100%; + margin-inline: auto; + background: transparent; + border: none; + border-top: none; + border-radius: 0; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +.site-header #nav.navbar.is-fresh .navbar-brand img.navbar-logo, +#navbar-clone.navbar.is-fresh .navbar-brand img.navbar-logo { + max-height: var(--openms-navbar-logo-height, 52px) !important; + height: var(--openms-navbar-logo-height, 52px) !important; +} + +.navbar.is-fresh .navbar-item:not(.navbar-cta-item), +.navbar.is-fresh .navbar-link, +.navbar.is-fresh a.navbar-item.is-secondary, +#navbar-clone.navbar.is-fresh .navbar-item:not(.navbar-cta-item), +#navbar-clone.navbar.is-fresh .navbar-link, +#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary { + font-weight: 500; + border-radius: 999px; + transition: + color 0.2s ease, + background-color 0.2s ease; +} + +.navbar-cta-item .navbar-cta-arrow { + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 0; + transition: transform 0.25s cubic-bezier(0.44, 0, 0.56, 1); +} + +.navbar-cta-item .navbar-cta-arrow svg { + display: block; + width: 0.95rem; + height: 0.95rem; +} + +.navbar-cta-item:hover .navbar-cta-arrow, +.navbar-cta-item:focus-visible .navbar-cta-arrow { + transform: translateX(2px); +} + +@media (min-width: 1280px) { + .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { + margin-top: 0; + border: 1px solid rgba(var(--openms-navy-rgb), 0.08); + border-radius: 0.85rem; + border-top-color: rgba(var(--openms-navy-rgb), 0.08); + box-shadow: + 0 0.35rem 1.25rem rgba(var(--openms-dark-rgb), 0.08), + 0 0.125rem 0.35rem rgba(var(--openms-dark-rgb), 0.04); + overflow: hidden; + } + + .site-header #nav.navbar.is-fresh, + #navbar-clone.navbar.is-fresh { + min-height: auto; + } + + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container { + min-height: calc(var(--openms-navbar-logo-height, 52px) + 0.65rem); + padding-left: var(--openms-navbar-container-pad-inline); + padding-right: var(--openms-navbar-container-pad-inline); + } +} + +@media (max-width: 1279px) { + .site-header #nav.navbar.is-fresh .container, + #navbar-clone.navbar.is-fresh .container { + border-radius: 0; + min-height: calc(var(--openms-navbar-logo-height, 52px) + 0.55rem); + padding-left: var(--openms-navbar-container-pad-inline-mobile); + padding-right: var(--openms-navbar-container-pad-inline-mobile); + } + + .site-header #nav.navbar.is-fresh .navbar-brand, + #navbar-clone.navbar.is-fresh .navbar-brand { + min-height: calc(var(--openms-navbar-logo-height, 52px) + 0.55rem); + } + + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + border-top: 1px solid var(--openms-chrome-border); + border-radius: 0; + box-shadow: none; + } +} + +@media (prefers-reduced-motion: reduce) { + .navbar-cta-item .navbar-cta-arrow { + transition: none; + } + + .navbar-cta-item:hover .navbar-cta-arrow, + .navbar-cta-item:focus-visible .navbar-cta-arrow { + transform: none; + } +} diff --git a/assets/css/news-banner.css b/assets/css/news-banner.css index af06b3a..34ef97e 100644 --- a/assets/css/news-banner.css +++ b/assets/css/news-banner.css @@ -1,93 +1,118 @@ -/* Site announcement — light band for readability (aligned with page heroes) */ +/* Site announcement — chrome stack: banner → nav → hero */ .news-banner { + --news-banner-max: min(92rem, calc(100% - 1.5rem)); + --news-banner-pad-x: clamp(0.75rem, 1.5vw, 1.35rem); + --news-banner-bg: var(--openms-chrome-banner-bg); + --news-banner-border: var(--openms-chrome-banner-border); + --news-banner-label-color: var(--openms-chrome-banner-label); + --news-banner-label-bg: var(--openms-chrome-banner-label-bg); + --news-banner-label-border: var(--openms-chrome-banner-label-border); + --news-banner-text-color: var(--openms-chrome-banner-text); + --news-banner-focus-ring: rgba(var(--openms-blue-secondary-rgb), 0.45); position: relative; z-index: 100; overflow: hidden; - color: var(--openms-navy); - background: #f4f6f9; + background-color: var(--news-banner-bg); + border-bottom: 1px solid var(--news-banner-border); +} + +.news-banner::before { + content: none; +} + +.news-banner::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 1px; + background: var(--openms-chrome-accent-line); + opacity: 0.35; + pointer-events: none; } .news-banner__inner { position: relative; z-index: 1; - display: flex; - align-items: center; - justify-content: center; - max-width: 75rem; + max-width: var(--news-banner-max); margin: 0 auto; - padding: 1rem clamp(1.25rem, 4vw, 2.5rem); + padding: 0.65rem var(--news-banner-pad-x); } -.news-banner__content { +.news-banner__link, +.news-banner__message { display: flex; - flex-wrap: wrap; align-items: center; justify-content: center; - gap: 0.65rem 0.85rem; - width: min(100%, 52rem); - margin: 0 auto; + flex-wrap: wrap; + gap: 0.5rem 0.75rem; + margin: 0; + min-height: 2rem; text-align: center; } -.news-banner__eyebrow { +.news-banner__link { + width: 100%; + color: inherit; + text-decoration: none; +} + +a.news-banner__link:hover, +a.news-banner__link:focus-visible { + outline: none; +} + +a.news-banner__link:focus-visible { + box-shadow: 0 0 0 2px var(--news-banner-focus-ring); +} + +.news-banner__label { flex-shrink: 0; display: inline-flex; align-items: center; - justify-content: center; - margin: 0; - padding: 0.28rem 0.72rem; + padding: 0.2rem 0.55rem; font-family: var(--openms-font-body); - font-size: 0.72rem; + font-size: 0.6875rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; - color: var(--openms-white); - background: var(--openms-orange); - border: 1px solid color-mix(in srgb, var(--openms-orange) 88%, var(--openms-navy)); + color: var(--news-banner-label-color); + background: var(--news-banner-label-bg); + border: none; border-radius: 999px; - box-shadow: 0 1px 2px rgba(var(--openms-navy-rgb), 0.12); } -.news-banner__headline { - margin: 0; - min-width: 0; +.news-banner__text { flex: 0 1 auto; - max-width: 42rem; + min-width: 0; + max-width: 60ch; font-family: var(--openms-font-body); - font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); - font-weight: 700; - line-height: 1.55; - color: var(--openms-navy); - text-align: center; + font-size: clamp(0.92rem, 1.4vw, 1rem); + font-weight: 500; + line-height: 1.5; + letter-spacing: 0.01em; + color: var(--news-banner-text-color); text-wrap: pretty; } -@media (max-width: 768px) { +@media (min-width: 768px) { .news-banner__inner { - padding-block: 0.95rem; - } - - .news-banner__headline { - font-size: clamp(0.9375rem, 2.9vw, 1.02rem); - line-height: 1.5; + padding-block: 0.7rem; } } -@media (max-width: 520px) { - .news-banner__inner { - padding: 0.9rem 1rem; - } - - .news-banner__eyebrow { - padding: 0.24rem 0.62rem; - font-size: 0.68rem; +@media (max-width: 767px) { + .news-banner__link, + .news-banner__message { + align-items: center; } +} - .news-banner__headline { - font-size: 0.9375rem; - line-height: 1.5; - overflow-wrap: break-word; +@media (prefers-reduced-motion: reduce) { + .news-banner__link { + transition: none; } } diff --git a/assets/css/news-section.css b/assets/css/news-section.css index 9b0321f..bed8cf9 100644 --- a/assets/css/news-section.css +++ b/assets/css/news-section.css @@ -6,11 +6,14 @@ --olib-bg-soft: #f4f6f9; --olib-text-muted: rgba(var(--openms-navy-rgb), 0.68); --olib-hero-bg-top: color-mix(in srgb, var(--openms-blue) 10%, var(--olib-bg-soft)); - --news-max: 64rem; + --news-max: 68rem; + --news-gap: clamp(2rem, 4vw, 3rem); + --news-card-radius: 0.85rem; + --news-card-border: rgba(var(--openms-navy-rgb), 0.12); + --news-card-pad: clamp(1rem, 2vw, 1.25rem); display: block; width: 100%; - max-width: none; margin: 0; padding: 0 0 clamp(2.5rem, 5vh, 4rem); } @@ -19,480 +22,324 @@ width: min(100%, var(--news-max)); max-width: var(--news-max); margin-inline: auto; - padding-inline: var(--olib-pad-x); + padding-inline: clamp(1.25rem, 4vw, 2rem); } -.news-page { - margin-top: 0; +.openms-lib-hero.news-page-hero { + margin-bottom: clamp(2rem, 4vh, 3rem); } -.news-page-hero { - margin-bottom: var(--olib-section-y); +.news-page-hero--article .openms-lib-hero__title { + max-width: min(28ch, 100%); } -.news-page-hero--article .openms-lib-hero__title { - max-width: 28ch; +.news-body { + display: grid; + gap: var(--news-gap); } -.news-page-hero--article .openms-lib-hero__content { - max-width: 52rem; +.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-page__main { +/* —— News bibliography (matches publications layout) —— */ +.news-bibliography { display: grid; - gap: clamp(1.25rem, 2.5vw, 1.75rem); + gap: 1rem; + margin: 0; + padding-top: 0.25rem; } -.news-page__toolbar { +.news-toolbar { display: flex; flex-wrap: wrap; - align-items: center; - gap: 0.75rem 1rem; - margin-bottom: clamp(1.5rem, 3vh, 2rem); - padding-bottom: 1.25rem; - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.12); + align-items: flex-end; + justify-content: space-between; + gap: 0.75rem 1.25rem; + padding: 0.15rem 0 0.35rem; +} + +.news-toolbar__intro { + display: grid; + gap: 0.2rem; + min-width: min(100%, 14rem); } -.news-page__filter-label { +.news-toolbar__title { margin: 0; - flex: 0 0 100%; - font-family: var(--openms-font-body); - font-size: var(--openms-text-min); - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - color: rgba(var(--openms-dark-rgb), 0.65); + font-family: var(--openms-font-heading); + font-size: clamp(1.1rem, 2vw, 1.3rem); + font-weight: 800; + letter-spacing: -0.02em; + color: var(--openms-navy); } -.news-page__years { +.news-toolbar__filter { display: flex; - flex-wrap: wrap; - gap: 0.5rem; - flex: 1 1 auto; - min-width: 0; + flex-direction: column; + gap: 0.3rem; + min-width: min(100%, 9rem); } -.news-page__year-btn { - flex-shrink: 0; - min-height: 2.25rem; - padding: 0.375rem 0.875rem; +.news-toolbar__select { + min-height: 2.5rem; + min-width: 7.5rem; + padding: 0.4rem 2rem 0.4rem 0.75rem; font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); + font-size: var(--openms-body-size); font-weight: 600; - line-height: 1.2; color: var(--openms-navy); - background: var(--openms-white); - border: 2px solid rgba(var(--openms-navy-rgb), 0.18); - border-radius: 999px; + background-color: var(--openms-white); + border: 1px solid var(--news-card-border); + border-radius: 0.5rem; cursor: pointer; - transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, - box-shadow 0.2s ease, transform 0.2s ease; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230c2171' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.7rem center; + transition: border-color 0.2s ease, box-shadow 0.2s ease; } -.news-page__year-btn:hover { - border-color: rgba(var(--openms-blue-rgb), 0.45); - color: var(--openms-blue); +.news-toolbar__select:hover { + border-color: rgba(var(--openms-blue-rgb), 0.35); } -.news-page__year-btn:focus { +.news-toolbar__select:focus { outline: none; } -.news-page__year-btn:focus-visible { - outline: 2px solid var(--openms-yellow); - outline-offset: 2px; -} - -.news-page__year-btn.is-active { - color: var(--openms-white); - background: var(--openms-navy); - border-color: var(--openms-navy); - box-shadow: 0 0.25rem 0.75rem rgba(var(--openms-navy-rgb), 0.25); -} - -.news-page__count { - margin: 0 0 0 auto; - flex: 0 0 auto; - font-family: var(--openms-font-body); - font-size: var(--openms-text-min); - font-weight: 500; - color: rgba(var(--openms-dark-rgb), 0.7); - white-space: nowrap; -} - -.news-page__intro { - margin-bottom: 1.5rem; - font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); - line-height: 1.55; - color: rgba(var(--openms-dark-rgb), 0.82); +.news-toolbar__select:focus-visible { + border-color: var(--openms-blue); + box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.18); } -.news-page__year-heading { - margin: 2rem 0 1rem; - padding-bottom: 0.5rem; - font-family: var(--openms-font-heading); - font-size: var(--openms-secondary-heading-size-lg); - font-weight: 700; - line-height: 1.2; - color: var(--openms-navy); - letter-spacing: -0.01em; - border-bottom: 2px solid rgba(var(--openms-orange-rgb), 0.5); +.news-bibliography__entries { + display: grid; + gap: 0.85rem; + border: none; + border-radius: 0; + background: transparent; + overflow: visible; } -.news-page__year-heading:first-child { - margin-top: 0; +.news-year { + margin: 0; + padding: 0; } -.news-page__year-heading[hidden], -.news-card[data-news-hidden] { +.news-page:not(.news-year-filter--ready) .news-year[data-news-year] { display: none; } -.news-page__list { - display: flex; - flex-direction: column; - gap: 1rem; +.news-year[hidden] { + display: none; } -.news-card { +.news-list { + list-style: none; margin: 0; + padding: 0; + display: grid; + gap: 0.85rem; } -.news-card__inner { +.news-year .news-entry { display: grid; - grid-template-columns: auto minmax(0, 1fr); - gap: 1rem 1.25rem; - align-items: start; - padding: 1.25rem 1.25rem 1.25rem 1rem; - border: 1px solid rgba(var(--openms-navy-rgb), 0.12); - border-radius: 0.75rem; + gap: 0.45rem; + margin: 0; + padding: var(--news-card-pad); + border: 1px solid var(--news-card-border); + border-radius: var(--news-card-radius); background: var(--openms-white); - box-shadow: 0 0.25rem 1rem rgba(var(--openms-dark-rgb), 0.05); - transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; -} - -.news-card:hover .news-card__inner, -.news-card:focus-within .news-card__inner { - border-color: rgba(var(--openms-blue-rgb), 0.35); - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-blue-rgb), 0.12); - transform: translateY(-2px); + transition: border-color 0.2s ease, box-shadow 0.2s ease; } -.news-card__date-block { - flex-shrink: 0; +.news-year .news-entry:hover { + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); } -.news-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-entry p { + margin: 0; } -.news-card__date-day { +.news-entry__title { font-family: var(--openms-font-heading); - font-size: 1.5rem; + font-size: var(--openms-body-size-lg); font-weight: 700; + line-height: 1.4; color: var(--openms-navy); + text-wrap: pretty; } -.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__body { - min-width: 0; -} - -.news-card__title { - margin: 0 0 0.375rem; - font-family: var(--openms-font-heading); - font-size: var(--openms-secondary-heading-size-lg); - font-weight: 700; - line-height: 1.3; - letter-spacing: -0.01em; -} - -.news-card__title a { - color: var(--openms-navy); +.news-entry__title-link { + color: inherit; text-decoration: none; - transition: color 0.2s ease; + transition: color 0.15s ease; } -.news-card__title a:hover { +.news-entry__title-link:hover, +.news-entry__title-link:focus-visible { color: var(--openms-blue); + text-decoration: underline; + text-underline-offset: 0.14em; + outline: none; } -.news-card__title a:focus-visible { - outline: 2px solid var(--openms-yellow); - outline-offset: 2px; - border-radius: 0.125rem; +.news-entry__meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem 0.5rem; + font-size: var(--openms-text-min); + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.65); } -.news-card__meta { - margin: 0 0 0.625rem; - font-family: var(--openms-font-body); - font-size: var(--openms-text-min); - line-height: 1.4; - color: rgba(var(--openms-dark-rgb), 0.72); +.news-entry__date { + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.78); } -.news-card__authors::before { - content: "by "; +.news-entry__sep { + color: rgba(var(--openms-navy-rgb), 0.35); } -.news-card__summary { - margin: 0 0 0.875rem; - font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); +.news-entry__summary { + font-size: var(--openms-body-size); line-height: 1.55; - color: rgba(var(--openms-dark-rgb), 0.82); + color: rgba(var(--openms-navy-rgb), 0.75); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } -.news-card__summary p { +.news-entry__summary p { margin: 0; } -.news-card__read-more { - display: inline-flex; - align-items: center; - font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); - font-weight: 600; +.news-entry__action { + justify-self: start; + margin-top: 0.15rem; + font-size: 0.8rem; + font-weight: 700; color: var(--openms-blue); text-decoration: none; - transition: color 0.2s ease; + transition: color 0.15s ease; } -.news-card__read-more:hover { +.news-entry__action:hover, +.news-entry__action:focus-visible { color: var(--openms-navy); + text-decoration: underline; + outline: none; } -.news-card__read-more:focus-visible { - outline: 2px solid var(--openms-yellow); - outline-offset: 2px; - border-radius: 0.125rem; +.news-bibliography--undated .news-year--undated { + display: block !important; } -.news-page__empty { - margin: 2rem 0 0; - padding: 2rem 1.5rem; - text-align: center; - font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); - color: rgba(var(--openms-dark-rgb), 0.75); - border-radius: 0.75rem; - background: rgba(var(--openms-navy-rgb), 0.04); - border: 1px dashed rgba(var(--openms-navy-rgb), 0.2); +@media (max-width: 720px) { + .news-page-hero--article .openms-lib-hero__title { + max-width: none; + } } -.news-page__empty[hidden] { - display: none; +@media (max-width: 960px) { + .news-toolbar { + flex-direction: column; + align-items: stretch; + } + + .news-toolbar__filter, + .news-toolbar__select { + width: 100%; + } } -/* Navbar-style CTA motion (news page) */ -.news-page-layout .openms-lib-btn, -.news-page-layout .news-card__read-more, -.news-page-layout .news-page__year-btn { +/* Hero actions (single article) */ +.news-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); - cursor: pointer; } -.news-page-layout .openms-lib-btn--primary, -.news-page-layout .news-page__year-btn.is-active { - gap: 0.5rem; - padding-inline: 1.15rem; +.news-page-layout .openms-lib-btn--primary { border: 2px solid var(--openms-navy); background: var(--openms-navy); color: var(--openms-white) !important; } -.news-page-layout .openms-lib-btn--ghost, -.news-page-layout .news-card__read-more, -.news-page-layout .news-page__year-btn:not(.is-active) { - border: 2px solid var(--openms-blue); - background: transparent; - background-color: transparent; - color: var(--openms-blue) !important; -} - -.news-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - -.news-page-layout .news-page__years { - gap: 0.75rem; -} - -.news-page-layout .openms-lib-btn--primary:hover, -.news-page-layout .openms-lib-btn--primary:focus-visible, -.news-page-layout .openms-lib-btn--primary:active, -.news-page-layout .news-page__year-btn.is-active:hover, -.news-page-layout .news-page__year-btn.is-active:focus-visible, -.news-page-layout .news-page__year-btn.is-active: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; -} - -.news-page-layout .openms-lib-btn--ghost:hover, -.news-page-layout .openms-lib-btn--ghost:focus-visible, -.news-page-layout .openms-lib-btn--ghost:active, -.news-page-layout .news-card__read-more:hover, -.news-page-layout .news-card__read-more:focus-visible, -.news-page-layout .news-card__read-more:active, -.news-page-layout .news-page__year-btn:not(.is-active):hover, -.news-page-layout .news-page__year-btn:not(.is-active):focus-visible, -.news-page-layout .news-page__year-btn:not(.is-active):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; +/* Date badge (single article header) */ +.news-card__date-block { + flex-shrink: 0; } -.news-page-layout .openms-lib-btn--primary:focus-visible, -.news-page-layout .news-page__year-btn.is-active: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); +.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-page-layout .openms-lib-btn--ghost:focus-visible, -.news-page-layout .news-card__read-more:focus-visible, -.news-page-layout .news-page__year-btn:not(.is-active):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); +.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); } -@media (max-width: 720px) { - .news-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .news-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .news-page-hero--article .openms-lib-hero__title { - max-width: none; - } - - .news-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .news-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .news-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } +.news-card__date-day { + font-family: var(--openms-font-heading); + font-size: 1.5rem; + font-weight: 700; + color: var(--openms-navy); } -@media (max-width: 768px) { - .news-page__toolbar { - flex-direction: column; - align-items: stretch; - } - - .news-page__years { - flex-wrap: nowrap; - overflow-x: auto; - padding-bottom: 0.25rem; - -webkit-overflow-scrolling: touch; - scrollbar-width: thin; - } - - .news-page__count { - margin-left: 0; - text-align: left; - } - - .news-card__inner { - grid-template-columns: 1fr; - gap: 0.75rem; - } - - .news-card__date { - flex-direction: row; - gap: 0.5rem; - width: fit-content; - min-width: 0; - padding: 0.375rem 0.75rem; - } - - .news-card__date-day { - font-size: 1.125rem; - } +.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); } -@media (prefers-reduced-motion: reduce) { - .news-card:hover .news-card__inner, - .news-card:focus-within .news-card__inner { - transform: none; - } +.news-card__authors { + font-size: var(--openms-text-min); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.6); } /* --- Single news article --- */ .news-article { - padding: clamp(1.25rem, 3vw, 1.75rem); - border: 1px solid rgba(var(--openms-navy-rgb), 0.12); - border-radius: 0.75rem; - background: var(--openms-white); - box-shadow: 0 0.25rem 1rem rgba(var(--openms-dark-rgb), 0.05); + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; } .news-article__header { @@ -637,11 +484,7 @@ } .news-page-layout .openms-lib-btn:hover, - .news-page-layout .openms-lib-btn:focus-visible, - .news-page-layout .news-card__read-more:hover, - .news-page-layout .news-card__read-more:focus-visible, - .news-page-layout .news-page__year-btn:hover, - .news-page-layout .news-page__year-btn:focus-visible { + .news-page-layout .openms-lib-btn:focus-visible { transform: none; } } diff --git a/assets/css/openms-buttons.css b/assets/css/openms-buttons.css index 355913a..324f387 100644 --- a/assets/css/openms-buttons.css +++ b/assets/css/openms-buttons.css @@ -288,9 +288,9 @@ .navbar-menu .navbar-mobile-ctas .navbar-cta-item.about-cta-btn--donate { background: transparent !important; background-color: transparent !important; - border: 2px solid var(--openms-blue) !important; - border-color: var(--openms-blue) !important; - color: var(--openms-blue) !important; + border: 2px solid rgba(var(--openms-white-rgb), 0.34) !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + color: var(--openms-white) !important; } .navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, @@ -302,10 +302,10 @@ .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, .navbar-menu .navbar-mobile-ctas .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; + background: var(--openms-chrome-surface-hover) !important; + background-color: var(--openms-chrome-surface-hover) !important; + border-color: rgba(var(--openms-white-rgb), 0.5) !important; + color: var(--openms-white) !important; } @media (prefers-reduced-motion: reduce) { diff --git a/assets/css/openms-lib.css b/assets/css/openms-lib.css index 58e9468..a7d72bd 100644 --- a/assets/css/openms-lib.css +++ b/assets/css/openms-lib.css @@ -10,7 +10,7 @@ width: 100%; max-width: none; margin: 0; - padding: 0 0 clamp(2.5rem, 5vh, 4rem); + padding: 0 0 clamp(4.5rem, 9vh, 6.5rem); } .openms-lib-layout a:focus-visible { @@ -22,7 +22,8 @@ .openms-lib-page { --olib-max: 72rem; --olib-pad-x: clamp(1.25rem, 4vw, 2rem); - --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --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); @@ -34,10 +35,12 @@ --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(1.5rem, 3vw, 2.5rem); + --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 { @@ -45,21 +48,135 @@ 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__body, -.openms-lib-page__outro { +.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 { + display: grid; + gap: clamp(2.5rem, 5vw, 3.5rem); + width: min(100%, var(--olib-max)); + max-width: var(--olib-max); + margin-inline: auto; + padding-inline: var(--olib-pad-x); + padding-block: clamp(5.5rem, 11vh, 7.5rem) clamp(4.5rem, 9vh, 6rem); } .openms-lib-page__anchor { scroll-margin-top: calc(var(--openms-header-height, 4.25rem) + 1rem); } +.openms-lib-page__nav { + position: sticky; + top: var(--openms-header-height, 4.25rem); + z-index: 15; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.45rem; + overflow-x: auto; + overscroll-behavior-x: contain; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + width: 100%; + max-width: none; + margin: 0; + padding: 0.65rem max(var(--olib-pad-x), calc((100% - var(--olib-max)) / 2 + var(--olib-pad-x))) 0.85rem; + background: color-mix(in srgb, var(--openms-white) 96%, transparent); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--olib-line); + box-shadow: 0 0.35rem 1rem rgba(var(--openms-navy-rgb), 0.04); +} + +.openms-lib-page__nav::-webkit-scrollbar { + display: none; +} + +.openms-lib-page__nav-link { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + min-height: 2.1rem; + padding: 0.35rem 0.85rem; + border-radius: 999px; + font-size: var(--openms-text-min); + font-weight: 600; + color: var(--openms-blue); + text-decoration: none; + background: rgba(var(--openms-blue-rgb), 0.07); + border: 1px solid rgba(var(--openms-blue-rgb), 0.12); + white-space: nowrap; + transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; +} + +.openms-lib-page__nav-link:hover, +.openms-lib-page__nav-link:focus-visible { + color: var(--openms-navy); + background: rgba(var(--openms-blue-rgb), 0.12); + border-color: rgba(var(--openms-blue-rgb), 0.22); +} + .openms-lib-page__body, .openms-lib-page__outro { border: none; @@ -186,7 +303,7 @@ justify-items: center; max-width: 46rem; width: 100%; - margin: 0 auto clamp(2rem, 4vw, 3rem); + margin: 0 auto clamp(3rem, 6vw, 4.5rem); padding: 0; border: none; text-align: center; @@ -199,16 +316,16 @@ align-items: center; gap: 0.45rem; margin: 0; - padding: 0; + padding: 0.35rem 0.75rem; font-family: var(--openms-font-body); font-size: var(--openms-text-min); font-weight: 600; - letter-spacing: 0.04em; + letter-spacing: 0.02em; text-transform: none; - color: var(--olib-text-muted); - background: none; - border: none; - border-radius: 0; + 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, @@ -318,7 +435,7 @@ } /* ── 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--tiles):not(.openms-lib-list--resource-grid) +.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 { @@ -332,9 +449,9 @@ 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--tiles):not(.openms-lib-list--resource-grid) +.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--tiles):not(.openms-lib-list--resource-grid) +.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, @@ -649,8 +766,8 @@ position: relative; box-sizing: border-box; width: 100%; - margin: 0 0 var(--olib-section-y); - padding: clamp(2rem, 4.5vw, 3.25rem) var(--olib-pad-x) clamp(2.5rem, 5vw, 3.5rem); + 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, @@ -686,13 +803,14 @@ display: none; } -.openms-lib-page__intro .openms-lib-block--overview { - width: min(100%, var(--olib-max)); - max-width: var(--olib-max); - margin-inline: auto; - padding-inline: var(--olib-pad-x); +.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; } @@ -726,7 +844,7 @@ .openms-lib-hero__title { margin: 0 auto; - max-width: 22ch; + max-width: 30ch; font-family: var(--openms-font-heading); font-size: clamp(2rem, 4.8vw, 3.2rem); font-weight: var(--openms-heading-xl-weight); @@ -786,6 +904,188 @@ margin-top: 1.5rem; } +/* Page heroes — split layout (matches homepage hero structure) */ +.openms-lib-hero[class*="-page-hero"], +.openms-lib-hero.community-calendar-hero { + display: flex; + align-items: center; + min-height: clamp(18rem, 40vh, 26rem); + padding: clamp(3rem, 7vh, 5rem) var(--olib-pad-x) clamp(2.75rem, 6vh, 4rem); + overflow: hidden; +} + +.openms-lib-hero[class*="-page-hero"]::before, +.openms-lib-hero.community-calendar-hero::before { + content: ""; + position: absolute; + z-index: 0; + top: 0; + right: 0; + width: min(55%, 36rem); + height: 100%; + background: linear-gradient( + 165deg, + rgba(var(--openms-blue-rgb), 0.06) 0%, + rgba(var(--openms-purple-rgb), 0.04) 45%, + transparent 100% + ); + pointer-events: none; +} + +.openms-lib-hero[class*="-page-hero"]::after, +.openms-lib-hero.community-calendar-hero::after { + display: none; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__panel, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__panel { + width: 100%; + max-width: 75rem; + margin-inline: auto; + text-align: left; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__content, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__content { + display: grid; + grid-template-columns: minmax(0, 1.08fr) minmax(12rem, 0.92fr); + gap: clamp(0.85rem, 2vh, 1.25rem) clamp(2rem, 4vw, 3.5rem); + align-items: center; + max-width: none; + margin: 0; +} + +.openms-lib-hero[class*="-page-hero"] + .openms-lib-hero__content:not(:has(.openms-lib-hero__actions, .openms-lib-hero__chips)), +.openms-lib-hero.community-calendar-hero + .openms-lib-hero__content:not(:has(.openms-lib-hero__actions, .openms-lib-hero__chips)) { + grid-template-columns: minmax(0, 1fr); + max-width: 38rem; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow { + grid-column: 1; + justify-self: start; + display: inline-block; + margin: 0 0 0.85rem; + padding: 0.25rem 0.62rem; + font-family: var(--openms-font-body); + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); + border: 1px solid rgba(var(--openms-blue-rgb), 0.2); + border-radius: 999px; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow::before, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow::before { + display: none; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__title { + grid-column: 1; + margin: 0 0 1rem; + text-align: left; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__accent { + background: linear-gradient( + 90deg, + var(--openms-blue) 0%, + var(--openms-purple) 55%, + var(--openms-pink) 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent--warm, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__accent--warm { + background: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--openms-pink); + -webkit-text-fill-color: var(--openms-pink); +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__lead { + grid-column: 1; + margin: 0; + text-align: left; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chips, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__chips { + grid-column: 2; + grid-row: 1 / -1; + align-self: center; + flex-direction: column; + align-items: stretch; + justify-content: center; + gap: 0.5rem; + width: 100%; + max-width: 14rem; + margin: 0; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chip, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__chip { + justify-content: center; + text-align: center; +} + +/* Page layout heroes — shared typography & responsive actions */ +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__title { + max-width: min(28ch, 100%); + font-size: clamp(2.25rem, 6vw, 3.75rem); +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__lead { + max-width: min(46ch, 100%); + font-size: clamp(0.95rem, 2.8vw, var(--openms-body-size-lg)); + line-height: 1.6; +} + +.openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow, +.openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow { + font-size: clamp(0.72rem, 2.2vw, var(--openms-text-min)); +} + +[class$="-page-layout"] .openms-lib-hero__actions, +.community-calendar-layout .openms-lib-hero__actions { + grid-column: 2; + grid-row: 1 / -1; + align-self: center; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: stretch; + gap: 0.75rem; + width: 100%; + max-width: 16rem; + margin: 0; +} + +[class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn, +.community-calendar-layout .openms-lib-hero__actions .openms-lib-btn { + flex: 0 0 auto; + width: 100%; + min-width: 0; + max-width: none; + font-size: clamp(0.75rem, 2.4vw, var(--openms-text-min)); +} + /* ── Buttons (hero only) ── */ .openms-lib-btn { display: inline-flex; @@ -1036,12 +1336,13 @@ align-items: center; justify-content: center; gap: 1rem; - margin-top: clamp(2rem, 4vw, 2.75rem); + margin-top: clamp(3rem, 6vw, 4rem); padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.6rem); - border-radius: calc(var(--olib-radius) * 1.1); + border-radius: var(--olib-radius); text-align: center; - background: var(--olib-bg-soft); + background: var(--openms-white); border: 1px solid var(--olib-line); + box-shadow: var(--olib-shadow); } .openms-lib-page__cta-text { @@ -1126,94 +1427,481 @@ align-self: center; } -/* 1. Overview */ +/* 1. Overview — accent editorial panels */ .openms-lib-block--overview { padding-bottom: 0; } -.openms-lib-list--split { +.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-feature-gap); + gap: var(--olib-card-gap); + align-items: stretch; border: none; background: transparent; + box-shadow: none; 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--overview::before { + display: none; } -.openms-lib-list--split .openms-lib-list__bullets { +.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; - margin-inline: auto; - max-width: 28ch; + transition: + border-color 0.2s var(--olib-ease), + background-color 0.2s var(--olib-ease), + transform 0.2s var(--olib-ease); } -/* 2. What is OpenMS? */ -.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles { - padding: var(--olib-section-y) 0; - background: transparent; +.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)); } -.keyfeatures-modern--openms-lib.keyfeatures-modern--lib-tiles::before { - display: none; +.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--tiles, -.keyfeatures-modern--lib-tiles .keyfeatures-modern__topics { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--olib-feature-gap); - border: none; - background: transparent; - overflow: visible; +.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--tiles > li + li, -.openms-lib-list--tiles > .keyfeatures-modern__topic + .keyfeatures-modern__topic { - border-top: none; +.openms-lib-list--overview .openms-lib-list__row:focus-within { + outline: 2px solid var(--openms-blue); + outline-offset: 3px; } -.openms-lib-list--tiles > li, -.openms-lib-list--tiles > .keyfeatures-modern__topic { +.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--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; +.openms-lib-list--overview .openms-lib-list__title { + font-size: clamp(1.1rem, 2.1vw, 1.25rem); + line-height: 1.3; } -.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); +.openms-lib-list--overview .openms-lib-list__text { + max-width: none; + font-size: var(--openms-body-size); + line-height: 1.62; } -/* 3. Capabilities */ -.openms-steps--openms-lib.openms-steps--lib-capabilities { - color: var(--openms-navy); +.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? */ +.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-feature-gap); + 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, @@ -1224,6 +1912,33 @@ .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, @@ -1231,83 +1946,145 @@ display: none; } -/* 4. For developers */ -.openms-steps--openms-lib.openms-steps--lib-developers { - overflow: visible; - color: var(--openms-navy); - background: var(--openms-white); - border-top-color: transparent; +.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-developers::before, -.openms-steps--openms-lib.openms-steps--lib-developers::after { - display: none; +.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-developers .openms-steps__inner { - position: static; - z-index: auto; +.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-developers .openms-step--list-row { - display: grid; - flex-direction: unset; - align-items: stretch; - min-height: 0; +.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-developers .openms-step__media { - order: unset; +.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-developers .openms-step__content { - order: unset; +.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-developers .openms-step:nth-child(even) .openms-step__media, -.openms-steps--openms-lib.openms-steps--lib-developers .openms-step:nth-child(even) .openms-step__content { - order: unset; +.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-developers .openms-step__title { - padding-right: 0; +.openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step__cta { + align-self: flex-start; + margin-top: auto; + padding-top: 0.35rem; } -.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .openms-step__media { - width: 3.35rem; - height: 3.35rem; - min-height: 0; - max-height: 3.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: 0.35rem; - border-radius: var(--olib-radius-sm); - background: var(--openms-navy); - overflow: hidden; + padding-inline: 0; + justify-items: center; } -.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 { +.openms-steps--openms-lib.openms-steps--lib-developers .openms-steps__header { + align-self: center; + justify-self: center; + justify-items: center; width: 100%; - height: 2.35rem; - min-height: 0; - max-height: 2.35rem; - border-radius: 0.25rem; - overflow: hidden; + max-width: 46rem; + margin-inline: auto; + text-align: center; } -.openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .terminal-window section.terminal { - font-size: 0.4rem; - line-height: 1.3; +.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-feature-gap); + 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, @@ -1318,6 +2095,7 @@ .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, @@ -1325,42 +2103,201 @@ display: none; } -/* 5. Get started — feature-style resource grid */ +.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(3, minmax(0, 1fr)); - gap: var(--olib-feature-gap); + 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 { - text-decoration: none; - color: inherit; - cursor: pointer; - transition: border-color 0.2s var(--olib-ease), background-color 0.2s var(--olib-ease), - box-shadow 0.2s var(--olib-ease), transform 0.2s var(--olib-ease); -} - -.openms-lib-list--resource-grid .openms-lib-list__row, -.openms-lib-list--resource-grid .openms-lib-resource-card { - 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; + 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, @@ -1370,10 +2307,11 @@ .openms-lib-list--resource-grid .openms-lib-list__row:hover, .openms-lib-list--resource-grid .openms-lib-list__row:focus-visible, -.openms-lib-resource-card:hover, -.openms-lib-resource-card:focus-visible { - background: transparent; - transform: none; +.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; } @@ -1381,57 +2319,120 @@ display: none; } -.openms-lib-list--resource-grid .openms-lib-list__media { - width: 3.35rem; - height: 3.35rem; - margin-inline: auto; - padding: 0; - border: none; - border-radius: var(--olib-radius-sm); - background: var(--openms-navy); -} - -.openms-lib-list--resource-grid .openms-lib-list__mark { - font-size: 1.15rem; - color: var(--openms-white); -} - .openms-lib-list--resource-grid .openms-lib-list__body { - align-items: center; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.35rem; + min-width: 0; + width: 100%; } -.openms-lib-resource-card__tag { - display: none; +.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 { - font-size: 1rem; + 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: 26ch; - margin-inline: auto; - font-size: var(--openms-body-size); + max-width: none; + margin: 0; + font-size: var(--openms-text-min); line-height: 1.55; color: var(--olib-text-muted); - text-align: center; + text-align: left; } .openms-lib-resource-card .openms-lib-list__link { - align-self: center; - margin-top: 0.25rem; + 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-block--resources .openms-lib-block__note { - max-width: 40rem; - margin-inline: auto; + 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: none; - border-radius: var(--olib-radius-sm); + 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; } /* ── Responsive ── */ @@ -1447,43 +2448,117 @@ width: auto; } -.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 { - min-height: 0; - max-height: 2rem; -} +@media (max-width: 1024px) { + .openms-lib-list--capabilities, + .openms-steps--lib-capabilities .openms-steps__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } -.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__media { - order: unset; - width: 3.35rem; - min-height: 0; - border: none; + .openms-lib-list--split { + gap: clamp(1.25rem, 3vw, 2rem); + } } -.openms-steps--openms-lib.openms-steps--lib-developers .openms-step__content { - order: unset; -} +@media (max-width: 900px) { + .openms-lib-list--overview { + grid-template-columns: 1fr; + gap: var(--olib-card-gap); + } -.openms-steps--openms-lib.openms-steps--lib-developers .openms-step:nth-child(even) .openms-step__media, -.openms-steps--openms-lib.openms-steps--lib-developers .openms-step:nth-child(even) .openms-step__content { - order: unset; + .openms-lib-core-tools { + grid-template-columns: 1fr; + gap: var(--olib-card-gap); + } + + .openms-lib-core-tools__card:hover, + .openms-lib-core-tools__card:focus-visible { + transform: none; + } + + .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:hover, + .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:focus-within { + transform: none; + } + + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:hover, + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:focus-within { + transform: none; + } + + .openms-lib-list--resource-grid .openms-lib-resource-card:hover, + .openms-lib-list--resource-grid .openms-lib-resource-card:focus-visible { + transform: none; + } + + .openms-lib-list--overview .openms-lib-list__row:hover { + transform: none; + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__content, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__content { + grid-template-columns: 1fr; + max-width: none; + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__actions, + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chips, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__chips, + [class$="-page-layout"] .openms-lib-hero__actions, + .community-calendar-layout .openms-lib-hero__actions { + grid-column: 1; + grid-row: auto; + max-width: none; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 1.25rem; + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__chips, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__chips { + flex-direction: row; + } } -@media (max-width: 1024px) { - .openms-lib-list--capabilities, - .openms-steps--lib-capabilities .openms-steps__grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); +@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-list--resource-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__lead { + font-size: clamp(0.92rem, 3.2vw, 1.05rem); + } + + [class$="-page-layout"] .openms-lib-btn, + .community-calendar-layout .openms-lib-btn { + white-space: normal; + text-wrap: balance; + } + + [class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn, + .community-calendar-layout .openms-lib-hero__actions .openms-lib-btn { + flex: 1 1 calc(50% - 0.375rem); } } @media (max-width: 720px) { .openms-lib-page { + --olib-section-y: clamp(4rem, 8vh, 5.5rem); + --olib-block-gap: clamp(2.75rem, 5.5vh, 4rem); + --olib-feature-gap: clamp(1.5rem, 4vw, 2.25rem); + --olib-card-gap: clamp(1rem, 3vw, 1.35rem); + --olib-pad-x: clamp(1rem, 4vw, 1.25rem); + --olib-thumb: clamp(3.25rem, 14vw, 4.5rem); + --olib-img-max: clamp(2.5rem, 10vw, 3.25rem); + } + + [class$="-page-layout"], + .community-calendar-layout { --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-feature-gap: clamp(1.25rem, 4vw, 1.75rem); --olib-pad-x: clamp(1rem, 4vw, 1.25rem); } @@ -1492,6 +2567,39 @@ font-size: clamp(1.75rem, 7vw, 2.25rem); } + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__title, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__title { + max-width: none; + font-size: clamp(1.85rem, 8.5vw, 2.5rem); + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__lead, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__lead { + font-size: clamp(0.9rem, 3.8vw, 1rem); + line-height: 1.55; + } + + .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow, + .openms-lib-hero.community-calendar-hero .openms-lib-hero__eyebrow { + font-size: clamp(0.68rem, 2.8vw, 0.8rem); + } + + [class$="-page-layout"] .openms-lib-hero__actions, + .community-calendar-layout .openms-lib-hero__actions { + flex-direction: column; + align-items: stretch; + gap: 0.55rem; + max-width: none; + } + + [class$="-page-layout"] .openms-lib-hero__actions .openms-lib-btn, + .community-calendar-layout .openms-lib-hero__actions .openms-lib-btn { + width: 100%; + flex: 1 1 auto; + min-width: 0; + justify-content: center; + } + .openms-lib-block__title, .keyfeatures-modern--overview .keyfeatures-modern__title, .openms-steps--lib-list .openms-steps__title { @@ -1509,6 +2617,31 @@ grid-template-columns: 1fr; } + .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%; @@ -1529,15 +2662,100 @@ flex-direction: column; align-items: stretch; gap: 0.55rem; + max-width: 22rem; + margin-inline: auto; } - .openms-lib-hero__actions .openms-lib-btn--primary { + .openms-lib-hero__actions .openms-lib-btn { width: 100%; justify-content: center; } .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; + align-self: stretch; + padding-inline: 1rem; + text-align: center; + } + + .openms-lib-page__nav { + flex-wrap: nowrap; + justify-content: flex-start; + margin-top: 0; + padding-block: 0.55rem 0.7rem; + } + + .openms-lib-page__nav-link { + min-height: 2.25rem; + padding-inline: 0.75rem; + } + + .openms-lib-page__intro-panel #core-tools { + margin-top: clamp(1.5rem, 3.5vh, 2.5rem); + margin-bottom: clamp(2rem, 4vh, 3rem); + } + + .openms-lib-block--core-tools { + padding-block: clamp(1rem, 2.5vw, 1.5rem); + } + + .openms-lib-block--core-tools .openms-lib-block__head { + justify-items: center; + max-width: none; + margin-inline: auto; + margin-bottom: clamp(1.5rem, 3.5vw, 2rem); + text-align: center; + } + + .openms-lib-block--core-tools .openms-lib-block__lead { + text-align: center; + } + + .openms-lib-core-tools__card { + min-height: clamp(10.5rem, 28vw, 13rem); + padding-block: clamp(1.15rem, 3.5vw, 1.65rem); + } + + .openms-lib-core-tools__card-head { + gap: 0.4rem; + } + + .openms-lib-list--resource-grid .openms-lib-resource-card, + .openms-lib-list--resource-grid .openms-lib-list__row { + padding: 0.95rem 1rem; + } + + .openms-lib-block--resources .openms-lib-page__cta-actions { + flex-direction: column; + align-items: stretch; + width: 100%; + } + + .openms-lib-block--resources .openms-lib-page__cta-actions .openms-lib-btn { + width: 100%; + justify-content: center; + } + + .openms-lib-list--capabilities .openms-lib-list__media, + .openms-steps--lib-capabilities .openms-step__media { + min-height: clamp(7.5rem, 24vw, 9.5rem); + padding: clamp(1rem, 3.5vw, 1.35rem); + } + + .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--showcase .openms-step__img, + .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--showcase .openms-step__img.img-fit { + max-height: clamp(3.75rem, 14vw, 5rem); + max-width: min(90%, 12rem); + } + + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--developer .openms-step__img, + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--developer .openms-step__img.img-fit { + max-height: clamp(3.5rem, 12vw, 4.75rem); + max-width: min(90%, 10rem); + } + + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .openms-step__terminal, + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--terminal .terminal-window { + min-height: clamp(5.5rem, 20vw, 7rem); } .openms-lib-page__cta { @@ -1557,9 +2775,40 @@ } } +@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, @@ -1582,10 +2831,38 @@ .openms-steps--lib-list .openms-step__cta-arrow, .openms-lib-list--split .openms-lib-list__row, .openms-lib-list--tiles .openms-lib-list__row, + .openms-lib-list--overview .openms-lib-list__row, + .openms-lib-list--capabilities .openms-lib-list__row, + .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row, + .openms-lib-list--developers .openms-lib-list__row, + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row, .openms-lib-resource-card { transition: none; } + .openms-lib-core-tools__card { + transition: none; + } + + .openms-lib-core-tools__card:hover, + .openms-lib-core-tools__card:focus-visible { + transform: none; + } + + .openms-lib-list--overview .openms-lib-list__row:hover { + transform: none; + } + + .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:hover, + .openms-steps--openms-lib.openms-steps--lib-capabilities .openms-step--list-row:focus-within { + transform: none; + } + + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:hover, + .openms-steps--openms-lib.openms-steps--lib-developers .openms-step--list-row:focus-within { + transform: none; + } + .openms-lib-list--tiles .openms-lib-list__row:hover, .openms-lib-resource-card:hover { transform: none; diff --git a/assets/css/publications.css b/assets/css/publications.css index e013468..72ab5e5 100644 --- a/assets/css/publications.css +++ b/assets/css/publications.css @@ -1,141 +1,256 @@ -/* Publications page */ +/* Publications page — unified layout and bibliography UX */ .publications-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)); - --publications-max: 64rem; + --pub-max: 68rem; + --pub-gap: clamp(2rem, 4vw, 3rem); + --pub-line: rgba(var(--openms-navy-rgb), 0.1); + --pub-card-radius: 0.85rem; + --pub-card-border: rgba(var(--openms-navy-rgb), 0.12); + --pub-card-pad: clamp(1rem, 2vw, 1.25rem); display: block; width: 100%; - max-width: none; margin: 0; padding: 0 0 clamp(2.5rem, 5vh, 4rem); } .publications-page-layout__content { - width: min(100%, var(--publications-max)); - max-width: var(--publications-max); + width: min(100%, var(--pub-max)); + max-width: var(--pub-max); margin-inline: auto; - padding-inline: var(--olib-pad-x); + padding-inline: clamp(1.25rem, 4vw, 2rem); } -.publications-page { - margin-top: 0; +.publications-page-hero { + margin-bottom: clamp(2rem, 4vh, 3rem); } -.publications-page-hero { - margin-bottom: var(--olib-section-y); +.publications-body { + display: grid; + gap: var(--pub-gap); } -.publications-page-hero .openms-lib-hero__title { - max-width: 24ch; +/* Shared section label */ +.publications-section-label { + margin: 0 0 0.85rem; + font-family: var(--openms-font-body); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.55); } -.publications-body { +/* —— Key publications —— */ +.publications-featured { + margin: 0; + padding: 0; +} + +.publications-featured__list { + list-style: none; + margin: 0; + padding: 0; display: grid; - gap: clamp(1.5rem, 3vw, 2.5rem); + gap: 0.85rem; } -.publications-intro p { - max-width: 65ch; +.publications-cite-card { + display: grid; + gap: 0.5rem; + margin: 0; + padding: var(--pub-card-pad); + border: 1px solid var(--pub-card-border); + border-radius: var(--pub-card-radius); + background: var(--openms-white); + transition: border-color 0.2s ease, box-shadow 0.2s ease; } -.publications-featured { - padding: clamp(1.25rem, 2.5vw, 1.75rem); - border-radius: 0.85rem; - border: 1px solid rgba(var(--openms-blue-rgb), 0.22); - background: linear-gradient( - 165deg, - rgba(var(--openms-blue-rgb), 0.08) 0%, - rgba(var(--openms-white-rgb), 1) 55% - ); - box-shadow: 0 0.35rem 1.25rem rgba(var(--openms-navy-rgb), 0.06); -} - -.publications-featured h2 { - margin: 0 0 0.5rem; +.publications-cite-card:hover { + border-color: rgba(var(--openms-blue-rgb), 0.28); + box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); +} + +.publications-cite-card--primary { + border-left: 4px solid var(--openms-navy); +} + +.publications-cite-card--secondary { + border-left: 4px solid var(--openms-blue); +} + +.publications-cite-card__top { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.4rem 0.6rem; +} + +.publications-cite-card__badge { + display: inline-flex; + align-items: center; + padding: 0.18rem 0.5rem; + font-size: 0.65rem; + font-weight: 800; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--openms-navy); + background: rgba(var(--openms-navy-rgb), 0.08); + border-radius: 999px; +} + +.publications-cite-card--secondary .publications-cite-card__badge { + color: var(--openms-blue); + background: rgba(var(--openms-blue-rgb), 0.1); +} + +.publications-cite-card__topic { + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: rgba(var(--openms-navy-rgb), 0.5); +} + +.publications-cite-card__title { + margin: 0; font-family: var(--openms-font-heading); - font-size: var(--openms-secondary-heading-size); + font-size: clamp(1.05rem, 1.9vw, 1.25rem); font-weight: 800; + line-height: 1.35; + letter-spacing: -0.02em; color: var(--openms-navy); } -.publications-featured__lead { - margin: 0 0 1.25rem; - max-width: 65ch; +.publications-cite-card--primary .publications-cite-card__title { + font-size: clamp(1.1rem, 2vw, 1.35rem); +} + +.publications-cite-card__title a { + color: inherit; + text-decoration: none; + transition: color 0.15s ease; +} + +.publications-cite-card__title a:hover, +.publications-cite-card__title a:focus-visible { + color: var(--openms-blue); + outline: none; +} + +.publications-cite-card__meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem 0.6rem; + margin: 0; font-size: var(--openms-body-size); - line-height: 1.55; - color: rgba(var(--openms-navy-rgb), 0.78); + font-weight: 600; + color: rgba(var(--openms-navy-rgb), 0.75); } -.publications-featured__list { - gap: 1rem; +.publications-cite-card__journal { + color: var(--openms-blue); } -.publication-entry--featured { - padding: clamp(1rem, 2vw, 1.25rem); - border-radius: 0.65rem; - border: 1px solid rgba(var(--openms-blue-rgb), 0.18); - background: var(--openms-white); - border-bottom: 1px solid rgba(var(--openms-blue-rgb), 0.18); +.publications-cite-card__year::before { + content: "·"; + margin-right: 0.6rem; + color: rgba(var(--openms-navy-rgb), 0.35); + font-weight: 400; } -.publication-entry--featured:last-child { - border-bottom: 1px solid rgba(var(--openms-blue-rgb), 0.18); +.publications-cite-card__authors { + margin: 0; + font-size: var(--openms-text-min); + line-height: 1.55; + color: rgba(var(--openms-navy-rgb), 0.62); } -.publication-entry--featured .publication-title-link { +.publications-cite-card__action { + justify-self: start; + margin-top: 0.15rem; + font-size: 0.8rem; + font-weight: 700; color: var(--openms-blue); - text-decoration: underline; - text-underline-offset: 0.15em; + text-decoration: none; + transition: color 0.15s ease; } -.publication-entry--featured .publication-title-link:hover, -.publication-entry--featured .publication-title-link:focus-visible { +.publications-cite-card__action:hover, +.publications-cite-card__action:focus-visible { color: var(--openms-navy); + text-decoration: underline; + outline: none; } -.publications-intro + .publications-toolbar { - margin-top: 0.25rem; - margin-bottom: 0.5rem; +@media (min-width: 900px) { + .publications-featured__list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: stretch; + } +} + +/* —— Bibliography —— */ +.publications-bibliography { + display: grid; + gap: 1rem; + margin: 0; + padding-top: 0.25rem; } .publications-toolbar { display: flex; flex-wrap: wrap; - align-items: center; - gap: 0.75rem 1rem; - padding: 0 0 0.75rem; + align-items: flex-end; + justify-content: space-between; + gap: 0.75rem 1.25rem; + padding: 0.15rem 0 0.35rem; +} + +.publications-toolbar__intro { + display: grid; + gap: 0.2rem; + min-width: min(100%, 14rem); +} + +.publications-toolbar__title { + margin: 0; + font-family: var(--openms-font-heading); + font-size: clamp(1.1rem, 2vw, 1.3rem); + font-weight: 800; + letter-spacing: -0.02em; + color: var(--openms-navy); +} + +.publications-toolbar__filter { + display: flex; + flex-direction: column; + gap: 0.3rem; + min-width: min(100%, 9rem); } .publications-toolbar__select { - flex: 1 1 auto; - min-width: min(100%, 12rem); - max-width: 14rem; min-height: 2.5rem; - padding: 0.4rem 2.25rem 0.4rem 0.875rem; + min-width: 7.5rem; + padding: 0.4rem 2rem 0.4rem 0.75rem; font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); + font-size: var(--openms-body-size); font-weight: 600; - line-height: 1.2; color: var(--openms-navy); background-color: var(--openms-white); - 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; - background-size: 12px 8px; - border: 2px solid rgba(var(--openms-navy-rgb), 0.18); + 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.45); + border-color: rgba(var(--openms-blue-rgb), 0.35); } .publications-toolbar__select:focus { @@ -144,36 +259,29 @@ .publications-toolbar__select:focus-visible { border-color: var(--openms-blue); - box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.2); + box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.18); } -.publications-toolbar__count { - margin: 0; - flex: 0 0 100%; - font-size: var(--openms-text-min); - font-weight: 500; - color: rgba(var(--openms-navy-rgb), 0.7); +.publications-bibliography__entries { + display: grid; + gap: 0.85rem; + border: none; + border-radius: 0; + background: transparent; + overflow: visible; } -@media (min-width: 768px) { - .publications-toolbar__count { - flex: 0 0 auto; - margin-left: auto; - } +/* Year blocks */ +.publications-year { + margin: 0; + padding: 0; } -.publications-year h2 { - font-family: var(--openms-font-heading); - font-size: var(--openms-secondary-heading-size); - font-weight: 800; - color: var(--openms-navy); - margin: 0 0 1rem; - padding-bottom: 0.5rem; - border-bottom: 2px solid rgba(var(--openms-orange-rgb), 0.45); +.publications-page:not(.publications-year-filter--ready) .publications-year { + display: none; } -.publications-year[hidden], -.publications-year[data-publications-archived] { +.publications-year[hidden] { display: none; } @@ -182,96 +290,104 @@ margin: 0; padding: 0; display: grid; - gap: 1.25rem; + gap: 0.85rem; } -.publication-entry { +.publications-year .publication-entry { + display: grid; + gap: 0.45rem; margin: 0; - padding: 0 0 1.25rem; - border: none; - border-radius: 0; - background: transparent; - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); + 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; } -.publication-entry:last-child { - padding-bottom: 0; - border-bottom: none; +.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-entry p + p { - margin-top: 0.4rem; -} - .publication-title { font-family: var(--openms-font-heading); font-size: var(--openms-body-size-lg); font-weight: 700; - line-height: 1.35; + line-height: 1.4; color: var(--openms-navy); + text-wrap: pretty; } .publication-title-link { - color: var(--openms-navy); + color: inherit; text-decoration: none; - transition: color 0.2s ease; + transition: color 0.15s ease; } .publication-title-link:hover, .publication-title-link:focus-visible { color: var(--openms-blue); text-decoration: underline; - text-underline-offset: 0.15em; + 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.5; - color: rgba(var(--openms-navy-rgb), 0.72); + line-height: 1.45; + color: rgba(var(--openms-navy-rgb), 0.65); } .publication-journal { font-style: italic; + font-weight: 500; + color: rgba(var(--openms-navy-rgb), 0.78); } .publication-year { font-weight: 600; - color: var(--openms-navy); +} + +.publication-year::before { + content: "·"; + margin-right: 0.45rem; + color: rgba(var(--openms-navy-rgb), 0.35); +} + +.publications-page[data-active-year] .publication-year { + display: none; } .publication-authors { font-size: var(--openms-text-min); - line-height: 1.45; - color: rgba(var(--openms-navy-rgb), 0.78); + line-height: 1.5; + color: rgba(var(--openms-navy-rgb), 0.6); } -/* Navbar-style CTA motion (publications page) */ +/* Hero actions */ .publications-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); } .publications-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; @@ -280,79 +396,35 @@ .publications-page-layout .openms-lib-btn--ghost { border: 2px solid var(--openms-blue); background: transparent; - background-color: transparent; color: var(--openms-blue) !important; } -.publications-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .publications-page-layout .openms-lib-btn--primary:hover, .publications-page-layout .openms-lib-btn--primary:focus-visible, -.publications-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; -} - .publications-page-layout .openms-lib-btn--ghost:hover, -.publications-page-layout .openms-lib-btn--ghost:focus-visible, -.publications-page-layout .openms-lib-btn--ghost:active { - background: transparent; - background-color: transparent; - border-color: var(--openms-blue); - color: var(--openms-blue) !important; +.publications-page-layout .openms-lib-btn--ghost:focus-visible { transform: scale(var(--openms-btn-hover-scale)); box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); outline: none; text-decoration: none; } -.publications-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); -} - -.publications-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: 720px) { - .publications-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .publications-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); +@media (max-width: 640px) { + .publication-title { + font-size: var(--openms-body-size); } - .publications-page-hero .openms-lib-hero__actions { + .publications-toolbar { flex-direction: column; align-items: stretch; - gap: 0.55rem; } - .publications-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { + .publications-toolbar__filter { width: 100%; - justify-content: center; - } - - .publications-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; } -} -@media (max-width: 640px) { - .publication-title { - font-size: var(--openms-body-size); + .publications-toolbar__select { + width: 100%; } } diff --git a/assets/css/research-partnerships-page.css b/assets/css/research-partnerships-page.css index 03bf13c..f3bb8ed 100644 --- a/assets/css/research-partnerships-page.css +++ b/assets/css/research-partnerships-page.css @@ -24,10 +24,6 @@ margin-bottom: var(--olib-section-y); } -.research-partnerships-page-hero .openms-lib-hero__title { - max-width: 26ch; -} - .about-donate-actions.research-partnerships-page__actions { display: flex; flex-wrap: wrap; @@ -95,10 +91,6 @@ margin-top: 0; } -.research-partnerships-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .research-partnerships-page-layout .openms-lib-btn--primary:hover, .research-partnerships-page-layout .openms-lib-btn--primary:focus-visible, .research-partnerships-page-layout .openms-lib-btn--primary:active, @@ -160,31 +152,6 @@ } @media (max-width: 720px) { - .research-partnerships-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .research-partnerships-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .research-partnerships-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .research-partnerships-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .research-partnerships-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } - .about-donate-actions.research-partnerships-page__actions { flex-direction: column; width: 100%; diff --git a/assets/css/shortcuts_override.css b/assets/css/shortcuts_override.css index d617c64..f34b421 100644 --- a/assets/css/shortcuts_override.css +++ b/assets/css/shortcuts_override.css @@ -74,6 +74,12 @@ 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 { diff --git a/assets/css/site-header.css b/assets/css/site-header.css index d0bf262..69de203 100644 --- a/assets/css/site-header.css +++ b/assets/css/site-header.css @@ -1,11 +1,11 @@ -/* Sticky site header — news banner + navbar stay aligned at top */ +/* Sticky site header — white banner + blue navbar only */ .site-header { position: sticky; top: 0; z-index: 200; width: 100%; - background: var(--openms-white); + background: transparent; overflow: visible; } @@ -25,7 +25,80 @@ body.navbar-menu-open { overflow: hidden; } -/* Scroll clone duplicates nav only — hide; sticky header handles scroll */ #navbar-clone.navbar.is-fresh { display: none !important; } + +@media (min-width: 1280px) { + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown { + background: var(--openms-navbar-dropdown-bg); + border-color: var(--openms-navbar-dropdown-border); + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown a.navbar-item, + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown .navbar-item.is-nested, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown a.navbar-item, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown .navbar-item.is-nested { + color: var(--openms-navbar-dropdown-text) !important; + } + + .navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown-heading, + #navbar-clone.navbar.is-fresh .navbar-links .navbar-item.has-dropdown .navbar-dropdown-heading { + color: var(--openms-navbar-dropdown-heading) !important; + } +} + +@media (max-width: 1279px) { + .site-header #nav.navbar.is-fresh .navbar-menu.is-static, + #navbar-clone.navbar.is-fresh .navbar-menu.is-fixed { + background: var(--openms-chrome-bg); + border-top: 1px solid var(--openms-chrome-border); + } + + .site-header #nav.navbar.is-fresh .navbar-menu .navbar-dropdown-heading { + color: var(--openms-navbar-dropdown-heading) !important; + border-top-color: var(--openms-navbar-dropdown-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-navbar-dropdown-text) !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 { + color: var(--openms-white) !important; + background: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !important; +} + +.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, +.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible, +#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:hover, +#navbar-clone.navbar.is-fresh a.navbar-item.navbar-cta-item.about-cta-btn--donate:focus-visible { + color: var(--openms-white) !important; + background: var(--openms-chrome-surface-hover) !important; + border-color: rgba(var(--openms-white-rgb), 0.5) !important; +} + +.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 (max-width: 1279px) { + .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 { + color: var(--openms-white) !important; + background: transparent !important; + border-color: rgba(var(--openms-white-rgb), 0.34) !important; + } +} diff --git a/assets/css/sponsor-us-page.css b/assets/css/sponsor-us-page.css index 367092e..02a5688 100644 --- a/assets/css/sponsor-us-page.css +++ b/assets/css/sponsor-us-page.css @@ -24,10 +24,6 @@ margin-bottom: var(--olib-section-y); } -.sponsor-us-page-hero .openms-lib-hero__title { - max-width: 26ch; -} - .about-donate-actions.sponsor-us-page__actions { display: flex; flex-wrap: wrap; @@ -95,10 +91,6 @@ margin-top: 0; } -.sponsor-us-page-layout .openms-lib-hero__actions { - gap: 0.75rem; -} - .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, @@ -160,31 +152,6 @@ } @media (max-width: 720px) { - .sponsor-us-page-layout { - --olib-section-y: clamp(2.75rem, 6vh, 3.5rem); - --olib-pad-x: clamp(1rem, 4vw, 1.25rem); - } - - .sponsor-us-page-hero .openms-lib-hero__title { - max-width: none; - font-size: clamp(1.75rem, 7vw, 2.25rem); - } - - .sponsor-us-page-hero .openms-lib-hero__actions { - flex-direction: column; - align-items: stretch; - gap: 0.55rem; - } - - .sponsor-us-page-hero .openms-lib-hero__actions .openms-lib-btn--primary { - width: 100%; - justify-content: center; - } - - .sponsor-us-page-hero .openms-lib-hero__actions .openms-lib-btn--ghost { - align-self: center; - } - .about-donate-actions.sponsor-us-page__actions { flex-direction: column; width: 100%; diff --git a/assets/css/styles_override.css b/assets/css/styles_override.css index 75526a1..49214a6 100644 --- a/assets/css/styles_override.css +++ b/assets/css/styles_override.css @@ -11,20 +11,29 @@ line-height: inherit; } -.navbar.is-fresh .navbar-item:not(.navbar-cta-item), +.navbar.is-fresh .navbar-links > a.navbar-item.is-secondary, +.navbar.is-fresh .navbar-links > .navbar-item.has-dropdown > .navbar-link, +.navbar.is-fresh .navbar-menu .navbar-links > a.navbar-item.is-secondary, +.navbar.is-fresh .navbar-menu .navbar-links > .navbar-item.has-dropdown > .navbar-link, +.navbar.is-fresh .navbar-menu > .navbar-end > .navbar-links > a.navbar-item.is-secondary, +#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, +#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: var(--openms-navbar-font-size); + color: var(--openms-navbar-link-color) !important; +} + .navbar.is-fresh .navbar-link, -.navbar.is-fresh a.navbar-item.is-secondary, -.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), +#navbar-clone.navbar.is-fresh .navbar-link { + font-size: var(--openms-navbar-font-size); +} + .navbar.is-fresh .navbar-dropdown .navbar-item, .navbar.is-fresh .navbar-dropdown-heading, -#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, -#navbar-clone.navbar.is-fresh .navbar-menu .navbar-item:not(.navbar-cta-item), #navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item, #navbar-clone.navbar.is-fresh .navbar-dropdown-heading { font-size: var(--openms-navbar-font-size); - color: var(--openms-dark) !important; } .navbar.is-fresh .navbar-item:focus-visible, @@ -37,30 +46,15 @@ outline-offset: 2px; } -.navbar.is-fresh .navbar-item:not(.navbar-cta-item):hover, -.navbar.is-fresh .navbar-link:hover, -.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, -.navbar.is-fresh .navbar-brand .navbar-brand-link:hover, -#navbar-clone.navbar.is-fresh .navbar-item:not(.navbar-cta-item):hover, -#navbar-clone.navbar.is-fresh .navbar-link:hover, -#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link, -#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover { - color: var(--openms-blue) !important; -} - .navbar.is-fresh a.navbar-item.is-secondary, -#navbar-clone.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; } -.navbar.is-fresh a.navbar-item.is-secondary:hover, -.navbar.is-fresh a.navbar-item.is-secondary:focus-visible, -#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:hover, -#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:focus-visible { - color: var(--openms-blue) !important; - background-color: transparent !important; -} - .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link { display: inline-flex; @@ -70,7 +64,7 @@ .navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-link::after { - border-color: var(--openms-dark) !important; + border-color: var(--openms-navbar-link-color) !important; } @media (min-width: 1280px) { @@ -83,15 +77,12 @@ } } -.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after, -#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link::after { - border-color: var(--openms-blue) !important; -} - .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { - border-top-color: var(--openms-blue); - box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-dark-rgb), 0.08); + background: var(--openms-navbar-dropdown-bg); + border: 1px solid var(--openms-navbar-dropdown-border); + border-top: 2px solid var(--openms-blue); + box-shadow: 0 0.5rem 1.5rem rgba(var(--openms-dark-rgb), 0.1); } /* Mobile menu — stack submenus below parent, not beside */ @@ -120,7 +111,8 @@ min-width: max(100%, 13.5rem); width: max-content; max-width: min(22rem, 92vw); - padding-top: 0.35rem; + margin-top: 0; + padding-top: 0.45rem; padding-bottom: 0.35rem; } @@ -138,38 +130,102 @@ } } -.navbar.is-fresh .navbar-dropdown .navbar-item, -#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item { - color: var(--openms-dark) !important; +.navbar.is-fresh .navbar-dropdown a.navbar-item, +.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested { + color: var(--openms-navbar-dropdown-text) !important; } -.navbar.is-fresh .navbar-dropdown .navbar-item:hover, -#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item:hover { - color: var(--openms-blue) !important; - background-color: transparent !important; +.navbar.is-fresh .navbar-dropdown-heading, +#navbar-clone.navbar.is-fresh .navbar-dropdown-heading { + color: var(--openms-navbar-dropdown-heading) !important; } -/* Navbar links — color on hover only, no blue fill */ -.navbar.is-fresh .navbar-item:not(.navbar-cta-item):hover, -.navbar.is-fresh .navbar-link:hover, -.navbar.is-fresh a.navbar-item.is-secondary:hover, -.navbar.is-fresh a.navbar-item.is-secondary:focus-visible, +.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; +} + +/* Navbar links — subtle hover (soft tint, no strong pill); exclude dropdown panel items */ +.navbar.is-fresh .navbar-links > a.navbar-item.is-secondary:hover, .navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link, .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover, +#navbar-clone.navbar.is-fresh .navbar-links > a.navbar-item.is-secondary:hover, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-navbar-link-hover-color) !important; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item:hover, +.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested:hover, +#navbar-clone.navbar.is-fresh .navbar-dropdown a.navbar-item:hover, +#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item.is-nested:hover { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-navbar-dropdown-hover-text) !important; + font-weight: 600; +} + +.navbar.is-fresh .navbar-dropdown a.navbar-item:focus-visible, +.navbar.is-fresh .navbar-dropdown .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 .navbar-item.is-nested:focus-visible { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-navbar-dropdown-hover-text) !important; + font-weight: 600; +} + +.navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link::after, +.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover::after { + border-color: var(--openms-navbar-link-hover-color) !important; +} + +.navbar.is-fresh a.navbar-item.is-secondary:focus-visible, .navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:focus-visible, -.navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link, -.navbar.is-fresh .navbar-dropdown .navbar-item:focus-visible, -#navbar-clone.navbar.is-fresh .navbar-item:not(.navbar-cta-item):hover, -#navbar-clone.navbar.is-fresh .navbar-link:hover, -#navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:hover, #navbar-clone.navbar.is-fresh a.navbar-item.is-secondary:focus-visible, -#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown:hover > .navbar-link, -#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:hover, -#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:focus-visible, -#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link, -#navbar-clone.navbar.is-fresh .navbar-dropdown .navbar-item:focus-visible { +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown > .navbar-link:focus-visible { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-navbar-link-hover-color) !important; +} + +/* 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.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link { + background: transparent !important; + background-color: transparent !important; + color: var(--openms-navbar-link-hover-color) !important; +} + +.navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link::after, +#navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-active > .navbar-link::after { + border-color: var(--openms-navbar-link-hover-color) !important; } /* Navbar CTAs — sizing in openms-buttons.css */ @@ -183,7 +239,7 @@ .navbar.is-fresh .navbar-burger, #navbar-clone.navbar.is-fresh .navbar-burger { - color: var(--openms-dark); + color: var(--openms-navbar-link-color); width: 3.5rem; height: 3.5rem; margin-right: 1rem; @@ -198,7 +254,7 @@ .navbar.is-fresh .navbar-burger span, #navbar-clone.navbar.is-fresh .navbar-burger span { - background-color: var(--openms-dark); + background-color: var(--openms-navbar-link-color); height: 2px; width: 1.5rem; left: calc(50% - 0.75rem); @@ -246,6 +302,16 @@ .navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link, #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown.is-emphasized > .navbar-link { font-weight: 700; + color: var(--openms-navbar-link-color) !important; +} + +.navbar.is-fresh .navbar-search__toggle:hover, +.navbar.is-fresh .navbar-search.is-open .navbar-search__toggle { + color: var(--openms-navbar-link-hover-color); +} + +.navbar.is-fresh .navbar-search__toggle:focus-visible { + color: var(--openms-navbar-link-hover-color); } /* Navbar dropdown section headings & nested links */ @@ -256,8 +322,8 @@ font-weight: 700; letter-spacing: 0.04em; text-transform: none; - color: var(--openms-blue); - border-top: 1px solid rgba(var(--openms-blue-rgb), 0.12); + 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; @@ -284,13 +350,19 @@ display: flex; align-items: center; gap: 0.875rem; - padding-left: 0; + 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, 68px) !important; - height: var(--openms-navbar-logo-height, 68px) !important; + 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; @@ -303,20 +375,51 @@ font-family: var(--openms-font-heading); font-size: var(--openms-heading-lg-size); font-weight: var(--openms-heading-lg-weight); - color: var(--openms-dark) !important; + color: var(--openms-navbar-link-color) !important; line-height: 1; } -.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text, -#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover .navbar-logo-text { - color: var(--openms-blue) !important; +/* 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; } -/* Solid bar over the dark homepage hero (matches design mockup) */ -body:has(.hero-modern) .site-header #nav.navbar.is-fresh { - background: rgba(var(--openms-white-rgb), 0.95); - backdrop-filter: blur(10px); - border-bottom: 2px solid var(--openms-grey); +.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) { @@ -1131,169 +1234,142 @@ body:has(.hero-modern) .site-header #nav.navbar.is-fresh { } } -/* Publications page — extends governance layout */ -.publications-page { - margin-top: 0; -} - -.publications-intro p { - max-width: 65ch; -} - -.publications-intro + .publications-toolbar { - margin-top: 0.25rem; - margin-bottom: 0.5rem; -} - -.publications-toolbar { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.75rem 1rem; - padding: 0 0 0.75rem; -} - -.publications-toolbar__select { - flex: 1 1 auto; - min-width: min(100%, 12rem); - max-width: 14rem; - min-height: 2.5rem; - padding: 0.4rem 2.25rem 0.4rem 0.875rem; - font-family: var(--openms-font-body); - font-size: var(--openms-body-size-lg); - font-weight: 600; - line-height: 1.2; - color: var(--openms-navy); - background-color: var(--openms-white); - 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; - background-size: 12px 8px; - border: 2px solid rgba(var(--openms-navy-rgb), 0.18); - border-radius: 0.5rem; - cursor: pointer; - appearance: none; - transition: border-color 0.2s ease, box-shadow 0.2s ease; -} - -.publications-toolbar__select:hover { - border-color: rgba(var(--openms-blue-rgb), 0.45); -} - -.publications-toolbar__select:focus { - outline: none; +/* 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; } -.publications-toolbar__select:focus-visible { - border-color: var(--openms-blue); - box-shadow: 0 0 0 3px rgba(var(--openms-blue-rgb), 0.2); +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"]::before, +.community-calendar-layout .openms-lib-hero::before { + display: none; } -.publications-toolbar__count { - margin: 0; - flex: 0 0 100%; - font-size: var(--openms-text-min); - font-weight: 500; - color: rgba(var(--openms-navy-rgb), 0.7); +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"]::after, +.community-calendar-layout .openms-lib-hero::after { + display: block; } -@media (min-width: 768px) { - .publications-toolbar__count { - flex: 0 0 auto; - margin-left: auto; - } +[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; } -.publications-year h2 { - font-family: var(--openms-font-heading); - font-size: var(--openms-secondary-heading-size); - font-weight: 800; - color: var(--openms-navy); - margin: 0 0 1rem; - padding-bottom: 0.5rem; - border-bottom: 2px solid rgba(var(--openms-orange-rgb), 0.45); +[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; } -.publications-year[hidden], -.publications-year[data-publications-archived] { - display: none; +.news-page-layout .openms-lib-hero.news-page-hero--article .openms-lib-hero__content { + max-width: 52rem; } -.publication-list { - list-style: none; - margin: 0; +[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; - display: grid; - gap: 1.25rem; -} - -.publication-entry { - margin: 0; - padding: 0 0 1.25rem; + font-weight: 600; + letter-spacing: 0.02em; + text-transform: none; + color: var(--olib-text-muted); + background: transparent; border: none; border-radius: 0; - background: transparent; - border-bottom: 1px solid rgba(var(--openms-navy-rgb), 0.1); } -.publication-entry:last-child { - padding-bottom: 0; - border-bottom: none; -} - -.publication-entry p { - margin: 0; +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__eyebrow::before, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__eyebrow::before { + display: block; + content: ""; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background: var(--openms-blue); } -.publication-entry p + p { - margin-top: 0.4rem; +[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; } -.publication-title { - font-family: var(--openms-font-heading); - font-size: var(--openms-body-size-lg); - font-weight: 700; - line-height: 1.35; - color: var(--openms-navy); +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__accent { + background: none; + -webkit-background-clip: unset; + background-clip: unset; + color: var(--openms-blue); + -webkit-text-fill-color: unset; } -.publication-title-link { - color: var(--openms-navy); - text-decoration: none; - transition: color 0.2s ease; +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__accent--warm, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__accent--warm { + color: var(--openms-pink); + -webkit-text-fill-color: var(--openms-pink); } -.publication-title-link:hover, -.publication-title-link:focus-visible { - color: var(--openms-blue); - text-decoration: underline; - text-underline-offset: 0.15em; +[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; } -.publication-meta { - font-size: var(--openms-text-min); - line-height: 1.5; - color: rgba(var(--openms-navy-rgb), 0.72); +[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; } -.publication-journal { - font-style: italic; +[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; } -.publication-year { - font-weight: 600; - color: var(--openms-navy); +[class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions .openms-lib-btn, +.community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .openms-lib-btn { + flex: 1 1 auto; + width: auto; + min-width: min(100%, 10.5rem); + max-width: 100%; } -.publication-authors { - font-size: var(--openms-text-min); - line-height: 1.45; - color: rgba(var(--openms-navy-rgb), 0.78); +@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: 640px) { - .publication-title { - font-size: var(--openms-body-size); +@media (max-width: 720px) { + [class$="-page-layout"] .openms-lib-hero[class*="-page-hero"] .openms-lib-hero__actions .openms-lib-btn, + .community-calendar-layout .openms-lib-hero .openms-lib-hero__actions .openms-lib-btn { + width: 100%; + flex: 1 1 auto; + min-width: 0; + justify-content: center; } } diff --git a/assets/css/university-partners.css b/assets/css/university-partners.css index 6c75633..6194f77 100644 --- a/assets/css/university-partners.css +++ b/assets/css/university-partners.css @@ -159,6 +159,21 @@ display: block; } +.uni-partners__item-abbr { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0.35rem 0.65rem; + border-radius: 0.5rem; + font-size: 0.95rem; + font-weight: 700; + letter-spacing: 0.06em; + color: var(--openms-navy, #1a2b4a); + background: rgba(var(--openms-white-rgb), 0.92); +} + @keyframes uni-partners-marquee { 0% { transform: translateX(0); diff --git a/assets/css/webapps.css b/assets/css/webapps.css index 8b51982..ff91de2 100644 --- a/assets/css/webapps.css +++ b/assets/css/webapps.css @@ -11,7 +11,7 @@ section.webapps-featured { --webapps-logo-size: clamp(4.5rem, 10vw, 5.5rem); --webapps-card-text-lines: 3; --openms-webapps-focus-ring: 0 0 0 3px var(--openms-blue), - 0 0 0 5px var(--openms-yellow); + 0 0 0 5px rgba(var(--openms-blue-rgb), 0.2); position: relative; overflow: hidden; @@ -30,12 +30,7 @@ section.webapps-featured::before { left: 0; right: 0; height: 4px; - background: linear-gradient( - 90deg, - var(--openms-blue) 0%, - var(--openms-purple) 45%, - var(--openms-pink) 100% - ); + background: var(--openms-blue); pointer-events: none; } @@ -93,15 +88,7 @@ section.webapps-featured::after { .webapps-featured__title-accent { display: inline; - background: linear-gradient( - 90deg, - var(--openms-blue) 0%, - var(--openms-purple) 55%, - var(--openms-pink) 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + color: var(--openms-blue); } .webapps-featured__lead { @@ -170,12 +157,7 @@ section.webapps-featured::after { left: 0; right: 0; height: 3px; - background: linear-gradient( - 90deg, - var(--openms-blue) 0%, - var(--openms-purple) 55%, - var(--openms-pink) 100% - ); + background: var(--openms-blue); opacity: 0.55; transition: opacity 0.2s ease, height 0.2s ease; } diff --git a/assets/js/home-scroll-reveal.js b/assets/js/home-scroll-reveal.js index 2305286..fa2b4f5 100644 --- a/assets/js/home-scroll-reveal.js +++ b/assets/js/home-scroll-reveal.js @@ -5,7 +5,7 @@ var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; var hero = page.querySelector(".home-page__hero"); var scrollSections = page.querySelectorAll( - ".home-page__block--partners, .home-page__block--projects, .home-page__block--overview, .home-page__trust, .home-page__cta, .home-page__block--panel, .home-page__block--content" + ".home-page__block--partners, .home-page__block--projects, .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"); @@ -23,7 +23,7 @@ } if (hero) { - hero.querySelectorAll(".hero-home__bento-card").forEach(function (card, index) { + hero.querySelectorAll(".hero-home__metric").forEach(function (card, index) { card.style.setProperty("--hero-reveal-index", String(index)); }); diff --git a/assets/js/navbar-search.js b/assets/js/navbar-search.js index b0bc938..c7afabe 100644 --- a/assets/js/navbar-search.js +++ b/assets/js/navbar-search.js @@ -1,5 +1,5 @@ /** - * Navbar site search — magnifying glass opens panel; live results from search-index.json. + * Navbar site search — magnifying glass opens centered bar under header. */ (function () { var indexPromise = null; @@ -89,11 +89,45 @@ }); } + 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() { @@ -114,10 +148,13 @@ 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(); }); } @@ -127,6 +164,7 @@ 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"); @@ -160,6 +198,15 @@ } }); + 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); @@ -173,15 +220,21 @@ }); document.addEventListener("click", function (e) { - if (!root.contains(e.target)) { - if (root.classList.contains("is-open")) { - closePanel(root, toggle, panel, input, results); - } + if (!root.classList.contains("is-open")) return; + if (root.contains(e.target)) return; + if (e.target.closest(".navbar-search__panel")) return; + closePanel(root, toggle, panel, input, results); + }); + + window.addEventListener("resize", function () { + if (root.classList.contains("is-open")) { + updateHeaderHeight(); } }); } document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll(".navbar-search").forEach(setupSearch); + updateHeaderHeight(); }); })(); diff --git a/assets/js/news-year-filter.js b/assets/js/news-year-filter.js index ac042fc..eeed1b2 100644 --- a/assets/js/news-year-filter.js +++ b/assets/js/news-year-filter.js @@ -4,12 +4,20 @@ var root = document.querySelector("[data-news-year-filter]"); if (!root) return; - var buttons = root.querySelectorAll("[data-news-year-btn]"); - var items = root.querySelectorAll(".news-card[data-news-year]"); - var headings = root.querySelectorAll("[data-news-year-heading]"); - var emptyEl = root.querySelector("[data-news-empty]"); - var countEl = root.querySelector("[data-news-count]"); - var total = items.length; + var selectEl = root.querySelector("[data-news-year-select]"); + var allSections = root.querySelectorAll("[data-news-year]"); + if (!selectEl || !allSections.length) return; + + var allYears = []; + allSections.forEach(function (section) { + var year = section.getAttribute("data-news-year"); + if (year && allYears.indexOf(year) === -1) { + allYears.push(year); + } + }); + allYears.sort(function (a, b) { + return Number(b) - Number(a); + }); function getYearFromUrl() { try { @@ -21,7 +29,7 @@ function setYearInUrl(year) { var url = new URL(window.location.href); - if (!year || year === "all") { + if (!year || year === allYears[0]) { url.searchParams.delete("year"); } else { url.searchParams.set("year", year); @@ -29,80 +37,54 @@ window.history.replaceState({}, "", url); } - function setActiveButton(year) { - buttons.forEach(function (btn) { - var value = btn.getAttribute("data-news-year-btn"); - var active = value === year || (year === "all" && value === "all"); - btn.classList.toggle("is-active", active); - btn.setAttribute("aria-pressed", active ? "true" : "false"); - }); - } - function applyFilter(year) { - var showAll = !year || year === "all"; - var visible = 0; - - items.forEach(function (item) { - var itemYear = item.getAttribute("data-news-year") || ""; - var show = showAll || itemYear === year; - if (show) { - item.removeAttribute("data-news-hidden"); - } else { - item.setAttribute("data-news-hidden", "true"); - } - if (show) visible += 1; - }); - - headings.forEach(function (heading) { - var headingYear = heading.getAttribute("data-news-year-heading") || ""; - var showHeading = showAll || headingYear === year; - heading.hidden = !showHeading; + allSections.forEach(function (section) { + var sectionYear = section.getAttribute("data-news-year") || ""; + var show = sectionYear === year; + section.hidden = !show; + section.setAttribute("aria-hidden", show ? "false" : "true"); }); - if (emptyEl) { - emptyEl.hidden = showAll || visible > 0; - } - - if (countEl) { - if (showAll) { - countEl.textContent = total + " " + (total === 1 ? "article" : "articles"); - } else { - countEl.textContent = - visible + " of " + total + " " + (total === 1 ? "article" : "articles"); - } - } + root.setAttribute("data-active-year", year); } function selectYear(year) { - var value = year || "all"; - setActiveButton(value); - applyFilter(value); - setYearInUrl(value); + if (allYears.indexOf(year) === -1) { + year = allYears[0]; + } + selectEl.value = year; + applyFilter(year); + setYearInUrl(year); } function initYear() { var fromUrl = getYearFromUrl(); - if (fromUrl) { - var match = root.querySelector('[data-news-year-btn="' + fromUrl + '"]'); - if (match) return fromUrl; + if (fromUrl && allYears.indexOf(fromUrl) !== -1) { + return fromUrl; } - var active = root.querySelector(".news-page__year-btn.is-active"); - if (active) { - return active.getAttribute("data-news-year-btn") || "all"; - } - var fallback = root.getAttribute("data-news-default-year"); - return fallback || "all"; + return allYears[0]; } - buttons.forEach(function (btn) { - btn.addEventListener("click", function () { - selectYear(btn.getAttribute("data-news-year-btn")); + function buildSelect() { + selectEl.innerHTML = ""; + + allYears.forEach(function (year) { + var opt = document.createElement("option"); + opt.value = year; + opt.textContent = year; + selectEl.appendChild(opt); }); + } + + selectEl.addEventListener("change", function () { + selectYear(selectEl.value); }); + buildSelect(); selectYear(initYear()); + root.classList.add("news-year-filter--ready"); window.addEventListener("popstate", function () { - selectYear(getYearFromUrl() || "all"); + selectYear(initYear()); }); })(); diff --git a/assets/js/publications-year-filter.js b/assets/js/publications-year-filter.js index 0fd82af..b415a06 100644 --- a/assets/js/publications-year-filter.js +++ b/assets/js/publications-year-filter.js @@ -1,13 +1,11 @@ (function () { "use strict"; - var RECENT_YEAR_COUNT = 2; - var root = document.querySelector("[data-publications-year-filter]"); if (!root) return; var selectEl = root.querySelector("[data-publications-year-select]"); - var countEl = root.querySelector("[data-publications-count]"); + var navEl = root.querySelector("[data-publications-year-nav]"); var allSections = root.querySelectorAll("[data-publication-year]"); if (!selectEl || !allSections.length) return; @@ -22,10 +20,6 @@ return Number(b) - Number(a); }); - var recentYears = allYears.slice(0, RECENT_YEAR_COUNT); - - var currentYear = "all"; - function getYearFromUrl() { try { return new URLSearchParams(window.location.search).get("year"); @@ -36,7 +30,7 @@ function setYearInUrl(year) { var url = new URL(window.location.href); - if (!year || year === "all") { + if (!year || year === allYears[0]) { url.searchParams.delete("year"); } else { url.searchParams.set("year", year); @@ -44,77 +38,87 @@ window.history.replaceState({}, "", url); } - function updateCount(visible, showAll, year) { - if (!countEl) return; - if (showAll) { - countEl.textContent = - visible + - " " + - (visible === 1 ? "publication" : "publications") + - " (" + - recentYears.join(", ") + - ")"; - } else { - countEl.textContent = - visible + - " " + - (visible === 1 ? "publication" : "publications") + - " (" + - year + - ")"; - } + function updateNavActive(year) { + if (!navEl) return; + navEl.querySelectorAll("[data-year-filter]").forEach(function (btn) { + var active = btn.getAttribute("data-year-filter") === year; + btn.classList.toggle("is-active", active); + btn.setAttribute("aria-pressed", active ? "true" : "false"); + }); } function applyFilter(year) { - var showAll = !year || year === "all"; - var visible = 0; - allSections.forEach(function (section) { var sectionYear = section.getAttribute("data-publication-year") || ""; - var show = showAll - ? recentYears.indexOf(sectionYear) !== -1 - : sectionYear === year; + var show = sectionYear === year; section.hidden = !show; section.setAttribute("aria-hidden", show ? "false" : "true"); - if (show) { - visible += section.querySelectorAll(".publication-entry").length; - } }); - updateCount(visible, showAll, year); + root.setAttribute("data-active-year", year); + updateNavActive(year); } function selectYear(year) { - if (year !== "all" && allYears.indexOf(year) === -1) { - year = "all"; + if (allYears.indexOf(year) === -1) { + year = allYears[0]; } - currentYear = year; selectEl.value = year; applyFilter(year); setYearInUrl(year); - - if (year !== "all") { - var target = root.querySelector("#year-" + year); - if (target && typeof target.scrollIntoView === "function") { - target.scrollIntoView({ behavior: "smooth", block: "start" }); - } - } } function initYear() { var fromUrl = getYearFromUrl(); - if (fromUrl === "all") return "all"; if (fromUrl && allYears.indexOf(fromUrl) !== -1) { return fromUrl; } - return "all"; + return allYears[0]; + } + + function buildSelect() { + selectEl.innerHTML = ""; + + allYears.forEach(function (year) { + var opt = document.createElement("option"); + opt.value = year; + opt.textContent = year; + selectEl.appendChild(opt); + }); + } + + function buildNav() { + if (!navEl) return; + + function addButton(value, label) { + var btn = document.createElement("button"); + btn.type = "button"; + btn.className = "publications-year-nav__btn"; + btn.setAttribute("data-year-filter", value); + btn.setAttribute("aria-pressed", "false"); + btn.textContent = label; + navEl.appendChild(btn); + } + + allYears.forEach(function (year) { + addButton(year, year); + }); + + navEl.addEventListener("click", function (event) { + var btn = event.target.closest("[data-year-filter]"); + if (!btn) return; + selectYear(btn.getAttribute("data-year-filter")); + }); } selectEl.addEventListener("change", function () { selectYear(selectEl.value); }); + buildSelect(); + buildNav(); selectYear(initYear()); + root.classList.add("publications-year-filter--ready"); window.addEventListener("popstate", function () { selectYear(initYear()); diff --git a/config.yaml b/config.yaml index c44d197..ddbb931 100644 --- a/config.yaml +++ b/config.yaml @@ -66,6 +66,7 @@ languages: enabled: true label: News text: Workshop at University of Helsinki on April 30th 2026. + link: /news/helsinki_workshop_2026/ contributePage: eyebrow: Community subtitle: >- @@ -111,11 +112,14 @@ languages: applicationsPage: eyebrow: Projects readMoreLabel: Read application + catalogTitle: Integrated pipelines & workflows + catalogLead: Application guides with setup steps, workflows, and links to run analyses on your data. newsSection: eyebrow: OpenMS title: News subtitle: Announcements, releases, workshops, and community updates from OpenMS. - yearFilterLabel: Filter by year + yearFilterLabel: Filter news by year + listTitle: All news allYearsLabel: All readMoreLabel: Read article backToNewsLabel: Back to news @@ -125,6 +129,7 @@ languages: calendarSection: eyebrow: Community title: Community calendar + titleHighlight: calendar subtitle: Upcoming OpenMS meetings, workshops, and community events. # Donate page (/donate/) — paste URLs from Zeffy: Donations → My forms → Share donatePage: @@ -181,28 +186,38 @@ languages: benefits: - Text mention and link on the sponsor page (lower section) - Alphabetical placement among peers at the same level - trustedBySection: - eyebrow: Trusted by - title: As used by leading teams - titleHighlight: leading teams - subtitle: Researchers and organizations worldwide rely on OpenMS for mass spectrometry workflows. - linkLabel: Visit website - trustedBy: + 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: Korean team abbr: KR - # url: https://example.com - - name: University of Toronto - logo: /images/logos/toronto.jpeg - logoSize: large - url: http://www.moleculargenetics.utoronto.ca/faculty/2017/7/19/hannes-rost - - name: University of Tübingen - logo: /images/logos/logo-uni-tuebingen.png - url: https://kohlbacherlab.org/ navbarlogo: - image: OpenMS_transparent_blackFont.png + image: logos/OpenMS_transparent_blackFont.svg link: / altText: OpenMS navbarSearch: @@ -225,13 +240,46 @@ languages: stats: - value: 10 suffix: "+" - label: Years Active + label: Years active + description: Over a decade of open-source development for mass spectrometry workflows. - value: 1000 suffix: "+" label: Researchers + description: Scientists and developers worldwide building and using OpenMS tools. - value: 3.5 decimals: 1 - label: Latest Version + prefix: v + label: Latest version + description: Continuous releases with new algorithms, formats, and analysis workflows. + + communitySection: + eyebrow: Community + title: Everyone is welcome + titleHighlight: welcome + lead: >- + OpenMS is built by a diverse group of contributors around the world. + Whether you are new to mass spectrometry or a seasoned developer, there + is a place for you in our community. + welcomeNote: >- + We are committed to being open, inclusive, and welcoming — read the + [Code of Conduct](/code-of-conduct) for how we work together. + image: /images/community/community-tech-bg.svg + imageAlt: Abstract mass spectrometry data visualization with spectral peaks and connected analysis workflows + ctaText: Get involved + ctaUrl: /contribute/ + + eventsSection: + eyebrow: Events + title: Upcoming events + titleHighlight: events + lead: >- + Workshops, developer meetings, and community outreach around the world. + calendarText: View full calendar + calendarUrl: /calendar/ + limit: 4 + emptyEvents: >- + No upcoming events scheduled right now. Browse the calendar for past + highlights or join the community to hear about the next meetup. homePage: pathwaysEyebrow: Get started @@ -356,13 +404,6 @@ languages: showAll: text: Show all projects url: /applications - links: - - text: TOPP Tools - url: https://openms.readthedocs.io/en/latest/getting-started/topp-tools.html - description: Command-line tools for proteomics and metabolomics data analysis. - - text: pyOpenMS - url: https://pyopenms.readthedocs.io/en/latest/ - description: Python bindings for scripting workflows, prototyping, and integrations. webapps: - name: FLASH App @@ -433,6 +474,8 @@ languages: link: https://openms.readthedocs.io/en/latest/about/installation.html - text: Documentation link: https://openms.readthedocs.io/en/latest/ + - text: Help + link: /help/ - text: Citing OpenMS link: /citing-openms column2: @@ -473,6 +516,14 @@ languages: navbar: - title: Infrastructure url: /openms-lib/ + sublinks: + - title: OpenMS-lib + url: /openms-lib/ + - title: pyOpenMS + url: https://pyopenms.readthedocs.io/en/latest/ + is_external: true + - title: OpenMS Web Apps + url: /applications/ - title: Projects url: /applications sublinks: diff --git a/content/en/about.md b/content/en/about.md index 1091ff7..a94e253 100644 --- a/content/en/about.md +++ b/content/en/about.md @@ -57,8 +57,12 @@ hidePageTitle: true Give online via our donation page (Zeffy and Open Collective).

    -
    - Donate now - Sponsor us -
    +
    + + diff --git a/content/en/applications/_index.md b/content/en/applications/_index.md index 4fca248..2a181c9 100644 --- a/content/en/applications/_index.md +++ b/content/en/applications/_index.md @@ -1,21 +1,22 @@ --- title: OpenMS Applications subtitle: Pipelines and tools integrated into OpenMS releases or available via KNIME and Nextflow. -date: 2017-03-23 -publishdate: 2017-03-24 hidePageTitle: true hideShortcuts: true --- OpenMS is a flexible codebase that can be tailored to many different applications ranging from the standard label free analysis to top down, metabolomics, crosslinking or DIA. -OpenMS is used in a variety of applications: popular third-party apps which run OpenMS under the hood include +
    - - QuantMS [https://quantms.org](https://quantms.org) - - QCCloud2 [https://qcloud2.crg.eu](https://qcloud2.crg.eu) - - Proteome Discoverer Community Nodes - +**Also built on OpenMS** -Applications which are integrated into OpenMS releases or are available as pipelines (e.g. using KNIME or Nextflow) are listed below. The pages will provide explanations on how OpenMS can be used to solve your problems and link to workflows that allow you to apply the tools to your data. +- [QuantMS](https://quantms.org) +- [QCCloud2](https://qcloud2.crg.eu) +- Proteome Discoverer Community Nodes -If you cannot find your application in the menu on the left, more OpenMS tools can be found in the [TOPP documentation](https://openms.de/doxygen/nightly/html/TOPP_documentation.html). \ No newline at end of file +
    + +Applications which are integrated into OpenMS releases or are available as pipelines (e.g. using KNIME or Nextflow) are listed below. Each page explains how OpenMS can address your workflow and links to ready-to-use pipelines. + +If you cannot find your application in the list, more OpenMS tools are in the [TOPP documentation](https://openms.de/doxygen/nightly/html/TOPP_documentation.html). diff --git a/content/en/help.md b/content/en/help.md index 1202830..1597fc8 100644 --- a/content/en/help.md +++ b/content/en/help.md @@ -74,21 +74,4 @@ hideShortcuts: true Read pyOpenMS docs

    -
    diff --git a/content/en/openms-lib.md b/content/en/openms-lib.md index 7b2f47a..e04b4cb 100644 --- a/content/en/openms-lib.md +++ b/content/en/openms-lib.md @@ -18,12 +18,6 @@ sidebar: false OpenMS-lib is the BSD-licensed C++ foundation behind TOPP tools, pyOpenMS, and community software—for LC-MS data management, analysis, and visualization.

    -
      -
    • BSD-3 license
      • -
    • C++ & Python
      • -
    • Cross-platform
      • -
    • 200+ TOPP tools
      • -
    +

    At a glance

    @@ -53,9 +48,8 @@ sidebar: false One C++ core powers command-line tools, Python bindings, and community web apps.

    -
    +
    -
    Core library

    C++ algorithms & data structures

    @@ -71,7 +65,6 @@ sidebar: false
    -
    Ecosystem

    Built on OpenMS-lib

    @@ -88,6 +81,48 @@ sidebar: false
    +
    +
    +

    Core tools

    +

    TOPP & pyOpenMS

    +

    + Command-line utilities and Python bindings built on the same OpenMS-lib core. +

    +
    +
    + +
    + TOPP +

    TOPP Tools

    +
    +

    + Command-line tools for proteomics and metabolomics data analysis. +

    + TOPP tools guide +     + +
    + pyOpenMS +

    pyOpenMS

    +
    +

    + Python bindings for scripting workflows, prototyping, and integrations. +

    + pyOpenMS docs +     +
    +
    +
    @@ -115,7 +150,6 @@ sidebar: false
    -
    Wiki

    Developer FAQ

    @@ -124,7 +158,6 @@ sidebar: false
    -
    TOPP

    Add a TOPP tool

    @@ -133,7 +166,6 @@ sidebar: false
    -
    C++

    C++ guide

    @@ -142,7 +174,6 @@ sidebar: false
    -
    Docs

    Developer manual

    @@ -151,7 +182,6 @@ sidebar: false
    -
    pyOpenMS

    Python bindings

    @@ -160,7 +190,6 @@ sidebar: false
    -
    Community

    Browse projects

    diff --git a/content/en/publications.md b/content/en/publications.md index fcc0055..769e034 100644 --- a/content/en/publications.md +++ b/content/en/publications.md @@ -5,67 +5,66 @@ hideShortcuts: true hidePageTitle: true --- -
    -

    How to cite OpenMS

    -

    - When you use OpenMS in your research, please cite the - key publications below and the tools you used where applicable. - See also the Citing OpenMS page for citation guidance. -

    -
    - -
    - -

    - Primary references when citing OpenMS software and the Python interface. -

    -
      -
    • -

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

      +

      Key publications

      +
      -
      - {{< publications-year-select >}} -

      -
      +
      +{{< publications-year-select >}} +
      -
      -

      2025

      +
      -
      -

      2024

      +
      -
      -

      2023

      +
      -
      -

      2022

      +
      -
      -

      2021

      +

      • A proteomics sample metadata representation for multiomics integration and big data analysis

        Nature Communications · 2021

        Dai, Chengxin; Füllgrabe, Anja; Pfeuffer, Julianus; Solovyeva, Elizaveta M; Deng, Jingwen; Moreno, Pablo; Kamatchinathan, Selvakumar; Kundu, Deepti Jaiswal; George, Nancy; Fexova, Silvie

      • DIAproteomics: A multifunctional data analysis pipeline for data-independent acquisition proteomics and peptidomics

        Journal of proteome research · 2021

        Bichmann, Leon; Gupta, Shubham; Rosenberger, George; Kuchenbecker, Leon; Sachsenberg, Timo; Ewels, Phil; Alka, Oliver; Pfeuffer, Julianus; Kohlbacher, Oliver; Rost, Hannes

      • HLA Ligand Atlas: a benign reference of HLA-presented peptides to improve T-cell-based cancer immunotherapy

        Journal for immunotherapy of cancer · 2021

        Marcu, Ana; Bichmann, Leon; Kuchenbecker, Leon; Kowalewski, Daniel Johannes; Freudenmann, Lena Katharina; Backert, Linus; Mühlenbruch, Lena; Szolek, András; Lübke, Maren; Wagner, Philipp

      -
      -

      2020

      +
      -
      -

      2019

      +
      -
      -

      2018

      +
      -
      -

      2017

      +
      -
      -

      2016

      +

      • A multicenter study benchmarks software tools for label-free proteome quantification

        Nature biotechnology · 2016

        Navarro, Pedro; Kuharev, Jörg; Gillet, Ludovic C; Bernhardt, Oliver M; MacLean, Brendan; Röst, Hannes L; Tate, Stephen A; Tsou, Chih-Chiang; Reiter, Lukas; Distler, Ute

      • Flexible data analysis pipeline for high-confidence proteogenomics

        Journal of Proteome Research · 2016

        Weisser, Hendrik; Wright, James C; Mudge, Jonathan M; Gutenbrunner, Petra; Choudhary, Jyoti S

        • @@ -134,8 +127,7 @@ hidePageTitle: true

      • Ten simple rules for taking advantage of Git and GitHub

        PLoS computational biology · 2016

        Perez-Riverol, Yasset; Gatto, Laurent; Wang, Rui; Sachsenberg, Timo; Uszkoreit, Julian; da Veiga Leprevost, Felipe; Fufezan, Christian; Ternent, Tobias; Eglen, Stephen J; Katz, Daniel S

      -
      -

      2015

      +
      -
      -

      2014

      +

      • Automated label-free quantification of metabolites from liquid chromatography–mass spectrometry data

        Molecular & Cellular Proteomics · 2014

        Kenar, Erhan; Franken, Holger; Forcisi, Sara; Wörmann, Kilian; Häring, Hans-Ulrich; Lehmann, Rainer; Schmitt-Kopplin, Philippe; Zell, Andreas; Kohlbacher, Oliver

      • OpenSWATH enables automated, targeted analysis of data-independent acquisition MS data

        Nature biotechnology · 2014

        Röst, Hannes L; Rosenberger, George; Navarro, Pedro; Gillet, Ludovic; Miladinović, Saša M; Schubert, Olga T; Wolski, Witold; Collins, Ben C; Malmström, Johan; Malmström, Lars

        • @@ -156,39 +147,34 @@ hidePageTitle: true

      • qcML: an exchange format for quality control metrics from mass spectrometry experiments

        Molecular & Cellular Proteomics · 2014

        Walzer, Mathias; Pernas, Lucia Espona; Nasso, Sara; Bittremieux, Wout; Nahnsen, Sven; Kelchtermans, Pieter; Pichler, Peter; van den Toorn, Henk WP; Staes, An; Vandenbussche, Jonathan

      -
      -

      2013

      +

      • An automated pipeline for high-throughput label-free quantitative proteomics

        Journal of proteome research · 2013

        Weisser, Hendrik; Nahnsen, Sven; Grossmann, Jonas; Nilse, Lars; Quandt, Andreas; Brauer, Hendrik; Sturm, Marc; Kenar, Erhan; Kohlbacher, Oliver; Aebersold, Ruedi

      • The mzQuantML data standard for mass spectrometry-based quantitative studies in proteomics

        Molecular & Cellular Proteomics · 2013

        Walzer, Mathias; Qi, Da; Mayer, Gerhard; Uszkoreit, Julian; Eisenacher, Martin; Sachsenberg, Timo; Gonzalez-Galarza, Faviel F; Fan, Jun; Bessant, Conrad; Deutsch, Eric W

      • Tools for label-free peptide quantification

        Molecular & Cellular Proteomics · 2013

        Nahnsen, Sven; Bielow, Chris; Reinert, Knut; Kohlbacher, Oliver

      -
      -

      2012

      +
      -
      -

      2011

      +
      -
      -

      2010

      +

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

        Journal of proteome research · 2010

        Bertsch, Andreas; Jung, Stephan; Zerck, Alexandra; Pfeifer, Nico; Nahnsen, Sven; Henneges, Carsten; Nordheim, Alfred; Kohlbacher, Oliver

      • TOPP goes Rapid The OpenMS Proteomics Pipeline in a Grid-Enabled Web Portal

        Proceedings of the 2010 10th IEEE/ACM International Conference on Cluster, Cloud and Grid Computing · 2010

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

      -
      -

      2009

      +
      -
      -

      2008

      +

      • Analysis of mass spectrometric data: peak picking and map alignment

        Freie Universtaet Berlin · 2008

        Lange, Eva

      • Computational quantification of peptides from LC-MS data

        Journal of Computational Biology · 2008

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

        • @@ -207,8 +192,7 @@ hidePageTitle: true

      • OpenMS–an open-source software framework for mass spectrometry

        BMC bioinformatics · 2008

        Sturm, Marc; Bertsch, Andreas; Gröpl, Clemens; Hildebrandt, Andreas; Hussong, Rene; Lange, Eva; Pfeifer, Nico; Schulz-Trieglaff, Ole; Zerck, Alexandra; Reinert, Knut

      -
      -

      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 11 · 2007

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

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

        Bioinformatics · 2007

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

        • @@ -216,14 +200,12 @@ hidePageTitle: true

      • TOPP—the OpenMS proteomics pipeline

        Bioinformatics · 2007

        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 PROTEOMICS · 2005

        Groepl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L

      • Algorithms for the automated absolute quantification of diagnostic markers in complex proteomics samples

        Computational Life Sciences: First International Symposium, CompLife 2005, Konstanz, Germany, September 25-27, 2005. Proceedings 1 · 2005

        Gröpl, Clemens; Lange, Eva; Reinert, Knut; Kohlbacher, Oliver; Sturm, Marc; Huber, Christian G; Mayr, Bettina M; Klein, Christoph L

        • @@ -231,3 +213,6 @@ hidePageTitle: true

      • OpenMS-Software for Mass Spectrometry

        Poster presented at the MBI Workshop on Computational Proteomics and Mass Spectrometry · 2005

        Gröpl, C; Hildebrandt, A; Kohlbacher, O; Lange, E; Lövenich, S; Sturm, M

      + +
      +
      diff --git a/data/community_events.yaml b/data/community_events.yaml index 05e4ee7..de4ab2f 100644 --- a/data/community_events.yaml +++ b/data/community_events.yaml @@ -24,6 +24,35 @@ events: 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 diff --git a/layouts/applications/section.html b/layouts/applications/section.html index 9583b9c..a3019c0 100644 --- a/layouts/applications/section.html +++ b/layouts/applications/section.html @@ -4,6 +4,8 @@ {{- $subtitle := index $cfg "subtitle" | default .Params.Subtitle }} {{- $eyebrow := index $cfg "eyebrow" | default "Projects" }} {{- $readMore := index $cfg "readMoreLabel" | default "Read more" }} +{{- $catalogTitle := index $cfg "catalogTitle" | default "Integrated pipelines & workflows" }} +{{- $catalogLead := index $cfg "catalogLead" | default "Application guides with setup steps, workflows, and links to run analyses on your data." }} {{- $pages := .Pages.ByTitle }}
      @@ -42,31 +44,35 @@

    {{- end }} -
    - {{- range $pages }} -
    -

    Application

    -

    {{ .Title }}

    - {{- with .Params.Subtitle }} -

    {{ . }}

    - {{- else }} - {{- with .Summary }} -

    {{ . }}

    - {{- end }} - {{- end }} - {{- with or .Params.authors .Params.Authors }} -

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

    - {{- end }} - {{- if .Date }} -

    {{ .Date.Format "January 2, 2006" }}

    +
    +
    +

    {{ $catalogTitle }}

    +

    {{ $catalogLead }}

    +
    + +
    - {{- end }} +
    diff --git a/layouts/index.html b/layouts/index.html index 797c0d1..c5193d7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,7 +7,7 @@ {{- end }}
    - {{ partial "university-partners.html" (dict "showHeader" true "variant" "home") }} + {{ partial "university-partners.html" (dict "Site" .Site "showHeader" true "variant" "home") }}
    @@ -20,8 +20,12 @@
    {{- end }} -
    - {{ partial "trusted-by.html" (dict "Site" .Site "variant" "home") }} +
    + {{ partial "community-home.html" . }} +
    + +
    + {{ partial "community-events-home.html" . }}
    diff --git a/layouts/news/section.html b/layouts/news/section.html index e5374da..bf46555 100644 --- a/layouts/news/section.html +++ b/layouts/news/section.html @@ -3,11 +3,7 @@ {{- $title := index $cfg "title" | default .Title }} {{- $subtitle := index $cfg "subtitle" | default .Params.Subtitle }} {{- $eyebrow := index $cfg "eyebrow" | default "OpenMS" }} -{{- $yearLabel := index $cfg "yearFilterLabel" | default "Filter by year" }} -{{- $allYearsLabel := index $cfg "allYearsLabel" | default "All" }} {{- $readMore := index $cfg "readMoreLabel" | default "Read article" }} -{{- $defaultYear := index $cfg "defaultYear" | default "" }} -{{- $defaultToLatest := index $cfg "defaultToLatestYear" | default false }} {{- $pages := .Pages.ByDate.Reverse }} {{- $years := slice }} {{- range $pages }} @@ -18,9 +14,6 @@ {{- end }} {{- end }} {{- end }} -{{- if and (not $defaultYear) $defaultToLatest (gt (len $years) 0) }} - {{- $defaultYear = index $years 0 }} -{{- end }}
    @@ -36,96 +29,88 @@

    {{- with $subtitle }}

    {{ . }}

    {{- end }} -
    - Community calendar - Contribute - Projects -

    -
    -
    +
    +
    + {{- if .Content }} +
    {{ .Content }}
    + {{- end }} + {{- if gt (len $years) 0 }} -
    -

    {{ $yearLabel }}

    -
    - +
    + {{ partial "news-year-select.html" . }} +
    {{- range $years }} - + {{- $year := . }} +
    +
      + {{- range $pages }} + {{- if and (not .Date.IsZero) (eq (.Date.Format "2006") $year) }} +
    • +

      + {{ .Title }} +

      +

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

      + {{- with .Summary }} +

      {{ . }}

      + {{- end }} + {{ $readMore }} +
      • + {{- end }} + {{- end }} +
    +
    {{- end }}
    -

    -
    - {{- end }} - - {{- if .Content }} -
    {{ .Content }}
    +
    {{- end }} -
    - {{- $lastYear := "" }} - {{- range $pages }} - {{- $year := "" }} - {{- if not .Date.IsZero }} - {{- $year = .Date.Format "2006" }} - {{- if ne $year $lastYear }} -

    {{ $year }}

    - {{- $lastYear = $year }} - {{- end }} + {{- $undated := slice }} + {{- range $pages }} + {{- if .Date.IsZero }} + {{- $undated = $undated | append . }} {{- end }} -
    -
    - {{ partial "news-date-badge.html" . }} -
    -

    - {{ .Title }} -

    - {{- with or .Params.authors .Params.Authors }} -

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

    - {{- end }} - {{- with .Summary }} -

    {{ . }}

    + {{- end }} + {{- if gt (len $undated) 0 }} +
    +
    +
    +
      + {{- range $undated }} +
    • +

      + {{ .Title }} +

      + {{- with or .Params.authors .Params.Authors }} +

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

      + {{- end }} + {{- with .Summary }} +

      {{ . }}

      + {{- end }} + {{ $readMore }} +
      • {{- end }} - - {{ $readMore }} - -
    -
    -
    - {{- end }} -
    - - + +
    +
    +
    + {{- end }}
    diff --git a/layouts/partials/about-main.html b/layouts/partials/about-main.html index 43d75fe..5e95ece 100644 --- a/layouts/partials/about-main.html +++ b/layouts/partials/about-main.html @@ -12,8 +12,6 @@

    {{ $subtitle }}

    Governance - Donate - Sponsor us

    diff --git a/layouts/partials/community-calendar-main.html b/layouts/partials/community-calendar-main.html index 6236e49..e05c398 100644 --- a/layouts/partials/community-calendar-main.html +++ b/layouts/partials/community-calendar-main.html @@ -2,15 +2,20 @@ {{- $title := index $cfg "title" | default "Community calendar" -}} {{- $subtitle := index $cfg "subtitle" | default "Upcoming OpenMS meetings, workshops, and community events." -}} {{- $eyebrow := index $cfg "eyebrow" | default "Community" -}} +{{- $titleHighlight := index $cfg "titleHighlight" | default "calendar" -}} {{- $data := .Site.Data.community_events | default dict -}} {{- $events := index $data "events" | default (slice) -}}
    -
    +

    {{ $eyebrow }}

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

    {{ $subtitle }}

    diff --git a/layouts/partials/community-events-home.html b/layouts/partials/community-events-home.html new file mode 100644 index 0000000..f6661d4 --- /dev/null +++ b/layouts/partials/community-events-home.html @@ -0,0 +1,118 @@ +{{- $cfg := site.Params.eventsSection | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Events" -}} +{{- $title := index $cfg "title" | default "Upcoming events" -}} +{{- $titleHighlight := index $cfg "titleHighlight" | default "events" -}} +{{- $lead := index $cfg "lead" | default "Workshops, developer meetings, and community outreach around the world." -}} +{{- $calendarText := index $cfg "calendarText" | default "View full calendar" -}} +{{- $calendarUrl := index $cfg "calendarUrl" | default "/calendar/" -}} +{{- $eventsLimit := index $cfg "limit" | default 4 -}} +{{- $emptyEvents := index $cfg "emptyEvents" | default "No upcoming events scheduled right now. Browse the calendar for past highlights or join the community to hear about the next meetup." -}} +{{- $allEvents := site.Data.community_events.events | default (slice) -}} +{{- $upcoming := slice -}} +{{- range $allEvents }} + {{- $endStr := .end | default .start -}} + {{- $end := time $endStr -}} + {{- if not ($end.Before now) }} + {{- $upcoming = $upcoming | append . -}} + {{- end }} +{{- end }} +{{- $upcoming = sort $upcoming "start" -}} +{{- $upcoming = first $eventsLimit $upcoming -}} +{{- $eventCount := len $upcoming -}} +
    +
    +
    +
    +

    + + {{ $eyebrow }} +

    +

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

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} +
    +
    + + {{- if gt $eventCount 0 }} + + + {{- else }} +
    + +

    {{ $emptyEvents }}

    + {{ $calendarText }} +
    + {{- end }} +
    +
    diff --git a/layouts/partials/community-home.html b/layouts/partials/community-home.html new file mode 100644 index 0000000..1069195 --- /dev/null +++ b/layouts/partials/community-home.html @@ -0,0 +1,52 @@ +{{- $cfg := site.Params.communitySection | default dict -}} +{{- $eyebrow := index $cfg "eyebrow" | default "Community" -}} +{{- $title := index $cfg "title" | default "Everyone is welcome" -}} +{{- $titleHighlight := index $cfg "titleHighlight" | default "welcome" -}} +{{- $lead := index $cfg "lead" | default "" -}} +{{- $welcomeNote := index $cfg "welcomeNote" | default "" -}} +{{- $ctaText := index $cfg "ctaText" | default "Get involved" -}} +{{- $ctaUrl := index $cfg "ctaUrl" | default "/contribute/" -}} +{{- $image := index $cfg "image" -}} +{{- $imageAlt := index $cfg "imageAlt" | default "OpenMS community" -}} +
    + {{- with $image }} + + + {{- end }} +
    +
    +

    + + {{ $eyebrow }} +

    +

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

    + {{- with $lead }} +

    {{ . }}

    + {{- end }} + {{- with $welcomeNote }} +
    {{ . | markdownify }}
    + {{- end }} +
    + {{ $ctaText }} +
    +
    +
    +
    diff --git a/layouts/partials/contact-alternatives.html b/layouts/partials/contact-alternatives.html index 9df14bf..eb8186f 100644 --- a/layouts/partials/contact-alternatives.html +++ b/layouts/partials/contact-alternatives.html @@ -1,57 +1,31 @@ -
    -
    -

    Need another route?

    -

    Other ways to reach us

    -

    - Prefer community chat or self-service help? Choose the channel that fits. +

    + +
    +

    Community

    +

    Discord & GitHub

    +

    + Join discussions, report issues, and connect with contributors.

    -
    + View channels +
    + - -
    +
    + +
    +

    Support

    +

    Help & consulting

    +

    + Browse help resources or learn about paid scientific and technical support. +

    + OpenMS help +
    +
    diff --git a/layouts/partials/contact-area.html b/layouts/partials/contact-area.html index d5fa431..4050836 100644 --- a/layouts/partials/contact-area.html +++ b/layouts/partials/contact-area.html @@ -6,8 +6,8 @@
    -
    -

    +

    +

    - Take control of your mass spec workflows today + Take control of your mass spec workflows today

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

    -
    -
    - Contact us - -

    Usually replies within 1–2 business days.

    -
    + + + + +

    Usually replies within 1–2 business days.

    diff --git a/layouts/partials/contact-email-aside.html b/layouts/partials/contact-email-aside.html index be75cb0..6416e82 100644 --- a/layouts/partials/contact-email-aside.html +++ b/layouts/partials/contact-email-aside.html @@ -1,17 +1,15 @@ - + diff --git a/layouts/partials/contact-main.html b/layouts/partials/contact-main.html index ef468dd..a3ba833 100644 --- a/layouts/partials/contact-main.html +++ b/layouts/partials/contact-main.html @@ -19,19 +19,40 @@

    -
    +
    - {{ partial "tally-form-embed.html" . }} +
    +
    +

    Message

    +

    Send us a message

    +

    + Share your question or request — we will route it to the right team. +

    +
    + {{ partial "tally-form-embed.html" . }} +
    - {{ partial "contact-email-aside.html" . }} -
    +
    +
    +

    More options

    +

    Other ways to reach us

    +

    + Prefer email, community chat, or self-service help? Pick the option that fits. +

    +
    + +
    + {{ partial "contact-email-aside.html" . }} + {{ partial "contact-alternatives.html" . }} +
    +
    - {{ partial "contact-alternatives.html" . }} - {{ partial "contact-support.html" . }} + {{ partial "contact-support.html" . }} +

    diff --git a/layouts/partials/contact-support.html b/layouts/partials/contact-support.html index e974a6c..3dd60aa 100644 --- a/layouts/partials/contact-support.html +++ b/layouts/partials/contact-support.html @@ -1,10 +1,9 @@
    -
    -

    Give back

    -

    Supporting OpenMS

    -

    - Help sustain open-source mass spectrometry software, community programs, and - long-term development. +

    +

    Give back

    +

    Supporting OpenMS

    +

    + Help sustain open-source mass spectrometry software, community programs, and long-term development.

    diff --git a/layouts/partials/donate-main.html b/layouts/partials/donate-main.html index 8be00aa..e02d4f6 100644 --- a/layouts/partials/donate-main.html +++ b/layouts/partials/donate-main.html @@ -8,21 +8,25 @@ {{- $showOC := index $cfg "showOpenCollective" | default true -}} {{- $hasZeffyEmbed := and $zeffyEmbed (hasPrefix $zeffyEmbed "https://www.zeffy.com/") -}} {{- $hasZeffyForm := and $zeffyForm (hasPrefix $zeffyForm "https://www.zeffy.com/") -}} -
    +