aiidateam · khsrali · Jul 3, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   }