Add featured-text with-image variant, colored poster slider, and fix slider init

- featured-text: add .with-image variant (20rem image + peach gradient via inline CSS vars)
- poster-slider: add .colored variant (blue bg + pink color via inline CSS vars), center titles always, switch buttons to mask-image for CSS color theming, refactor JS to support multiple independent sliders with initialSlide derived from actual slide count

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/src/sections/_featured-text.scss

@@ -18,6 +18,7 @@ main > section.featured-text {
     font-size: 2.1875rem;
     text-align: center;
     width: min(60rem, 90vw);
+    margin: 1.5rem 0;
   }
 
   &.colored {
@@ -31,4 +32,20 @@ main > section.featured-text {
     font-weight: 470;
     font-stretch: 110%;
   }
+
+  &.with-image {
+    height: auto;
+    padding: 4rem 0;
+
+    figure {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    figure img {
+      height: 40rem;
+      margin-bottom: 1rem;
+    }
+  }
 }

assets/css/src/sections/_poster-slider.scss

@@ -1,11 +1,17 @@
 section.poster-slider {
   padding: calc(var(--space-body) * 2) 0;
 
+  &.colored {
+    background: var(--background);
+    color: var(--color);
+  }
+
   .poster-slider__title {
     font-family: 'Special Gothic', sans-serif;
     font-size: 2.1875rem;
     font-stretch: 75%;
     font-weight: 700;
+    text-align: center;
     padding: 0 var(--space-body);
     margin-bottom: 3rem;
   }
@@ -61,6 +67,18 @@ section.poster-slider {
       }
     }
 
+    button {
+      .btn-icon {
+        display: block;
+        width: 46px;
+        height: 43px;
+        mask-image: url('../../images/slider-button.svg');
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        background-color: var(--color, #000);
+      }
+    }
+
     button.poster-next {
       transform: rotate(180deg);
     }

assets/css/style.css

@@ -171,6 +171,7 @@ main > section.featured-text .main {
   font-size: 2.1875rem;
   text-align: center;
   width: min(60rem, 90vw);
+  margin: 1.5rem 0;
 }
 main > section.featured-text.colored {
   background: var(--background);
@@ -182,6 +183,19 @@ main > section.featured-text figcaption {
   font-weight: 470;
   font-stretch: 110%;
 }
+main > section.featured-text.with-image {
+  height: auto;
+  padding: 4rem 0;
+}
+main > section.featured-text.with-image figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+main > section.featured-text.with-image figure img {
+  height: 40rem;
+  margin-bottom: 1rem;
+}
 
 main > section.two-columns {
   position: relative;
@@ -333,11 +347,16 @@ section.timeline .controls button:last-child {
 section.poster-slider {
   padding: calc(var(--space-body) * 2) 0;
 }
+section.poster-slider.colored {
+  background: var(--background);
+  color: var(--color);
+}
 section.poster-slider .poster-slider__title {
   font-family: "Special Gothic", sans-serif;
   font-size: 2.1875rem;
   font-stretch: 75%;
   font-weight: 700;
+  text-align: center;
   padding: 0 var(--space-body);
   margin-bottom: 3rem;
 }
@@ -386,6 +405,18 @@ section.poster-slider .controls .slide-info .caption {
   font-stretch: 110%;
   font-weight: 470;
 }
+section.poster-slider .controls button .btn-icon {
+  display: block;
+  width: 46px;
+  height: 43px;
+  -webkit-mask-image: url("../../images/slider-button.svg");
+          mask-image: url("../../images/slider-button.svg");
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  background-color: var(--color, #000);
+}
 section.poster-slider .controls button.poster-next {
   transform: rotate(180deg);
 }/*# sourceMappingURL=style.css.map */

assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_header.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss","src/sections/_poster-slider.scss"],"names":[],"mappings":"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","file":"style.css"}
+{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_header.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss","src/sections/_poster-slider.scss"],"names":[],"mappings":"AAAA;EACE,6BAAA;EACA,gFAAA;EACA,oBAAA;EACA,sBAAA;EACA,kBAAA;ACCF;ADEA;EACE,8BAAA;EACA,+DAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACAF;ACbA;EACE,YAAA;EACA,6BAAA;EACA,UAAA;ADeF;;ACZA;;;;;;;;;;;;;;EAcE,SAAA;EACA,UAAA;ADeF;;ACZA;EACE,qBAAA;ADeF;;ACZA;EACE,WAAA;EACA,YAAA;EACA,sBAAA;KAAA,mBAAA;ADeF;;AE9CA;EACE,kBAAA;EACA,sCAAA;EACA,sBAAA;EACA,qBAAA;EACA,uBAAA;EACA,oCAAA;AFiDF;;AGvDA;EACE,eAAA;AH0DF;;AGvDA;EACE,yCAAA;AH0DF;;AGvDA;EACE,cAAA;AH0DF;;AGvDA;;EAEE,WAAA;EACA,YAAA;AH0DF;;AGvDA;EACE,kBAAA;EACA,gBAAA;EACA,iBAAA;AH0DF;;AGvDA;EACE,kBAAA;EACA,gBAAA;AH0DF;;AIpFA;EACE,kBAAA;EACA,UAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,4BAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,sBAAA;EACA,WAAA;AJuFF;AIpFI;EACE,qBAAA;AJsFN;AIlFE;EACE,cAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;AJoFJ;AIlFI;;;EAGE,cAAA;EACA,WAAA;EACA,WAAA;EACA,sBAAA;AJoFN;AIhFM;EAEE,OAAA;EACA,kBAAA;EACA,WAAA;AJiFR;AI9EM;EACE,WAAA;AJgFR;AI9EM;EACE,WAAA;AJgFR;;AKjIA;EACE,aAAA;EACA,gDAAA;EACA,4BAAA;EACA,sBAAA;EAEA,aAAA;EACA,qBAAA;ALmIF;AKjIE;EACE,cAAA;EACA,4BAAA;ALmIJ;AKlII;EACE,oBAAA;EACA,kBAAA;ALoIN;AKlII;EACE,kBAAA;EACA,iBAAA;EACA,gBAAA;ALoIN;;AMvJA;EACE,YAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;AN0JF;AMxJE;EACE,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,qBAAA;AN0JJ;AMvJE;EACE,wDAAA;EACA,oBAAA;EACA,kBAAA;EACA,uBAAA;EACA,gBAAA;ANyJJ;AMtJE;EACE,6BAAA;EACA,mBAAA;ANwJJ;AMrJE;EACE,yCAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;ANuJJ;AMpJE;EACE,YAAA;EACA,eAAA;ANsJJ;AMpJI;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;ANsJN;AMnJI;EACE,aAAA;EACA,mBAAA;ANqJN;;AOpMA;EACE,kBAAA;EACA,aAAA;EACA,qCAAA;EACA,qBAAA;OAAA,gBAAA;EACA,cAAA;APuMF;AOrME;EACE,gBAAA;APuMJ;AOrMI;EACE,WAAA;EACA,YAAA;APuMN;AOpMI;EACE,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,YAAA;EACA,gCAAA;APsMN;AOpMM;EACE,WAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;APsMR;AOpMQ;EACE,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;APsMV;AOnMQ;EACE,mBAAA;APqMV;AOlMQ;EACE,sBAAA;EACA,WAAA;EACA,iBAAA;APoMV;AOjMQ;EACE,sBAAA;EACA,sBAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,sBAAA;EACA,mBAAA;EAEA,kBAAA;EACA,gBAAA;EACA,gCAAA;APkMV;AO/LQ;EACE,qCAAA;EACA,wBAAA;APiMV;AO7LU;EACE,2BAAA;EACA,oBAAA;AP+LZ;AO1LM;EACE,8BAAA;AP4LR;AO1LM;EACE,+BAAA;AP4LR;AOxLI;EACE,aAAA;AP0LN;;AQ3QA;EACE,+BAAA;EACA,aAAA;EACA,8BAAA;EACA,qBAAA;OAAA,gBAAA;AR8QF;AQ5QE;EACE,aAAA;EACA,sBAAA;EACA,8BAAA;AR8QJ;;ASvRA;EACE,8DAAA;EACA,sDAAA;EACA,kBAAA;AT0RF;ASxRE;EACE,aAAA;AT0RJ;ASxRI;EACE,aAAA;EACA,8BAAA;EACA,kBAAA;EACA,gBAAA;AT0RN;ASxRM;EACE,WAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,qCAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;AT0RR;ASvRM;EACE,yCAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EAEA,iBAAA;EACA,0BAAA;ATwRR;ASrRM;EACE,aAAA;EACA,8BAAA;EACA,SAAA;EACA,2BAAA;EACA,oBAAA;EACA,sBAAA;ATuRR;ASrRQ;EACE,YAAA;ATuRV;AStRU;EACE,yBAAA;EACA,gBAAA;EACA,iBAAA;EACA,iBAAA;ATwRZ;ASjRE;EACE,aAAA;EACA,8BAAA;EACA,SAAA;EACA,YAAA;EACA,gBAAA;EACA,uBAAA;EAAA,kBAAA;ATmRJ;AShRM;EACE,yBAAA;ATkRR;;AUpVA;EACE,sCAAA;AVuVF;AUrVE;EACE,6BAAA;EACA,mBAAA;AVuVJ;AUpVE;EACE,yCAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;EACA,4BAAA;EACA,mBAAA;AVsVJ;AUnVE;EACE,YAAA;EACA,cAAA;AVqVJ;AUpVI;EACE,qBAAA;AVsVN;AUpVM;EACE,qBAAA;EACA,+BAAA;EACA,aAAA;EACA,uBAAA;AVsVR;AUpVQ;EACE,iBAAA;EACA,YAAA;EACA,gBAAA;AVsVV;AUnVQ;EACE,mBAAA;AVqVV;AU/UE;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,4BAAA;EACA,uBAAA;EAAA,kBAAA;AViVJ;AU/UI;EACE,kBAAA;AViVN;AU/UM;EACE,yCAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;AViVR;AU9UM;EACE,eAAA;EACA,kBAAA;EACA,gBAAA;AVgVR;AU3UM;EACE,cAAA;EACA,WAAA;EACA,YAAA;EACA,yDAAA;UAAA,iDAAA;EACA,0BAAA;UAAA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,oCAAA;AV6UR;AUzUI;EACE,yBAAA;AV2UN","file":"style.css"}

assets/js/poster-slider.js

@@ -1,12 +1,27 @@
-const slidesData = [
+const slidersData = [
+  [
     { title: '1980 - Mexico',       caption: 'Occasion', photographer: 'Name of photographer' },
     { title: '1980 - Mexico',       caption: 'Occasion', photographer: 'Name of photographer' },
     { title: '1986 - Buenos Aires', caption: 'Occasion', photographer: 'Name of photographer' },
+  ],
+  [
+    { title: '2000 - Barcelona',    caption: 'Occasion', photographer: 'Name of photographer' },
+    { title: '2004 - Seoul',        caption: 'Occasion', photographer: 'Name of photographer' },
+    { title: '2007 - Vienna',       caption: 'Occasion', photographer: 'Name of photographer' },
+    { title: '2010 - Shanghai',     caption: 'Occasion', photographer: 'Name of photographer' },
+    { title: '2013 - Rio',          caption: 'Occasion', photographer: 'Name of photographer' },
+  ],
 ];
 
-const initialSlide = Math.ceil(slidesData.length / 2) - 1;
+document.querySelectorAll('.poster-slider').forEach((section, i) => {
+  const swiperEl   = section.querySelector('.poster-swiper');
+  const titleEl    = section.querySelector('.slide-info .title');
+  const captionEl  = section.querySelector('.slide-info .caption');
+  const data       = slidersData[i] ?? [];
+  const slideCount = swiperEl.querySelectorAll('.swiper-slide').length;
+  const initialSlide = Math.floor(slideCount / 2);
 
-const swiper = new Swiper('.poster-swiper', {
+  const swiper = new Swiper(swiperEl, {
     slidesPerView: 3,
     centeredSlides: true,
     spaceBetween: 16,
@@ -14,20 +29,18 @@ const swiper = new Swiper('.poster-swiper', {
     initialSlide,
     keyboard: { enabled: true },
     navigation: {
-    nextEl: '.poster-next',
-    prevEl: '.poster-prev',
+      nextEl: section.querySelector('.poster-next'),
+      prevEl: section.querySelector('.poster-prev'),
     },
+  });
+
+  function updateInfo() {
+    const entry = data[swiper.realIndex];
+    if (!entry || !titleEl || !captionEl) return;
+    titleEl.textContent = entry.title;
+    captionEl.innerHTML = `${entry.caption}<br>${entry.photographer}`;
+  }
+
+  swiper.on('slideChange', updateInfo);
+  updateInfo();
 });
-
-const titleEl   = document.querySelector('.slide-info .title');
-const captionEl = document.querySelector('.slide-info .caption');
-
-function updateInfo() {
-  const data = slidesData[swiper.realIndex];
-  if (!data) return;
-  titleEl.textContent = data.title;
-  captionEl.innerHTML = `${data.caption}<br>${data.photographer}`;
-}
-
-swiper.on('slideChange', updateInfo);
-updateInfo();

index.html

@@ -159,6 +159,7 @@
         </figure>
       </section>
 
+
       <section class="video">
         <div class="text-column">
           <h3>Visual data & Graphic</h3>
@@ -428,15 +429,151 @@
         </div>
 
         <div class="controls">
-          <button class="poster-prev">
-            <img src="assets/images/slider-button.svg" alt="Précédent" />
+          <button class="poster-prev" aria-label="Précédent">
+            <span class="btn-icon" aria-hidden="true"></span>
           </button>
           <div class="slide-info">
             <p class="title">1980 - Mexico</p>
             <p class="caption">Occasion<br />Name of photographer</p>
           </div>
-          <button class="poster-next">
-            <img src="assets/images/slider-button.svg" alt="Suivant" />
+          <button class="poster-next" aria-label="Suivant">
+            <span class="btn-icon" aria-hidden="true"></span>
+          </button>
+        </div>
+      </section>
+
+      <section class="two-columns">
+        <div class="column left-column picture-column">
+          <figure>
+            <img src="assets/images/image-9.jpg" alt="" />
+            <figcaption>Légende</figcaption>
+          </figure>
+        </div>
+        <div class="column right-column text-column">
+          <h3>Digital transformation in the 21st century</h3>
+          <div class="text">
+            <h4>An early interest in the digital transformation.</h4>
+            <p>
+              ICOM has long engaged with the digital transition and the
+              transformation of information and communication technologies. As
+              early as 1981, the organisation created its first computerised
+              bibliographic database, demonstrating an early awareness of the
+              potential of digital tools for documentation and knowledge
+              sharing. In the 1990s, these questions gained further prominence,
+              notably with the publication of an issue of Museum International
+              entitled Museums and the Internet (1999), reflecting growing
+              interest among museum professionals in the web as a new space for
+              communication and access.
+            </p>
+            <p>
+              During this period, several digital platforms were progressively
+              launched, including the general COM website, the International
+              Observatory on Illicit Traffic in Cultural Goods, and standardised
+              websites for every International or national committees and
+              regional alliances, contributing to more structured and visible
+              international networks.
+            </p>
+            <button class="read-more">Read More</button>
+          </div>
+        </div>
+      </section>
+
+      <section class="two-columns">
+        <div class="column left-column text-column">
+          <h3>A word on the number of ICOM members over the years.</h3>
+          <div class="text">
+            <p>
+              Today, counting the number of members in an institution helps
+              assess its evolution. ICOM is a growing organisation, as its
+              membership graph keeps rising. However, it is interesting to note
+              that, when the ICOM constitution was first written, membership was
+              limited to a maximum of 15 members per National Committee. Rather
+              than focusing on increasing the number of members in each National
+              Committee, exceeding 15 members was explicitly forbidden. In the
+              early 1970s, the Statutes were revised and this restriction was
+              removed. Subsequently, the number of ICOM members worldwide grew
+              significantly. Additionally, and by contrast, a National Committee
+              must have at least 8 members to legally exist, according to the
+              2017 ICOM Statutes.
+            </p>
+          </div>
+        </div>
+        <div class="column right-column picture-column">
+          <figure>
+            <img src="assets/images/image-10.jpg" alt="" />
+            <figcaption>Légende</figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <!-- Version avec image, citation et background dégradé chaud -->
+      <section
+        class="featured-text blockquote colored with-image"
+        style="--background: linear-gradient(180deg, #ffd8c1 80%, #ffbf66 100%)"
+      >
+        <figure>
+          <img src="assets/images/image-11.jpg" alt="" />
+          <blockquote>
+            <p class="main">
+              "It highlights how changes in the museum field - ethics,
+              specialisations, global representation, were mirrored in the
+              evolution of ICOM's committees, working groups, and membership."
+            </p>
+          </blockquote>
+          <figcaption>Quote from Antonio Rodriguez</figcaption>
+        </figure>
+      </section>
+
+      <!-- Version colorée du slider -->
+      <section
+        class="poster-slider colored"
+        style="
+          --background: rgba(26, 74, 214, 1);
+          --color: var(--color-pink);
+        "
+      >
+        <h3 class="poster-slider__title">Images gallery</h3>
+
+        <div class="swiper poster-swiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <figure>
+                <img src="assets/images/image-12.jpg" alt="" />
+              </figure>
+            </div>
+            <div class="swiper-slide">
+              <figure>
+                <img src="assets/images/image-13.jpg" alt="" />
+              </figure>
+            </div>
+            <div class="swiper-slide">
+              <figure>
+                <img src="assets/images/image-14.jpg" alt="" />
+              </figure>
+            </div>
+            <div class="swiper-slide">
+              <figure>
+                <img src="assets/images/image-15.jpg" alt="" />
+              </figure>
+            </div>
+            <div class="swiper-slide">
+              <figure>
+                <img src="assets/images/image-16.jpg" alt="" />
+              </figure>
+            </div>
+          </div>
+        </div>
+
+        <div class="controls">
+          <button class="poster-prev" aria-label="Précédent">
+            <span class="btn-icon" aria-hidden="true"></span>
+          </button>
+          <div class="slide-info">
+            <p class="title">1980 - Mexico</p>
+            <p class="caption">Occasion<br />Name of photographer</p>
+          </div>
+          <button class="poster-next" aria-label="Suivant">
+            <span class="btn-icon" aria-hidden="true"></span>
           </button>
         </div>
       </section>