Introduce light-blue/light-grey section bg colors; remove separators

Add --ifm-bg-light-blue and --ifm-bg-light-grey CSS vars + Section/
SplitSection support. Projects page: alternating bg replaces separators.
About page: values section uses light-blue with transparent cards.

Author: MMesch

src/components/layout/Section.tsx

@@ -3,7 +3,7 @@ import styles from "./styles.module.css";
 import type { ReactNode } from "react";
 
 type Props = {
-  bg?: "white" | "yellow" | "dark";
+  bg?: "white" | "yellow" | "dark" | "light-blue" | "light-grey";
   spacing?: "normal" | "tight" | "loose";
   pageTop?: boolean;
   fullHeight?: boolean;
@@ -26,7 +26,7 @@ export default function Section({
       data-section-bg={bg}
       className={clsx(
         styles.section,
-        styles[`section_${bg}`],
+        styles[`section_${bg.replace("-", "_")}`],
         spacing !== "normal" && styles[`section_${spacing}`],
         pageTop && styles.section_page_top,
         fullHeight && styles.section_full_height,

src/components/layout/SplitSection.tsx

@@ -7,7 +7,7 @@ type Props = {
   image: ReactNode;
   reverse?: boolean;
   ratio?: "60/40" | "50/50";
-  bg?: "white" | "yellow" | "dark";
+  bg?: "white" | "yellow" | "dark" | "light-blue" | "light-grey";
   spacing?: "normal" | "tight" | "loose";
   pageTop?: boolean;
   fullHeight?: boolean;

src/components/layout/styles.module.css

@@ -37,6 +37,14 @@
   color: white;
 }
 
+.section_light_blue {
+  background: var(--ifm-bg-light-blue);
+}
+
+.section_light_grey {
+  background: var(--ifm-bg-light-grey);
+}
+
 .section_tight {
   padding: var(--ifm-spacing-2xl) 0;
 }

src/css/custom.css

@@ -42,6 +42,8 @@
   --ifm-bg-neutral: #ffffff;                         /* default reading surface */
   --ifm-bg-brand: #ffffff;                           /* yellow dropped — white throughout */
   --ifm-bg-emphasis: var(--ifm-color-secondary-s2);  /* CTA / strong contrast — navy */
+  --ifm-bg-light-blue: #edf2fb;                      /* subtle blue tint — section alternation */
+  --ifm-bg-light-grey: #f5f5f3;                      /* neutral grey — section alternation */
 
 
   /* footer */

src/pages/about/index.tsx

@@ -9,7 +9,6 @@ import Section from "@site/src/components/layout/Section";
 import Banner from "@site/src/components/layout/Banner";
 import CardGrid from "@site/src/components/layout/CardGrid";
 import Card from "@site/src/components/layout/Card";
-import SectionSeparator from "@site/src/components/layout/SectionSeparator";
 import LinkToContact from "@site/src/components/LinkToContact";
 import ScrollDownCTA from "@site/src/components/layout/ScrollDownCTA";
 
@@ -35,13 +34,12 @@ export function AboutContent() {
           <ScrollDownCTA />
         </div>
       </Section>
-      <SectionSeparator variant={4} />
-      <Section>
+      <Section bg="light-blue">
         <h2>Our values</h2>
         <CardGrid cols={4}>
           {valuesDetails.map((value, index) => (
             <li key={index}>
-              <Card className={styles.value_card}>
+              <Card bg="transparent" className={styles.value_card}>
                 <div className={styles.value_icon}>
                   <value.pictureComponent alt={value.alt} />
                 </div>
@@ -54,7 +52,6 @@ export function AboutContent() {
           ))}
         </CardGrid>
       </Section>
-      <SectionSeparator variant={5} />
       <Section>
         <h2>Meet the QuantStack team</h2>
         <div className={styles.team_description}>

src/pages/projects.tsx

@@ -20,7 +20,7 @@ function ProjectsContent() {
   return (
     <>
       {/* ── Header ────────────────────────────────────────────────────────── */}
-      <Section pageTop fullHeight bg="yellow">
+      <Section pageTop fullHeight bg="white">
         <h1>Working in the open.</h1>
         <p className="page-tagline">Tools reaching millions of researchers, engineers, and students worldwide.</p>
         <p className={styles.header_text}>
@@ -35,16 +35,14 @@ function ProjectsContent() {
         </div>
       </Section>
 
-      <SectionSeparator variant={1} />
-
       {/* ── Project list ──────────────────────────────────────────────────── */}
-      <Section spacing="tight">
+      <Section spacing="tight" bg="light-grey">
         <h2 className="text--center">What we build and maintain</h2>
       </Section>
 
       {/* ── Jupyter ───────────────────────────────────────────────────────── */}
       <SplitSection
-        bg="white"
+        bg="light-blue"
         ratio="60/40"
         image={
           <div className={`${styles.project_picture} ${styles.project_picture_jupyter}`}>
@@ -61,7 +59,7 @@ function ProjectsContent() {
 
       {/* ── Mamba ─────────────────────────────────────────────────────────── */}
       <SplitSection
-        bg="white"
+        bg="light-grey"
         ratio="60/40"
         reverse
         image={
@@ -79,7 +77,7 @@ function ProjectsContent() {
 
       {/* ── Conda-forge ───────────────────────────────────────────────────── */}
       <SplitSection
-        bg="white"
+        bg="light-blue"
         ratio="60/40"
         image={
           <div className={`${styles.project_picture} ${styles.project_picture_condaforge}`}>
@@ -96,7 +94,7 @@ function ProjectsContent() {
 
       {/* ── Apache Arrow & Parquet ────────────────────────────────────────── */}
       <SplitSection
-        bg="white"
+        bg="light-grey"
         ratio="60/40"
         reverse
         image={
@@ -114,7 +112,7 @@ function ProjectsContent() {
 
       {/* ── Xtensor & Xsimd ──────────────────────────────────────────────── */}
       <SplitSection
-        bg="white"
+        bg="light-blue"
         ratio="60/40"
         image={
           <div className={`${styles.project_picture} ${styles.project_picture_xtensor}`}>
@@ -131,7 +129,7 @@ function ProjectsContent() {
 
       {/* ── Robotics ──────────────────────────────────────────────────────── */}
       <SplitSection
-        bg="white"
+        bg="light-grey"
         ratio="60/40"
         reverse
         image={