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 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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" }}