delete report

assets/css/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 :root {
-  --font: "Executive", Arial, sans-serif;
+  --font: 'Executive', Arial, sans-serif;
-  --title: "System", Arial, sans-serif;
+  --title: 'System', Arial, sans-serif;
   --fs-xsmall: 12px;
   --fs-small: 16px;
   --fs-normal: 20px;
@@ -12,6 +12,14 @@
   --max-w-cards: 940px;
   --z-header: 2000;
   --panel-w: 310px;
+}
+@media screen and (max-width: 768px) {
+  :root {
+    --fs-medium: 20px;
+    --fs-big: 26px;
+  }
+}
+:root {
   --leading-tight: 1.05;
   --leading-normal: 1.3;
   --leading-title: 1.1;
@@ -48,12 +56,6 @@
   --h-block: 30px;
   --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-@media screen and (max-width: 768px) {
-  :root {
-    --fs-medium: 20px;
-    --fs-big: 26px;
-  }
-}
 
 @media screen and (max-width: 768px) {
   :root {
@@ -575,6 +577,11 @@ button.sort[data-sort-type=up] .arrow {
   z-index: calc(var(--z-header) - 10);
   opacity: 0;
   transition: opacity 0.3s ease-in;
+}
+.btn--group__mobile.is-visible {
+  opacity: 1;
+}
+.btn--group__mobile {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -587,9 +594,6 @@ button.sort[data-sort-type=up] .arrow {
   align-items: flex-end;
   gap: var(--padding-inner);
 }
-.btn--group__mobile.is-visible {
-  opacity: 1;
-}
 .btn--group__mobile button, .btn--group__mobile .dropdown {
   flex-grow: 1;
   width: 100%;
@@ -609,14 +613,16 @@ button.sort[data-sort-type=up] .arrow {
 #summary__hero figcaption {
   color: var(--color-txt-light);
   font-size: var(--fs-small);
-  padding: calc(var(--spacing) * 0.5) var(--padding-body);
-  padding-bottom: 0;
 }
 @media screen and (max-width: 560px) {
   #summary__hero figcaption {
     font-size: var(--fs-xsmall);
   }
 }
+#summary__hero figcaption {
+  padding: calc(var(--spacing) * 0.5) var(--padding-body);
+  padding-bottom: 0;
+}
 #summary__hero figure {
   width: 100%;
   position: relative;
@@ -633,9 +639,6 @@ button.sort[data-sort-type=up] .arrow {
 #summary__hero .swiper-button-prev, #summary__hero .swiper-button-next {
   --swiper-navigation-sides-offset: 32px;
   --swiper-navigation-size: 32px;
-  opacity: 0.8;
-  top: calc(450vw - var(--swiper-navigation-size) * 0.5);
-  margin-top: 0;
 }
 @media screen and (max-width: 560px) {
   #summary__hero .swiper-button-prev, #summary__hero .swiper-button-next {
@@ -643,6 +646,11 @@ button.sort[data-sort-type=up] .arrow {
     --swiper-navigation-size: 15px;
   }
 }
+#summary__hero .swiper-button-prev, #summary__hero .swiper-button-next {
+  opacity: 0.8;
+  top: calc(450vw - var(--swiper-navigation-size) * 0.5);
+  margin-top: 0;
+}
 #summary__hero .swiper-button-prev svg, #summary__hero .swiper-button-next svg {
   color: white;
 }
@@ -677,12 +685,14 @@ button.sort[data-sort-type=up] .arrow {
 #summary__hero .player-container .video-full {
   width: 100%;
   height: 100%;
-  display: none;
 }
 #summary__hero .player-container .video-full iframe {
   width: 100%;
   height: 100%;
 }
+#summary__hero .player-container .video-full {
+  display: none;
+}
 #summary__hero .player-container #hero-play-video {
   position: absolute;
   width: 100%;
@@ -1295,20 +1305,19 @@ button.sort[data-sort-type=up] .arrow {
   padding-top: calc(var(--spacing) * 0.5);
   padding-bottom: calc(var(--spacing) * 0.5);
   border-bottom: var(--border-light);
-  position: relative;
-  border-bottom: var(--border-light);
-  position: relative;
 }
 .card--article-small:first-of-type {
   border-top: var(--border-light);
 }
 .card--article-small.has-link {
   border-bottom: var(--border-light);
-  position: relative;
 }
 .card--article-small.has-link:first-of-type {
   border-top: var(--border-light);
 }
