From 79d516f9d3bcd54d8da66c2be33663afc7d0bc58 Mon Sep 17 00:00:00 2001
From: Ali Khosravi <khsrali@gmail.com>
Date: Fri, 3 Jul 2026 15:18:23 +0200
Subject: [PATCH] refactor(styles): consolidate page headers and unify landing
 section headings (#176, #163)

---
 src/components/Cite.tsx               |  3 +-
 src/components/Docs.tsx               |  6 +--
 src/components/Ecosystem.tsx          |  6 +--
 src/components/LandingPage.tsx        | 10 ++--
 src/layouts/Science.astro             |  4 +-
 src/pages/acknowledgements.astro      |  4 +-
 src/pages/blog/index.astro            |  4 +-
 src/pages/events.astro                |  4 +-
 src/pages/graph_gallery.astro         |  4 +-
 src/pages/plugin-registry/index.astro |  6 +--
 src/pages/team.astro                  |  4 +-
 src/pages/testimonials.astro          |  4 +-
 src/pages/use-cases.astro             |  4 +-
 src/styles/blog.css                   | 21 --------
 src/styles/cite.css                   |  8 +--
 src/styles/docs.css                   | 29 -----------
 src/styles/ecosystem.css              | 29 -----------
 src/styles/global.css                 | 43 ++++++++++++++++
 src/styles/landing.css                | 74 ++++++++-------------------
 src/styles/pages.css                  | 24 ---------
 src/styles/registry.css               | 30 -----------
 21 files changed, 99 insertions(+), 222 deletions(-)

diff --git a/src/components/Cite.tsx b/src/components/Cite.tsx
index 269792e4..1257b566 100644
--- a/src/components/Cite.tsx
+++ b/src/components/Cite.tsx
@@ -110,12 +110,13 @@ export default function Cite({variant = 'section'}: {variant?: 'section' | 'pane
   const Wrapper = variant === 'section' ? 'section' : 'div';
   const wrapperClass = variant === 'section' ? 'cite-section' : 'cite-panel';
   const revealAttrs = variant === 'section' ? {'data-reveal': true} : {};
+  const headingClass = variant === 'section' ? 'section-heading' : undefined;
 
   return (
     <Wrapper className={wrapperClass} {...revealAttrs}>
       <div className="cite-inner">
         <header className="cite-header">
-          <h2>How to cite AiiDA</h2>
+          <h2 className={headingClass}>How to cite AiiDA</h2>
           <p>If AiiDA helped your research, please cite the papers below.</p>
         </header>
 
diff --git a/src/components/Docs.tsx b/src/components/Docs.tsx
index a5a59ae4..43256480 100644
--- a/src/components/Docs.tsx
+++ b/src/components/Docs.tsx
@@ -86,13 +86,13 @@ const DOCS: DocEntry[] = [
 export default function Docs(): ReactNode {
   return (
     <main className="docs-page">
-      <section className="docs-hero">
+      <header className="page-header">
         <h1>Documentation</h1>
-        <p className="docs-hero-sub">
+        <p className="page-header-sub">
           Find the right documentation for the AiiDA package you're working with.
           All docs are hosted on Read the Docs.
         </p>
-      </section>
+      </header>
 
       {/* Featured: aiida-core */}
       <section className="docs-featured">
diff --git a/src/components/Ecosystem.tsx b/src/components/Ecosystem.tsx
index 8d885d01..0deada2b 100644
--- a/src/components/Ecosystem.tsx
+++ b/src/components/Ecosystem.tsx
@@ -134,13 +134,13 @@ export default function Ecosystem(): ReactNode {
 
   return (
     <main className="eco-page">
-      <section className="eco-hero">
+      <header className="page-header">
         <h1>The AiiDA ecosystem</h1>
-        <p className="eco-hero-sub">
+        <p className="page-header-sub">
           AiiDA is more than a workflow engine — it's a growing ecosystem of tools, platforms,
           and community plugins that cover the full lifecycle of computational research.
         </p>
-      </section>
+      </header>
 
       {/* Layered architecture diagram */}
       <section className="eco-layers">
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 5e09f7bc..b5778857 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -607,7 +607,7 @@ function PluginShowcase(): ReactNode {
 
   return (
     <section className="plugin-section" data-reveal>
-      <h2>Plugin ecosystem</h2>
+      <h2 className="section-heading">Plugin ecosystem</h2>
       <p className="plugin-subtitle">
         Extend AiiDA with community plugins for your simulation codes.
         Each plugin wraps a code with workflows, parsers, and data types &mdash; all fully tracked in the provenance graph.
@@ -900,7 +900,7 @@ function ProvenanceGraph(): ReactNode {
 
   return (
     <section className="provenance-section" data-reveal>
-      <h2>Full provenance. Full control.</h2>
+      <h2 className="section-heading">Full provenance. Full control.</h2>
       <p className="provenance-subtitle">
         Every input, calculation, and output is tracked automatically &mdash;
         keeping your research findable, traceable, and reusable, by FAIR design.
@@ -3212,7 +3212,7 @@ function Supporters(): ReactNode {
 
   return (
     <section className="supporters-section" data-reveal>
-      <h2>Supported by</h2>
+      <h2 className="section-heading">Supported by</h2>
       <div className="supporters-marquee">
         <div
           className="supporters-track"
@@ -3347,7 +3347,7 @@ function Testimonials(): ReactNode {
   return (
     <section className="testimonials-section" data-reveal>
       <div className="testimonials-header-row">
-        <h2>What researchers say</h2>
+        <h2 className="section-heading section-heading--left">What researchers say</h2>
         <div className="testimonials-nav">
           <button
             className={`news-nav-btn${canScrollLeft ? '' : ' news-nav-btn--disabled'}`}
@@ -3426,7 +3426,7 @@ function LatestNews({items}: {items: NewsItem[]}): ReactNode {
   return (
     <section className="news-section" data-reveal>
       <div className="news-header-row">
-        <h2>Latest news</h2>
+        <h2 className="section-heading section-heading--left">Latest news</h2>
         <div className="news-nav">
           <button
             className={`news-nav-btn${canScrollLeft ? '' : ' news-nav-btn--disabled'}`}
diff --git a/src/layouts/Science.astro b/src/layouts/Science.astro
index c7cbcf18..e1b3f395 100644
--- a/src/layouts/Science.astro
+++ b/src/layouts/Science.astro
@@ -14,9 +14,9 @@ const { frontmatter } = Astro.props;
 
 <Layout title={frontmatter.title} description={frontmatter.description}>
   <main class="section-page">
-    <header class="section-header">
+    <header class="page-header">
       <h1>Science & publications</h1>
-      <p class="section-header-sub">
+      <p class="page-header-sub">
         Research papers powered by AiiDA. If your paper is not listed,
         contact us via <a href="https://aiida.discourse.group/">Discourse</a> with the DOI.
       </p>
diff --git a/src/pages/acknowledgements.astro b/src/pages/acknowledgements.astro
index f39de833..bed00c9d 100644
--- a/src/pages/acknowledgements.astro
+++ b/src/pages/acknowledgements.astro
@@ -26,9 +26,9 @@ const sponsors = [
 
 <Layout title="Acknowledgements — AiiDA" description="Organizations and projects that support AiiDA development.">
   <main class="section-page">
-    <header class="section-header">
+    <header class="page-header">
       <h1>Acknowledgements</h1>
-      <p class="section-header-sub">AiiDA development is supported by these organizations and funding agencies</p>
+      <p class="page-header-sub">AiiDA development is supported by these organizations and funding agencies</p>
     </header>
 
     <div class="sponsors-grid">
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 427bed11..a66c2c97 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -21,9 +21,9 @@ const base = import.meta.env.BASE_URL?.replace(/\/$/, '') || '';
 
 <Layout title="News & updates — AiiDA" description="News, releases, tutorials and community updates from the AiiDA project.">
   <main class="blog-page">
-    <header class="blog-header">
+    <header class="page-header">
       <h1>News & updates</h1>
-      <p class="blog-header-sub">Releases, tutorials, events and community updates from the AiiDA project</p>
+      <p class="page-header-sub">Releases, tutorials, events and community updates from the AiiDA project</p>
     </header>
 
     <div class="blog-filters" id="blog-filters">
diff --git a/src/pages/events.astro b/src/pages/events.astro
index fee2eb4b..3e5c3a4a 100644
--- a/src/pages/events.astro
+++ b/src/pages/events.astro
@@ -34,9 +34,9 @@ const years = [...new Set(events.map(e => e.year))].sort((a, b) => b - a);
 
 <Layout title="Events — AiiDA" description="Tutorials, workshops, coding weeks and other AiiDA events.">
   <main class="section-page">
-    <header class="section-header">
+    <header class="page-header">
       <h1>Events</h1>
-      <p class="section-header-sub">Tutorials, workshops, coding weeks and other AiiDA community events</p>
+      <p class="page-header-sub">Tutorials, workshops, coding weeks and other AiiDA community events</p>
     </header>
 
     <div class="events-timeline">
diff --git a/src/pages/graph_gallery.astro b/src/pages/graph_gallery.astro
index 41a298bb..cedbe83c 100644
--- a/src/pages/graph_gallery.astro
+++ b/src/pages/graph_gallery.astro
@@ -34,9 +34,9 @@ const graphs = [
 
 <Layout title="Graph gallery — AiiDA" description="Gallery of AiiDA provenance graphs from real research projects.">
   <main class="section-page">
-    <header class="section-header">
+    <header class="page-header">
       <h1>Graph gallery</h1>
-      <p class="section-header-sub">Provenance graphs from real AiiDA-powered research projects</p>
+      <p class="page-header-sub">Provenance graphs from real AiiDA-powered research projects</p>
     </header>
 
     <div class="gallery-grid">
diff --git a/src/pages/plugin-registry/index.astro b/src/pages/plugin-registry/index.astro
index bb008a86..643a3043 100644
--- a/src/pages/plugin-registry/index.astro
+++ b/src/pages/plugin-registry/index.astro
@@ -15,16 +15,16 @@ const totalPackages = Object.keys(plugins).length;
   description={`Browse the official AiiDA plugin registry — ${totalPackages} community plugins for simulation codes, data types, schedulers, and workflows.`}
 >
   <main class="reg-page">
-    <section class="reg-hero">
+    <header class="page-header">
       <h1>Plugin registry</h1>
-      <p class="reg-hero-sub">
+      <p class="page-header-sub">
         Community plugins extending AiiDA — simulation codes, data types,
         schedulers, transports, and workflows. Register your plugin{' '}
         <a href="https://github.com/aiidateam/aiida-registry" target="_blank" rel="noopener noreferrer">
           here
         </a>
       </p>
-    </section>
+    </header>
 
     <section class="reg-summary" aria-label="Plugin summary">
       <p class="reg-summary-title">Registered plugin packages: {totalPackages}</p>
diff --git a/src/pages/team.astro b/src/pages/team.astro
index c11066b2..a85dba95 100644
--- a/src/pages/team.astro
+++ b/src/pages/team.astro
@@ -47,9 +47,9 @@ const formerMembers = [
 
 <Layout title="Team — AiiDA" description="Meet the AiiDA development team and contributors.">
   <main class="section-page">
-    <header class="section-header">
+    <header class="page-header">
       <h1>Team</h1>
-      <p class="section-header-sub">Meet the people behind AiiDA.</p>
+      <p class="page-header-sub">Meet the people behind AiiDA.</p>
     </header>
 
     <h2 style="font-size:1.3rem;font-weight:700;margin-bottom:1rem;">The AiiDA development team (alphabetical order)</h2>
diff --git a/src/pages/testimonials.astro b/src/pages/testimonials.astro
index c752b3d1..058c412d 100644
--- a/src/pages/testimonials.astro
+++ b/src/pages/testimonials.astro
@@ -61,9 +61,9 @@ function renderInline(s: string): string {
 
 <Layout title="Testimonials — AiiDA" description="What researchers say about AiiDA: testimonials and literature references.">
   <main class="section-page">
-    <header class="section-header">
+    <header class="page-header">
       <h1>Testimonials</h1>
-      <p class="section-header-sub">
+      <p class="page-header-sub">
         Just a few voices from the AiiDA community — short success stories
         and reflections from researchers who use AiiDA in their everyday work.
         For the full list of scientific papers powered by AiiDA, see the
diff --git a/src/pages/use-cases.astro b/src/pages/use-cases.astro
index b91e71b6..e8d40360 100644
--- a/src/pages/use-cases.astro
+++ b/src/pages/use-cases.astro
@@ -59,9 +59,9 @@ const useCases = [
   description="How researchers use AiiDA — from high-throughput materials screening to autonomous laboratory experiments."
 >
   <main class="section-page usecases-page">
-    <header class="section-header">
+    <header class="page-header">
       <h1>Use cases</h1>
-      <p class="section-header-sub">
+      <p class="page-header-sub">
         From large-scale computational screening to autonomous laboratory
         experiments — a look at what researchers build with AiiDA.
       </p>
diff --git a/src/styles/blog.css b/src/styles/blog.css
index b7b605b7..1a95c912 100644
--- a/src/styles/blog.css
+++ b/src/styles/blog.css
@@ -6,23 +6,6 @@
   padding: 0 2rem 4rem;
 }
 
-.blog-header {
-  text-align: center;
-  padding: 3rem 0 1.5rem;
-}
-
-.blog-header h1 {
-  font-size: 2.4rem;
-  font-weight: 800;
-  margin: 0 0 0.5rem;
-}
-
-.blog-header-sub {
-  font-size: 1.05rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
 /* --- Filters --- */
 
 .blog-filters {
@@ -306,10 +289,6 @@
 }
 
 @media (max-width: 600px) {
-  .blog-header h1 {
-    font-size: 1.8rem;
-  }
-
   .blog-post-header h1 {
     font-size: 1.5rem;
   }
diff --git a/src/styles/cite.css b/src/styles/cite.css
index 285b47ca..4f45ff76 100644
--- a/src/styles/cite.css
+++ b/src/styles/cite.css
@@ -2,8 +2,6 @@
 
 .cite-section {
   padding: 4rem 2rem;
-  background: var(--color-bg-tinted);
-  border-top: 1px solid var(--color-border-light);
 }
 
 .cite-panel {
@@ -24,7 +22,9 @@
   margin-bottom: 2rem;
 }
 
-.cite-header h2 {
+/* Panel variant (e.g. acknowledgements) keeps its own compact heading; the
+   landing section variant uses the shared .section-heading treatment. */
+.cite-panel .cite-header h2 {
   font-size: 1.875rem;
   margin: 0 0 0.5rem;
   color: var(--color-heading-accent);
@@ -179,7 +179,7 @@
   .cite-panel {
     padding: 2rem 1.25rem;
   }
-  .cite-header h2 {
+  .cite-panel .cite-header h2 {
     font-size: 1.5rem;
   }
 }
diff --git a/src/styles/docs.css b/src/styles/docs.css
index 55b6591e..90d92b33 100644
--- a/src/styles/docs.css
+++ b/src/styles/docs.css
@@ -6,27 +6,6 @@
   padding: 0 2rem 4rem;
 }
 
-/* --- Hero --- */
-
-.docs-hero {
-  text-align: center;
-  padding: 3rem 0 1rem;
-}
-
-.docs-hero h1 {
-  font-size: 2.4rem;
-  font-weight: 800;
-  margin: 0 0 0.75rem;
-}
-
-.docs-hero-sub {
-  font-size: 1.1rem;
-  color: var(--color-text-secondary);
-  max-width: 540px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
 /* --- Featured card --- */
 
 .docs-featured {
@@ -295,14 +274,6 @@
 }
 
 @media (max-width: 600px) {
-  .docs-hero h1 {
-    font-size: 1.8rem;
-  }
-
-  .docs-hero-sub {
-    font-size: 0.95rem;
-  }
-
   .docs-grid {
     grid-template-columns: 1fr;
   }
diff --git a/src/styles/ecosystem.css b/src/styles/ecosystem.css
index 53945685..fe55fa75 100644
--- a/src/styles/ecosystem.css
+++ b/src/styles/ecosystem.css
@@ -6,27 +6,6 @@
   padding: 0 2rem 4rem;
 }
 
-/* --- Hero --- */
-
-.eco-hero {
-  text-align: center;
-  padding: 3rem 0 1rem;
-}
-
-.eco-hero h1 {
-  font-size: 2.4rem;
-  font-weight: 800;
-  margin: 0 0 0.75rem;
-}
-
-.eco-hero-sub {
-  font-size: 1.1rem;
-  color: var(--color-text-secondary);
-  max-width: 640px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
 /* --- Layered diagram --- */
 
 .eco-layers {
@@ -439,14 +418,6 @@
     padding: 0 1rem 3rem;
   }
 
-  .eco-hero h1 {
-    font-size: 1.8rem;
-  }
-
-  .eco-hero-sub {
-    font-size: 0.95rem;
-  }
-
   .eco-grid {
     grid-template-columns: 1fr;
   }
diff --git a/src/styles/global.css b/src/styles/global.css
index 0c8a1389..094037ac 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -571,3 +571,46 @@ a:hover .navbar-ext-icon {
       transform 0ms;
   }
 }
+
+/* ===== SHARED PAGE HEADER ===== */
+/* One header primitive for every sub-page (ecosystem, docs, blog, plugin
+   registry, team, events, …). Keep the markup as <header class="page-header">
+   for consistency across the app. */
+
+.page-header {
+  text-align: center;
+  padding: 3rem 0 1.5rem;
+}
+
+.page-header h1 {
+  font-size: 2.4rem;
+  font-weight: 800;
+  margin: 0 0 0.6rem;
+}
+
+.page-header-sub {
+  font-size: 1.05rem;
+  color: var(--color-text-secondary);
+  max-width: 640px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.page-header-sub a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.page-header-sub a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .page-header h1 {
+    font-size: 1.8rem;
+  }
+
+  .page-header-sub {
+    font-size: 0.95rem;
+  }
+}
diff --git a/src/styles/landing.css b/src/styles/landing.css
index 28c6f872..a82040ef 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -1,11 +1,18 @@
-/* ===== DESIGN SYSTEM — Section heading accents ===== */
-/* Every section h2 gets a short colored bar underneath */
-main > section > h2 {
+/* ===== DESIGN SYSTEM — Section headings ===== */
+/* One heading treatment for every landing section: same size, weight and
+   colour, with a single accent bar. Use .section-heading--left for headings
+   that sit in a row beside carousel controls (news, testimonials). */
+.section-heading {
   position: relative;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-text);
+  text-align: center;
+  margin: 0 0 0.75rem;
   padding-bottom: 0.75rem;
 }
 
-main > section > h2::after {
+.section-heading::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -17,24 +24,16 @@ main > section > h2::after {
   background: var(--color-primary);
 }
 
-/* Rotate heading accents through all three AiiDA brand colors */
-.provenance-section h2::after {
-  background: var(--color-accent-orange);
-}
-.plugin-section h2::after {
-  background: var(--color-accent-green);
-}
-.news-section h2::after {
-  background: var(--color-primary);
-}
-.testimonials-section h2::after {
-  background: var(--color-accent-orange);
-}
-.supporters-section h2::after {
-  background: var(--color-accent-green);
+/* Headings that share a flex row with carousel controls: left-aligned, and
+   the row's own margin handles the spacing below. */
+.section-heading--left {
+  text-align: left;
+  margin: 0;
 }
-.cta-section h2::after {
-  background: rgba(255, 255, 255, 0.6);
+
+.section-heading--left::after {
+  left: 0;
+  transform: none;
 }
 
 /* ===== HERO ===== */
@@ -690,12 +689,6 @@ main > section > h2::after {
   margin: 0 auto;
 }
 
-.plugin-section h2 {
-  text-align: center;
-  font-size: 2rem;
-  margin-bottom: 0.75rem;
-}
-
 .plugin-subtitle {
   text-align: center;
   color: var(--color-text-secondary);
@@ -1055,12 +1048,6 @@ main > section > h2::after {
   padding: 3rem 2rem;
 }
 
-.provenance-section h2 {
-  text-align: center;
-  font-size: 2.5rem;
-  margin-bottom: 0.75rem;
-}
-
 .provenance-subtitle {
   text-align: center;
   color: var(--color-text-secondary);
@@ -1972,12 +1959,6 @@ main > section > h2::after {
   margin-right: auto;
 }
 
-.news-section h2 {
-  font-size: 1.8rem;
-  font-weight: 700;
-  margin: 0;
-}
-
 /* Navigation arrows */
 .news-nav {
   display: flex;
@@ -2275,15 +2256,6 @@ main > section > h2::after {
   overflow: hidden;
 }
 
-.supporters-section h2 {
-  font-size: 1.25rem;
-  margin-bottom: 2rem;
-  color: var(--color-heading-accent);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
 .supporters-marquee {
   position: relative;
   max-width: 1300px;
@@ -2385,12 +2357,6 @@ main > section > h2::after {
   margin-right: auto;
 }
 
-.testimonials-section h2 {
-  font-size: 1.8rem;
-  font-weight: 700;
-  margin: 0;
-}
-
 .testimonials-nav {
   display: flex;
   gap: 0.5rem;
diff --git a/src/styles/pages.css b/src/styles/pages.css
index 549609e9..3fa08c20 100644
--- a/src/styles/pages.css
+++ b/src/styles/pages.css
@@ -6,26 +6,6 @@
   padding: 0 2rem 4rem;
 }
 
-.section-header {
-  text-align: center;
-  padding: 3rem 0 2rem;
-}
-
-.section-header h1 {
-  font-size: 2.4rem;
-  font-weight: 800;
-  margin: 0 0 0.5rem;
-}
-
-.section-header-sub {
-  font-size: 1.05rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-  max-width: 640px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
 /* ===== TEAM PAGE ===== */
 
 .team-intro {
@@ -636,10 +616,6 @@
 /* ===== RESPONSIVE ===== */
 
 @media (max-width: 600px) {
-  .section-header h1 {
-    font-size: 1.8rem;
-  }
-
   .team-grid {
     grid-template-columns: repeat(2, 1fr);
   }
diff --git a/src/styles/registry.css b/src/styles/registry.css
index 15ccb5e5..2accb034 100644
--- a/src/styles/registry.css
+++ b/src/styles/registry.css
@@ -14,36 +14,6 @@
   padding: 0 2rem 4rem;
 }
 
-/* --- Hero --- */
-
-.reg-hero {
-  text-align: center;
-  padding: 3rem 0 1.25rem;
-}
-
-.reg-hero h1 {
-  font-size: 2.4rem;
-  font-weight: 800;
-  margin: 0 0 0.6rem;
-}
-
-.reg-hero-sub {
-  font-size: 1.05rem;
-  color: var(--color-text-secondary);
-  max-width: 720px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
-.reg-hero-sub a {
-  color: var(--color-primary);
-  text-decoration: none;
-}
-
-.reg-hero-sub a:hover {
-  text-decoration: underline;
-}
-
 /* --- Global summary badges --- */
 
 .reg-summary {