Headings: highlight one red word per h1/h2 for energy

Add global .highlight CSS class (accent-red). Apply to one word in
every h1 and major h2 across all pages.

Author: MMesch

src/css/custom.css

@@ -281,6 +281,11 @@ ul {
   color: white;
 }
 
+/* Single-word red accent inside headings for energy */
+.highlight {
+  color: var(--ifm-color-accent-red);
+}
+
 /* Punchy blue tagline used in page header sections */
 .page-tagline {
   color: var(--ifm-color-blue-jupyter);

src/pages/about/index.tsx

@@ -26,7 +26,7 @@ export function AboutContent() {
   return (
     <>
       <Section pageTop fullHeight bg="yellow">
-        <h1>About QuantStack</h1>
+        <h1>About <span className="highlight">QuantStack</span></h1>
         <p className="page-tagline">~30 engineers and researchers building the infrastructure of modern science.</p>
         <p>Founded in Paris in 2016. JupyterLab, Mamba, JupyterLite, emscripten-forge — tools reaching millions daily. Our founder received the ACM Software System Award, given to the same cohort as the creators of Unix, Java, and the World Wide Web.</p>
         <div style={{ display: "flex", gap: "var(--ifm-spacing-xl)", alignItems: "center", flexWrap: "wrap" }}>
@@ -35,7 +35,7 @@ export function AboutContent() {
         </div>
       </Section>
       <Section bg="light-blue">
-        <h2>Our values</h2>
+        <h2>Our <span className="highlight">values</span></h2>
         <CardGrid cols={4}>
           {valuesDetails.map((value, index) => (
             <li key={index}>
@@ -53,7 +53,7 @@ export function AboutContent() {
         </CardGrid>
       </Section>
       <Section>
-        <h2>Meet the QuantStack team</h2>
+        <h2>Meet the QuantStack <span className="highlight">team</span></h2>
         <div className={styles.team_description}>
           Most of us have PhDs or deep research backgrounds. We operate as a collective of principal contributors — everyone on the team ships code to the projects we maintain. No passengers.
         </div>

src/pages/blog.tsx

@@ -11,7 +11,7 @@ export default function BlogPage(): JSX.Element {
   return (
     <Layout>
       <Section pageTop fullHeight bg="yellow">
-        <h1>Featured posts by QuantStack contributors</h1>
+        <h1>Featured posts by <span className="highlight">QuantStack</span> contributors</h1>
         <p className="page-tagline">From the maintainers, at the source.</p>
         <p>
           Technical deep-dives, release notes, and perspectives from the people who wrote the code. Read about the decisions, trade-offs, and discoveries that go into the tools powering modern science. From Mamba's solver design to JupyterLab's real-time collaboration protocol — these posts come from the engineers who made the calls.

src/pages/careers.tsx

@@ -57,7 +57,7 @@ function CareersContent() {
   return (
     <>
       <Section pageTop fullHeight bg="yellow">
-        <h1>Join the QuantStack team.</h1>
+        <h1><span className="highlight">Join</span> the QuantStack team.</h1>
         <p className="page-tagline">Your code will reach millions. Your contributions go upstream.</p>
         <p>We are ~30 researchers and engineers building the infrastructure of scientific computing. This is not a support role — it's a principal contributor role from day one. Most of us have PhDs or deep research backgrounds, and every one of us ships code upstream.</p>
         <div style={{ display: "flex", gap: "var(--ifm-spacing-xl)", alignItems: "center", flexWrap: "wrap" }}>
@@ -77,7 +77,7 @@ function CareersContent() {
             We're looking for researchers and engineers who want to work at the frontier of open-source scientific computing. If you have strong fundamentals, a taste for hard problems, and care deeply about the impact of your work — we'd like to meet you.
           </div>
           <div className={styles.interviews_container}>
-            <h2>Working at QuantStack</h2>
+            <h2>Working at <span className="highlight">QuantStack</span></h2>
             <div className="container">
               <ul className={`row flex-full-centered`} style={{ listStyle: "none" }}>
                 {interviews.map((person) => (

src/pages/index.tsx

@@ -54,15 +54,15 @@ function HomeContent() {
 
       {/* ── Trusted By ────────────────────────────────────────────────────── */}
       <Section fullHeight>
-        <h2 className="text--center">Trusted by</h2>
+        <h2 className="text--center">Trusted <span className="highlight">by</span></h2>
         <LogoGrid />
       </Section>
 
       <SectionSeparator variant={2} />
 
       {/* ── How we work with you (services) ───────────────────────────────── */}
       <Section fullHeight>
-        <h2 className="text--center">How we work with you</h2>
+        <h2 className="text--center">How we work with <span className="highlight">you</span></h2>
         <CardGrid cols={3}>
           <li>
             <Card bg="transparent" className={styles.topics_card}>
@@ -97,7 +97,7 @@ function HomeContent() {
       {/* ── What we work on (projects) ────────────────────────────────────── */}
       <div className={styles.projects_overview_container}>
         <Section>
-          <h2 className="text--center">What we work on</h2>
+          <h2 className="text--center">What we <span className="highlight">work</span> on</h2>
         </Section>
 
         <SplitSection image={<img src={JupyterPictureUrl} alt="JupyterLab interfaces" style={{ maxWidth: "100%" }} />}>
@@ -158,7 +158,7 @@ function HomeContent() {
 
       {/* ── About us ──────────────────────────────────────────────────────── */}
       <Section fullHeight>
-        <h2 className="text--center">About us</h2>
+        <h2 className="text--center">About <span className="highlight">us</span></h2>
         <div className="flex-full-centered">
           <img
             src={GroupPhotoUrl}
@@ -183,7 +183,7 @@ function HomeContent() {
       {/* ── Recent blog posts ─────────────────────────────────────────────── */}
       <div className={styles.news_wrapper}>
         <Section fullHeight>
-          <h2 className="text--center">Recent blog contributions</h2>
+          <h2 className="text--center">Recent blog <span className="highlight">contributions</span></h2>
           <CardGrid cols={3}>
             {[0, 1, 2].map((i) => (
               <li key={i}>

src/pages/projects.tsx

@@ -21,7 +21,7 @@ function ProjectsContent() {
     <>
       {/* ── Header ────────────────────────────────────────────────────────── */}
       <Section pageTop fullHeight bg="white">
-        <h1>Working in the open.</h1>
+        <h1>Working in the <span className="highlight">open</span>.</h1>
         <p className="page-tagline">Tools reaching millions of researchers, engineers, and students worldwide.</p>
         <p className={styles.header_text}>
           From interactive environments to package managers to data formats — we build in the open
@@ -37,7 +37,7 @@ function ProjectsContent() {
 
       {/* ── Project list ──────────────────────────────────────────────────── */}
       <Section spacing="tight" bg="light-grey">
-        <h2 className="text--center">What we build and maintain</h2>
+        <h2 className="text--center">What we <span className="highlight">build</span> and maintain</h2>
       </Section>
 
       {/* ── Jupyter ───────────────────────────────────────────────────────── */}

src/pages/services.tsx

@@ -17,7 +17,7 @@ function ServicesContent() {
     <>
       {/* ── Header ────────────────────────────────────────────────────────── */}
       <Section pageTop fullHeight bg="yellow">
-        <h1>Hire the team that built the tools you depend on.</h1>
+        <h1>Hire the team that <span className="highlight">built</span> the tools you depend on.</h1>
         <p className="page-tagline">Direct access to the upstream maintainers — not a helpdesk.</p>
         <p>
           Bloomberg, AWS, Safran, ESA, and the Gates Foundation work with us because there is
@@ -43,7 +43,7 @@ function ServicesContent() {
           />
         }
       >
-        <h2>Support Retainer</h2>
+        <h2><span className="highlight">Support</span> Retainer</h2>
         <p>
           A QuantStack support retainer gives you direct access to the upstream maintainers —
           not a helpdesk. We triage issues, review pull requests, advise on architecture, and
@@ -67,7 +67,7 @@ function ServicesContent() {
           />
         }
       >
-        <h2>Custom Engineering</h2>
+        <h2><span className="highlight">Custom</span> Engineering</h2>
         <p>
           We take on custom engineering projects that push the boundaries of what open-source
           can do.
@@ -93,7 +93,7 @@ function ServicesContent() {
           />
         }
       >
-        <h2>Funded Development</h2>
+        <h2><span className="highlight">Funded</span> Development</h2>
         <p>
           Need a specific fix or feature in Mamba, JupyterLab, Arrow, or another project we
           maintain? We implement it upstream.

src/pages/sponsor.tsx

@@ -12,7 +12,7 @@ export function FundableContent() {
   return (
     <>
       <Section pageTop fullHeight bg="yellow">
-        <h1>Sponsor open-source work</h1>
+        <h1>Sponsor <span className="highlight">open-source</span> work</h1>
         <p className="page-tagline">Back the features the scientific community needs.</p>
         <p>High-demand open-source features with detailed plans already in place — the work is scoped, the need is proven, only funding is missing. Sponsoring through QuantStack means your investment lands upstream and benefits the entire ecosystem. Back a project and get it shipped.</p>
         <div style={{ display: "flex", gap: "var(--ifm-spacing-xl)", alignItems: "center", flexWrap: "wrap" }}>