+.card--article-small.has-link {
+  position: relative;
+}
 .card--article-small.has-link::before {
   content: "";
   width: 100%;
@@ -1371,6 +1380,9 @@ button.sort[data-sort-type=up] .arrow {
   margin-bottom: calc(var(--spacing) * 0.75);
   margin-top: calc(var(--spacing) * 0.25);
 }
+.card--article-small {
+  position: relative;
+}
 .card--article-small .btn--go-to {
   position: absolute;
   right: var(--padding-inner);
@@ -1400,9 +1412,15 @@ button.sort[data-sort-type=up] .arrow {
 .card--article-small:hover .btn--go-to {
   animation: wiggle-left 0.8s ease-in-out;
 }
+.card--article-small {
+  border-bottom: var(--border-light);
+}
 .card--article-small:first-of-type {
   border-top: var(--border-light);
 }
+.card--article-small {
+  position: relative;
+}
 .card--article-small::before {
   content: "";
   width: 100%;
@@ -1455,11 +1473,13 @@ button.sort[data-sort-type=up] .arrow {
   justify-content: start;
   gap: calc(var(--spacing) * 0.25);
   border-bottom: var(--border-light);
-  position: relative;
 }
 .card--impact:first-of-type {
   border-top: var(--border-light);
 }
+.card--impact {
+  position: relative;
+}
 .card--impact::before {
   content: "";
   width: 100%;
@@ -1551,23 +1571,26 @@ button.sort[data-sort-type=up] .arrow {
 }
 .card--impact-small {
   border-bottom: var(--border-light);
+}
+.card--impact-small:first-of-type {
+  border-top: var(--border-light);
+}
+.card--impact-small {
   display: grid;
   grid-gap: var(--padding-inner);
   grid-template-columns: 2fr 3fr;
   position: relative;
   padding: var(--padding-inner) 0;
-  position: relative;
-}
-.card--impact-small:first-of-type {
-  border-top: var(--border-light);
 }
 .card--impact-small.has-link {
   border-bottom: var(--border-light);
-  position: relative;
 }
 .card--impact-small.has-link:first-of-type {
   border-top: var(--border-light);
 }
+.card--impact-small.has-link {
+  position: relative;
+}
 .card--impact-small.has-link::before {
   content: "";
   width: 100%;
@@ -1583,6 +1606,9 @@ button.sort[data-sort-type=up] .arrow {
 .card--impact-small.has-link:hover::before {
   border-color: var(--color-txt);
 }
+.card--impact-small {
+  position: relative;
+}
 .card--impact-small .btn--go-to {
   position: absolute;
   right: var(--padding-inner);
@@ -1694,9 +1720,6 @@ button.sort[data-sort-type=up] .arrow {
   fill: var(--color-txt-light);
 }
 @media screen and (max-width: 560px) {
-  .card--impact-small .open-graph__details {
-    grid-column: 1/3;
-  }
   .card--impact-small .open-graph__details summary {
     display: grid;
     grid-gap: var(--padding-inner);
@@ -1707,6 +1730,9 @@ button.sort[data-sort-type=up] .arrow {
   .card--impact-small .open-graph__details summary .summary-inner {
     grid-column: 2;
   }
+  .card--impact-small .open-graph__details {
+    grid-column: 1/3;
+  }
 }
 
 .card--package {
@@ -1718,9 +1744,6 @@ button.sort[data-sort-type=up] .arrow {
   grid-gap: var(--padding-inner);
   grid-template-columns: 2fr 3fr;
   position: relative;
-  container-type: inline-size;
-  container-name: cardpackage;
-  position: relative;
 }
 .card--package > picture, .card--package > figure {
   aspect-ratio: 16/9;
@@ -1734,6 +1757,10 @@ button.sort[data-sort-type=up] .arrow {
      object-fit: cover;
   transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
 }
+.card--package {
+  container-type: inline-size;
+  container-name: cardpackage;
+}
 .card--package figure {
   border-radius: var(--radius-small);
   background-color: var(--color-accent);
@@ -1804,6 +1831,9 @@ button.sort[data-sort-type=up] .arrow {
   right: calc(var(--padding-inner) * 1);
   bottom: var(--padding-inner);
 }
+.card--package {
+  position: relative;
+}
 .card--package .btn--go-to {
   position: absolute;
   right: var(--padding-inner);
@@ -1849,11 +1879,13 @@ button.sort[data-sort-type=up] .arrow {
 }
 [data-template=investigation-summary] .card--package.has-link {
   border-bottom: var(--border-light);
-  position: relative;
 }
 [data-template=investigation-summary] .card--package.has-link:first-of-type {
   border-top: var(--border-light);
 }
+[data-template=investigation-summary] .card--package.has-link {
+  position: relative;
+}
 [data-template=investigation-summary] .card--package.has-link::before {
   content: "";
   width: 100%;
@@ -1902,9 +1934,6 @@ button.sort[data-sort-type=up] .arrow {
 .card--open-graph {
   container-type: inline-size;
   container-name: opengraph;
-  border: 1px solid var(--grey-600);
-  border-radius: var(--radius-small);
-  position: relative;
 }
 .card--open-graph .open-graph__inner {
   display: grid;
@@ -1912,6 +1941,11 @@ button.sort[data-sort-type=up] .arrow {
   grid-template-columns: 2fr 3fr;
   position: relative;
 }
+.card--open-graph {
+  border: 1px solid var(--grey-600);
+  border-radius: var(--radius-small);
+  position: relative;
+}
 .card--open-graph figure {
   grid-column: 1;
   grid-row: 1;
@@ -2208,24 +2242,28 @@ button.sort[data-sort-type=up] .arrow {
   top: var(--header-h);
   right: calc(var(--menu-w) * -1);
   transition: right 0.3s ease-in;
-  background-color: var(--color-bg);
-  border-left: var(--border-light);
-  padding: var(--padding-body);
-  z-index: calc(var(--z-header) - 1);
-  display: flex;
-  flex-direction: column;
 }
 @media screen and (max-width: 768px) {
   #site-menu {
     transition: right 0.4s ease-in;
   }
 }
+#site-menu {
+  background-color: var(--color-bg);
+  border-left: var(--border-light);
+  padding: var(--padding-body);
+  z-index: calc(var(--z-header) - 1);
+}
 @media screen and (max-width: 560px) {
   #site-menu {
     width: 100vw;
     right: -100vw;
   }
 }
+#site-menu {
+  display: flex;
+  flex-direction: column;
+}
 #site-menu .search-form {
   margin-top: calc(var(--spacing) * 1);
   margin-bottom: calc(var(--spacing) * 1);
@@ -2705,158 +2743,6 @@ main .page__header .description-medium {
     display: none;
   }
 }
-@media screen and (max-width: 768px) {
-  [data-template=report] #toggle-panel {
-    display: none;
-  }
-  [data-template=report] #report__aside {
-    width: 100vw;
-    position: fixed;
-    top: 0px;
-    height: 100vh;
-    left: -100vw;
-    z-index: calc(var(--z-header) + 10);
-    transition: left 0.4s ease-in;
-    background: var(--color-bg);
-  }
-  [data-template=report] #report__aside .panel__header {
-    margin: 0 var(--padding-body);
-    border-bottom: var(--border-aside);
-    height: var(--header-h);
-  }
-  [data-template=report] #report__aside .panel__content {
-    height: calc(100dvh - var(--header-h));
-    height: calc(100vh - var(--header-h));
-    padding-bottom: 30vh;
-  }
-  [data-template=report] #report__aside .btn--group {
-    display: none;
-  }
-  [data-template=report] .panel-open #report__aside {
-    left: 0px;
-  }
-}
-@media screen and (min-width: 768px) {
-  [data-template=report] #toggle-panel {
-    position: fixed;
-    top: var(--header-h);
-    left: var(--padding-body);
-    z-index: calc(var(--z-header) + 100);
-  }
-  [data-template=report] #report__aside {
-    position: fixed;
-    top: var(--header-h);
-    left: var(--padding-body);
-    width: var(--panel-w);
-    height: calc(100vh - var(--header-h));
-    z-index: calc(var(--z-header) + 200);
-    background-color: var(--color-bg);
-    box-shadow: 4px 0px 4px 1px var(--color-bg);
-  }
-  [data-template=report] #report__aside .panel__header {
-    border: var(--border-aside);
-    height: calc(var(--h-block) * 1.5);
-  }
-  [data-template=report] #report__aside .panel__content {
-    height: calc(100% - var(--h-block) * 4.25);
-    padding-bottom: 80px;
-  }
-  [data-template=report] #report__aside {
-    left: calc(var(--panel-w) * -1);
-    transition: left ease-in-out 0.5s;
-  }
-  [data-template=report] #report {
-    transition: padding-left ease-in-out 0.5s;
-  }
-  [data-template=report] .panel-open #report__aside {
-    left: var(--padding-body);
-  }
-  [data-template=report] .panel-open #report {
-    padding-left: calc(var(--panel-w) + var(--padding-body) * 1);
-  }
-}
-.report__header {
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
-  margin-top: calc(var(--spacing) * 3.25);
-  margin-bottom: calc(var(--spacing) * 0.5);
-  display: grid;
-  -moz-column-gap: var(--padding-inner);
-       column-gap: var(--padding-inner);
-  grid-template-columns: 65% 35%;
-  grid-template-rows: auto auto 1fr;
-  position: relative;
-  padding: var(--padding-body);
-  border: 1px solid var(--color-txt);
-  border-radius: var(--radius-small);
-}
-.report__header .report__title-group {
-  grid-row: 1;
-  grid-column: span 2;
-  margin-bottom: calc(var(--spacing) * 1);
-}
-.report__header .report__title-group .title {
-  text-transform: uppercase;
-  font-weight: normal;
-  font-size: var(--fs-medium);
-  line-height: var(--leading-tight);
-  font-weight: 500;
-  margin-top: calc(var(--spacing) * 1);
-  text-wrap: balance;
-}
-.report__header .report__title-group .subtitle {
-  font-size: var(--fs-medium);
-  line-height: var(--leading-tight);
-  font-weight: 500;
-  text-wrap: balance;
-}
-.report__header > picture, .report__header > figure {
-  aspect-ratio: 16/9;
-  display: flex;
-  overflow: hidden;
-}
-.report__header > picture img, .report__header > figure img {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
-}
-.report__header figure {
-  grid-row: 2;
-  grid-column: 2;
-}
-.report__header .report__dl {
-  grid-row: 2;
-  grid-column: 1;
-  align-self: end;
-  font-size: var(--fs-small);
-  border-bottom: var(--border-light);
-  align-items: flex-start;
-}
-.report__header .report__dl .dl__group {
-  display: grid;
-  grid-gap: var(--padding-inner);
-  grid-template-columns: 2fr 3fr;
-  position: relative;
-  border-top: var(--border-light);
-  padding: calc(var(--spacing) * 0.5) 0;
-}
-.report__header .report__dl dt {
-  color: var(--color-txt-light);
-  padding-right: 1ch;
-}
-
-.report__btns {
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
-  display: flex;
-  justify-content: start;
-  flex-wrap: wrap;
-  align-items: start;
-  gap: calc(var(--spacing) * 0.25);
-}
-
 .investigation__content {
   margin-top: calc(var(--spacing) * 4);
 }
@@ -2976,96 +2862,6 @@ main .page__header .description-medium {
   max-width: 600px;
 }
 
-#toggle-panel {
-  width: calc(var(--h-block) * 1);
-  padding: 0;
-}
-
-#report__aside {
-  --border-aside: 1px solid var(--color-txt);
-}
-#report__aside .panel__header {
-  display: flex;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.5ch;
-  cursor: pointer;
-}
-#report__aside .panel__header .icon {
-  width: calc(var(--h-block) * 1.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-#report__aside .panel__header svg {
-  width: 16px;
-  fill: var(--color-txt);
-}
-#report__aside .panel__header .text {
-  padding-top: 5px;
-}
-#report__aside .panel__header .close {
-  position: absolute;
-  right: 0;
-}
-#report__aside .panel__header .close svg {
-  width: 10px;
-  fill: var(--color-txt);
-}
-#report__aside .panel__header:hover .close svg {
-  fill: var(--grey-200);
-}
-#report__aside .panel__content {
-  padding: var(--padding-body);
-  overflow: scroll;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  border: var(--border-aside);
-  border-top: none;
-}
-#report__aside .panel__content::-webkit-scrollbar {
-  display: none;
-}
-#report__aside #toc ul {
-  list-style: none;
-}
-#report__aside #toc li {
-  font-size: var(--fs-small);
-  color: var(--color-txt-light);
-}
-#report__aside #toc li a {
-  display: block;
-  padding: 5px 1ch;
-  padding-top: 7px;
-}
-#report__aside #toc li.selected {
-  background-color: var(--grey-800);
-  color: var(--color-txt);
-}
-#report__aside #toc li:hover {
-  background-color: var(--grey-800);
-}
-#report__aside #toc .toc-level-1 {
-  margin-bottom: calc(var(--spacing) * 0.5);
-  font-weight: bold;
-}
-#report__aside #toc .toc-level-2 {
-  margin-bottom: calc(var(--spacing) * 0.25);
-  padding-left: 4ch;
-}
-#report__aside #toc a {
-  text-decoration: none;
-}
-#report__aside .btn--group {
-  margin-top: calc(var(--spacing) * 0.5);
-  display: flex;
-  gap: var(--padding-inner);
-}
-#report__aside .btn--group button {
-  flex-grow: 1;
-}
-
 .content-package {
   max-width: var(--max-w-cards);
   margin: 0 auto;
@@ -3106,12 +2902,12 @@ main .page__header .description-medium {
   }
 }
 @media screen and (min-width: 1080px) {
-  .content-package {
-    grid-template-columns: 1fr 1fr;
-  }
   .content-package #nav-package {
     display: none;
   }
+  .content-package {
+    grid-template-columns: 1fr 1fr;
+  }
   .content-package #section__investigations {
     display: block;
     margin-bottom: 0px;

assets/css/style.scss

@@ -40,6 +40,6 @@
 
 @import "template/home";
 @import "template/investigation-summary";
-@import "template/report";
+@import "template/investigation_content";
 @import "template/package";
 @import "template/impacts";

assets/css/template/_investigation_content.scss

@@ -0,0 +1,154 @@
+
+.investigation__content {
+
+    margin-top: calc(var(--spacing) * 4);
+
+    .section-content {
+        // min-height: calc(100vh - var(--header-h));
+        padding-left: calc(var(--padding-body)*1.5);
+        padding-right: calc(var(--padding-body)*1.5);
+        margin-bottom: calc(var(--spacing)*6);
+        &:target{
+            padding-top: calc(var(--header-h) + var(--spacing)*2);
+            @media #{$small}{   padding-top: calc(var(--header-h) + var(--spacing)*0.5);  }
+        }
+
+    }
+
+
+
+    .section-title {
+
+        max-width: var(--max-w-content);
+        margin-inline: auto;
+        margin-bottom: calc(var(--spacing)*2);
+
+        font-size: var(--fs-medium);
+        
+        font-weight: 500;
+        // text-transform: uppercase;
+        text-wrap: balance;
+        max-width: var(--max-w-content);
+        color: var(--color-accent);
+    }
+
+        .section-txt{
+        max-width: var(--max-w-content);
+         margin-inline: auto;
+        
+        
+    }
+
+    .subsection-w-media{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--padding-body);
+        margin-bottom: calc(var(--spacing)*4);
+        margin-top: calc(var(--spacing)*2);
+        position: relative;
+
+
+        .media{
+            margin-inline: auto;
+            max-width: var(--max-w-content);
+            padding-left: var(--padding-inner);
+            padding-right: var(--padding-inner);
+            position: sticky;
+            top: calc(var(--header-h) + var(--spacing));
+            align-self: start;
+        }
+
+    }
+
+
+    .subsection-txt {
+        min-height: calc(100vh - var(--header-h));
+        max-width: var(--max-w-content);
+        padding-left: var(--padding-inner);
+         padding-right: var(--padding-inner);
+             padding-bottom: calc(var(--spacing)*6);
+    }
+
+    .subsection-w-hscroll{
+        position: relative;
+        margin-bottom: calc(var(--spacing)*4);
+
+        .horizontal-scroll{
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+        }
+
+        .horizontal-scroll-wrapper{
+            display: flex;
+            flex-wrap: nowrap;
+            will-change: transform;
+        }
+
+        .horizontal-scroll-slide{
+            flex-shrink: 0;
+            width: 90vw;
+            max-width: 700px;
+            padding: 0 calc(var(--spacing) * 1);
+
+            figure, img{
+                width: 100%;
+            }
+        }
+
+        .horizontal-scroll-pagination{
+            position: fixed;
+            bottom: calc(var(--spacing) * 2);
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 8px;
+            z-index: 10;
+        }
+
+    }
+
+
+
+    p {
+        margin: calc(var(--spacing)*0.75) 0;
+    }
+
+    ul {
+        padding-left: 3ch;
+
+        li{
+            margin: calc(var(--spacing)*0.5) 0;
+        }
+    }
+}
+
+.investigation__content:target {
+    padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
+}
+
+
+.media{
+
+    video{
+        width: 100%;
+    }
+
+    figure{
+        height: auto;
+    }
+
+    .caption{
+        font-size: var(--fs-small);
+        color: var(--color-txt-light);
+        font-weight: 500;
+        line-height: 1.1;
+    }
+
+    .swiper{
+        width: calc(100% - 60px);
+        max-width: 600px;
+    }
+}

assets/css/template/_report.scss

@@ -1,518 +0,0 @@
-
-
-
-
-// LAOUT -----------------------------------
-
-
-@media #{$small}{
-    [data-template="report"] {
-
-        #toggle-panel{
-            display: none;
-        }
-
-        #report__aside{
-            width: 100vw;
-            position: fixed;
-            top: 0px;
-            height: 100vh;
-            left: -100vw;
-            z-index: calc(var(--z-header) + 10);
-            transition: left .4s ease-in;
-            background: var(--color-bg);
-
-
-              .panel__header{
-                margin: 0 var(--padding-body);
-                border-bottom: var(--border-aside);
-                height: var(--header-h);
-            }
-
-            .panel__content{
-                height: calc(100dvh - var(--header-h));
-                height: calc(100vh - var(--header-h));
-                padding-bottom: 30vh;
-            }
-
-            .btn--group{
-                display: none;
-            }
-        
-        }
-
-        .panel-open  #report__aside{
-            left: 0px;
-        }
-
-    }
-}
-
-
-
-
-@media #{$small-up}{
-[data-template="report"] {
-
-
-   
-
-
-
-
-    #toggle-panel {
-        position: fixed;
-        top:  var(--header-h);
-        left: var(--padding-body);
-        z-index: calc(var(--z-header) + 100);
-    }
-
-    #report__aside {
-        position: fixed;
-        top: var(--header-h);
-        left: var(--padding-body);
-        width: var(--panel-w);
-        height: calc(100vh - var(--header-h));
-        z-index: calc(var(--z-header) + 200);
-        background-color: var(--color-bg);
-        box-shadow: 4px 0px 4px 1px var(--color-bg);
-
-        .panel__header{
-                border: var(--border-aside);
-            height: calc(var(--h-block)*1.5);
-        }
-
-    .panel__content {
-        height: calc(100% - var(--h-block)*4.25);
-                    padding-bottom: 80px;
-
-           }
-     
-    }
-
-
-     #report__aside {
-        left: calc(var(--panel-w)*-1);
-        transition: left ease-in-out .5s;
-    }
-      #report {
-        // padding-left: calc(var(--padding-body)*2);
-          transition: padding-left ease-in-out .5s;
-    }
-
-
-    .panel-open{
-
-         #report__aside{
-               left: var(--padding-body);
-         }
-          #report {
-            padding-left: calc(var(--panel-w) + var(--padding-body)*1);
-        }
-
-    }
-
-
-
-
-
-}
-
-}
-
-// HEADER -------------------------------------------------------------------------
-
-
-
-
-
-.report__header {
-
-    max-width: var(--max-w-cards);
-    margin-inline: auto;
-    margin-top: calc(var(--spacing) * 3.25);
-    margin-bottom: calc(var(--spacing) * 0.5);
-
-
-    display: grid;
-    column-gap: var(--padding-inner);
-    
-    grid-template-columns: 65% 35%;
-    grid-template-rows: auto auto 1fr;
-    position: relative;
-
-    
-    padding: var(--padding-body);
-
-    border: 1px solid var(--color-txt);
-    border-radius: var(--radius-small);
-
-    .report__title-group {
-        grid-row: 1;
-        grid-column: span 2;
-        margin-bottom: calc(var(--spacing)*1);
-
-        .title {
-            text-transform: uppercase;
-            font-weight: normal;
-            font-size: var(--fs-medium);
-            line-height: var(--leading-tight);
-            font-weight: 500;
-            margin-top: calc(var(--spacing)*1);
-            text-wrap: balance;
-        }
-
-        .subtitle {
-            font-size: var(--fs-medium);
-            line-height: var(--leading-tight);
-            font-weight: 500;
-            text-wrap: balance;
-
-        }
-
-    }
-
-    @include figure-16-9();
-
-    figure {
-        grid-row: 2;
-        grid-column: 2;
-    }
-
-    .report__dl {
-        grid-row: 2;
-        grid-column: 1;
-        align-self: end;
-        font-size: var(--fs-small);
-        border-bottom: var(--border-light);
-        align-items: flex-start;
-
-        .dl__group {
-            @include grid-content();
-            border-top: var(--border-light);
-            padding: calc(var(--spacing)*0.5) 0;
-        }
-
-        dt {
-            color: var(--color-txt-light);
-            padding-right: 1ch;
-        }
-    }
-
-
-   
-}
-
-
-.report__btns{
-
-      max-width: var(--max-w-cards);
-      margin-inline: auto;
-
-
-        display: flex;
-        justify-content: start;
-        flex-wrap: wrap;
-        align-items: start;
-        gap: calc(var(--spacing)*0.25);
-}
-
-
-
-
-
-// CONTENT -------------------------------------------------------------------------------
-
-
-
-.investigation__content {
-
-    margin-top: calc(var(--spacing) * 4);
-
-    .section-content {
-        // min-height: calc(100vh - var(--header-h));
-        padding-left: calc(var(--padding-body)*1.5);
-        padding-right: calc(var(--padding-body)*1.5);
-        margin-bottom: calc(var(--spacing)*6);
-        &:target{
-            padding-top: calc(var(--header-h) + var(--spacing)*2);
-            @media #{$small}{   padding-top: calc(var(--header-h) + var(--spacing)*0.5);  }
-        }
-
-    }
-
-
-
-    .section-title {
-
-        max-width: var(--max-w-content);
-        margin-inline: auto;
-        margin-bottom: calc(var(--spacing)*2);
-
-        font-size: var(--fs-medium);
-        
-        font-weight: 500;
-        // text-transform: uppercase;
-        text-wrap: balance;
-        max-width: var(--max-w-content);
-        color: var(--color-accent);
-    }
-
-        .section-txt{
-        max-width: var(--max-w-content);
-         margin-inline: auto;
-        
-        
-    }
-
-    .subsection-w-media{
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: var(--padding-body);
-        margin-bottom: calc(var(--spacing)*4);
-        margin-top: calc(var(--spacing)*2);
-        position: relative;
-
-
-        .media{
-            margin-inline: auto;
-            max-width: var(--max-w-content);
-            padding-left: var(--padding-inner);
-            padding-right: var(--padding-inner);
-            position: sticky;
-            top: calc(var(--header-h) + var(--spacing));
-            align-self: start;
-        }
-
-    }
-
-
-    .subsection-txt {
-        min-height: calc(100vh - var(--header-h));
-        max-width: var(--max-w-content);
-        padding-left: var(--padding-inner);
-         padding-right: var(--padding-inner);
-             padding-bottom: calc(var(--spacing)*6);
-    }
-
-    .subsection-w-hscroll{
-        position: relative;
-        margin-bottom: calc(var(--spacing)*4);
-
-        .horizontal-scroll{
-            height: 100vh;
-            width: 100vw;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-        }
-
-        .horizontal-scroll-wrapper{
-            display: flex;
-            flex-wrap: nowrap;
-            will-change: transform;
-        }
-
-        .horizontal-scroll-slide{
-            flex-shrink: 0;
-            width: 90vw;
-            max-width: 700px;
-            padding: 0 calc(var(--spacing) * 1);
-
-            figure, img{
-                width: 100%;
-            }
-        }
-
-        .horizontal-scroll-pagination{
-            position: fixed;
-            bottom: calc(var(--spacing) * 2);
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            gap: 8px;
-            z-index: 10;
-        }
-
-    }
-
-
-
-    p {
-        margin: calc(var(--spacing)*0.75) 0;
-    }
-
-    ul {
-        padding-left: 3ch;
-
-        li{
-            margin: calc(var(--spacing)*0.5) 0;
-        }
-    }
-}
-
-.investigation__content:target {
-    padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
-}
-
-
-.media{
-
-    video{
-        width: 100%;
-    }
-
-    figure{
-        height: auto;
-    }
-
-    .caption{
-        font-size: var(--fs-small);
-        color: var(--color-txt-light);
-        font-weight: 500;
-        line-height: 1.1;
-    }
-
-    .swiper{
-        width: calc(100% - 60px);
-        max-width: 600px;
-    }
-}
-
-
-
-/// PANEL-LEFT  --------------------------------------------
-
-
-
-#toggle-panel {
-    width: calc(var(--h-block) * 1);
-    padding: 0;
-}
-
-#report__aside {
-    --border-aside: 1px solid var(--color-txt);
-
-    .panel__header {
-        display: flex;
-    
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 0.5ch;
-
-        .icon {
-            width: calc(var(--h-block)*1.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        svg {
-            width: 16px;
-            fill: var(--color-txt);
-        }
-
-        .text {
-            padding-top: 5px;
-        }
-
-        .close {
-            position: absolute;
-            right: 0;
-
-            svg {
-                width: 10px;
-                fill: var(--color-txt);
-            }
-
-        
-        }
-
-            cursor: pointer;
-
-            &:hover {
-                .close svg {
-                    fill: var(--grey-200);
-                }
-            }
-
-
-    }
-
-    .panel__content {
-        padding: var(--padding-body);
-        overflow: scroll;
-        @include hide-scroll();
-        border: var(--border-aside);
-        border-top: none;
-    }
-
-
-    #toc {
-        ul {
-            list-style: none;
-        }
-
-        li {
-            font-size: var(--fs-small);
-
-            color: var(--color-txt-light);
-
-            a {
-                display: block;
-                padding: 5px 1ch;
-                padding-top: 7px;
-            }
-
-
-        }
-
-        li.selected {
-            background-color: var(--grey-800);
-            color: var(--color-txt);
-        }
-
-        li:hover {
-            background-color: var(--grey-800);
-        }
-
-        .toc-level-1 {
-            margin-bottom: calc(var(--spacing)*0.5);
-            font-weight: bold;
-        }
-
-        .toc-level-2 {
-            margin-bottom: calc(var(--spacing)*0.25);
-            padding-left: 4ch;
-        }
-
-        a {
-            text-decoration: none;
-        }
-
-    }
-
-    .btn--group {
-        margin-top: calc(var(--spacing)*0.5);
-        display: flex;
-        gap: var(--padding-inner);
-
-        button {
-            flex-grow: 1;
-        }
-    }
-
-
-
-
-}
-
-
-
-
-
-
-
-
-

assets/js/investigation.js

@@ -0,0 +1,11 @@
+export function initSliderBeforeAfter(container = document){
+  const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
+  slidersBeforeAfter.forEach(function (sliderContainer, index) {
+    const sliderInput = sliderContainer.querySelector('.slider');
+    if (sliderInput) {
+      sliderInput.addEventListener('input', (e) => {
+        sliderContainer.style.setProperty('--position', `${e.target.value}%`);
+      });
+    }
+  });
+}

assets/js/script.js

@@ -8,8 +8,7 @@ import { initHeroSlider } from './hero-slider.js';
 import { playVideo } from './hero-video.js';
 import { initDropdowns } from './dropdown.js';
 import { initSwipers } from './swipers.js';
-import { report } from './report.js';
+import { initSliderBeforeAfter } from './investigation.js';
-
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -21,8 +20,6 @@ window.onload = async function () {
   themeToggle();
 
 
-  report(responsiveSmall);
-
   tocMobile(responsiveSmall);
   copyLink();
   btnGroupMobile(responsiveSmall)
@@ -32,6 +29,7 @@ window.onload = async function () {
   initDropdowns(responsiveSmall);
   initSwipers();
 
+  initSliderBeforeAfter();
 
   var elem = document.querySelector('.grid-masonry');
   var msnry = null;

site/blueprints/pages/investigation-summary.yml

@@ -25,10 +25,6 @@ tabs:
                   ratio: 12/7
                   cover: true
                 help: Image utilisée dans les listes d'enquêtes
-          reportSection:
-            label: Rapport
-            type: pages
-            template: report
       - width: 4/6
         fields:
           chapo:

site/templates/investigation-summary.php

@@ -1,15 +1,7 @@
 <?php snippet('header') ?>
 
 
-<?php
-// Récupérer le rapport (première page enfant de type report)
-$report = $page->children()->filterBy('intendedTemplate', 'report')->first();
-?>
-
 <div class="btn--group__mobile">
-<?php if ($report): ?>
-<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
-<?php endif ?>
 <div class="dropdown dropdown--position-mobile">
     <button class="dropdown__trigger btn--bold-inline no-link">
         <span class="icon"><?= svg('assets/icons/share.svg') ?></span>