diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 038bcf9..eb39442 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -4,8 +4,8 @@ "Bash(git add:*)", "Bash(git commit:*)", "Bash(cat:*)", - "Bash(curl:*)", - "Bash(php -l:*)" + "WebFetch(domain:unicode-org.github.io)", + "Bash(git mv:*)" ], "deny": [], "ask": [] diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml index 67cc286..6203168 100644 --- a/.forgejo/workflows/deploy.yml +++ b/.forgejo/workflows/deploy.yml @@ -32,7 +32,7 @@ jobs: set ftp:ssl-allow no open -u $USERNAME,$PASSWORD $PREPRODUCTION_HOST mirror --reverse --verbose --ignore-time --parallel=10 -x local/ assets assets - mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ -x header.php site site + mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ site site mirror --reverse --verbose --ignore-time --parallel=10 kirby kirby mirror --reverse --verbose --ignore-time --parallel=10 vendor vendor quit diff --git a/.gitignore b/.gitignore index ff728b3..22dd854 100644 --- a/.gitignore +++ b/.gitignore @@ -60,11 +60,5 @@ Icon /vendor/* # Local -# --------------- local/ -/local/* - -# Claude config -# --------------- -.claude/ -/.claude/* \ No newline at end of file +.claude diff --git a/assets/css/base/_body.scss b/assets/css/base/_body.scss index b15509b..95b56aa 100644 --- a/assets/css/base/_body.scss +++ b/assets/css/base/_body.scss @@ -29,9 +29,6 @@ body{ color: var(--color-txt); background-color: var(--color-bg); - width: 100vw; - overflow-x: hidden; - } img{ @@ -51,7 +48,7 @@ img{ // } } - +.swiper-button-next, .swiper-button-prev, body, #site-header, #site-footer{ transition: background-color 0.3s ease, color 0.3s ease; } @@ -61,4 +58,57 @@ body, #site-header, #site-footer{ grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; -} \ No newline at end of file +} + + +@mixin hide-scroll(){ + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } +} + +@mixin clamp($lines) { + display: -webkit-box; + -webkit-line-clamp: $lines; + -webkit-box-orient: vertical; + overflow: hidden; +} + +@mixin hover-card-line(){ + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + position: relative; + &::before{ + content: ''; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; + } + + &:hover{ + background-color: var(--grey-950); + border-color: var(--color-txt); + &::before{ + border-color: var(--color-txt); + } + + } +} + + +body.menu-open, +body.is-hidden{ + overflow-y: hidden; + main, footer, #nav-highlight, .btn--back-to-top{ + transition: opacity .3s ease-in; + opacity: 0.1; + } +} + + diff --git a/assets/css/base/_responsive.scss b/assets/css/base/_responsive.scss index 0017258..81a0ffc 100644 --- a/assets/css/base/_responsive.scss +++ b/assets/css/base/_responsive.scss @@ -11,3 +11,8 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)"; @media #{$medium}{ } + + +@media #{$x-small}{ + +} diff --git a/assets/css/base/_var.scss b/assets/css/base/_var.scss index 675f0e1..7ef62ff 100644 --- a/assets/css/base/_var.scss +++ b/assets/css/base/_var.scss @@ -2,23 +2,19 @@ --font: 'Executive', Arial, sans-serif; --title: 'System', Arial, sans-serif; - // --fs-xsmall: 10px; - // --fs-small: 12px; - // --fs-normal: 16px; - // --fs-medium: 22px; - // --fs-big: 38px; - --fs-xsmall: 10px; - --fs-small: 12px; - --fs-normal: 16px; - --fs-medium: 20px; - --fs-big: 30px; - --fs-xbig: 38px; + --fs-xsmall: 12px; + --fs-small: 16px; + --fs-normal: 20px; + --fs-medium: 30px; + --fs-big: 45px; --fs-button-bold: 22px; - --max-w-content: 700px; - --max-w-container: 1280px; + --max-w-content: 640px; + --max-w-cards: 940px; + --z-header: 2000; + --panel-w: 310px; @media #{$small} { --fs-medium: 20px; @@ -26,7 +22,9 @@ } --leading-tight: 1.05; - --leading-normal: 1.2; + --leading-normal: 1.3; + + --leading-title: 1.1; // --leading-relaxed: 1.4; // --leading-loose: 1.8; @@ -41,6 +39,7 @@ --grey-400: #969696; --grey-600: #6d6d6d; --grey-800: #383838; + --grey-950: #222222; --color-bg: #161616; --color-txt: #ffffff; @@ -80,30 +79,31 @@ @media #{$small}{ :root { - --fs-xsmall: 10px; - --fs-small: 12px; - --fs-normal: 14px; - --fs-medium: 18px; - --fs-big: 28px; - --fs-xbig: 32px; + --fs-xsmall: 13px; + --fs-small: 16px; + --fs-normal: 20px; + --fs-medium: 24px; + --fs-big: 34px; --header-h: 60px; + --padding-body: 16px; } } :root[data-theme="light"] { - --grey-100: #1f1f1f; + --grey-100: #2f2f2f; --grey-200: #2f2f2f; --grey-300: #4a4a4a; --grey-400: #6a6a6a; --grey-600: #9a9a9a; --grey-800: #cfcfcf; + --grey-950: #eaeaea; --color-bg: #efefef; - --color-txt: #000000; + --color-txt: #161616; --color-txt-light: var(--grey-400); --color-accent: #ff00ff; diff --git a/assets/css/components/_btn--don.scss b/assets/css/components/_btn--don.scss deleted file mode 100644 index 3c4e2d0..0000000 --- a/assets/css/components/_btn--don.scss +++ /dev/null @@ -1,60 +0,0 @@ -#btn--don__mobile { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - padding-top: calc(var(--spacing) * 0.5); - padding-bottom: calc(var(--spacing) * 1.5); - position: fixed; - bottom: 0px; - left: 0; - z-index: 100; - opacity: 0; - transition: opacity ease-in 0.2s; - - pointer-events: none; - &.is-visible { - pointer-events: all; - opacity: 1; - } - - &.is-sticky { - position: relative; - } - - @media #{$small-up} { - display: none !important; - } -} - -.btn--don { - --vertical-padding: 0.5ch; - height: calc(var(--h-block) + var(--vertical-padding)); - border-radius: calc(var(--h-block) / 1); - padding: var(--vertical-padding) 2ch; - background-color: var(--color-accent); - color: var(--color-bg); - font-family: var(--font); - font-size: var(--fs-medium); - font-weight: var(--fw-bold); - - a { - text-decoration: none; - display: flex; - align-items: center; - gap: 0.5ch; - } - - .icon { - height: 28px; - position: relative; - top: 1px; - } - - svg { - fill: var(--color-bg); - width: 24px; - height: 24px; - } -} diff --git a/assets/css/components/_btn-group-mobile.scss b/assets/css/components/_btn-group-mobile.scss new file mode 100644 index 0000000..b2b9ff7 --- /dev/null +++ b/assets/css/components/_btn-group-mobile.scss @@ -0,0 +1,48 @@ +.btn--group__mobile{ + z-index: calc(var(--z-header) - 10); + opacity: 0; + transition: opacity .3s ease-in; + + &.is-visible{ + opacity: 1; + + } + + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + height: calc(var(--h-block) * 3); + padding: calc(var(--spacing) * 0.75) var(--padding-body); + // padding-top: var(--spacing); + background-color: var(--color-bg); + background: linear-gradient(0deg, + var(--color-bg) 0%, + var(--color-bg) 75%, + transparent 100%); + + // background-color: yellow; + + display: flex; + align-items: flex-end; + gap: var(--padding-inner); + button, .dropdown{ + flex-grow: 1; + width: 100%; + } + + + + + +} + + +@media #{$small-up}{ + .btn--group__mobile{ + display: none; + opacity: 0!important; + + } +} + diff --git a/assets/css/components/_buttons.scss b/assets/css/components/_buttons.scss index 9ae38bb..7a26e64 100644 --- a/assets/css/components/_buttons.scss +++ b/assets/css/components/_buttons.scss @@ -3,8 +3,12 @@ button{ font-family: var(--font); font-size: var(--fons-normal); color: var(--color-txt); + svg{ + fill: var(--color-txt); + } &:hover{ color: var(--grey-100); + svg{ fill: var(--grey-100); } } a{ @@ -30,22 +34,88 @@ button:disabled{ } +.btn--small{ + height: calc(var(--h-block)*1); + border: var(--border-light); + border-radius: var(--radius-btn); + font-size: var(--fs-small); + font-weight: 500; + line-height: 1; + overflow: hidden; + white-space: nowrap; + + a{ + display: flex; + align-items: center; + justify-content: center; + gap: 1ch; + width: 100%; + height: 100%; + padding: 0 1ch; + padding-top: 2px; + } + + .icon{ + --size: 10px; + height: var(--size); + width: var(--size); + position: relative; + top: -8px; + svg{ + width: 100%; + fill: var(--color-txt); + } + } + + &.no-link{ + display: flex; + align-items: center; + justify-content: center; + gap: 1ch; + padding: 0 1ch; + padding-top: 2px; + + } + &:hover{ + color: currentColor; + border-color: currentColor; + background-color: var(--grey-950); + + } +} + +.btn--small.is-selected{ + background-color: var(--color-txt); + border-color: var(--color-txt); + color: var(--color-bg); + a{ color: var(--color-bg); } + svg{ fill: var(--color-bg); } +} + .btn--bold, .btn--bold-inline{ display: block; height: calc(var(--h-block)*1); border: var(--border); border-radius: var(--radius-btn); - font-size: var(--fs-small); + font-size: var(--fs-xsmall); + font-weight: 500; text-transform: uppercase; line-height: 1; overflow: hidden; white-space: nowrap; + svg{ + width: 18px; + height: 18px; + position: relative; + top: -1px; + } a{ display: flex; align-items: center; justify-content: center; + gap: 1ch; width: 100%; height: 100%; padding: 0 2ch; @@ -55,10 +125,12 @@ button:disabled{ display: flex; align-items: center; justify-content: center; + gap: 1ch; padding: 0 2ch; padding-top: 4px; } + } @@ -67,112 +139,182 @@ button:disabled{ .btn--bold{ background-color: var(--color-txt); color: var(--color-bg); + svg{ fill: var(--color-bg); } &:hover{ background-color: var(--color-accent); border-color: var(--color-accent); a{ color: var(--color-bg); } + svg{ fill: var(--color-bg); } } } .btn--bold-inline{ background-color: var(--color-bg); -} - -.btn--bold-inline:hover{ - background-color: var(--grey-800); - color: var(--color-txt); - a{ - background-color: var(--grey-800); - color: var(--color-txt); + svg{ fill: var(--color-txt); } + &:hover{ + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); + a{ + background-color: var(--grey-950); + color: var(--grey-100); + } + svg{ fill: var(--grey-100); } } + } +.btn--home{ + background-color: var(--color-bg); + display: block; + height: calc(var(--h-block)*1); + border: 1px solid currentColor; + border-radius: var(--radius-btn); + font-size: var(--fs-xsmall); + font-weight: 500; + text-transform: uppercase; + line-height: 1; + overflow: hidden; + white-space: nowrap; - -// DELETE ? - -.btn__default{ - - - --size: calc(var(--h-block) - 8px); - font-size: var(--fs-normal); - font-weight: var(--fw-normal); - height: var(--size); - padding-right: 1.5ch; - - position: relative; - - - display: flex; - align-items: center; - gap: 0ch; - // padding-right: 0.5ch; color: var(--color-accent); - font-weight: var(--fw-medium); - text-decoration: none; - cursor: pointer; + transition: .3s ease-in; + @media #{$small} { + } - .icon, .txt{ z-index: 10; } - - .icon{ - width: var(--size); - height: var(--size); + svg{ + width: 14px; + height: 14px; + position: relative; + top: -1px; + fill: var(--color-accent); + transition: fill .3s ease-in; + } + a{ display: flex; align-items: center; justify-content: center; - color: var(--color-bg); - text-align: center; - - svg{ - fill: var(--color-bg); - width: 80%; - } - } - - .txt{ - font-family: var(--font-title); - color: var(--color-accent); - font-size: var(--fs-normal); - font-weight: var(--fw-bold); - padding-left: 1ch; - } - - &::after{ - content: ''; - display: block; - background-color: var(--color-accent); - border-radius: calc(var(--size)/2); - width: var(--size); - height: var(--size); - position: absolute; - left: 0; - z-index: 0; - transition: width .2s + gap: 1ch; + width: 100%; + height: 100%; + padding: 0 2ch; + padding-top: 4px; } &:hover{ - // - .txt{ - color: var(--color-bg); - display: block; - } - &::after{ - width: 100%; + border-color: var(--color-accent); + background-color: var(--color-accent); + color: var(--color-bg); + svg{ + fill: var(--color-bg); } } - - - + } +.btn--toc{ + svg{ + width: 15px; + height: 15px; + top: 0px; + } +} + + +@mixin btn--go-to(){ + position: relative; + .btn--go-to{ + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); + svg{ + width: 15px; + height: 15px; + fill: var(--color-txt); + } + @media #{$small}{ + svg{ + width: 11px; + height: 11px; + } + } + @media #{$x-small}{ + right: calc(var(--padding-inner)*0.5); + bottom: calc(var(--padding-inner)*0.25); + svg{ + width: 11px; + height: 11px; + } + } + } + &:hover{ + .btn--go-to{ + animation: wiggle-left 0.8s ease-in-out; + } + } + + + +} + + + + +@keyframes wiggle-left { + 0% { transform: translateX(0); } + 40% { transform: translateX(-10px); } + 80% { transform: translateX(0); } + 100% { transform: translateX(0); } +} + + + +.btn--back-to-top{ + display: flex; + border-color: var(--color-txt); + width: fit-content; + margin: var(--spacing) auto; + font-size: var(--fs-xsmall); + @media #{$small}{ + margin-bottom: calc(var(--spacing)*2); + } + + .icon{ + width: 12px; + height: 12px; + transform: rotate(-90deg); + transform-origin: center; + position: relative; + top: -1px; + svg{ + width: 12px; + height: 12px; + } + } + + &:hover{ + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); + a{ + background-color: var(--grey-950); + color: var(--grey-100); + } + svg{ fill: var(--grey-100); } + } +} + + + + diff --git a/assets/css/components/_card-article-small.scss b/assets/css/components/_card-article-small.scss index ee37d96..7d64cc9 100644 --- a/assets/css/components/_card-article-small.scss +++ b/assets/css/components/_card-article-small.scss @@ -1,66 +1,100 @@ - - -.card--article-small{ +.card--article-small { @include grid-content(); - margin-bottom: var(--spacing); - + + padding-top: calc(var(--spacing)*0.5); + padding-bottom: calc(var(--spacing)*0.5); + + border-bottom: var(--border-light); + + &:first-of-type { + border-top: var(--border-light); + } + + &.has-link { + @include hover-card-line(); + } @include figure-16-9(); - - .content{ + + figure { + @media #{$x-small} { + margin-left: 0px; + } + } + + + .content { display: flex; flex-direction: column; padding-top: calc(var(--spacing)*0.25); + padding-right: calc(var(--padding-inner)*3); + } + + .title { + font-weight: 500; + font-size: var(--fs-small); + margin-bottom: 0.25em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + line-height: var(--leading-title); + + a { + text-decoration: none; + } } - .title{ - font-weight: normal; - font-size: var(--fs-medium); - margin-bottom: 0.25em; - a{ text-decoration: none;} - - } - - time{ + time { flex-grow: 1; color: var(--color-txt-light); } - .keywords{ - margin-top: 1.5em; - padding-bottom: calc(var(--spacing)*0.25); - color: var(--color-txt-light); + + .description { + @include clamp(2); + margin-bottom: calc(var(--spacing)*0.75); + margin-top: calc(var(--spacing)*0.25); } - &:hover{ - .title{ text-decoration: underline;} + + + @include btn--go-to(); + @include hover-card-line(); + + .keywords { + display: none; } - @media #{$medium}{ - .title{ + @media #{$medium} { + .title { font-size: var(--fs-normal); margin-bottom: 0; } } - @media #{$x-small}{ - .content{ - padding: 0; + @media #{$x-small} { + + .content { + display: contents; } - .title{ - margin-bottom: 0; - } - time{ + + .title { font-size: var(--fs-small); - margin-top: 0.25em; + padding-top: calc(var(--spacing)*0.25); } - .keywords{ - margin-top: 0.5em; - padding-bottom: 0; + + figure { + grid-row: 1/3; } + + .description { + grid-column: span 2; + } + } - + + } \ No newline at end of file diff --git a/assets/css/components/_card-article.scss b/assets/css/components/_card-article.scss index 9b6bbbf..eb8c261 100644 --- a/assets/css/components/_card-article.scss +++ b/assets/css/components/_card-article.scss @@ -4,39 +4,69 @@ display: flex; flex-direction: column; + padding: var(--padding-inner); + + @include figure-16-9(); .content{ - padding: var(--padding-inner); + // padding: var(--padding-inner); display: flex; flex-direction: column; - flex-grow: 2; + } + .pin{ + position: absolute; + top: calc(var(--padding-inner)*1.5); + left: calc(var(--padding-inner)*1.5); + z-index: 10; + width: 24px; + height: 24px; + border-radius: var(--radius-small); + background-color: rgba(255, 255, 255, 0.27); + display: flex; + align-items: center; + justify-content: center; + svg{ + width: 16px; + fill: var(--color-txt); + } + } + + .time-alone{ + display: none; + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*0.75); } .title{ - margin-top: calc(var(--spacing)*0.5); - font-size: var(--fs-medium); - font-weight: normal; + margin-top: calc(var(--spacing)*0.75); + font-size: var(--fs-normal); + line-height: var(--leading-title); + font-weight: 500; text-transform: uppercase; - flex-grow: 2; + text-wrap: balance; + // flex-grow: 2; a{ text-decoration: none;} } .description{ - margin-top: calc(var(--spacing)*1); - font-size: var(--fs-small); + margin-top: calc(var(--spacing)*0.5); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; + + font-size: var(--fs-small); } .dl{ margin-top: calc(var(--spacing)*0.5); - + // font-size: var(--fs-small); + border-bottom: var(--border-light); + font-size: var(--fs-small); .dl__group{ @include grid-content(); border-top: var(--border-light); @@ -48,24 +78,37 @@ padding-right: 1ch; } - ul:not(.keywords){ + ul{ list-style: none; - li{ - padding-bottom: 0.2em; - } - + li{ padding-bottom: 0.2em; } } - .dl__group__keywords{ - padding-bottom: 0; - } + } + + + .keywords-wrapper{ + z-index: 3000; + margin-top: calc(var(--spacing)*0.5); + // margin-bottom: calc(var(--spacing)*0.5); + } + + .keywords{ + + grid-column: 2; } &:hover{ border-color: var(--color-txt); + background-color: var(--grey-950); } + .link-block{ + z-index: 2000; + } + + + } \ No newline at end of file diff --git a/assets/css/components/_card-folder.scss b/assets/css/components/_card-folder.scss new file mode 100644 index 0000000..415dbbe --- /dev/null +++ b/assets/css/components/_card-folder.scss @@ -0,0 +1,171 @@ +.card--folder{ + position: relative; + max-width: var(--max-w-cards); + border: var(--border-light); + padding: var(--padding-inner); + @include grid-content(); + @include figure-16-9(); + + + container-type: inline-size; + container-name: cardfolder; + + + figure{ + + border-radius: var(--radius-small); + background-color: var(--color-accent); + + img{ + opacity: 0.8; + filter: grayscale(1); + } + + + } + + .content{ + display: flex; + flex-direction: column; + font-size: var(--fs-small); + + } + + + .title{ + + font-weight: 500; + font-size: var(--fs-normal); + line-height: var(--leading-title); + + margin-bottom: 0.75em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + padding-top: calc(var(--spacing)*0.25); + a{ text-decoration: none;} + + @media #{$small}{ + font-size: var(--fs-normal); + } + + .icon{ + padding-right: 1ch; + position: relative; + top: 1px; + svg{ + height: 15px; + width: 15px; + fill: var(--color-txt); + } + } + + } + + .short{ + @include clamp(3); + flex-grow: 1; + padding-right: calc(var(--padding-inner)*2); + } + + ul{ + display: flex; + list-style: none; + gap: 1ch; + color: var(--color-txt-light); + padding-top: calc(var(--spacing)*0.5); + + li + li{ + &::before{ + content: "|"; + padding-right: 1ch; + } + } + @media #{$small}{ + font-size: var(--fs-small); + } + } + + .btn--go-to{ + position: absolute; + right: calc(var(--padding-inner)*1); + bottom: var(--padding-inner); + } + + @include btn--go-to(); + + &:hover{ + background-color: var(--grey-950); + border-color: var(--color-txt); + } + + + +} + + + +[data-template="investigation-summary"] .card--folder{ + + border: none; + padding-left: 0; + padding-right: 0; + border-bottom: var(--border-light); + + &:first-of-type{ + border-top: var(--border-light); + } + &.has-link { + @include hover-card-line(); + } + + figure{ + @media #{$x-small}{ margin-left: 0px; } + + } + + .title{ + font-size: var(--fs-small); + } + + + +} + + + + + +@media #{$x-small} { + + .card--folder{ + + .content { + display: contents; + } + figure { + grid-row: 1/3; + } + + .title { + font-size: var(--fs-small); + padding-top: calc(var(--spacing)*0.25); + margin-bottom: 0; + } + + .short { + grid-column: span 2; + } + + ul{ + grid-column: 2; + grid-row: 2; + padding-top: 0; + + } + + } + + + +} \ No newline at end of file diff --git a/assets/css/components/_card-impact-small.scss b/assets/css/components/_card-impact-small.scss new file mode 100644 index 0000000..cb84bd6 --- /dev/null +++ b/assets/css/components/_card-impact-small.scss @@ -0,0 +1,96 @@ +.card--impact-small { + + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + + + @include grid-content(); + padding: var(--padding-inner) 0; + + &.has-link { + @include hover-card-line(); + } + + @include btn--go-to(); + + .btn--go-to { + top: calc(var(--padding-inner)*1); + bottom: auto; + } + + .content { + grid-column: 2; + } + + .card--open-graph { + grid-column: 2; + z-index: 10; + } + + .keywords { + grid-column: 2; + z-index: 10; + @media #{$x-small} { display: none; } + + + } + + &:not([data-impact-type="media"]) .content, + .keywords { + @media #{$x-small} { + grid-column: span 2; + } + } + + .tag { + width: auto; + justify-self: start; + position: relative; + top: -5px; + } + + &:not([data-impact-type="media"]) { + .content { + padding-right: calc(var(--padding-inner)*2.5); + @media #{$x-small} { + padding-right: 0; + } + } + + } + + + .open-graph__details { + grid-column: 2; + @include details-summary(); + + summary { + color: var(--color-txt-light); + + .arrow-details svg { + fill: var(--color-txt-light); + } + } + + @media #{$x-small} { + summary { + @include grid-content(); + grid-row-gap: 0; + + .summary-inner { + grid-column: 2; + } + } + + grid-column: 1/3; + } + } + + + + +} + + diff --git a/assets/css/components/_card-impact.scss b/assets/css/components/_card-impact.scss index 90ba5d1..683897e 100644 --- a/assets/css/components/_card-impact.scss +++ b/assets/css/components/_card-impact.scss @@ -1,77 +1,263 @@ -.card--impact{ - @include grid-content(); - padding: calc(var(--spacing)*0.5) 0; - border-bottom: var(--border-light); - &:first-of-type{ - border-top: var(--border-light); - } +.card--impact { - .content{ - grid-column: 2; - } - &:not([data-impact-type="media"]) .content{ - @media #{$x-small}{ grid-column: span 2; } - } + container-type: inline-size; + container-name: impact; + border: var(--border-light); + margin-bottom: calc(var(--spacing)*1); - .tag{ - - width: auto; - justify-self: start; - position: relative; - top: -5px; - - } - - .content{ - .see-more{ - color: var(--color-txt-light); - text-decoration: none; - white-space: nowrap; - &::after{ - content: ' +' - } - } + &.has-link { + @include hover-card-line(); } - .open-graph__details{ - grid-column: span 2; - @include details-summary(); - summary{ - color: var(--color-txt-light); - .arrow-details svg{ fill: var(--color-txt-light);} - } - } + .card--impact__inner { + @include grid-content(); + padding: calc(var(--padding-inner)*1.5) var(--padding-inner); - // @media #{$x-small-up}{ - - .open-graph__details{ - summary{ - @include grid-content(); - .summary-inner{ - grid-column: 2; - - } - } - - } - .open-graph__inner{ - margin-top: calc(var(--spacing)*0.5); - margin-bottom: calc(var(--spacing)*1); - @media #{$small-up}{ - margin-bottom: calc(var(--spacing)*2); - } - .card--open-graph{ - margin-bottom: calc(var(--spacing)*0.5); - } - - } - + font-size: var(--fs-small); + // border-bottom: var(--border-light); + // padding: calc(var(--spacing)*0.5) 0; + // &:first-of-type{ + // border-top: var(--border-light); // } - + @include btn--go-to(); + + .btn--go-to { + top: calc(var(--padding-inner)*1); + bottom: auto; + } + + + + .content { + grid-column: 2; + } + + .card--open-graph { + grid-row: 1/3; + grid-column: 2; + z-index: 10; + } + + .keywords-wrapper { + grid-column: 1; + grid-row: 2/4; + align-self: end; + z-index: 10; + } + + &:not([data-impact-type="media"]) .content { + @media #{$x-small} { + grid-column: span 2; + } + } + + .tag { + + width: auto; + justify-self: start; + position: relative; + top: -5px; + + } + + &:not([data-impact-type="media"]) { + .content { + padding-right: calc(var(--padding-inner)*2.5); + } + + } + + + + + .investigations { + z-index: 10; + grid-column: 2; + list-style: none; + font-size: var(--fs-xsmall); + + + a { + text-decoration: none; + color: var(--color-txt-light); + + } + + .icon { + position: relative; + top: 2px; + + svg { + width: 14px; + height: 14px; + fill: var(--color-txt-light); + } + } + + li:hover { + a { + color: var(--color-txt); + } + + .icon svg { + fill: var(--color-txt); + } + } + + } + + + + + + + + + .open-graph__details { + grid-column: 2; + @include details-summary(); + + summary { + color: var(--color-txt-light); + + .arrow-details svg { + fill: var(--color-txt-light); + } + } + + @media #{$x-small} { + summary { + @include grid-content(); + grid-row-gap: 0; + + .summary-inner { + grid-column: 2; + } + } + + grid-column: 1/3; + } + } + + + + + // .open-graph__inner { + // margin-top: calc(var(--spacing)*0.5); + // // margin-bottom: calc(var(--spacing)*1); + + // .card--open-graph { + // margin-bottom: calc(var(--spacing)*0.5); + // } + + // } + } +} + + + +@container impact (width < 460px) { + .card--impact__inner{ + display: block!important; + padding-top: var(--padding-inner)!important; + padding-bottom: calc(var(--padding-inner)*0.75)!important; + + + .tag, .date{ + display: inline-flex; + margin-right: 2ch; + top: 0px!important; + } + + .card--impact__inner > .content{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + padding-right: 0!important; + } + + .card--open-graph{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + } + + .investigations{ + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*0.25); + } + + .keywords-wrapper { + margin-top: calc(var(--spacing)*1); + + } + .content, + details { + font-size: var(--fs-small) !important; + } + + .date{ + font-size: var(--fs-xsmall) !important; + } + + .btn--go-to { + top: calc(var(--padding-inner)*1.25)!important; + bottom: auto; + right: calc(var(--padding-inner)*1.25)!important; + } +} +} + + +@media #{$x-small}{ + .card--impact__inner{ + display: block!important; + padding-top: var(--padding-inner)!important; + padding-bottom: calc(var(--padding-inner)*0.75)!important; + + + .tag, .date{ + display: inline-flex; + margin-right: 2ch; + top: 0px!important; + } + + .content{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + padding-right: 0!important; + } + + .card--open-graph{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + } + + .investigations{ + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*0.25); + } + + .keywords-wrapper { + margin-top: calc(var(--spacing)*1); + + } + .date, + .content, + details { + font-size: 14px !important; + } + + .btn--go-to { + top: calc(var(--padding-inner)*1.25)!important; + bottom: auto; + right: calc(var(--padding-inner)*1.25)!important; + } +} +} + + -} \ No newline at end of file diff --git a/assets/css/components/_card-open-graph.scss b/assets/css/components/_card-open-graph.scss index 2b028b3..ff75674 100644 --- a/assets/css/components/_card-open-graph.scss +++ b/assets/css/components/_card-open-graph.scss @@ -1,19 +1,36 @@ .card--open-graph{ - @include grid-content(); - - border: var(--border-light); + container-type: inline-size; + container-name: opengraph; + + .open-graph__inner{ + @include grid-content(); + + } + + + + + + // border: var(--border-light); + border: 1px solid var(--grey-600); border-radius: var(--radius-small); position: relative; figure{ grid-column: 1; grid-row: 1; - + width: 100%; + height: 100%; + img{ + width: 100%; + height: 100%; + object-fit: cover; + } } - @include figure-16-9(); + // @include figure-16-9(); @media #{$x-small}{ @@ -24,20 +41,25 @@ } .content{ - padding: var(--padding-inner); - padding-left: 0; + padding-top: calc(var(--padding-inner)*0.75); + padding-bottom: calc(var(--padding-inner)*0.75); + + padding-right: var(--padding-inner); grid-column: 2; grid-row: 1; } .site-name{ color: var(--color-txt-light); - font-size: var(--fs-small); + font-size: var(--fs-xsmall); + margin-bottom: 3px; } .title{ - font-size: var(--fs-normal); - font-weight: normal; + font-size: var(--fs-small); + font-weight: 500; + line-height: 1.1; + padding-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -49,7 +71,7 @@ } .description{ - font-size: var(--fs-small); + font-size: var(--fs-xsmall); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; @@ -57,7 +79,23 @@ } &:hover{ - .title{ text-decoration: underline;} - + border-color: var(--color-txt); + background-color: var(--grey-950); } +} + + + +@container opengraph (width < 500px) { + // .card--open-graph{ + // background-color: red!important; + + // .content{ + // padding: calc(var(--padding-inner)*0.5); + // } + + // figure{ + // aspect-ratio: inherit; + // } + // } } \ No newline at end of file diff --git a/assets/css/components/_details-summary.scss b/assets/css/components/_details-summary.scss index f556811..e73d365 100644 --- a/assets/css/components/_details-summary.scss +++ b/assets/css/components/_details-summary.scss @@ -31,6 +31,13 @@ } + summary:hover{ + color: var(--color-txt); + .arrow-details svg{ + fill: var(--color-txt); + } + } + &[open]{ .arrow-details svg{ transform: rotate(90deg); diff --git a/assets/css/components/_dropdown.scss b/assets/css/components/_dropdown.scss new file mode 100644 index 0000000..0c813c8 --- /dev/null +++ b/assets/css/components/_dropdown.scss @@ -0,0 +1,170 @@ +.dropdown { + position: relative; + display: inline-block; + + &__trigger { + cursor: pointer; + } + + &__content { + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + margin-top: var(--padding-inner); + background-color: var(--color-bg); + border: var(--border); + border-radius: var(--radius-btn); + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; + z-index: 100; + + &::before{ + content: "◀"; + transform: rotate(90deg); + font-size: 14px; + position: absolute; + top: -13px; + left: 16px; + } + ul { + list-style: none; + margin: 0; + padding: var(--padding-inner); + } + + a, button { + display: block; + width: 100%; + padding: 0.75em 1ch; + font-size: var(--fs-small); + text-align: left; + text-decoration: none; + color: var(--color-txt); + background: none; + border: none; + cursor: pointer; + + &:hover { + background-color: var(--grey-800); + } + } + } + + // Positionnement par défaut : sous le bouton, aligné à gauche + // Variante : aligné à droite + &--align-right .dropdown__content { + left: auto; + right: 0; + &::before{ + left: auto; + right: 16px; + + } + } + + &.is-open { + .dropdown__content { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + } + + // PANEL  + &--position-mobile .dropdown__content { + top: auto; + bottom: calc(var(--h-block) + var(--padding-inner)*2); + left: auto; + right: 0; + margin-top: 0; + margin-left: 4px; + + &::before{ + font-family: Arial; + content: "◀"; + transform: rotate(-90deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: -13px; + left: auto; + right: 10%; + } + } + + + + &--position-mobile.is-open { + .dropdown__content { + transform: translateX(0); + } + } + + + + + @media #{$small-up}{ + &--position-panel .dropdown__content { + top: auto; + bottom: 0; + left: calc(100% + var(--padding-inner)); + margin-top: 0; + margin-left: 4px; + + &::before{ + font-family: Arial; + content: "◀"; + transform: rotate(0deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: 4px; + left: -11px; + } + } + + + + &--position-panel.is-open { + .dropdown__content { + transform: translateX(0); + } + } + + } + + + @media #{$x-small}{ + + .dropdown__content{ + width: calc(100vw - var(--padding-body)*2); + .modal--share{ + width: 100%; + } + } + + + } + +} + + + +@media screen and (max-width: 1280px){ + + [data-template="investigations"]{ + .dropdown .dropdown__content { + left: auto; + right: 0; + &::before{ + left: auto; + right: 16px; + + } + } + } + +} diff --git a/assets/css/components/_figures.scss b/assets/css/components/_figures.scss index 8be72a8..6548038 100644 --- a/assets/css/components/_figures.scss +++ b/assets/css/components/_figures.scss @@ -12,6 +12,23 @@ } } +} + + + +@mixin figure-16-9-hover{ + figure{ + aspect-ratio: 16/9; + display: flex; + overflow: hidden; + img{ + width: 100%; + height: 100%; + object-fit: cover; + transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; + + } + } &:hover{ figure img{ transform: scale(1.05); } } diff --git a/assets/css/components/_form-newsletter.scss b/assets/css/components/_form-newsletter.scss index bc5d931..a00e9bf 100644 --- a/assets/css/components/_form-newsletter.scss +++ b/assets/css/components/_form-newsletter.scss @@ -18,14 +18,14 @@ padding: 0 2ch; font-family: var(--font); - font-size: var(--fs-normal); + font-size: var(--fs-small); z-index: 40; padding-top: 4px; background: var(--color-bg); color: var(--color-txt); &::placeholder{ font-family: var(--font); - font-size: var(--fs-normal); + font-size: var(--fs-small); color: var(--color-txt); } @@ -49,7 +49,7 @@ --size: calc(var(--h-block)*1.25 - 8px); font-family: var(--font); - font-size: var(--fs-button-bold); + font-size: var(--fs-small); height: var(--size); @@ -83,7 +83,7 @@ .txt{ position: relative; top: 2px; - font-size: var(--fs-normal); + font-size: var(--fs-small); display: none; padding-left: 1ch; } diff --git a/assets/css/components/_keywords.scss b/assets/css/components/_keywords.scss index d7dbe5d..cd1f648 100644 --- a/assets/css/components/_keywords.scss +++ b/assets/css/components/_keywords.scss @@ -1,14 +1,50 @@ .keywords{ list-style: none; - li{ - display: inline-block; - padding-right: 0.75ch; - a{ - text-decoration: none; - &::before{ - content: "#"; - padding-right: 0.25ch; - } + display: flex; + flex-wrap: wrap; + gap: 0.75ch; + + a{ + display: inline-flex; + align-items: center; + justify-content: center; + height: calc(var(--h-block)*0.75); + padding: 0 1ch; + padding-top: 2px; + border: var(--border-light); + border-radius: var(--radius-btn); + font-size: var(--fs-xsmall); + line-height: 1; + white-space: nowrap; + text-decoration: none; + &::before{ + content: "#"; + padding-right: 0.25ch; } + &:hover{ + border-color: currentColor; + background-color: var(--grey-800); + } + + } +} + + +.keywords--small{ + list-style: none; + + li{ + display: inline; + } + + a{ + text-decoration: none; + &::before{ + content: "#"; + padding-right: 0.25ch; + } + &::after{ + content: "\00a0"; + } } } \ No newline at end of file diff --git a/assets/css/components/_list-socials.scss b/assets/css/components/_list-socials.scss index 6716e48..1a6670f 100644 --- a/assets/css/components/_list-socials.scss +++ b/assets/css/components/_list-socials.scss @@ -11,16 +11,16 @@ } .icon{ - width: 24px; - height: 24px; + width: 20px; + height: 20px; position: relative; top: -2px; } svg{ display: flex; align-items: center; - width: 24px; - height: 24px; + width: 20px; + height: 20px; } @@ -36,8 +36,10 @@ display: block; li{ - margin-bottom: calc(var(--spacing)*0.5); + margin-bottom: calc(var(--spacing)*0.25); break-inside: avoid; + font-size: var(--fs-small); + } a{ @@ -48,6 +50,14 @@ content: '↗'; color: var(--grey-300); } + + &:hover{ + color: var(--color-accent); + &::after{ + color: var(--color-accent); + opacity: 0.5; + } + } } .text{ display: block; diff --git a/assets/css/components/_modal-share.scss b/assets/css/components/_modal-share.scss index c6375c5..b28b375 100644 --- a/assets/css/components/_modal-share.scss +++ b/assets/css/components/_modal-share.scss @@ -1,13 +1,21 @@ .modal--share{ - border: var(--border); - border-radius: var(--radius-btn); + width: 240px; + padding-bottom: var(--padding-inner); background-color: var(--color-bg); - padding: var(--padding-inner); - padding-top: calc( var(--padding-inner)*0.5); - padding-bottom: calc( var(--padding-inner)*1.5); - .modal-title{ - display: none; + .title { + font-size: var(--fs-xsmall); + line-height: 1.2; + padding: var(--padding-inner); + padding-bottom: 0px; + @include clamp(2); + font-style: italic; + &::before{ + content: "« "; + } + &::after{ + content: " »"; + } } .socials{ @@ -15,20 +23,22 @@ list-style: none; li{ - font-size: var(--fs-normal); - padding-bottom: 6px; - border-bottom: var(--border-light); - padding-top: 6px; - - a{ + font-size: var(--fs-xsmall); + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + + a{ display: flex; align-items: center; - gap: 1ch; + gap: 2ch; text-decoration: none; + font-size: var(--fs-xsmall); } .icon { - width: 20px; - height: 20px; + width: 16px; + height: 16px; svg{ width: 100%; height: 100%; @@ -38,27 +48,20 @@ position: relative; top: 2px; } - &:hover{ - color: var(--color-accent); - - .icon svg, - .icon svg path, - .icon svg rect{ - fill: var(--color-accent)!important; - } - } } + + - - } .copy-link{ display: flex; gap: 0.5ch; - margin-top: calc(var(--spacing)*0.75); + padding: 0 var(--padding-inner); + height: var(--h-block); + width: 100%; .copy-link__field{ flex-grow: 1; @@ -83,7 +86,7 @@ width: 12px; } input{ - font-size: var(--fs-small); + font-size: var(--fs-xsmall); font-family: var(--font); background: none; border: none; @@ -99,24 +102,63 @@ &:focus{ border-color: var(--color-txt); outline: none; - + } + &.is-copied{ + color: var(--color-accent)!important; } } - button{ + .copy-link__btn{ background-color: var(--color-txt); color: var(--color-bg); border-radius: var(--radius-btn); padding: 0 1ch; - font-size: var(--fs-small); + font-size: var(--fs-xsmall); padding-top: 2px; + white-space: nowrap; + text-align: center; + + width: 8ch!important; + + &::after{ + content: "\00a0"; + } + &:hover{ background-color: var(--color-accent); - } + } + + } } + + +// SHARE ACTIONS -------------------------------------------------- +// ---------------------------------------------------------------- + +#share-banner__content, +#share-banner__aside, +#share-banner__desktop{ + display: none; +} +#share-banner__content ~ .modal--share, +#share-banner__aside ~ .modal--share, +#share-banner__desktop ~ .modal--share{ + opacity: 0; + pointer-events: none; + transition: opacity .2s ease-in; +} + +#share-banner__content:checked ~ .modal--share, +#share-banner__aside:checked ~ .modal--share, +#share-banner__desktop:checked ~ .modal--share{ + opacity: 1; + pointer-events: auto; +} + + diff --git a/assets/css/components/_search-form.scss b/assets/css/components/_search-form.scss new file mode 100644 index 0000000..ac80a15 --- /dev/null +++ b/assets/css/components/_search-form.scss @@ -0,0 +1,40 @@ + .search-form{ + --icon: 40px; + display: grid; + grid-template-columns: var(--icon) 1fr; + input{ + grid-column: 1/3; + grid-row: 1; + height: calc(var(--h-block) * 1.5); + width: 100%; + background: var(--color-bg); + border: 1px solid var(--color-txt); + padding-left: var(--icon); + font-family: var(--font); + font-size: var(--fs-normal); + color: var(--color-txt); + padding-top: 3px; + &::placeholder{ + font-family: var(--font); + font-size: var(--fs-normal); + color: var(--color-txt); + } + &:focus{ + border-color: var(--color-accent); + outline: none; + } + } + + .icon{ + grid-column: 1; + grid-row: 1; + z-index: 10; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + svg{ + width: 20px; + } + } + } \ No newline at end of file diff --git a/assets/css/components/_slider-before-after.scss b/assets/css/components/_slider-before-after.scss new file mode 100644 index 0000000..149bb34 --- /dev/null +++ b/assets/css/components/_slider-before-after.scss @@ -0,0 +1,86 @@ + +.slider-before-after{ + + width: 100%; + + max-width: 700px; + z-index: 300; + display: grid; + place-content: center; + position: relative; + overflow: hidden; + --position: 50%; + + img { + display: block; + max-width: 100%; + } + + + .image-container { + position: relative; + width: 100%; + // max-width: 800px; + // max-height: 90vh; + // aspect-ratio: 1/1; + } + + + + .slider-image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: left; + } + + .image-before { + position: absolute; + inset: 0; + width: var(--position); + } + + .slider { + position: absolute; + inset: 0; + cursor: pointer; + opacity: 0; + /* for Firefox */ + width: 100%; + height: 100%; + } + + .slider:focus-visible ~ .slider-button { + outline: 5px solid black; + outline-offset: 3px; + } + + .slider-line { + position: absolute; + inset: 0; + width: .2rem; + height: 100%; + background-color: #fff; + /* z-index: 10; */ + left: var(--position); + transform: translateX(-50%); + pointer-events: none; + } + + .slider-button { + position: absolute; + background-color: #fff; + color: black; + padding: .5rem; + border-radius: 100vw; + display: grid; + place-items: center; + top: 50%; + left: var(--position); + transform: translate(-50%, -50%); + pointer-events: none; + /* z-index: 100; */ + box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5); + } + +} \ No newline at end of file diff --git a/assets/css/components/_sort.scss b/assets/css/components/_sort.scss new file mode 100644 index 0000000..8d75927 --- /dev/null +++ b/assets/css/components/_sort.scss @@ -0,0 +1,42 @@ +button.sort{ + .arrow{ + line-height: 0; + --size: 12px; + height: var(--size); + width: var(--size); + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + top: -2px; + transform: rotate(90deg); + transition: transform 0.2s ease-in; + svg{ + width: 100%; + fill: var(--color-txt); + } + + } + + + + &[data-sort-type="up"]{ + .arrow{ + transform: rotate(-90deg); + } + } + +} + + +.page__sort { + margin-bottom: calc(var(--spacing) * 1); + display: flex; + justify-content: right; + grid-gap: var(--padding-inner); + width: 100%; + max-width: var(--max-w-cards); + margin-inline: auto; + // z-index: calc(var(--z-header) - 100); + +} \ No newline at end of file diff --git a/assets/css/components/_summary-hero.scss b/assets/css/components/_summary-hero.scss new file mode 100644 index 0000000..b7a5168 --- /dev/null +++ b/assets/css/components/_summary-hero.scss @@ -0,0 +1,136 @@ + #summary__hero{ + width: 100%; + position: relative; + left: 0; + + + figcaption{ + color: var(--color-txt-light); + font-size: var(--fs-small); + @media #{$x-small}{ font-size: var(--fs-xsmall); } + padding: calc(var(--spacing)*0.5) var(--padding-body); + padding-bottom: 0; + + + } + + figure{ + width: 100%; + position: relative; + img{ + width: 100%; + aspect-ratio: 2/1; + object-fit: cover; + } + } + + .swiper-slide{ + position: relative; + } + + .swiper-button-prev, .swiper-button-next{ + --swiper-navigation-sides-offset: 32px; + --swiper-navigation-size: 32px; + + @media #{$x-small}{ + --swiper-navigation-sides-offset: 15px; + --swiper-navigation-size: 15px; + } + opacity: 0.8; + + // Position buttons relative to the image (16/9 aspect ratio) + // Calculate: 50% of image height = 50% * (9/16) of width + // Image is 100vw wide, so center at: (100vw * 9/16) / 2 + top: calc(100vw * 9 / 2 - var(--swiper-navigation-size)*0.5); + margin-top: 0; + + svg{ color: white; } + } + + .swiper-pagination{ + position: static; + margin-top: calc(var(--spacing)*0.5); + padding: 0 var(--padding-body); + text-align: center; + + .swiper-pagination-bullet{ + width: 15px; + height: 4px; + border-radius: 2px; + background: var(--color-txt-light); + // opacity: 0.4; + } + + .swiper-pagination-bullet-active{ + background: var(--color-txt); + opacity: 0.8; + } + } + + + .player-container{ + width: 100%; + position: relative; + aspect-ratio: 2/1; + + .extract, video{ + width: 100%; + height: 100%; + object-fit: cover; + position: relative; + } + + + + .video-full{ + width: 100%; + height: 100%; + iframe{ + width: 100%; + height: 100%; + } + display: none; + } + + #hero-play-video{ + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: center; + + + .btn--bold{ + display: flex; + align-items: center; + justify-content: center; + gap: 1ch; + padding: 0 1ch; + opacity: 0.8; + &:hover{ + opacity: 1; + } + } + + .text{ + color: black; + line-height: 1; + padding-top: 4px; + } + + svg{ + width: 18px; + height: 18px; + fill: black; + opacity: 0.8; + } + } + + } + + + } \ No newline at end of file diff --git a/assets/css/components/_swiper.scss b/assets/css/components/_swiper.scss new file mode 100644 index 0000000..d5e709d --- /dev/null +++ b/assets/css/components/_swiper.scss @@ -0,0 +1,77 @@ +.swiper { + + + --slide-padding: 30px; + + + .swiper-button-prev, + .swiper-button-next { + --swiper-navigation-size: 32px; + color: var(--color-txt); + background-color: var(--color-bg); + height: 100%; + width: var(--slide-padding); + top: 0px!important; + height: calc(100% - var(--spacing)*1); + // background-color: red; + + svg { + width: 14px; + } + + &.swiper-button-disabled { + opacity: 1; + + svg { + opacity: 0.05; + } + } + } + + .swiper-button-prev { + left: 0px!important; + top: 0px; + justify-content: flex-start; + } + + .swiper-button-next { + right: 0px!important; + top: 0px; + justify-content: flex-end; + + } + + .swiper-slide { + padding-left: var(--slide-padding); + padding-right: var(--slide-padding); + } + + .swiper-pagination { + position: relative; + margin-top: 0px!important; + margin-top: calc(var(--spacing)*0.5)!important; + + .swiper-pagination-bullet { + width: 15px; + height: 4px; + border-radius: 2px; + background: var(--color-txt-light); + } + + .swiper-pagination-bullet-active { + background: var(--color-txt); + } + } + + @media #{$x-small} { + + .swiper-button-prev, + .swiper-button-next { + display: none; + } + + .swiper-slide { + padding: 0px; + } + } +} \ No newline at end of file diff --git a/assets/css/components/_tags.scss b/assets/css/components/_tags.scss index 0f12648..9f94af9 100644 --- a/assets/css/components/_tags.scss +++ b/assets/css/components/_tags.scss @@ -1,15 +1,17 @@ .tag{ height: calc(var(--h-block)*0.75); - border-radius: calc(var(--h-block)*0.75/2); + // border-radius: calc(var(--h-block)*0.75/2); + border-radius: var(--radius-small); - display: flex; + display: inline-flex; align-items: center; justify-content: center; - padding: 0 1.5ch; + padding: 0 1ch; padding-top: 3px; - font-size: var(--fs-small); + font-size: var(--fs-xsmall); line-height: 1; + font-weight: 500; background-color: var(--color-txt); color: var(--color-bg); @@ -17,5 +19,7 @@ overflow: hidden; white-space: nowrap; +} + + -} \ No newline at end of file diff --git a/assets/css/components/_text.scss b/assets/css/components/_text.scss index ed64dad..e69de29 100644 --- a/assets/css/components/_text.scss +++ b/assets/css/components/_text.scss @@ -1,4 +0,0 @@ -.title-page{ - font-size: var(--fs-medium); - -} \ No newline at end of file diff --git a/assets/css/partials/_container-cards.scss b/assets/css/partials/_container-cards.scss new file mode 100644 index 0000000..c2f8ab4 --- /dev/null +++ b/assets/css/partials/_container-cards.scss @@ -0,0 +1,23 @@ +.container-cards{ + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--spacing)*1); +} + +.container-cards__investigations { + + @media #{$x-small-up} { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: var(--padding-body); + margin-bottom: 10vh; + } + @media #{$x-small} { + margin-bottom: 10vh; + .card--article { + // margin-bottom: calc(var(--spacing) * 1.5); + } + } + } \ No newline at end of file diff --git a/assets/css/partials/_main-layout.scss b/assets/css/partials/_main-layout.scss index a92ae2b..1c7aa30 100644 --- a/assets/css/partials/_main-layout.scss +++ b/assets/css/partials/_main-layout.scss @@ -1,6 +1,8 @@ body{ min-height: 100dvh; min-height: 100vh; + width: 100vw; + overflow-x: hidden; display: flex; flex-direction: column; @@ -9,6 +11,22 @@ body{ main{ flex-grow: 1; padding: 0 var(--padding-body); + padding-top: var(--header-h); + padding-bottom: calc(var(--spacing)*2); + + min-height: 100dvh; + min-height: 100vh; + + .page__header, + .page__content{ + max-width: var(--max-w-cards); + margin-inline: auto; + } } + + + + + } \ No newline at end of file diff --git a/assets/css/partials/_page-header.scss b/assets/css/partials/_page-header.scss new file mode 100644 index 0000000..476aeea --- /dev/null +++ b/assets/css/partials/_page-header.scss @@ -0,0 +1,59 @@ +.page__type{ + + height: calc(var(--h-block)*0.75); + border-radius: var(--radius-small); + border: var(--border-medium); + + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 1.5ch; + padding-top: 3px; + + font-size: var(--fs-xsmall); + + background-color: var(--color-bg); + color: var(--color-txt-light); + font-weight: 500; + + overflow: hidden; + white-space: nowrap; + text-transform: uppercase; + +} + + + +main .page__header { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 2); + + @media #{$small} { + margin-top: calc(var(--spacing) * 2); + + } + + .page__title { + max-width: var(--max-w-content); + text-transform: uppercase; + font-weight: normal; + font-size: var(--fs-medium); + font-weight: 500; + line-height: var(--leading-title); + margin-top: calc(var(--spacing) * 1); + margin-bottom: calc(var(--spacing) * 0.5); + text-wrap: balance; + + } + + .description { + // max-width: 58ch; + // line-height: 1.1; + } + + .description-medium{ + // font-size: var(--fs-medium); + max-width: 58ch; + line-height: 1.1; + } +} diff --git a/assets/css/partials/_site-footer.scss b/assets/css/partials/_site-footer.scss index aa51927..63dd38c 100644 --- a/assets/css/partials/_site-footer.scss +++ b/assets/css/partials/_site-footer.scss @@ -2,7 +2,13 @@ background-color: var(--dark); padding: calc(var(--padding-body)*2) var(--padding-body); + z-index: 500; + .site-footer__container{ + max-width: var(--max-w-cards); + margin: 0 auto; + padding: 0 var(--padding-body); + } .logo { margin-top: calc(var(--spacing)*0.25); @@ -14,6 +20,7 @@ p{ margin: calc(var(--spacing)*0.5) 0; + font-size: var(--fs-small); a{ text-decoration: none; &:hover{ @@ -30,15 +37,18 @@ .footer__mentions{ p{ - font-size: var(--fs-small); + font-size: var(--fs-xsmall); color: var(--color-txt) } } + .footer__socials > p{ + font-weight: 500; + + } @media #{$small}{ - margin-top: calc(var(--spacing)*2); .footer__socials{ @@ -46,6 +56,8 @@ padding-top: calc(var(--spacing)*0.25); border-top: var(--border-light); + + .list-socials{ margin-top: calc(var(--spacing)*0.5); margin-bottom: calc(var(--spacing)*0.75); @@ -56,10 +68,14 @@ border-top: var(--border-light); padding-top: calc(var(--spacing)*0.25); p{ - font-size: var(--fs-small); + font-size: 12px; text-align: center; } } + + .p__small{ + font-size: 12px; + } } @@ -67,15 +83,21 @@ .site-footer__container{ display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 3fr 2fr; column-gap: calc(var(--spacing)*2); - - max-width: 1200px; - margin: 0 auto; + } + + .footer__newsletter{ + grid-column: 1; + grid-row: 2; + } + + .footer__socials{ + grid-column: 2; + grid-row: 2; } .footer__socials .socials{ - max-width: 400px; columns: 2; margin-top: calc(var(--spacing)*1); } diff --git a/assets/css/partials/_site-header.scss b/assets/css/partials/_site-header.scss index aa9adae..e9c4c11 100644 --- a/assets/css/partials/_site-header.scss +++ b/assets/css/partials/_site-header.scss @@ -1,25 +1,24 @@ -@keyframes add-border { - from { - border-bottom-color: transparent; - } - to { - border-bottom: var(--grey-800); - } -} - #site-header { - z-index: 900; + z-index: var(--z-header); --gap: 3ch; + position: fixed; + top: 0; + left: 0; + width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); + box-shadow: -1px 4px 10px 0px var(--color-bg); + .site-header__inner{ width: 100%; height: 100%; + // border-bottom: 1px solid var(--color-bg); + // transition: border-color ease-in .5s; display: flex; align-items: center; @@ -38,6 +37,7 @@ #site-title { flex-grow: 2; + // opacity: 0; svg{ width: 100px; @media #{$small}{ @@ -46,7 +46,7 @@ } } - .title-page{ + .header__title-page{ display: none; flex-grow: 2; text-align: left; @@ -65,6 +65,7 @@ align-items: center; gap: var(--gap); text-transform: uppercase; + font-weight: 500; } @@ -85,6 +86,9 @@ #lang-toggle{ display: flex; gap: 1ch; + button{ + font-weight: 500; + } button:disabled{ color: var(--color-txt-light); } } @@ -92,6 +96,7 @@ cursor: pointer; svg{ width: 30px; + fill: var(--color-txt); } .close{ display: none; } @@ -107,37 +112,11 @@ } + #site-header.is-visible{ - position: fixed; - top: 0; - - .site-header__inner{ - border-bottom: var(--border-light); - - #nav-highlight li:not(.soutenir){ - display: none; - } - #site-title { - @media #{$small-up}{ - flex-grow: 0; - width: calc((100vw - var(--max-w-content))/2 - var(--padding-body)*2); - } - @media #{$medium}{ - width: calc(var(--banner-medium) - var(--padding-body)); - } - } - - .title-page{ - @media #{$small-up}{ - display: block; - } - flex-grow: 2; - } - } - - & ~ main{ - margin-top: var(--header-h); - } + // .site-header__inner{ + // border-color: var(--grey-800); + // } } diff --git a/assets/css/partials/_site-menu.scss b/assets/css/partials/_site-menu.scss index 9e62ee8..b1350b7 100644 --- a/assets/css/partials/_site-menu.scss +++ b/assets/css/partials/_site-menu.scss @@ -6,10 +6,13 @@ top: var(--header-h); right: calc(var(--menu-w)*-1); transition: right .3s ease-in; + @media #{$small}{ + transition: right .4s ease-in; + } background-color: var(--color-bg); border-left: var(--border-light); padding: var(--padding-body); - z-index: 1000; + z-index: calc(var(--z-header) - 1); @media #{$x-small}{ width: 100vw; @@ -20,55 +23,17 @@ flex-direction: column; - form{ + .search-form{ margin-top: calc(var(--spacing)*1); margin-bottom: calc(var(--spacing)*1); - --icon: 40px; - display: grid; - grid-template-columns: var(--icon) 1fr; - input{ - grid-column: 1/3; - grid-row: 1; - height: calc(var(--h-block) * 1.5); - width: 100%; - background: var(--color-bg); - border: 1px solid var(--color-txt); - padding-left: var(--icon); - font-family: var(--font); - font-size: var(--fs-normal); - color: var(--color-txt); - padding-top: 3px; - &::placeholder{ - font-family: var(--font); - font-size: var(--fs-normal); - color: var(--color-txt); - } - &:focus{ - border-color: var(--color-accent); - outline: none; - } - } - - .icon{ - grid-column: 1; - grid-row: 1; - z-index: 10; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - svg{ - width: 20px; - } - } } - nav{ flex-grow: 1; ul{ list-style-type: none; text-transform: uppercase; + font-weight: 500; li{ font-size: var(--fs-normal); a{ @@ -86,14 +51,14 @@ } } } + + .socials{ + padding-bottom: calc(var(--spacing)*0.75); + } } body.menu-open{ - overflow: hidden; - main, footer, #nav-highlight{ - transition: opacity .3s ease-in; - opacity: 0.1; - } + #site-menu{ right: 0; diff --git a/assets/css/style.css b/assets/css/style.css index bb8ac65..e28d0f7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -2,17 +2,19 @@ :root { --font: "Executive", Arial, sans-serif; --title: "System", Arial, sans-serif; - --fs-xsmall: 10px; - --fs-small: 12px; - --fs-normal: 16px; - --fs-medium: 20px; - --fs-big: 30px; - --fs-xbig: 38px; + --fs-xsmall: 12px; + --fs-small: 16px; + --fs-normal: 20px; + --fs-medium: 30px; + --fs-big: 45px; --fs-button-bold: 22px; - --max-w-content: 700px; - --max-w-container: 1280px; + --max-w-content: 640px; + --max-w-cards: 940px; + --z-header: 2000; + --panel-w: 310px; --leading-tight: 1.05; - --leading-normal: 1.2; + --leading-normal: 1.3; + --leading-title: 1.1; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; @@ -22,6 +24,7 @@ --grey-400: #969696; --grey-600: #6d6d6d; --grey-800: #383838; + --grey-950: #222222; --color-bg: #161616; --color-txt: #ffffff; --color-txt-light: var(--grey-400); @@ -54,24 +57,25 @@ @media screen and (max-width: 768px) { :root { - --fs-xsmall: 10px; - --fs-small: 12px; - --fs-normal: 14px; - --fs-medium: 18px; - --fs-big: 28px; - --fs-xbig: 32px; + --fs-xsmall: 13px; + --fs-small: 16px; + --fs-normal: 20px; + --fs-medium: 24px; + --fs-big: 34px; --header-h: 60px; + --padding-body: 16px; } } :root[data-theme=light] { - --grey-100: #1f1f1f; + --grey-100: #2f2f2f; --grey-200: #2f2f2f; --grey-300: #4a4a4a; --grey-400: #6a6a6a; --grey-600: #9a9a9a; --grey-800: #cfcfcf; + --grey-950: #eaeaea; --color-bg: #efefef; - --color-txt: #000000; + --color-txt: #161616; --color-txt-light: var(--grey-400); --color-accent: #ff00ff; --color-accent-50: #ffe9ff; @@ -111,8 +115,6 @@ body { font-size: var(--fs-normal); color: var(--color-txt); background-color: var(--color-bg); - width: 100vw; - overflow-x: hidden; } img { @@ -129,25 +131,35 @@ img { cursor: pointer; } +.swiper-button-next, .swiper-button-prev, body, #site-header, #site-footer { transition: background-color 0.3s ease, color 0.3s ease; } -@keyframes add-border { - from { - border-bottom-color: transparent; - } - to { - border-bottom: var(--grey-800); - } +body.menu-open, +body.is-hidden { + overflow-y: hidden; } +body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, +body.is-hidden main, +body.is-hidden footer, +body.is-hidden #nav-highlight, +body.is-hidden .btn--back-to-top { + transition: opacity 0.3s ease-in; + opacity: 0.1; +} + #site-header { - z-index: 900; + z-index: var(--z-header); --gap: 3ch; + position: fixed; + top: 0; + left: 0; width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); + box-shadow: -1px 4px 10px 0px var(--color-bg); } #site-header .site-header__inner { width: 100%; @@ -174,7 +186,7 @@ body, #site-header, #site-footer { width: 80px; } } -#site-header .title-page { +#site-header .header__title-page { display: none; flex-grow: 2; text-align: left; @@ -191,6 +203,7 @@ body, #site-header, #site-footer { align-items: center; gap: var(--gap); text-transform: uppercase; + font-weight: 500; } #site-header #theme-toggle { width: var(--h-block); @@ -208,6 +221,9 @@ body, #site-header, #site-footer { display: flex; gap: 1ch; } +#site-header #lang-toggle button { + font-weight: 500; +} #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } @@ -216,6 +232,7 @@ body, #site-header, #site-footer { } #site-header #menu-toggle svg { width: 30px; + fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; @@ -224,39 +241,6 @@ body, #site-header, #site-footer { fill: var(--grey-200) !important; } -#site-header.is-visible { - position: fixed; - top: 0; -} -#site-header.is-visible .site-header__inner { - border-bottom: var(--border-light); -} -#site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) { - display: none; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner #site-title { - flex-grow: 0; - width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2); - } -} -@media screen and (max-width: 1080px) { - #site-header.is-visible .site-header__inner #site-title { - width: calc(var(--banner-medium) - var(--padding-body)); - } -} -#site-header.is-visible .site-header__inner .title-page { - flex-grow: 2; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner .title-page { - display: block; - } -} -#site-header.is-visible ~ main { - margin-top: var(--header-h); -} - @media screen and (max-width: 1080px) { #nav-highlight { display: none; @@ -268,9 +252,15 @@ button { font-size: var(--fons-normal); color: var(--color-txt); } +button svg { + fill: var(--color-txt); +} button:hover { color: var(--grey-100); } +button:hover svg { + fill: var(--grey-100); +} button a { text-decoration: none; width: 100%; @@ -289,23 +279,89 @@ button:disabled { text-decoration: underline !important; } +.btn--small { + height: calc(var(--h-block) * 1); + border: var(--border-light); + border-radius: var(--radius-btn); + font-size: var(--fs-small); + font-weight: 500; + line-height: 1; + overflow: hidden; + white-space: nowrap; +} +.btn--small a { + display: flex; + align-items: center; + justify-content: center; + gap: 1ch; + width: 100%; + height: 100%; + padding: 0 1ch; + padding-top: 2px; +} +.btn--small .icon { + --size: 10px; + height: var(--size); + width: var(--size); + position: relative; + top: -8px; +} +.btn--small .icon svg { + width: 100%; + fill: var(--color-txt); +} +.btn--small.no-link { + display: flex; + align-items: center; + justify-content: center; + gap: 1ch; + padding: 0 1ch; + padding-top: 2px; +} +.btn--small:hover { + color: currentColor; + border-color: currentColor; + background-color: var(--grey-950); +} + +.btn--small.is-selected { + background-color: var(--color-txt); + border-color: var(--color-txt); + color: var(--color-bg); +} +.btn--small.is-selected a { + color: var(--color-bg); +} +.btn--small.is-selected svg { + fill: var(--color-bg); +} + .btn--bold, .btn--bold-inline { display: block; height: calc(var(--h-block) * 1); border: var(--border); border-radius: var(--radius-btn); - font-size: var(--fs-small); + font-size: var(--fs-xsmall); + font-weight: 500; text-transform: uppercase; line-height: 1; overflow: hidden; white-space: nowrap; } +.btn--bold svg, +.btn--bold-inline svg { + width: 18px; + height: 18px; + position: relative; + top: -1px; +} .btn--bold a, .btn--bold-inline a { display: flex; align-items: center; justify-content: center; + gap: 1ch; width: 100%; height: 100%; padding: 0 2ch; @@ -316,6 +372,7 @@ button:disabled { display: flex; align-items: center; justify-content: center; + gap: 1ch; padding: 0 2ch; padding-top: 4px; } @@ -324,6 +381,9 @@ button:disabled { background-color: var(--color-txt); color: var(--color-bg); } +.btn--bold svg { + fill: var(--color-bg); +} .btn--bold:hover { background-color: var(--color-accent); border-color: var(--color-accent); @@ -331,88 +391,140 @@ button:disabled { .btn--bold:hover a { color: var(--color-bg); } +.btn--bold:hover svg { + fill: var(--color-bg); +} .btn--bold-inline { background-color: var(--color-bg); } - +.btn--bold-inline svg { + fill: var(--color-txt); +} .btn--bold-inline:hover { - background-color: var(--grey-800); - color: var(--color-txt); + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); } .btn--bold-inline:hover a { - background-color: var(--grey-800); - color: var(--color-txt); + background-color: var(--grey-950); + color: var(--grey-100); +} +.btn--bold-inline:hover svg { + fill: var(--grey-100); } -.btn__default { - --size: calc(var(--h-block) - 8px); - font-size: var(--fs-normal); - font-weight: var(--fw-normal); - height: var(--size); - padding-right: 1.5ch; - position: relative; - display: flex; - align-items: center; - gap: 0ch; +.btn--home { + background-color: var(--color-bg); + display: block; + height: calc(var(--h-block) * 1); + border: 1px solid currentColor; + border-radius: var(--radius-btn); + font-size: var(--fs-xsmall); + font-weight: 500; + text-transform: uppercase; + line-height: 1; + overflow: hidden; + white-space: nowrap; color: var(--color-accent); - font-weight: var(--fw-medium); - text-decoration: none; - cursor: pointer; + transition: 0.3s ease-in; } -.btn__default .icon, .btn__default .txt { - z-index: 10; +.btn--home svg { + width: 14px; + height: 14px; + position: relative; + top: -1px; + fill: var(--color-accent); + transition: fill 0.3s ease-in; } -.btn__default .icon { - width: var(--size); - height: var(--size); +.btn--home a { display: flex; align-items: center; justify-content: center; - color: var(--color-bg); - text-align: center; -} -.btn__default .icon svg { - fill: var(--color-bg); - width: 80%; -} -.btn__default .txt { - font-family: var(--font-title); - color: var(--color-accent); - font-size: var(--fs-normal); - font-weight: var(--fw-bold); - padding-left: 1ch; -} -.btn__default::after { - content: ""; - display: block; - background-color: var(--color-accent); - border-radius: calc(var(--size) / 2); - width: var(--size); - height: var(--size); - position: absolute; - left: 0; - z-index: 0; - transition: width 0.2s; -} -.btn__default:hover .txt { - color: var(--color-bg); - display: block; -} -.btn__default:hover::after { + gap: 1ch; width: 100%; + height: 100%; + padding: 0 2ch; + padding-top: 4px; +} +.btn--home:hover { + border-color: var(--color-accent); + background-color: var(--color-accent); + color: var(--color-bg); +} +.btn--home:hover svg { + fill: var(--color-bg); +} + +.btn--toc svg { + width: 15px; + height: 15px; + top: 0px; +} + +@keyframes wiggle-left { + 0% { + transform: translateX(0); + } + 40% { + transform: translateX(-10px); + } + 80% { + transform: translateX(0); + } + 100% { + transform: translateX(0); + } +} +.btn--back-to-top { + display: flex; + border-color: var(--color-txt); + width: -moz-fit-content; + width: fit-content; + margin: var(--spacing) auto; + font-size: var(--fs-xsmall); +} +@media screen and (max-width: 768px) { + .btn--back-to-top { + margin-bottom: calc(var(--spacing) * 2); + } +} +.btn--back-to-top .icon { + width: 12px; + height: 12px; + transform: rotate(-90deg); + transform-origin: center; + position: relative; + top: -1px; +} +.btn--back-to-top .icon svg { + width: 12px; + height: 12px; +} +.btn--back-to-top:hover { + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); +} +.btn--back-to-top:hover a { + background-color: var(--grey-950); + color: var(--grey-100); +} +.btn--back-to-top:hover svg { + fill: var(--grey-100); } .tag { height: calc(var(--h-block) * 0.75); - border-radius: calc(var(--h-block) * 0.75 / 2); - display: flex; + border-radius: var(--radius-small); + display: inline-flex; align-items: center; justify-content: center; - padding: 0 1.5ch; + padding: 0 1ch; padding-top: 3px; - font-size: var(--fs-small); + font-size: var(--fs-xsmall); line-height: 1; + font-weight: 500; background-color: var(--color-txt); color: var(--color-bg); overflow: hidden; @@ -421,18 +533,226 @@ button:disabled { .keywords { list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.75ch; } -.keywords li { - display: inline-block; - padding-right: 0.75ch; -} -.keywords li a { +.keywords a { + display: inline-flex; + align-items: center; + justify-content: center; + height: calc(var(--h-block) * 0.75); + padding: 0 1ch; + padding-top: 2px; + border: var(--border-light); + border-radius: var(--radius-btn); + font-size: var(--fs-xsmall); + line-height: 1; + white-space: nowrap; text-decoration: none; } -.keywords li a::before { +.keywords a::before { content: "#"; padding-right: 0.25ch; } +.keywords a:hover { + border-color: currentColor; + background-color: var(--grey-800); +} + +.keywords--small { + list-style: none; +} +.keywords--small li { + display: inline; +} +.keywords--small a { + text-decoration: none; +} +.keywords--small a::before { + content: "#"; + padding-right: 0.25ch; +} +.keywords--small a::after { + content: " "; +} + +button.sort .arrow { + line-height: 0; + --size: 12px; + height: var(--size); + width: var(--size); + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + top: -2px; + transform: rotate(90deg); + transition: transform 0.2s ease-in; +} +button.sort .arrow svg { + width: 100%; + fill: var(--color-txt); +} +button.sort[data-sort-type=up] .arrow { + transform: rotate(-90deg); +} + +.page__sort { + margin-bottom: calc(var(--spacing) * 1); + display: flex; + justify-content: right; + grid-gap: var(--padding-inner); + width: 100%; + max-width: var(--max-w-cards); + margin-inline: auto; +} + +.btn--group__mobile { + z-index: calc(var(--z-header) - 10); + opacity: 0; + transition: opacity 0.3s ease-in; + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + height: calc(var(--h-block) * 3); + padding: calc(var(--spacing) * 0.75) var(--padding-body); + background-color: var(--color-bg); + background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 75%, transparent 100%); + display: flex; + 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%; +} + +@media screen and (min-width: 768px) { + .btn--group__mobile { + display: none; + opacity: 0 !important; + } +} +#summary__hero { + width: 100%; + position: relative; + left: 0; +} +#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 figure { + width: 100%; + position: relative; +} +#summary__hero figure img { + width: 100%; + aspect-ratio: 2/1; + -o-object-fit: cover; + object-fit: cover; +} +#summary__hero .swiper-slide { + position: relative; +} +#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 { + --swiper-navigation-sides-offset: 15px; + --swiper-navigation-size: 15px; + } +} +#summary__hero .swiper-button-prev svg, #summary__hero .swiper-button-next svg { + color: white; +} +#summary__hero .swiper-pagination { + position: static; + margin-top: calc(var(--spacing) * 0.5); + padding: 0 var(--padding-body); + text-align: center; +} +#summary__hero .swiper-pagination .swiper-pagination-bullet { + width: 15px; + height: 4px; + border-radius: 2px; + background: var(--color-txt-light); +} +#summary__hero .swiper-pagination .swiper-pagination-bullet-active { + background: var(--color-txt); + opacity: 0.8; +} +#summary__hero .player-container { + width: 100%; + position: relative; + aspect-ratio: 2/1; +} +#summary__hero .player-container .extract, #summary__hero .player-container video { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + position: relative; +} +#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 #hero-play-video { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: center; +} +#summary__hero .player-container #hero-play-video .btn--bold { + display: flex; + align-items: center; + justify-content: center; + gap: 1ch; + padding: 0 1ch; + opacity: 0.8; +} +#summary__hero .player-container #hero-play-video .btn--bold:hover { + opacity: 1; +} +#summary__hero .player-container #hero-play-video .text { + color: black; + line-height: 1; + padding-top: 4px; +} +#summary__hero .player-container #hero-play-video svg { + width: 18px; + height: 18px; + fill: black; + opacity: 0.8; +} .form__newsletter { --size: 24px; @@ -449,7 +769,7 @@ button:disabled { border: 1px solid var(--color-txt); padding: 0 2ch; font-family: var(--font); - font-size: var(--fs-normal); + font-size: var(--fs-small); z-index: 40; padding-top: 4px; background: var(--color-bg); @@ -457,12 +777,12 @@ button:disabled { } .form__newsletter input[type=email]::-moz-placeholder { font-family: var(--font); - font-size: var(--fs-normal); + font-size: var(--fs-small); color: var(--color-txt); } .form__newsletter input[type=email]::placeholder { font-family: var(--font); - font-size: var(--fs-normal); + font-size: var(--fs-small); color: var(--color-txt); } .form__newsletter input[type=email]:focus { @@ -476,7 +796,7 @@ button:disabled { .form__newsletter button[type=submit].btn--newletter { --size: calc(var(--h-block)*1.25 - 8px); font-family: var(--font); - font-size: var(--fs-button-bold); + font-size: var(--fs-small); height: var(--size); display: flex; align-items: center; @@ -505,7 +825,7 @@ button:disabled { .form__newsletter button[type=submit].btn--newletter .txt { position: relative; top: 2px; - font-size: var(--fs-normal); + font-size: var(--fs-small); display: none; padding-left: 1ch; } @@ -529,6 +849,51 @@ button:disabled { width: 100%; } +.search-form { + --icon: 40px; + display: grid; + grid-template-columns: var(--icon) 1fr; +} +.search-form input { + grid-column: 1/3; + grid-row: 1; + height: calc(var(--h-block) * 1.5); + width: 100%; + background: var(--color-bg); + border: 1px solid var(--color-txt); + padding-left: var(--icon); + font-family: var(--font); + font-size: var(--fs-normal); + color: var(--color-txt); + padding-top: 3px; +} +.search-form input::-moz-placeholder { + font-family: var(--font); + font-size: var(--fs-normal); + color: var(--color-txt); +} +.search-form input::placeholder { + font-family: var(--font); + font-size: var(--fs-normal); + color: var(--color-txt); +} +.search-form input:focus { + border-color: var(--color-accent); + outline: none; +} +.search-form .icon { + grid-column: 1; + grid-row: 1; + z-index: 10; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.search-form .icon svg { + width: 20px; +} + .list-socials { list-style: none; display: flex; @@ -542,16 +907,16 @@ button:disabled { text-decoration: none; } .list-socials .icon { - width: 24px; - height: 24px; + width: 20px; + height: 20px; position: relative; top: -2px; } .list-socials svg { display: flex; align-items: center; - width: 24px; - height: 24px; + width: 20px; + height: 20px; } .list-socials .text { display: none; @@ -562,9 +927,10 @@ button:disabled { display: block; } .footer__socials .list-socials li { - margin-bottom: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--spacing) * 0.25); -moz-column-break-inside: avoid; break-inside: avoid; + font-size: var(--fs-small); } .footer__socials .list-socials a { gap: 1ch; @@ -574,41 +940,61 @@ button:disabled { content: "↗"; color: var(--grey-300); } + .footer__socials .list-socials a:hover { + color: var(--color-accent); + } + .footer__socials .list-socials a:hover::after { + color: var(--color-accent); + opacity: 0.5; + } .footer__socials .list-socials .text { display: block; line-height: 1; } } .modal--share { - border: var(--border); - border-radius: var(--radius-btn); + width: 240px; + padding-bottom: var(--padding-inner); background-color: var(--color-bg); - padding: var(--padding-inner); - padding-top: calc(var(--padding-inner) * 0.5); - padding-bottom: calc(var(--padding-inner) * 1.5); } -.modal--share .modal-title { - display: none; +.modal--share .title { + font-size: var(--fs-xsmall); + line-height: 1.2; + padding: var(--padding-inner); + padding-bottom: 0px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-style: italic; +} +.modal--share .title::before { + content: "« "; +} +.modal--share .title::after { + content: " »"; } .modal--share .socials { display: block; list-style: none; } .modal--share .socials li { - font-size: var(--fs-normal); - padding-bottom: 6px; + font-size: var(--fs-xsmall); border-bottom: var(--border-light); - padding-top: 6px; +} +.modal--share .socials li:first-of-type { + border-top: var(--border-light); } .modal--share .socials li a { display: flex; align-items: center; - gap: 1ch; + gap: 2ch; text-decoration: none; + font-size: var(--fs-xsmall); } .modal--share .socials li .icon { - width: 20px; - height: 20px; + width: 16px; + height: 16px; } .modal--share .socials li .icon svg { width: 100%; @@ -618,18 +1004,12 @@ button:disabled { position: relative; top: 2px; } -.modal--share .socials li:hover { - color: var(--color-accent); -} -.modal--share .socials li:hover .icon svg, -.modal--share .socials li:hover .icon svg path, -.modal--share .socials li:hover .icon svg rect { - fill: var(--color-accent) !important; -} .modal--share .copy-link { display: flex; gap: 0.5ch; - margin-top: calc(var(--spacing) * 0.75); + padding: 0 var(--padding-inner); + height: var(--h-block); + width: 100%; } .modal--share .copy-link .copy-link__field { flex-grow: 1; @@ -650,7 +1030,7 @@ button:disabled { width: 12px; } .modal--share .copy-link input { - font-size: var(--fs-small); + font-size: var(--fs-xsmall); font-family: var(--font); background: none; border: none; @@ -668,27 +1048,180 @@ button:disabled { border-color: var(--color-txt); outline: none; } -.modal--share .copy-link button { +.modal--share .copy-link input.is-copied { + color: var(--color-accent) !important; +} +.modal--share .copy-link .copy-link__btn { background-color: var(--color-txt); color: var(--color-bg); border-radius: var(--radius-btn); padding: 0 1ch; - font-size: var(--fs-small); + font-size: var(--fs-xsmall); padding-top: 2px; + white-space: nowrap; + text-align: center; + width: 8ch !important; } -.modal--share .copy-link button:hover { +.modal--share .copy-link .copy-link__btn::after { + content: " "; +} +.modal--share .copy-link .copy-link__btn:hover { background-color: var(--color-accent); } -.title-page { - font-size: var(--fs-medium); +#share-banner__content, +#share-banner__aside, +#share-banner__desktop { + display: none; } +#share-banner__content ~ .modal--share, +#share-banner__aside ~ .modal--share, +#share-banner__desktop ~ .modal--share { + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in; +} + +#share-banner__content:checked ~ .modal--share, +#share-banner__aside:checked ~ .modal--share, +#share-banner__desktop:checked ~ .modal--share { + opacity: 1; + pointer-events: auto; +} + +.dropdown { + position: relative; + display: inline-block; +} +.dropdown__trigger { + cursor: pointer; +} +.dropdown__content { + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + margin-top: var(--padding-inner); + background-color: var(--color-bg); + border: var(--border); + border-radius: var(--radius-btn); + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; + z-index: 100; +} +.dropdown__content::before { + content: "◀"; + transform: rotate(90deg); + font-size: 14px; + position: absolute; + top: -13px; + left: 16px; +} +.dropdown__content ul { + list-style: none; + margin: 0; + padding: var(--padding-inner); +} +.dropdown__content a, .dropdown__content button { + display: block; + width: 100%; + padding: 0.75em 1ch; + font-size: var(--fs-small); + text-align: left; + text-decoration: none; + color: var(--color-txt); + background: none; + border: none; + cursor: pointer; +} +.dropdown__content a:hover, .dropdown__content button:hover { + background-color: var(--grey-800); +} +.dropdown--align-right .dropdown__content { + left: auto; + right: 0; +} +.dropdown--align-right .dropdown__content::before { + left: auto; + right: 16px; +} +.dropdown.is-open .dropdown__content { + opacity: 1; + visibility: visible; + transform: translateY(0); +} +.dropdown--position-mobile .dropdown__content { + top: auto; + bottom: calc(var(--h-block) + var(--padding-inner) * 2); + left: auto; + right: 0; + margin-top: 0; + margin-left: 4px; +} +.dropdown--position-mobile .dropdown__content::before { + font-family: Arial; + content: "◀"; + transform: rotate(-90deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: -13px; + left: auto; + right: 10%; +} +.dropdown--position-mobile.is-open .dropdown__content { + transform: translateX(0); +} +@media screen and (min-width: 768px) { + .dropdown--position-panel .dropdown__content { + top: auto; + bottom: 0; + left: calc(100% + var(--padding-inner)); + margin-top: 0; + margin-left: 4px; + } + .dropdown--position-panel .dropdown__content::before { + font-family: Arial; + content: "◀"; + transform: rotate(0deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: 4px; + left: -11px; + } + .dropdown--position-panel.is-open .dropdown__content { + transform: translateX(0); + } +} +@media screen and (max-width: 560px) { + .dropdown .dropdown__content { + width: calc(100vw - var(--padding-body) * 2); + } + .dropdown .dropdown__content .modal--share { + width: 100%; + } +} + +@media screen and (max-width: 1280px) { + [data-template=investigations] .dropdown .dropdown__content { + left: auto; + right: 0; + } + [data-template=investigations] .dropdown .dropdown__content::before { + left: auto; + right: 16px; + } +} .card--article { border: var(--border-light); position: relative; display: flex; flex-direction: column; + padding: var(--padding-inner); } .card--article figure { aspect-ratio: 16/9; @@ -702,35 +1235,55 @@ button:disabled { object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } -.card--article:hover figure img { - transform: scale(1.05); -} .card--article .content { - padding: var(--padding-inner); display: flex; flex-direction: column; - flex-grow: 2; +} +.card--article .pin { + position: absolute; + top: calc(var(--padding-inner) * 1.5); + left: calc(var(--padding-inner) * 1.5); + z-index: 10; + width: 24px; + height: 24px; + border-radius: var(--radius-small); + background-color: rgba(255, 255, 255, 0.27); + display: flex; + align-items: center; + justify-content: center; +} +.card--article .pin svg { + width: 16px; + fill: var(--color-txt); +} +.card--article .time-alone { + display: none; + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing) * 0.75); } .card--article .title { - margin-top: calc(var(--spacing) * 0.5); - font-size: var(--fs-medium); - font-weight: normal; + margin-top: calc(var(--spacing) * 0.75); + font-size: var(--fs-normal); + line-height: var(--leading-title); + font-weight: 500; text-transform: uppercase; - flex-grow: 2; + text-wrap: balance; } .card--article .title a { text-decoration: none; } .card--article .description { - margin-top: calc(var(--spacing) * 1); - font-size: var(--fs-small); + margin-top: calc(var(--spacing) * 0.5); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; + font-size: var(--fs-small); } .card--article .dl { margin-top: calc(var(--spacing) * 0.5); + border-bottom: var(--border-light); + font-size: var(--fs-small); } .card--article .dl .dl__group { display: grid; @@ -744,17 +1297,25 @@ button:disabled { color: var(--color-txt-light); padding-right: 1ch; } -.card--article .dl ul:not(.keywords) { +.card--article .dl ul { list-style: none; } -.card--article .dl ul:not(.keywords) li { +.card--article .dl ul li { padding-bottom: 0.2em; } -.card--article .dl .dl__group__keywords { - padding-bottom: 0; +.card--article .keywords-wrapper { + z-index: 3000; + margin-top: calc(var(--spacing) * 0.5); +} +.card--article .keywords { + grid-column: 2; } .card--article:hover { border-color: var(--color-txt); + background-color: var(--grey-950); +} +.card--article .link-block { + z-index: 2000; } .card--article-small { @@ -762,7 +1323,37 @@ button:disabled { grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; - margin-bottom: var(--spacing); + 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::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--article-small.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--article-small.has-link:hover::before { + border-color: var(--color-txt); } .card--article-small figure { aspect-ratio: 16/9; @@ -776,18 +1367,25 @@ button:disabled { object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } -.card--article-small:hover figure img { - transform: scale(1.05); +@media screen and (max-width: 560px) { + .card--article-small figure { + margin-left: 0px; + } } .card--article-small .content { display: flex; flex-direction: column; padding-top: calc(var(--spacing) * 0.25); + padding-right: calc(var(--padding-inner) * 3); } .card--article-small .title { - font-weight: normal; - font-size: var(--fs-medium); + font-weight: 500; + font-size: var(--fs-small); margin-bottom: 0.25em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + line-height: var(--leading-title); } .card--article-small .title a { text-decoration: none; @@ -796,13 +1394,63 @@ button:disabled { flex-grow: 1; color: var(--color-txt-light); } -.card--article-small .keywords { - margin-top: 1.5em; - padding-bottom: calc(var(--spacing) * 0.25); - color: var(--color-txt-light); +.card--article-small .description { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: calc(var(--spacing) * 0.75); + margin-top: calc(var(--spacing) * 0.25); } -.card--article-small:hover .title { - text-decoration: underline; +.card--article-small .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); +} +.card--article-small .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--article-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +@media screen and (max-width: 560px) { + .card--article-small .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--article-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--article-small:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--article-small:first-of-type { + border-top: var(--border-light); +} +.card--article-small::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--article-small:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--article-small:hover::before { + border-color: var(--color-txt); +} +.card--article-small .keywords { + display: none; } @media screen and (max-width: 1080px) { .card--article-small .title { @@ -812,65 +1460,154 @@ button:disabled { } @media screen and (max-width: 560px) { .card--article-small .content { - padding: 0; + display: contents; } .card--article-small .title { - margin-bottom: 0; - } - .card--article-small time { font-size: var(--fs-small); - margin-top: 0.25em; + padding-top: calc(var(--spacing) * 0.25); } - .card--article-small .keywords { - margin-top: 0.5em; - padding-bottom: 0; + .card--article-small figure { + grid-row: 1/3; + } + .card--article-small .description { + grid-column: span 2; } } .card--impact { + container-type: inline-size; + container-name: impact; + border: var(--border-light); + margin-bottom: calc(var(--spacing) * 1); +} +.card--impact.has-link { + border-bottom: var(--border-light); + position: relative; +} +.card--impact.has-link:first-of-type { + border-top: var(--border-light); +} +.card--impact.has-link::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--impact.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--impact.has-link:hover::before { + border-color: var(--color-txt); +} +.card--impact .card--impact__inner { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; - padding: calc(var(--spacing) * 0.5) 0; - border-bottom: var(--border-light); + padding: calc(var(--padding-inner) * 1.5) var(--padding-inner); + font-size: var(--fs-small); + position: relative; } -.card--impact:first-of-type { - border-top: var(--border-light); +.card--impact .card--impact__inner .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); } -.card--impact .content { - grid-column: 2; +.card--impact .card--impact__inner .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--impact .card--impact__inner .btn--go-to svg { + width: 11px; + height: 11px; + } } @media screen and (max-width: 560px) { - .card--impact:not([data-impact-type=media]) .content { + .card--impact .card--impact__inner .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--impact .card--impact__inner .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--impact .card--impact__inner:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--impact .card--impact__inner .btn--go-to { + top: calc(var(--padding-inner) * 1); + bottom: auto; +} +.card--impact .card--impact__inner .content { + grid-column: 2; +} +.card--impact .card--impact__inner .card--open-graph { + grid-row: 1/3; + grid-column: 2; + z-index: 10; +} +.card--impact .card--impact__inner .keywords-wrapper { + grid-column: 1; + grid-row: 2/4; + align-self: end; + z-index: 10; +} +@media screen and (max-width: 560px) { + .card--impact .card--impact__inner:not([data-impact-type=media]) .content { grid-column: span 2; } } -.card--impact .tag { +.card--impact .card--impact__inner .tag { width: auto; justify-self: start; position: relative; top: -5px; } -.card--impact .content .see-more { - color: var(--color-txt-light); +.card--impact .card--impact__inner:not([data-impact-type=media]) .content { + padding-right: calc(var(--padding-inner) * 2.5); +} +.card--impact .card--impact__inner .investigations { + z-index: 10; + grid-column: 2; + list-style: none; + font-size: var(--fs-xsmall); +} +.card--impact .card--impact__inner .investigations a { text-decoration: none; - white-space: nowrap; + color: var(--color-txt-light); } -.card--impact .content .see-more::after { - content: " +"; +.card--impact .card--impact__inner .investigations .icon { + position: relative; + top: 2px; } -.card--impact .open-graph__details { - grid-column: span 2; +.card--impact .card--impact__inner .investigations .icon svg { + width: 14px; + height: 14px; + fill: var(--color-txt-light); } -.card--impact .open-graph__details summary, -.card--impact .open-graph__details .summary-inner { +.card--impact .card--impact__inner .investigations li:hover a { + color: var(--color-txt); +} +.card--impact .card--impact__inner .investigations li:hover .icon svg { + fill: var(--color-txt); +} +.card--impact .card--impact__inner .open-graph__details { + grid-column: 2; +} +.card--impact .card--impact__inner .open-graph__details summary, +.card--impact .card--impact__inner .open-graph__details .summary-inner { display: flex; align-items: center; cursor: pointer; gap: 0.5ch; } -.card--impact .open-graph__details .arrow-details { +.card--impact .card--impact__inner .open-graph__details .arrow-details { line-height: 0; --size: 11px; height: var(--size); @@ -881,69 +1618,494 @@ button:disabled { position: relative; top: -2px; } -.card--impact .open-graph__details .arrow-details svg { +.card--impact .card--impact__inner .open-graph__details .arrow-details svg { transition: transform 0.2s ease-in; width: 100%; fill: var(--color-txt); } -.card--impact .open-graph__details[open] .arrow-details svg { +.card--impact .card--impact__inner .open-graph__details summary:hover { + color: var(--color-txt); +} +.card--impact .card--impact__inner .open-graph__details summary:hover .arrow-details svg { + fill: var(--color-txt); +} +.card--impact .card--impact__inner .open-graph__details[open] .arrow-details svg { transform: rotate(90deg); } -.card--impact .open-graph__details summary { +.card--impact .card--impact__inner .open-graph__details summary { color: var(--color-txt-light); } -.card--impact .open-graph__details summary .arrow-details svg { +.card--impact .card--impact__inner .open-graph__details summary .arrow-details svg { fill: var(--color-txt-light); } -.card--impact .open-graph__details summary { - display: grid; - grid-gap: var(--padding-inner); - grid-template-columns: 2fr 3fr; - position: relative; -} -.card--impact .open-graph__details summary .summary-inner { - grid-column: 2; -} -.card--impact .open-graph__inner { - margin-top: calc(var(--spacing) * 0.5); - margin-bottom: calc(var(--spacing) * 1); -} -@media screen and (min-width: 768px) { - .card--impact .open-graph__inner { - margin-bottom: calc(var(--spacing) * 2); +@media screen and (max-width: 560px) { + .card--impact .card--impact__inner .open-graph__details { + grid-column: 1/3; + } + .card--impact .card--impact__inner .open-graph__details summary { + display: grid; + grid-gap: var(--padding-inner); + grid-template-columns: 2fr 3fr; + position: relative; + grid-row-gap: 0; + } + .card--impact .card--impact__inner .open-graph__details summary .summary-inner { + grid-column: 2; } } -.card--impact .open-graph__inner .card--open-graph { - margin-bottom: calc(var(--spacing) * 0.5); -} -.card--open-graph { +@container impact (width < 460px) { + .card--impact__inner { + display: block !important; + padding-top: var(--padding-inner) !important; + padding-bottom: calc(var(--padding-inner) * 0.75) !important; + } + .card--impact__inner .tag, .card--impact__inner .date { + display: inline-flex; + margin-right: 2ch; + top: 0px !important; + } + .card--impact__inner .card--impact__inner > .content { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + padding-right: 0 !important; + } + .card--impact__inner .card--open-graph { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .investigations { + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .keywords-wrapper { + margin-top: calc(var(--spacing) * 1); + } + .card--impact__inner .content, + .card--impact__inner details { + font-size: var(--fs-small) !important; + } + .card--impact__inner .date { + font-size: var(--fs-xsmall) !important; + } + .card--impact__inner .btn--go-to { + top: calc(var(--padding-inner) * 1.25) !important; + bottom: auto; + right: calc(var(--padding-inner) * 1.25) !important; + } +} +@media screen and (max-width: 560px) { + .card--impact__inner { + display: block !important; + padding-top: var(--padding-inner) !important; + padding-bottom: calc(var(--padding-inner) * 0.75) !important; + } + .card--impact__inner .tag, .card--impact__inner .date { + display: inline-flex; + margin-right: 2ch; + top: 0px !important; + } + .card--impact__inner .content { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + padding-right: 0 !important; + } + .card--impact__inner .card--open-graph { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .investigations { + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .keywords-wrapper { + margin-top: calc(var(--spacing) * 1); + } + .card--impact__inner .date, + .card--impact__inner .content, + .card--impact__inner details { + font-size: 14px !important; + } + .card--impact__inner .btn--go-to { + top: calc(var(--padding-inner) * 1.25) !important; + bottom: auto; + right: calc(var(--padding-inner) * 1.25) !important; + } +} +.card--impact-small { + border-bottom: var(--border-light); display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; - border: var(--border-light); - border-radius: var(--radius-small); + padding: var(--padding-inner) 0; position: relative; } -.card--open-graph figure { - grid-column: 1; - grid-row: 1; +.card--impact-small:first-of-type { + border-top: var(--border-light); } -.card--open-graph figure { +.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::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--impact-small.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--impact-small.has-link:hover::before { + border-color: var(--color-txt); +} +.card--impact-small .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); +} +.card--impact-small .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--impact-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +@media screen and (max-width: 560px) { + .card--impact-small .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--impact-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--impact-small:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--impact-small .btn--go-to { + top: calc(var(--padding-inner) * 1); + bottom: auto; +} +.card--impact-small .content { + grid-column: 2; +} +.card--impact-small .card--open-graph { + grid-column: 2; + z-index: 10; +} +.card--impact-small .keywords { + grid-column: 2; + z-index: 10; +} +@media screen and (max-width: 560px) { + .card--impact-small .keywords { + display: none; + } +} +@media screen and (max-width: 560px) { + .card--impact-small:not([data-impact-type=media]) .content, + .card--impact-small .keywords { + grid-column: span 2; + } +} +.card--impact-small .tag { + width: auto; + justify-self: start; + position: relative; + top: -5px; +} +.card--impact-small:not([data-impact-type=media]) .content { + padding-right: calc(var(--padding-inner) * 2.5); +} +@media screen and (max-width: 560px) { + .card--impact-small:not([data-impact-type=media]) .content { + padding-right: 0; + } +} +.card--impact-small .open-graph__details { + grid-column: 2; +} +.card--impact-small .open-graph__details summary, +.card--impact-small .open-graph__details .summary-inner { + display: flex; + align-items: center; + cursor: pointer; + gap: 0.5ch; +} +.card--impact-small .open-graph__details .arrow-details { + line-height: 0; + --size: 11px; + height: var(--size); + width: var(--size); + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + top: -2px; +} +.card--impact-small .open-graph__details .arrow-details svg { + transition: transform 0.2s ease-in; + width: 100%; + fill: var(--color-txt); +} +.card--impact-small .open-graph__details summary:hover { + color: var(--color-txt); +} +.card--impact-small .open-graph__details summary:hover .arrow-details svg { + fill: var(--color-txt); +} +.card--impact-small .open-graph__details[open] .arrow-details svg { + transform: rotate(90deg); +} +.card--impact-small .open-graph__details summary { + color: var(--color-txt-light); +} +.card--impact-small .open-graph__details summary .arrow-details svg { + 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); + grid-template-columns: 2fr 3fr; + position: relative; + grid-row-gap: 0; + } + .card--impact-small .open-graph__details summary .summary-inner { + grid-column: 2; + } +} + +.card--folder { + position: relative; + max-width: var(--max-w-cards); + border: var(--border-light); + padding: var(--padding-inner); + display: grid; + grid-gap: var(--padding-inner); + grid-template-columns: 2fr 3fr; + position: relative; + container-type: inline-size; + container-name: cardfolder; + position: relative; +} +.card--folder figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } -.card--open-graph figure img { +.card--folder 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; } -.card--open-graph:hover figure img { - transform: scale(1.05); +.card--folder figure { + border-radius: var(--radius-small); + background-color: var(--color-accent); +} +.card--folder figure img { + opacity: 0.8; + filter: grayscale(1); +} +.card--folder .content { + display: flex; + flex-direction: column; + font-size: var(--fs-small); +} +.card--folder .title { + font-weight: 500; + font-size: var(--fs-normal); + line-height: var(--leading-title); + margin-bottom: 0.75em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + padding-top: calc(var(--spacing) * 0.25); +} +.card--folder .title a { + text-decoration: none; +} +@media screen and (max-width: 768px) { + .card--folder .title { + font-size: var(--fs-normal); + } +} +.card--folder .title .icon { + padding-right: 1ch; + position: relative; + top: 1px; +} +.card--folder .title .icon svg { + height: 15px; + width: 15px; + fill: var(--color-txt); +} +.card--folder .short { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + flex-grow: 1; + padding-right: calc(var(--padding-inner) * 2); +} +.card--folder ul { + display: flex; + list-style: none; + gap: 1ch; + color: var(--color-txt-light); + padding-top: calc(var(--spacing) * 0.5); +} +.card--folder ul li + li::before { + content: "|"; + padding-right: 1ch; +} +@media screen and (max-width: 768px) { + .card--folder ul { + font-size: var(--fs-small); + } +} +.card--folder .btn--go-to { + position: absolute; + right: calc(var(--padding-inner) * 1); + bottom: var(--padding-inner); +} +.card--folder .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); +} +.card--folder .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--folder .btn--go-to svg { + width: 11px; + height: 11px; + } +} +@media screen and (max-width: 560px) { + .card--folder .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--folder .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--folder:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--folder:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} + +[data-template=investigation-summary] .card--folder { + border: none; + padding-left: 0; + padding-right: 0; + border-bottom: var(--border-light); +} +[data-template=investigation-summary] .card--folder:first-of-type { + border-top: var(--border-light); +} +[data-template=investigation-summary] .card--folder.has-link { + border-bottom: var(--border-light); + position: relative; +} +[data-template=investigation-summary] .card--folder.has-link:first-of-type { + border-top: var(--border-light); +} +[data-template=investigation-summary] .card--folder.has-link::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +[data-template=investigation-summary] .card--folder.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +[data-template=investigation-summary] .card--folder.has-link:hover::before { + border-color: var(--color-txt); +} +@media screen and (max-width: 560px) { + [data-template=investigation-summary] .card--folder figure { + margin-left: 0px; + } +} +[data-template=investigation-summary] .card--folder .title { + font-size: var(--fs-small); +} + +@media screen and (max-width: 560px) { + .card--folder .content { + display: contents; + } + .card--folder figure { + grid-row: 1/3; + } + .card--folder .title { + font-size: var(--fs-small); + padding-top: calc(var(--spacing) * 0.25); + margin-bottom: 0; + } + .card--folder .short { + grid-column: span 2; + } + .card--folder ul { + grid-column: 2; + grid-row: 2; + padding-top: 0; + } +} +.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; + grid-gap: var(--padding-inner); + grid-template-columns: 2fr 3fr; + position: relative; +} +.card--open-graph figure { + grid-column: 1; + grid-row: 1; + width: 100%; + height: 100%; +} +.card--open-graph figure img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; } @media screen and (max-width: 560px) { .card--open-graph figure { @@ -952,18 +2114,22 @@ button:disabled { } } .card--open-graph .content { - padding: var(--padding-inner); - padding-left: 0; + padding-top: calc(var(--padding-inner) * 0.75); + padding-bottom: calc(var(--padding-inner) * 0.75); + padding-right: var(--padding-inner); grid-column: 2; grid-row: 1; } .card--open-graph .site-name { color: var(--color-txt-light); - font-size: var(--fs-small); + font-size: var(--fs-xsmall); + margin-bottom: 3px; } .card--open-graph .title { - font-size: var(--fs-normal); - font-weight: normal; + font-size: var(--fs-small); + font-weight: 500; + line-height: 1.1; + padding-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -974,31 +2140,163 @@ button:disabled { text-decoration: none; } .card--open-graph .description { - font-size: var(--fs-small); + font-size: var(--fs-xsmall); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } -.card--open-graph:hover .title { - text-decoration: underline; +.card--open-graph:hover { + border-color: var(--color-txt); + background-color: var(--grey-950); } -@keyframes add-border { - from { - border-bottom-color: transparent; +@container opengraph (width < 500px) {} +.swiper { + --slide-padding: 30px; +} +.swiper .swiper-button-prev, +.swiper .swiper-button-next { + --swiper-navigation-size: 32px; + color: var(--color-txt); + background-color: var(--color-bg); + height: 100%; + width: var(--slide-padding); + top: 0px !important; + height: calc(100% - var(--spacing) * 1); +} +.swiper .swiper-button-prev svg, +.swiper .swiper-button-next svg { + width: 14px; +} +.swiper .swiper-button-prev.swiper-button-disabled, +.swiper .swiper-button-next.swiper-button-disabled { + opacity: 1; +} +.swiper .swiper-button-prev.swiper-button-disabled svg, +.swiper .swiper-button-next.swiper-button-disabled svg { + opacity: 0.05; +} +.swiper .swiper-button-prev { + left: 0px !important; + top: 0px; + justify-content: flex-start; +} +.swiper .swiper-button-next { + right: 0px !important; + top: 0px; + justify-content: flex-end; +} +.swiper .swiper-slide { + padding-left: var(--slide-padding); + padding-right: var(--slide-padding); +} +.swiper .swiper-pagination { + position: relative; + margin-top: 0px !important; + margin-top: calc(var(--spacing) * 0.5) !important; +} +.swiper .swiper-pagination .swiper-pagination-bullet { + width: 15px; + height: 4px; + border-radius: 2px; + background: var(--color-txt-light); +} +.swiper .swiper-pagination .swiper-pagination-bullet-active { + background: var(--color-txt); +} +@media screen and (max-width: 560px) { + .swiper .swiper-button-prev, + .swiper .swiper-button-next { + display: none; } - to { - border-bottom: var(--grey-800); + .swiper .swiper-slide { + padding: 0px; } } + +.slider-before-after { + width: 100%; + max-width: 700px; + z-index: 300; + display: grid; + place-content: center; + position: relative; + overflow: hidden; + --position: 50%; +} +.slider-before-after img { + display: block; + max-width: 100%; +} +.slider-before-after .image-container { + position: relative; + width: 100%; +} +.slider-before-after .slider-image { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: left; + object-position: left; +} +.slider-before-after .image-before { + position: absolute; + inset: 0; + width: var(--position); +} +.slider-before-after .slider { + position: absolute; + inset: 0; + cursor: pointer; + opacity: 0; + /* for Firefox */ + width: 100%; + height: 100%; +} +.slider-before-after .slider:focus-visible ~ .slider-button { + outline: 5px solid black; + outline-offset: 3px; +} +.slider-before-after .slider-line { + position: absolute; + inset: 0; + width: 0.2rem; + height: 100%; + background-color: #fff; + /* z-index: 10; */ + left: var(--position); + transform: translateX(-50%); + pointer-events: none; +} +.slider-before-after .slider-button { + position: absolute; + background-color: #fff; + color: black; + padding: 0.5rem; + border-radius: 100vw; + display: grid; + place-items: center; + top: 50%; + left: var(--position); + transform: translate(-50%, -50%); + pointer-events: none; + /* z-index: 100; */ + box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5); +} + #site-header { - z-index: 900; + z-index: var(--z-header); --gap: 3ch; + position: fixed; + top: 0; + left: 0; width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); + box-shadow: -1px 4px 10px 0px var(--color-bg); } #site-header .site-header__inner { width: 100%; @@ -1025,7 +2323,7 @@ button:disabled { width: 80px; } } -#site-header .title-page { +#site-header .header__title-page { display: none; flex-grow: 2; text-align: left; @@ -1042,6 +2340,7 @@ button:disabled { align-items: center; gap: var(--gap); text-transform: uppercase; + font-weight: 500; } #site-header #theme-toggle { width: var(--h-block); @@ -1059,6 +2358,9 @@ button:disabled { display: flex; gap: 1ch; } +#site-header #lang-toggle button { + font-weight: 500; +} #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } @@ -1067,6 +2369,7 @@ button:disabled { } #site-header #menu-toggle svg { width: 30px; + fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; @@ -1075,39 +2378,6 @@ button:disabled { fill: var(--grey-200) !important; } -#site-header.is-visible { - position: fixed; - top: 0; -} -#site-header.is-visible .site-header__inner { - border-bottom: var(--border-light); -} -#site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) { - display: none; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner #site-title { - flex-grow: 0; - width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2); - } -} -@media screen and (max-width: 1080px) { - #site-header.is-visible .site-header__inner #site-title { - width: calc(var(--banner-medium) - var(--padding-body)); - } -} -#site-header.is-visible .site-header__inner .title-page { - flex-grow: 2; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner .title-page { - display: block; - } -} -#site-header.is-visible ~ main { - margin-top: var(--header-h); -} - @media screen and (max-width: 1080px) { #nav-highlight { display: none; @@ -1124,61 +2394,24 @@ button:disabled { background-color: var(--color-bg); border-left: var(--border-light); padding: var(--padding-body); - z-index: 1000; + 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; + } +} @media screen and (max-width: 560px) { #site-menu { width: 100vw; right: -100vw; } } -#site-menu form { +#site-menu .search-form { margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1); - --icon: 40px; - display: grid; - grid-template-columns: var(--icon) 1fr; -} -#site-menu form input { - grid-column: 1/3; - grid-row: 1; - height: calc(var(--h-block) * 1.5); - width: 100%; - background: var(--color-bg); - border: 1px solid var(--color-txt); - padding-left: var(--icon); - font-family: var(--font); - font-size: var(--fs-normal); - color: var(--color-txt); - padding-top: 3px; -} -#site-menu form input::-moz-placeholder { - font-family: var(--font); - font-size: var(--fs-normal); - color: var(--color-txt); -} -#site-menu form input::placeholder { - font-family: var(--font); - font-size: var(--fs-normal); - color: var(--color-txt); -} -#site-menu form input:focus { - border-color: var(--color-accent); - outline: none; -} -#site-menu form .icon { - grid-column: 1; - grid-row: 1; - z-index: 10; - width: 100%; - display: flex; - align-items: center; - justify-content: center; -} -#site-menu form .icon svg { - width: 20px; } #site-menu nav { flex-grow: 1; @@ -1186,6 +2419,7 @@ button:disabled { #site-menu nav ul { list-style-type: none; text-transform: uppercase; + font-weight: 500; } #site-menu nav ul li { font-size: var(--fs-normal); @@ -1201,14 +2435,10 @@ button:disabled { #site-menu nav ul .highlight { text-transform: uppercase; } +#site-menu .socials { + padding-bottom: calc(var(--spacing) * 0.75); +} -body.menu-open { - overflow: hidden; -} -body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight { - transition: opacity 0.3s ease-in; - opacity: 0.1; -} body.menu-open #site-menu { right: 0; } @@ -1222,6 +2452,12 @@ body.menu-open #menu-toggle .close { #site-footer { background-color: var(--dark); padding: calc(var(--padding-body) * 2) var(--padding-body); + z-index: 500; +} +#site-footer .site-footer__container { + max-width: var(--max-w-cards); + margin: 0 auto; + padding: 0 var(--padding-body); } #site-footer .logo { margin-top: calc(var(--spacing) * 0.25); @@ -1232,6 +2468,7 @@ body.menu-open #menu-toggle .close { } #site-footer p { margin: calc(var(--spacing) * 0.5) 0; + font-size: var(--fs-small); } #site-footer p a { text-decoration: none; @@ -1245,13 +2482,13 @@ body.menu-open #menu-toggle .close { color: var(--grey-600); } #site-footer .footer__mentions p { - font-size: var(--fs-small); + font-size: var(--fs-xsmall); color: var(--color-txt); } +#site-footer .footer__socials > p { + font-weight: 500; +} @media screen and (max-width: 768px) { - #site-footer { - margin-top: calc(var(--spacing) * 2); - } #site-footer .footer__socials { margin-top: calc(var(--spacing) * 0.75); padding-top: calc(var(--spacing) * 0.25); @@ -1266,21 +2503,29 @@ body.menu-open #menu-toggle .close { padding-top: calc(var(--spacing) * 0.25); } #site-footer .footer__mentions p { - font-size: var(--fs-small); + font-size: 12px; text-align: center; } + #site-footer .p__small { + font-size: 12px; + } } @media screen and (min-width: 768px) { #site-footer .site-footer__container { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 3fr 2fr; -moz-column-gap: calc(var(--spacing) * 2); column-gap: calc(var(--spacing) * 2); - max-width: 1200px; - margin: 0 auto; + } + #site-footer .footer__newsletter { + grid-column: 1; + grid-row: 2; + } + #site-footer .footer__socials { + grid-column: 2; + grid-row: 2; } #site-footer .footer__socials .socials { - max-width: 400px; -moz-columns: 2; columns: 2; margin-top: calc(var(--spacing) * 1); @@ -1296,92 +2541,254 @@ body.menu-open #menu-toggle .close { body { min-height: 100dvh; min-height: 100vh; + width: 100vw; + overflow-x: hidden; display: flex; flex-direction: column; } body main { flex-grow: 1; padding: 0 var(--padding-body); + padding-top: var(--header-h); + padding-bottom: calc(var(--spacing) * 2); + min-height: 100dvh; + min-height: 100vh; +} +body main .page__header, +body main .page__content { + max-width: var(--max-w-cards); + margin-inline: auto; } -[data-template=investigations] main #container-cards { - max-width: var(--max-w-container); +.page__type { + height: calc(var(--h-block) * 0.75); + border-radius: var(--radius-small); + border: var(--border-medium); + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 1.5ch; + padding-top: 3px; + font-size: var(--fs-xsmall); + background-color: var(--color-bg); + color: var(--color-txt-light); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-transform: uppercase; +} + +main .page__header { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 2); +} +@media screen and (max-width: 768px) { + main .page__header { + margin-top: calc(var(--spacing) * 2); + } +} +main .page__header .page__title { + max-width: var(--max-w-content); + text-transform: uppercase; + font-weight: normal; + font-size: var(--fs-medium); + font-weight: 500; + line-height: var(--leading-title); + margin-top: calc(var(--spacing) * 1); + margin-bottom: calc(var(--spacing) * 0.5); + text-wrap: balance; +} +main .page__header .description-medium { + max-width: 58ch; + line-height: 1.1; +} + +.container-cards { + max-width: var(--max-w-cards); margin: 0 auto; display: grid; - grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); - grid-auto-rows: minmax(100px, auto); - grid-gap: var(--padding-body); - margin-bottom: 10vh; + grid-gap: calc(var(--spacing) * 1); } +@media screen and (min-width: 560px) { + .container-cards__investigations { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: var(--padding-body); + margin-bottom: 10vh; + } +} +@media screen and (max-width: 560px) { + .container-cards__investigations { + margin-bottom: 10vh; + } +} + +.section--home .title-section { + font-weight: normal; + font-size: var(--fs-big); + margin-bottom: calc(var(--spacing) * 1); +} +.section--home .description-section { + max-width: 42ch; + font-size: var(--fs-normal); + line-height: 1.1; +} +.section--home .btn--home { + margin-top: calc(var(--spacing) * 2); +} +@media screen and (min-width: 1080px) { + .section--home { + border-bottom: var(--border-light); + } + .section--home .section--inner { + max-width: 1280px; + margin: calc(var(--spacing) * 4) auto; + display: grid; + --gap: calc(var(--padding-body)*2); + grid-template-columns: 1fr 640px; + grid-gap: var(--gap); + } + .section--home .col-left { + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + } + .section--home .col-right { + width: 100%; + height: 100%; + } +} +#home__investigations .home-investigations-slider { + max-width: 500px; + height: auto; +} +#home__investigations .card--article .time-alone { + display: block; +} +#home__investigations .card--article .dl, +#home__investigations .card--article .pin { + display: none; +} + +#home__hero { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); +} +@media screen and (max-width: 560px) { + #home__hero { + margin-top: calc(var(--spacing) * 2.5); + padding-bottom: calc(var(--spacing) * 1.5); + margin-bottom: 0px; + } +} +#home__hero .section--inner { + display: block; +} +#home__hero .baseline { + font-size: var(--fs-big); + line-height: 1.1; + max-width: 32ch; +} +#home__hero button { + margin-top: calc(var(--spacing) * 1); +} + +#home__folders .card--folder { + margin-bottom: calc(var(--spacing) * 0.5); +} + +@media screen and (max-width: 1080px) { + .section--home:not(#home-hero) { + border-bottom: var(--border); + padding-bottom: calc(var(--spacing) * 4); + margin-bottom: calc(var(--spacing) * 4); + } + .section--home:not(#home-hero) .col-left { + margin-bottom: calc(var(--spacing) * 3); + } + #home__hero { + height: calc(100vh - var(--header-h)); + margin: 0 !important; + border-bottom: none !important; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding-bottom: 25vh !important; + } + #home__investigations { + margin-top: 0px; + } +} [data-template=investigation-summary] main { position: relative; } -[data-template=investigation-summary] main header .page-type { - text-transform: uppercase; - color: var(--color-txt-light); - margin-bottom: calc(var(--spacing) * 0.5); +[data-template=investigation-summary] main .page__header { + margin-inline: auto; + max-width: var(--max-w-content); } -[data-template=investigation-summary] main header h2 { - font-size: var(--fs-xbig); - line-height: var(--leading-tight); +[data-template=investigation-summary] main .panel-left { + width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5); +} +@media screen and (max-width: 1340px) { + [data-template=investigation-summary] main { + margin-left: auto; + margin-right: calc(var(--padding-body) * 3); + } + [data-template=investigation-summary] main .panel-left { + width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6); + } +} +@media screen and (max-width: 1220px) { + [data-template=investigation-summary] main { + margin-left: auto; + margin-right: 0px; + width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body)); + } + [data-template=investigation-summary] main .panel-left { + width: calc(var(--panel-w) * 0.5); + } +} +[data-template=investigation-summary] main .section__article { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); + max-width: var(--max-w-content); + margin-inline: auto; +} +[data-template=investigation-summary] main .section__article:target { + padding-top: calc(var(--header-h) + var(--spacing) * 1); } [data-template=investigation-summary] main .section__article a:hover { color: var(--grey-200); } [data-template=investigation-summary] main .section__article .section__title { - font-weight: normal; + font-weight: 500; text-transform: uppercase; - margin-bottom: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--spacing) * 1); + padding-right: 2ch; + text-wrap: balance; } -[data-template=investigation-summary] main #hero { - width: 100vw; - position: relative; - left: calc(var(--padding-body) * -1); -} -[data-template=investigation-summary] main #hero figcaption { - color: var(--color-txt-light); +[data-template=investigation-summary] main #section__dl, +[data-template=investigation-summary] main #section__impacts, +[data-template=investigation-summary] main #section__folder, +[data-template=investigation-summary] main #section__related-articles { font-size: var(--fs-small); - padding-top: calc(var(--spacing) * 0.5); -} -@media screen and (max-width: 560px) { - [data-template=investigation-summary] main #hero figcaption { - font-size: var(--fs-xsmall); - } -} -[data-template=investigation-summary] main #hero.hero-video figure { - width: 100%; -} -[data-template=investigation-summary] main #hero.hero-video figure img { - width: 100%; - aspect-ratio: 16/9; - -o-object-fit: cover; - object-fit: cover; -} -[data-template=investigation-summary] main #nav--page ul { - list-style: none; -} -[data-template=investigation-summary] main #nav--page ul li { - text-align: center; - color: var(--color-txt-light); -} -[data-template=investigation-summary] main #nav--page ul li a { - display: block; - padding: 0.3em 0; - text-decoration: none; -} -[data-template=investigation-summary] main #section__short { - font-size: var(--fs-medium); } [data-template=investigation-summary] main #section__dl { margin-top: calc(var(--spacing) * 1.5); border-bottom: var(--border-light); + max-width: var(--max-w-content); + margin-inline: auto; } [data-template=investigation-summary] main #section__dl .dl__group { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; + -moz-column-gap: 1ch; + column-gap: 1ch; border-top: var(--border-light); padding: calc(var(--spacing) * 0.5) 0; } @@ -1395,173 +2802,518 @@ body main { [data-template=investigation-summary] main #section__dl ul:not(.keywords) li { padding-bottom: 0.2em; } +[data-template=investigation-summary] main #section__synthese { + max-width: var(--max-w-content); + margin-inline: auto; +} [data-template=investigation-summary] main #section__synthese p + p { - margin-top: 0.5em; + margin-top: 1em; } [data-template=investigation-summary] main #section__synthese h4 { margin-top: 2em; margin-bottom: 1em; font-size: var(--fs-normal); - font-weight: normal; + font-weight: 500; -webkit-text-decoration: 1px underline var(--color-txt-light); text-decoration: 1px underline var(--color-txt-light); text-underline-offset: 3px; } - -#share-banner__desktop { - display: none; +[data-template=investigation-summary] main .panel-left { + height: calc(100vh - var(--header-h)); + position: fixed; + left: var(--padding-body); + padding-bottom: calc(var(--padding-body) * 1); + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + z-index: calc(var(--z-header) - 1); } - -#share-banner__desktop ~ .modal--share { - opacity: 0; - pointer-events: none; - transition: opacity 0.2s ease-in; +[data-template=investigation-summary] main .panel-left #nav--page { + padding-bottom: var(--spacing); + width: calc(var(--panel-w) * 0.5); } - -#share-banner__desktop:checked ~ .modal--share { - opacity: 1; - pointer-events: auto; +[data-template=investigation-summary] main .panel-left #nav--page ul { + list-style: none; +} +[data-template=investigation-summary] main .panel-left #nav--page ul li { + text-align: center; + color: var(--color-txt-light); + margin-bottom: 4px; + font-weight: 500; + font-size: var(--fs-small); +} +[data-template=investigation-summary] main .panel-left #nav--page ul li a { + display: block; + padding: 5px 1ch; + text-decoration: none; +} +[data-template=investigation-summary] main .panel-left .btn--group { + width: calc(var(--panel-w) * 0.5); + display: flex; + flex-direction: column; + gap: calc(var(--spacing) * 0.25); +} +[data-template=investigation-summary] main .panel-left .btn--group button, [data-template=investigation-summary] main .panel-left .btn--group .dropdown { + flex-grow: 1; + width: 100%; } @media screen and (max-width: 768px) { - [data-template=investigation-summary] main header { - padding-top: calc(var(--spacing) * 1.5); + [data-template=investigation-summary] main { + width: 100%; } - [data-template=investigation-summary] main header .page-type { - font-size: var(--fs-small); + [data-template=investigation-summary] main header { + margin-bottom: calc(var(--spacing) * 1); } [data-template=investigation-summary] main .section__article { - margin: calc(var(--spacing) * 1.5) 0; + margin-top: calc(var(--spacing) * 2); + margin-bottom: calc(var(--spacing) * 2); } - [data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__en-lien { - margin-top: 0px; - } - [data-template=investigation-summary] main #hero { - margin: calc(var(--spacing) * 1.5) 0; - } - [data-template=investigation-summary] main #hero figcaption { - margin: 0 var(--padding-body); - } - [data-template=investigation-summary] main .modal--share { - position: absolute; - width: calc(100% - var(--padding-body) * 2); - bottom: calc(var(--spacing) * 2); - } - [data-template=investigation-summary] main #banner--page { - padding: calc(var(--spacing) * 0.5) 0; - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - padding: calc(var(--spacing) * 0.75) var(--padding-body); - padding-top: var(--spacing); - background-color: var(--color-bg); - background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%); - z-index: 800; - } - [data-template=investigation-summary] main #banner--page #nav--page { + [data-template=investigation-summary] main .panel-left { display: none; } - [data-template=investigation-summary] main #banner--page .btn--group { - display: flex; - gap: calc(var(--spacing) * 0.25); - position: relative; - } - [data-template=investigation-summary] main #banner--page .btn--group > button, - [data-template=investigation-summary] main #banner--page .btn--group > label { - width: 50%; - cursor: pointer; - } - [data-template=investigation-summary] main #banner--page { - opacity: 0; - pointer-events: none; - transition: opacity 0.2s ease-in; - } - [data-template=investigation-summary] main #banner--page.is-visible { - opacity: 1; - pointer-events: auto; - } } -@media screen and (max-width: 560px) { - [data-template=investigation-summary] main #section__dl .dl__group { - -moz-column-gap: 1ch; - column-gap: 1ch; - font-size: var(--fs-small); - padding: calc(var(--spacing) * 0.25) 0; +@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=investigation-summary] main #banner--page { - height: calc(100vh - var(--header-h)); - height: calc(100dvh - var(--header-h)); - margin-bottom: calc((100vh - var(--header-h)) * -1); - margin-bottom: calc((100dvh - var(--header-h)) * -1); - padding: var(--padding-body); - padding-left: 0px; - position: sticky; + [data-template=report] #toggle-panel { + position: fixed; top: var(--header-h); - width: var(--banner-medium); - display: flex; - flex-direction: column; - justify-content: space-between; + left: var(--padding-body); + z-index: calc(var(--z-header) + 100); } - [data-template=investigation-summary] main #banner--page .btn--group { - display: flex; - flex-direction: column; - align-items: center; - gap: calc(var(--spacing) * 0.25); + [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=investigation-summary] main #banner--page .btn--group > button, - [data-template=investigation-summary] main #banner--page .btn--group > label { - width: 100%; - max-width: 160px; - cursor: pointer; + [data-template=report] #report__aside .panel__header { + border: var(--border-aside); + height: calc(var(--h-block) * 1.5); } - [data-template=investigation-summary] main #hero { - margin: calc(var(--spacing) * 3) 0; + [data-template=report] #report__aside .panel__content { + height: calc(100% - var(--h-block) * 4.25); + padding-bottom: 80px; } - [data-template=investigation-summary] main .section__article { - margin-left: var(--banner-medium); - margin-top: calc(var(--spacing) * 3); + [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 figure { + aspect-ratio: 16/9; + display: flex; + overflow: hidden; +} +.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); +} + +.report__content { + margin-top: calc(var(--spacing) * 4); +} +.report__content .section-content { + padding-left: calc(var(--padding-body) * 1.5); + padding-right: calc(var(--padding-body) * 1.5); + margin-bottom: calc(var(--spacing) * 6); +} +.report__content .section-content:target { + padding-top: calc(var(--header-h) + var(--spacing) * 2); +} +@media screen and (max-width: 768px) { + .report__content .section-content:target { + padding-top: calc(var(--header-h) + var(--spacing) * 0.5); + } +} +.report__content .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-wrap: balance; + max-width: var(--max-w-content); + color: var(--color-accent); +} +.report__content .section-txt { + max-width: var(--max-w-content); + margin-inline: auto; +} +.report__content .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; +} +.report__content .subsection-w-media .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; +} +.report__content .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); +} +.report__content .subsection-w-hscroll { + position: relative; + margin-bottom: calc(var(--spacing) * 4); +} +.report__content .subsection-w-hscroll .horizontal-scroll { + height: 100vh; + width: 100vw; + overflow: hidden; + display: flex; + align-items: center; +} +.report__content .subsection-w-hscroll .horizontal-scroll-wrapper { + display: flex; + flex-wrap: nowrap; + will-change: transform; +} +.report__content .subsection-w-hscroll .horizontal-scroll-slide { + flex-shrink: 0; + width: 90vw; + max-width: 700px; + padding: 0 calc(var(--spacing) * 1); +} +.report__content .subsection-w-hscroll .horizontal-scroll-slide figure, .report__content .subsection-w-hscroll .horizontal-scroll-slide img { + width: 100%; +} +.report__content .subsection-w-hscroll .horizontal-scroll-pagination { + position: fixed; + bottom: calc(var(--spacing) * 2); + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 8px; + z-index: 10; +} +.report__content p { + margin: calc(var(--spacing) * 0.75) 0; +} +.report__content ul { + padding-left: 3ch; +} +.report__content ul li { + margin: calc(var(--spacing) * 0.5) 0; +} + +.report__content:target { + padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important; +} + +.media video { + width: 100%; +} +.media figure { + height: auto; +} +.media .caption { + font-size: var(--fs-small); + color: var(--color-txt-light); + font-weight: 500; + line-height: 1.1; +} +.media .swiper { + width: calc(100% - 60px); + 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-folder { + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--padding-body) * 1.5); + position: relative; +} +.content-folder .container-cards { + display: block; + align-self: start; +} +.content-folder #section__investigations article { + margin-bottom: calc(var(--spacing) * 1); +} +.content-folder .container__title { + font-weight: normal; + font-size: var(--fs-small); + font-weight: 500; + text-transform: uppercase; + margin-bottom: calc(var(--spacing) * 0.75); +} +@media screen and (max-width: 1080px) { + .content-folder #section__investigations { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: calc(var(--padding-inner) * 1.5) !important; margin-bottom: calc(var(--spacing) * 3); } - [data-template=investigation-summary] main #section__short { - margin-top: var(--padding-body); + .content-folder #section__investigations article { + margin-bottom: 0px; } - [data-template=investigation-summary] main header { - max-width: var(--max-w-content); - margin: calc(var(--spacing) * 2) auto; + .content-folder #section__investigations .container__title { + grid-column: span 2; + margin-bottom: 0px; } - [data-template=investigation-summary] main .section__article .section__title { - font-size: var(--fs-medium); - margin-bottom: var(--spacing); - } - [data-template=investigation-summary] main #section__synthese { - font-size: var(--fs-medium); - } - .modal--share { - position: absolute; - bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25); - width: calc(100% - var(--padding-body)); + .content-folder section:target { + padding-top: calc(var(--header-h) + var(--spacing)); } } @media screen and (min-width: 1080px) { - [data-template=investigation-summary] main #banner--page { - width: calc((100% - var(--max-w-content)) / 2); + .content-folder { + grid-template-columns: 1fr 1fr; } - [data-template=investigation-summary] main #hero { - margin: calc(var(--spacing) * 3) 0; + .content-folder #nav-folder { + display: none; } - [data-template=investigation-summary] main #hero figcaption { - max-width: var(--max-w-content); - margin: 0 auto; + .content-folder #section__investigations { + display: block; + margin-bottom: 0px; } - [data-template=investigation-summary] main header { - max-width: var(--max-w-content); - margin: calc(var(--spacing) * 2) auto; + .content-folder #section__investigations article { + margin-bottom: calc(var(--spacing) * 1); } - [data-template=investigation-summary] main .section__article { - max-width: var(--max-w-content); - margin: calc(var(--spacing) * 3) auto; +} +@media screen and (max-width: 768px) { + .content-folder { + display: block; + } + .content-folder #section__investigations { + display: block; + } + .content-folder .container__title { + margin-bottom: calc(var(--spacing) * 0.5) !important; + } +} + +#nav-folder { + display: flex; + margin-top: calc(var(--spacing) * -1); + margin-bottom: calc(var(--spacing) * 2); +} +#nav-folder svg { + width: 10px; + height: 10px; + transform: rotate(90deg); +} + +@media screen and (min-width: 1080px) { + #nav-folder { + display: none; } }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/assets/css/style.css.map b/assets/css/style.css.map index 956c407..00a8bd6 100644 --- a/assets/css/style.css.map +++ b/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.css","base/_var.scss","base/_body.scss","partials/_site-header.scss","components/_buttons.scss","components/_tags.scss","components/_keywords.scss","components/_form-newsletter.scss","components/_list-socials.scss","components/_modal-share.scss","components/_text.scss","components/_card-article.scss","components/_figures.scss","components/_card-article-small.scss","components/_card-impact.scss","components/_details-summary.scss","components/_card-open-graph.scss","partials/_site-menu.scss","partials/_site-footer.scss","partials/_main-layout.scss","template/_investigations.scss","template/_investigation-summary.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.css","base/_var.scss","base/_body.scss","partials/_site-header.scss","components/_buttons.scss","components/_tags.scss","components/_keywords.scss","components/_sort.scss","components/_btn-group-mobile.scss","components/_summary-hero.scss","components/_form-newsletter.scss","components/_search-form.scss","components/_list-socials.scss","components/_modal-share.scss","components/_dropdown.scss","components/_card-article.scss","components/_figures.scss","components/_card-article-small.scss","components/_card-impact.scss","components/_details-summary.scss","components/_card-impact-small.scss","components/_card-folder.scss","components/_card-open-graph.scss","components/_swiper.scss","components/_slider-before-after.scss","partials/_site-menu.scss","partials/_site-footer.scss","partials/_main-layout.scss","partials/_page-header.scss","partials/_container-cards.scss","template/_home.scss","template/_investigation-summary.scss","template/_report.scss","template/_folder.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index d117e9f..224252e 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,35 +1,49 @@ @charset "UTF-8"; -@import 'base/responsive'; -@import 'base/var'; -@import 'base/body'; +@import "base/responsive"; +@import "base/var"; +@import "base/body"; -@import 'partials/site-header'; +@import "partials/site-header"; // @import 'components/nav-tabs'; // @import 'components/btn--default'; -@import 'components/buttons'; -@import 'components/tags'; -@import 'components/keywords'; -@import 'components/details-summary'; - -@import 'components/figures'; -@import 'components/form-newsletter'; -@import 'components/list-socials'; -@import 'components/modal-share'; -@import 'components/text'; -@import 'components/card-article'; -@import 'components/card-article-small'; -@import 'components/card-impact'; -@import 'components/card-open-graph'; +@import "components/buttons"; +@import "components/tags"; +@import "components/keywords"; +@import "components/details-summary"; +@import "components/sort"; +@import "components/btn-group-mobile"; -@import 'partials/site-header'; -@import 'partials/site-menu'; -@import 'partials/site-footer'; -@import 'partials/main-layout'; -@import 'template/investigations'; -@import 'template/investigation-summary'; +@import "components/figures"; +@import "components/summary-hero"; +@import "components/form-newsletter"; +@import "components/search-form"; +@import "components/list-socials"; +@import "components/modal-share"; +@import "components/dropdown"; +@import "components/text"; +@import "components/card-article"; +@import "components/card-article-small"; +@import "components/card-impact"; +@import "components/card-impact-small"; +@import "components/card-folder"; +@import "components/card-open-graph"; +@import "components/swiper"; +@import "components/slider-before-after"; +@import "partials/site-header"; +@import "partials/site-menu"; +@import "partials/site-footer"; +@import "partials/main-layout"; +@import "partials/page-header"; +@import "partials/container-cards"; + +@import "template/home"; +@import "template/investigation-summary"; +@import "template/report"; +@import "template/folder"; +@import "template/impacts"; diff --git a/assets/css/template/_folder.scss b/assets/css/template/_folder.scss new file mode 100644 index 0000000..ac5f2ad --- /dev/null +++ b/assets/css/template/_folder.scss @@ -0,0 +1,92 @@ +.content-folder{ + // max-width: 1300px; + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--padding-body)*1.5); + // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5); + + position: relative; + + .container-cards{ + display: block; + align-self: start; + } + + #section__investigations article{ + margin-bottom: calc(var(--spacing)*1); + } + + + .container__title{ + font-weight: normal; + font-size: var(--fs-small); + font-weight: 500; + + text-transform: uppercase; + margin-bottom: calc(var(--spacing)*0.75); + + } + + + + + @media #{$medium}{ + #section__investigations{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: calc(var(--padding-inner)*1.5)!important; + margin-bottom: calc(var(--spacing)*3); + article{ margin-bottom: 0px;} + .container__title{ + grid-column: span 2; + margin-bottom: 0px; + } + } + section:target{ + padding-top: calc(var(--header-h) + var(--spacing)); + + } + + } + + @media #{$medium-up}{ + #nav-folder{ display: none; } + grid-template-columns: 1fr 1fr; + #section__investigations{ + display: block; + margin-bottom: 0px; + article{ + margin-bottom: calc(var(--spacing)*1); + } + } + } + + + @media #{$small}{ + display: block; + #section__investigations{ + display: block; + } + .container__title{ + margin-bottom: calc(var(--spacing)*0.5)!important; + } + } + +} + + +#nav-folder{ + display: flex; + margin-top: calc(var(--spacing)*-1); + margin-bottom: calc(var(--spacing)*2); + + svg{ + width: 10px; + height: 10px; + transform: rotate(90deg); + } +} +@media #{$medium-up}{ + #nav-folder{ display: none;} +} \ No newline at end of file diff --git a/assets/css/template/_home.scss b/assets/css/template/_home.scss new file mode 100644 index 0000000..4cfc5b4 --- /dev/null +++ b/assets/css/template/_home.scss @@ -0,0 +1,201 @@ +.section--home { + + .title-section { + font-weight: normal; + font-size: var(--fs-big); + margin-bottom: calc(var(--spacing)*1); + } + + .description-section { + max-width: 42ch; + font-size: var(--fs-normal); + line-height: 1.1; + } + + .btn--home{ + margin-top: calc(var(--spacing)*2); + } + + + @media #{$medium-up} { + + border-bottom: var(--border-light); + + .section--inner { + max-width: 1280px; + margin: calc(var(--spacing)*4) auto; + display: grid; + --gap: calc(var(--padding-body)*2); + grid-template-columns: 1fr 640px; + grid-gap: var(--gap); + } + + + .col-left { + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + + } + + .col-right { + width: 100%; + height: 100%; + } + + + } + + @media #{$medium} { + + // &#home__investigations, + // &#home__hero { + // border-bottom: var(--border-light); + // } + + // .section--inner { + // margin-top: calc(var(--spacing)*3); + // margin-bottom: calc(var(--spacing)*4); + // } + + // .col-left { + // display: flex; + // flex-wrap: wrap; + // align-items: flex-end; + // justify-content: space-between; + // margin-bottom: calc(var(--spacing)*2); + + // .title-section { + // width: 100%; + // } + + // } + } + + @media #{$x-small} { + // .section--inner { + // margin-top: calc(var(--spacing)*2); + // margin-bottom: calc(var(--spacing)*4); + // margin-bottom: 0px; + // } + + // .col-left{ + // margin-bottom: calc(var(--spacing)*1.5); + // } + + + // .title-section { + // margin-bottom: calc(var(--spacing)*0.25); + // } + + // .description-section { + // max-width: 42ch; + // font-size: var(--fs-normal); + // } + + + } + + + + + + + + +} + + + + +#home__investigations { + + .home-investigations-slider { + max-width: 500px; + height: auto; + } + + .card--article { + + .time-alone { + display: block; + } + + .dl, + .pin { + display: none; + } + } + + +} + + +#home__hero { + margin-top: calc(var(--spacing)*3); + margin-bottom: calc(var(--spacing)*3); + + @media #{$x-small} { + margin-top: calc(var(--spacing)*2.5); + padding-bottom: calc(var(--spacing)*1.5); + margin-bottom: 0px; + + } + + + .section--inner { + display: block; + } + + .baseline { + font-size: var(--fs-big); + line-height: 1.1; + max-width: 32ch; + } + + button { + margin-top: calc(var(--spacing)*1); + } + + + +} + + +#home__folders { + .card--folder { + margin-bottom: calc(var(--spacing)*0.5); + } +} + + + +@media #{$medium} { + + .section--home:not(#home-hero) { + border-bottom: var(--border); + padding-bottom: calc(var(--spacing)*4); + margin-bottom: calc(var(--spacing)*4); + + .col-left{ + margin-bottom: calc(var(--spacing)*3); + } + } + + #home__hero{ + height: calc(100vh - var(--header-h)); + margin: 0!important; + border-bottom: none!important; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding-bottom: 25vh!important; + + } + + #home__investigations{ + margin-top: 0px; + } + +} \ No newline at end of file diff --git a/assets/css/template/_impacts.scss b/assets/css/template/_impacts.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/template/_investigation-summary.scss b/assets/css/template/_investigation-summary.scss index fe66d59..4a5dc29 100644 --- a/assets/css/template/_investigation-summary.scss +++ b/assets/css/template/_investigation-summary.scss @@ -1,362 +1,203 @@ -[data-template="investigation-summary"] main{ - - position: relative; - +[data-template="investigation-summary"] main { + position: relative; - header{ - .page-type{ - text-transform: uppercase; - color: var(--color-txt-light); - margin-bottom: calc(var(--spacing)*0.5); + .page__header{ + margin-inline: auto; + max-width: var(--max-w-content); + } + + + + + .panel-left{ + width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5); + } + + @media screen and (max-width: 1340px){ + margin-left: auto; + margin-right: calc(var(--padding-body)*3); + .panel-left{ + width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6); + } + } + + + @media screen and (max-width: 1220px){ + margin-left: auto; + margin-right: 0px; + width: calc(100% - var(--panel-w)*0.5 - var(--padding-body)); + .panel-left{ + width: calc(var(--panel-w)*0.5); + } + } + + + .section__article { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); + max-width: var(--max-w-content); + margin-inline: auto; + + &:target{ + padding-top: calc(var(--header-h) + var(--spacing)*1); } - h2{ - font-size: var(--fs-xbig); - line-height: var(--leading-tight); - } + + a:hover { + color: var(--grey-200); } - .section__article{ - a:hover{ - color: var(--grey-200); - } - .section__title{ - font-weight: normal; - text-transform: uppercase; - margin-bottom: calc(var(--spacing)*0.5) - } + .section__title { + font-weight: 500; + text-transform: uppercase; + margin-bottom: calc(var(--spacing) * 1); + padding-right: 2ch; + text-wrap: balance; + } + } + + + #section__dl, + #section__impacts, + #section__folder, + #section__related-articles{ + font-size: var(--fs-small); + } + + + + + + #section__dl { + margin-top: calc(var(--spacing) * 1.5); + border-bottom: var(--border-light); + max-width: var(--max-w-content); + margin-inline: auto; + + .dl__group { + @include grid-content(); + column-gap: 1ch; + border-top: var(--border-light); + padding: calc(var(--spacing) * 0.5) 0; } - #hero{ - width: 100vw; - position: relative; - left: calc(var(--padding-body)*-1); - - figcaption{ - color: var(--color-txt-light); - font-size: var(--fs-small); - @media #{$x-small}{ font-size: var(--fs-xsmall); } - padding-top: calc(var(--spacing)*0.5); - - - } - - &.hero-video{ - figure{ - width: 100%; - - img{ - width: 100%; - aspect-ratio: 16/9; - object-fit: cover; - } - - - } - } + dt { + color: var(--color-txt-light); + padding-right: 1ch; } - #nav--page{ - ul{ - list-style: none; - li{ - text-align: center; - color: var(--color-txt-light); - a{ - display: block; - padding: 0.3em 0; - text-decoration: none; - } - } - } + ul:not(.keywords) { + list-style: none; + + li { + padding-bottom: 0.2em; + } + } + } + + + + #section__synthese { + + max-width: var(--max-w-content); + margin-inline: auto; + + p+p { + margin-top: 1em; } - #section__short{ - font-size: var(--fs-medium); + h4 { + margin-top: 2em; + margin-bottom: 1em; + font-size: var(--fs-normal); + font-weight: 500; + text-decoration: 1px underline var(--color-txt-light); + text-underline-offset: 3px; } + } - #section__dl{ - margin-top: calc(var(--spacing)*1.5); - border-bottom: var(--border-light); - .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; - } - - ul:not(.keywords){ - list-style: none; - li{ - padding-bottom: 0.2em; - } - + + + .panel-left{ + //background-color: yellow; + + height: calc(100vh - var(--header-h)); + position: fixed; + left: var(--padding-body); + padding-bottom: calc(var(--padding-body)*1); + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + z-index: calc(var(--z-header) - 1); + + #nav--page { + padding-bottom: var(--spacing); + width: calc(var(--panel-w)*0.5); + ul { + list-style: none; + + li { + text-align: center; + color: var(--color-txt-light); + margin-bottom: 4px; + font-weight: 500; + font-size: var(--fs-small); + + a { + display: block; + padding: 5px 1ch; + text-decoration: none; } + } } + } + .btn--group{ + width: calc(var(--panel-w)*0.5); + display: flex; + flex-direction: column; + gap:calc(var(--spacing)*0.25); - #section__synthese{ - p + p{ - margin-top: 0.5em; - } - - h4{ - margin-top: 2em; - margin-bottom: 1em; - font-size: var(--fs-normal); - font-weight: normal; - text-decoration: 1px underline var(--color-txt-light); - text-underline-offset: 3px; - - } - + button, .dropdown{ + flex-grow: 1; + width: 100%; } + } + + + } + + + + + } - - -// SHARE ACTIONS -------------------------------------------------- -// ---------------------------------------------------------------- - -#share-banner__desktop{ display: none; } -#share-banner__desktop ~ .modal--share{ - opacity: 0; - pointer-events: none; - transition: opacity .2s ease-in; -} - -#share-banner__desktop:checked ~ .modal--share{ - opacity: 1; - pointer-events: auto; -} - - - - - - // SMALL ---------------------------------------------------------- // ---------------------------------------------------------------- +@media #{$small} { + [data-template="investigation-summary"] main { + width: 100%; -@media #{$small}{ - - [data-template="investigation-summary"] main{ - - header{ - padding-top: calc(var(--spacing)*1.5); - .page-type{ - font-size: var(--fs-small); - } - } - - .section__article{ - margin: calc(var(--spacing)*1.5) 0; - } - - #section__impacts, #section__en-lien{ - margin-top: 0px; - } - - #hero{ - margin: calc(var(--spacing)*1.5) 0; - figcaption{ - margin: 0 var(--padding-body); - } - } - - .modal--share{ - position: absolute; - width: calc(100% - var(--padding-body)*2); - bottom: calc(var(--spacing) * 2); - } - - - #banner--page { - padding: calc(var(--spacing)*0.5) 0; - - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - padding: calc(var(--spacing)*0.75) var(--padding-body); - padding-top: var(--spacing); - background-color: var(--color-bg); - background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%); - z-index: 800; - - #nav--page{ - display: none; - } - .btn--group{ - - display: flex; - gap: calc(var(--spacing)*0.25); - position: relative; - - > button, - > label { - width: 50%; - cursor: pointer; - } - - } - - } - - - // action - - #banner--page{ - opacity: 0; - pointer-events: none; - transition: opacity .2s ease-in; - } - - #banner--page.is-visible{ - opacity: 1; - pointer-events: auto; - } - - - + header { + margin-bottom: calc(var(--spacing) * 1); } + .section__article { + margin-top: calc(var(--spacing) * 2); + margin-bottom: calc(var(--spacing) * 2); + } + + + + .panel-left { + display: none; + } + } } - - - -@media #{$x-small}{ - [data-template="investigation-summary"] main{ - #section__dl .dl__group{ - - column-gap: 1ch; - font-size: var(--fs-small); - padding: calc(var(--spacing)*0.25) 0; - } - } -} - - - - - -// DESKTOP ---------------------------------------------------------- -// ---------------------------------------------------------------- - - -@media #{$small-up}{ - - [data-template="investigation-summary"] main{ - - #banner--page{ - height: calc(100vh - var(--header-h)); - height: calc(100dvh - var(--header-h)); - margin-bottom: calc((100vh - var(--header-h))*-1); - margin-bottom: calc((100dvh - var(--header-h))*-1); - padding: var(--padding-body); - padding-left: 0px; - position: sticky; - top: var(--header-h); - width: var(--banner-medium); - display: flex; - flex-direction: column; - justify-content: space-between; - } - - #banner--page .btn--group{ - display: flex; - flex-direction: column; - align-items: center; - gap: calc(var(--spacing)*0.25); - - > button, - > label { - width: 100%; - max-width: 160px; - cursor: pointer; - } - - } - - #hero{ - margin: calc(var(--spacing)*3) 0; - - } - - .section__article{ - margin-left: var(--banner-medium); - margin-top: calc(var(--spacing)*3); - margin-bottom: calc(var(--spacing)*3); - } - - #section__short{ - margin-top: var(--padding-body); - } - - header{ - max-width: var(--max-w-content); - margin: calc(var(--spacing)*2) auto; - } - - .section__article{ - .section__title{ - font-size: var(--fs-medium); - margin-bottom: var(--spacing); - } - } - - #section__synthese{ - font-size: var(--fs-medium); - } - } - .modal--share{ - position: absolute; - bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25); - width: calc(100% - var(--padding-body)); - } -} - - - - -@media #{$medium-up}{ - - [data-template="investigation-summary"] main{ - - #banner--page{ - width: calc((100% - var(--max-w-content))/2); - } - - #hero{ - margin: calc(var(--spacing)*3) 0; - figcaption{ - max-width: var(--max-w-content); - margin: 0 auto; - } - } - - - header{ - max-width: var(--max-w-content); - margin: calc(var(--spacing)*2) auto; - } - - .section__article{ - max-width: var(--max-w-content); - margin: calc(var(--spacing)*3) auto; - } - - - - - } -} \ No newline at end of file diff --git a/assets/css/template/_investigations.scss b/assets/css/template/_investigations.scss deleted file mode 100644 index bb92653..0000000 --- a/assets/css/template/_investigations.scss +++ /dev/null @@ -1,17 +0,0 @@ - -[data-template="investigations"] main{ - - #container-cards{ - max-width: var(--max-w-container); - margin: 0 auto; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); - grid-auto-rows: minmax(100px, auto); - grid-gap: var(--padding-body); - margin-bottom: 10vh; - - - - } - -} diff --git a/assets/css/template/_report.scss b/assets/css/template/_report.scss new file mode 100644 index 0000000..4d94e34 --- /dev/null +++ b/assets/css/template/_report.scss @@ -0,0 +1,518 @@ + + + + +// 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 ------------------------------------------------------------------------------- + + + +.report__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; + } + } +} + +.report__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; + } + } + + + + +} + + + + + + + + + diff --git a/assets/fonts/stylesheet.css b/assets/fonts/stylesheet.css index 95bf8b1..19d6fa5 100644 --- a/assets/fonts/stylesheet.css +++ b/assets/fonts/stylesheet.css @@ -2,22 +2,22 @@ @font-face { font-family: "Executive"; src: url("Executive-55Regular.woff") format("woff"); - font-weight: 300; + font-weight: normal; font-style: normal; } @font-face { font-family: "Executive"; src: url("Executive-56Italic.woff") format("woff"); - font-weight: 300; + font-weight: normal; font-style: italic; } @font-face { font-family: "Executive"; src: url("Executive-65Medium.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-weight: 500; + font-style: 500; } @font-face { diff --git a/assets/icons/article.svg b/assets/icons/article.svg new file mode 100644 index 0000000..3c4d502 --- /dev/null +++ b/assets/icons/article.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/close.svg b/assets/icons/close.svg index d02ecbb..8a44ae2 100644 --- a/assets/icons/close.svg +++ b/assets/icons/close.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/icons/filter.svg b/assets/icons/filter.svg new file mode 100644 index 0000000..30b3be1 --- /dev/null +++ b/assets/icons/filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/folder.svg b/assets/icons/folder.svg new file mode 100644 index 0000000..562ed7b --- /dev/null +++ b/assets/icons/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/pdf.svg b/assets/icons/pdf.svg new file mode 100644 index 0000000..8db44b1 --- /dev/null +++ b/assets/icons/pdf.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/pin.svg b/assets/icons/pin.svg new file mode 100644 index 0000000..ae58e20 --- /dev/null +++ b/assets/icons/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/play.svg b/assets/icons/play.svg new file mode 100644 index 0000000..4aee878 --- /dev/null +++ b/assets/icons/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/printer.svg b/assets/icons/printer.svg new file mode 100644 index 0000000..141b66c --- /dev/null +++ b/assets/icons/printer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/share.svg b/assets/icons/share.svg new file mode 100644 index 0000000..f61e992 --- /dev/null +++ b/assets/icons/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/socials/bluesky.svg b/assets/icons/socials/bluesky.svg index 3944e93..a070aea 100644 --- a/assets/icons/socials/bluesky.svg +++ b/assets/icons/socials/bluesky.svg @@ -1,9 +1,3 @@ - - - - - - - - - + + + \ No newline at end of file diff --git a/assets/icons/socials/facebook.svg b/assets/icons/socials/facebook.svg index cf4118e..5fc7cec 100644 --- a/assets/icons/socials/facebook.svg +++ b/assets/icons/socials/facebook.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/assets/icons/socials/instagram.svg b/assets/icons/socials/instagram.svg index 57775b0..855e653 100644 --- a/assets/icons/socials/instagram.svg +++ b/assets/icons/socials/instagram.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/assets/icons/socials/linkedin.svg b/assets/icons/socials/linkedin.svg index 5a9c0a5..30fc0e3 100644 --- a/assets/icons/socials/linkedin.svg +++ b/assets/icons/socials/linkedin.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/assets/icons/socials/mastodon.svg b/assets/icons/socials/mastodon.svg index efe42f5..a8c2a26 100644 --- a/assets/icons/socials/mastodon.svg +++ b/assets/icons/socials/mastodon.svg @@ -1,9 +1,3 @@ - - - - - - - - - + + + \ No newline at end of file diff --git a/assets/icons/socials/threads.svg b/assets/icons/socials/threads.svg index 3619982..13c9e7a 100644 --- a/assets/icons/socials/threads.svg +++ b/assets/icons/socials/threads.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/assets/icons/socials/x-social.svg b/assets/icons/socials/x-social.svg index 18f2f4d..2fafcc2 100644 --- a/assets/icons/socials/x-social.svg +++ b/assets/icons/socials/x-social.svg @@ -1,9 +1,3 @@ - - - - - - - - - + + + \ No newline at end of file diff --git a/assets/icons/socials/youtube.svg b/assets/icons/socials/youtube.svg index 40ca348..3c9c0be 100644 --- a/assets/icons/socials/youtube.svg +++ b/assets/icons/socials/youtube.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/assets/icons/toc.svg b/assets/icons/toc.svg new file mode 100644 index 0000000..ab417a6 --- /dev/null +++ b/assets/icons/toc.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/adam-raihane/fig-1-a.png b/assets/images/adam-raihane/fig-1-a.png new file mode 100644 index 0000000..d09aac1 Binary files /dev/null and b/assets/images/adam-raihane/fig-1-a.png differ diff --git a/assets/images/adam-raihane/fig-1-b.png b/assets/images/adam-raihane/fig-1-b.png new file mode 100644 index 0000000..44b2a10 Binary files /dev/null and b/assets/images/adam-raihane/fig-1-b.png differ diff --git a/assets/images/adam-raihane/fig-1.png b/assets/images/adam-raihane/fig-1.png new file mode 100644 index 0000000..8c1313f Binary files /dev/null and b/assets/images/adam-raihane/fig-1.png differ diff --git a/assets/images/adam-raihane/fig-2.png b/assets/images/adam-raihane/fig-2.png new file mode 100644 index 0000000..2e60668 Binary files /dev/null and b/assets/images/adam-raihane/fig-2.png differ diff --git a/assets/images/adam-raihane/fig-3.png b/assets/images/adam-raihane/fig-3.png new file mode 100644 index 0000000..e203433 Binary files /dev/null and b/assets/images/adam-raihane/fig-3.png differ diff --git a/assets/images/adam-raihane/fig-4.png b/assets/images/adam-raihane/fig-4.png new file mode 100644 index 0000000..4777605 Binary files /dev/null and b/assets/images/adam-raihane/fig-4.png differ diff --git a/assets/images/adam-raihane/fig-5.png b/assets/images/adam-raihane/fig-5.png new file mode 100644 index 0000000..618c108 Binary files /dev/null and b/assets/images/adam-raihane/fig-5.png differ diff --git a/assets/images/adam-raihane/fig-6.png b/assets/images/adam-raihane/fig-6.png new file mode 100644 index 0000000..3a6e0cc Binary files /dev/null and b/assets/images/adam-raihane/fig-6.png differ diff --git a/assets/images/adam-raihane/fig-7.png b/assets/images/adam-raihane/fig-7.png new file mode 100644 index 0000000..61e03f4 Binary files /dev/null and b/assets/images/adam-raihane/fig-7.png differ diff --git a/assets/images/cover-rapport.png b/assets/images/cover-rapport.png new file mode 100644 index 0000000..276d94a Binary files /dev/null and b/assets/images/cover-rapport.png differ diff --git a/assets/images/image-rapport.png b/assets/images/image-rapport.png new file mode 100644 index 0000000..e129ed6 Binary files /dev/null and b/assets/images/image-rapport.png differ diff --git a/assets/js/banner-sticky-desktop.js b/assets/js/banner-sticky-desktop.js index 6f9e171..3495b43 100644 --- a/assets/js/banner-sticky-desktop.js +++ b/assets/js/banner-sticky-desktop.js @@ -4,19 +4,14 @@ export function bannerStickyDesktop(responsiveSmall) { if (isInitialized) return; let body = document.body; - if (!body || body.dataset.template !== 'investigation-summary') return; + let panel = body.querySelector(".panel-left"); + + if (!panel) return; - let bannerPage = body.querySelector("#banner--page"); - let sectionDl = document.querySelector("#section__dl"); let footer = document.querySelector("#site-footer"); - if (!bannerPage || !sectionDl || !footer) return; - // Stocker la hauteur initiale du banner - const bannerInitialHeight = bannerPage.offsetHeight; - - // Stocker la position initiale du footer (calculée une seule fois au chargement) - let footerInitialTop = footer.offsetTop; + const bannerInitialHeight = panel.offsetHeight; function checkScroll() { const screenWidth = window.innerWidth; @@ -24,33 +19,35 @@ export function bannerStickyDesktop(responsiveSmall) { // Vérifier que l'écran est plus grand que responsiveSmall if (screenWidth <= responsiveSmall) { // Réinitialiser le transform si on est en dessous de responsiveSmall - bannerPage.style.transform = ''; + panel.style.transform = ''; return; } // Calculer la position du bas de la fenêtre const windowBottom = window.scrollY + window.innerHeight; - // Calculer de combien on dépasse le haut du footer (position initiale) - const overlap = windowBottom - footerInitialTop; + // Calculer dynamiquement la position du footer à chaque scroll + // Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour + const footerTop = footer.getBoundingClientRect().top + window.scrollY; + + // Calculer de combien on dépasse le haut du footer + const overlap = windowBottom - footerTop; if (overlap > 0) { // Le bas de la fenêtre a atteint le haut du footer // Déplacer le banner vers le haut du nombre de pixels de dépassement const translateValue = Math.min(overlap, bannerInitialHeight); - bannerPage.style.transform = `translateY(-${translateValue}px)`; + panel.style.transform = `translateY(-${translateValue}px)`; } else { // Réinitialiser la position si on n'a pas encore atteint le footer - bannerPage.style.transform = 'translateY(0)'; + panel.style.transform = 'translateY(0)'; } } window.addEventListener('scroll', checkScroll); window.addEventListener('resize', () => { - // Recalculer la position du footer lors du resize if (window.innerWidth > responsiveSmall) { - bannerPage.style.transform = ''; - footerInitialTop = footer.offsetTop; + panel.style.transform = ''; } checkScroll(); }); diff --git a/assets/js/banner-sticky-mobile.js b/assets/js/banner-sticky-mobile.js deleted file mode 100644 index a0f512a..0000000 --- a/assets/js/banner-sticky-mobile.js +++ /dev/null @@ -1,50 +0,0 @@ -let isInitialized = false; - -export function bannerStickyMobile(responsiveSmall) { - if (isInitialized) return; - - let body = document.body; - if (!body || body.dataset.template !== 'investigation-summary') return; - - let bannerPage = body.querySelector("#banner--page"); - let sectionDl = document.querySelector("#section__dl"); - let footer = document.querySelector("#site-footer"); - - if (!bannerPage || !sectionDl || !footer) return; - - function checkScroll() { - const screenWidth = window.innerWidth; - - // Vérifier que l'écran est plus petit que responsiveSmall - if (screenWidth >= responsiveSmall) { - bannerPage.classList.remove('is-visible'); - bannerPage.style.transform = 'translateY(0)'; - return; - } - - const sectionTop = sectionDl.getBoundingClientRect().top; - const footerTop = footer.getBoundingClientRect().top; - const windowHeight = window.innerHeight; - - // Activer le banner quand #section__dl arrive en bas de l'écran - if (sectionTop <= windowHeight) { - bannerPage.classList.add('is-visible'); - - // Pousser le banner vers le haut si le footer arrive en bas de l'écran - if (footerTop < windowHeight) { - const pushUp = windowHeight - footerTop; - bannerPage.style.transform = `translateY(-${pushUp}px)`; - } else { - bannerPage.style.transform = 'translateY(0)'; - } - } else { - bannerPage.classList.remove('is-visible'); - bannerPage.style.transform = 'translateY(0)'; - } - } - - window.addEventListener('scroll', checkScroll); - checkScroll(); - - isInitialized = true; -} \ No newline at end of file diff --git a/assets/js/btn-group-mobile.js b/assets/js/btn-group-mobile.js new file mode 100644 index 0000000..518b6aa --- /dev/null +++ b/assets/js/btn-group-mobile.js @@ -0,0 +1,35 @@ +let isInitialized = false; + +export function btnGroupMobile() { + if (isInitialized) return; + const btnGroup = document.querySelector(".btn--group__mobile"); + let footer = document.querySelector("#site-footer"); + + if (!btnGroup) return; + + function checkScroll() { + + const windowHeight = window.innerHeight; + const scrollY = window.scrollY; + const footerTop = footer.getBoundingClientRect().top; + + if (scrollY > windowHeight * 0.6) { + btnGroup.classList.add('is-visible'); + + if (footerTop < windowHeight) { + btnGroup.classList.remove('is-visible'); + } + } else { + btnGroup.classList.remove('is-visible'); + } + } + + window.addEventListener('scroll', checkScroll); + checkScroll(); + + isInitialized = true; + + +} + + diff --git a/assets/js/dropdown.js b/assets/js/dropdown.js new file mode 100644 index 0000000..d254a9d --- /dev/null +++ b/assets/js/dropdown.js @@ -0,0 +1,87 @@ +export function initDropdowns(responsiveSmall) { + const dropdowns = document.querySelectorAll('.dropdown'); + + function updateBodyOverflow(isOpen, dropdownElement = null) { + const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile'); + if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) { + document.body.classList.add('is-hidden'); + } else { + document.body.classList.remove('is-hidden'); + } + } + + dropdowns.forEach(dropdown => { + const trigger = dropdown.querySelector('.dropdown__trigger'); + const content = dropdown.querySelector('.dropdown__content'); + + if (!trigger) return; + + + + // Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share + if (dropdown.querySelector('.modal--share') && content) { + content.addEventListener('click', (e) => { + e.stopPropagation(); + }); + } + + trigger.addEventListener('click', (e) => { + e.stopPropagation(); + + // Ferme les autres dropdowns ouverts + dropdowns.forEach(other => { + if (other !== dropdown) { + other.classList.remove('is-open', 'dropdown--align-right'); + other.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); + } + }); + + const isOpening = !dropdown.classList.contains('is-open'); + + if (isOpening) { + // Vérifie s'il y a la place à droite + const content = dropdown.querySelector('.dropdown__content'); + const triggerRect = trigger.getBoundingClientRect(); + const contentWidth = content.offsetWidth || 300; + const spaceRight = window.innerWidth - triggerRect.left; + + if (spaceRight < contentWidth) { + dropdown.classList.add('dropdown--align-right'); + } else { + dropdown.classList.remove('dropdown--align-right'); + } + } + + // Toggle le dropdown actuel + dropdown.classList.toggle('is-open'); + trigger.classList.toggle('is-selected'); + + // Gère l'overflow du body sur mobile + updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown); + }); + }); + + // Ferme tous les dropdowns au clic extérieur + document.addEventListener('click', (e) => { + dropdowns.forEach(dropdown => { + // Ne ferme pas si le clic est dans un dropdown contenant .modal--share + if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) { + return; + } + dropdown.classList.remove('is-open', 'dropdown--align-right'); + dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); + }); + updateBodyOverflow(false); + }); + + // Ferme au press Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + dropdowns.forEach(dropdown => { + dropdown.classList.remove('is-open', 'dropdown--align-right'); + dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); + }); + updateBodyOverflow(false); + } + }); +} diff --git a/assets/js/header.js b/assets/js/header.js index 8c1e30a..0549ae3 100644 --- a/assets/js/header.js +++ b/assets/js/header.js @@ -1,26 +1,22 @@ export function headerToggle() { const header = document.getElementById("site-header"); const buttonToggle = document.querySelector("#menu-toggle"); - console.log(header); - console.log(buttonToggle); if (!header || !buttonToggle) return; buttonToggle.addEventListener("click", () => { - document.body.classList.toggle("menu-open"); + const isOpen = document.body.classList.toggle("menu-open"); }); } + +// DELETE ? export function headerScrollVisibility() { const header = document.getElementById("site-header"); - const hero = document.getElementById("hero"); - if (!header || !hero) return; + if (!header) return; function checkScroll() { - const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0; - const heroBottom = hero.getBoundingClientRect().bottom; - - if (heroBottom <= headerHeight) { + if (window.scrollY >= 300) { header.classList.add("is-visible"); } else { header.classList.remove("is-visible"); @@ -28,6 +24,6 @@ export function headerScrollVisibility() { } window.addEventListener("scroll", checkScroll); - checkScroll(); // Vérifier au chargement + checkScroll(); } diff --git a/assets/js/hero-slider.js b/assets/js/hero-slider.js new file mode 100644 index 0000000..dd39df8 --- /dev/null +++ b/assets/js/hero-slider.js @@ -0,0 +1,50 @@ +import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs'; + +export function initHeroSlider() { + const heroSlider = document.querySelector('.hero-slider'); + + if (!heroSlider) { + return; + } + + const swiper = new Swiper('.hero-slider', { + // Optional parameters + loop: true, + speed: 600, + effect: 'fade', + fadeEffect: { + crossFade: true + }, + + // Touch/Swipe settings (activé par défaut, mais configuré ici pour optimisation) + touchRatio: 1, + touchAngle: 45, + grabCursor: true, + simulateTouch: true, + allowTouchMove: true, + + // Navigation arrows + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + // Pagination + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + + // Keyboard control + keyboard: { + enabled: true, + }, + + // Accessibility + a11y: { + prevSlideMessage: 'Diapositive précédente', + nextSlideMessage: 'Diapositive suivante', + paginationBulletMessage: 'Aller à la diapositive {{index}}', + }, + }); +} diff --git a/assets/js/hero-video.js b/assets/js/hero-video.js new file mode 100644 index 0000000..707c316 --- /dev/null +++ b/assets/js/hero-video.js @@ -0,0 +1,39 @@ + +export function playVideo() { + const playButton = document.querySelector('#hero-play-video'); + + if (!playButton) { + return; + } + + playButton.addEventListener('click', function() { + const extract = document.querySelector('.extract'); + const videoFull = document.querySelector('.video-full'); + const titleSmall = document.querySelector('.page-title-small'); + + + if (extract) { + extract.style.display = 'none'; + } + + if(titleSmall){ + titleSmall.style.display = 'none'; + } + + if (videoFull) { + videoFull.style.display = 'block'; + + const iframe = videoFull.querySelector('iframe'); + if (iframe) { + const src = iframe.src; + + // Ajouter les paramètres autoplay et mute pour YouTube + if (src) { + const separator = src.includes('?') ? '&' : '?'; + iframe.src = src + separator + 'autoplay=1&mute=1'; + iframe.setAttribute('allow', 'autoplay; encrypted-media'); + } + } + } + }); +} diff --git a/assets/js/panel.js b/assets/js/panel.js new file mode 100644 index 0000000..7575010 --- /dev/null +++ b/assets/js/panel.js @@ -0,0 +1,60 @@ +export function panelToggle(responsiveSmall) { + const toggleBtn = document.querySelector('#toggle-panel'); + const toggleBtnMobile = document.querySelector('#toggle-panel__mobile'); + const main = document.querySelector('main'); + const closeBtn = document.querySelector('.panel-left .panel__header'); + + function openPanel() { + main.classList.add('panel-open'); + const screenWidth = window.innerWidth; + if (screenWidth <= responsiveSmall) { + console.log("small screen"); + document.body.style.overflowY = 'hidden'; + } + + } + + function closePanel() { + main.classList.remove('panel-open'); + main.classList.add('panel-close'); + document.body.style.overflowY = ''; + } + + if (toggleBtn) { + toggleBtn.addEventListener('click', (e) => { + e.stopPropagation(); + openPanel(); + }); + } + + if (toggleBtnMobile) { + toggleBtnMobile.addEventListener('click', (e) => { + e.stopPropagation(); + openPanel(); + }); + } + + if (closeBtn) { + closeBtn.addEventListener('click', closePanel); + } +} + + +export function tocMobile(responsiveSmall) { + const toc = document.querySelector('#toc'); + const main = document.querySelector('main'); + + if (!toc) return; + + const tocLinks = toc.querySelectorAll('a'); + + tocLinks.forEach(link => { + link.addEventListener('click', () => { + if (window.innerWidth <= responsiveSmall) { + main.classList.remove('panel-open'); + main.classList.add('panel-close'); + document.body.style.overflowY = ''; + } + }); + }); +} \ No newline at end of file diff --git a/assets/js/report.js b/assets/js/report.js new file mode 100644 index 0000000..c7f60d1 --- /dev/null +++ b/assets/js/report.js @@ -0,0 +1,135 @@ + +import { initSwipers } from './swipers.js'; + +export function report(responsiveSmall) { + if (document.body.dataset.template === 'report') { + + // Initialiser tous les sliders de type before-after + initSliderBeforeAfter(); + + initHorizontalScroll(); + + // Ne fonctionne que pour les écrans plus grands que responsiveSmall + if (window.matchMedia(responsiveSmall).matches) { + // Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif + initSwipers(); + return; + } + + + } +} + + +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) => { + console.log('slider value:', e.target.value); + sliderContainer.style.setProperty('--position', `${e.target.value}%`); + }); + } + }); +} + + +function initHorizontalScroll(){ + const sections = document.querySelectorAll('.subsection-w-hscroll'); + + sections.forEach(function (section) { + const container = section.querySelector('.horizontal-scroll'); + if (!container) return; + + const wrapper = container.querySelector('.horizontal-scroll-wrapper'); + if (!wrapper) return; + + const slides = wrapper.querySelectorAll('.horizontal-scroll-slide'); + + // Calculer la distance totale à scroller horizontalement + function calculateScrollDistance() { + const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0); + const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin + return totalSlidesWidth - window.innerWidth + endMargin; + } + + let scrollDistance = calculateScrollDistance(); + + // Créer un spacer invisible qui crée l'espace de scroll + // Hauteur = scrollDistance + hauteur du viewport pour maintenir le texte en dessous + const spacer = document.createElement('div'); + spacer.className = 'horizontal-scroll-spacer'; + spacer.style.height = `${scrollDistance + window.innerHeight}px`; + spacer.style.width = '100%'; + spacer.style.pointerEvents = 'none'; + + // Insérer le spacer AVANT .horizontal-scroll + section.insertBefore(spacer, container); + + // Calculer la position absolue du spacer une seule fois + function getSpacerTopPosition() { + let element = spacer; + let top = 0; + while (element) { + top += element.offsetTop; + element = element.offsetParent; + } + return top; + } + + let spacerTopPosition = getSpacerTopPosition(); + + // Fonction de mise à jour du scroll horizontal + function updateHorizontalScroll() { + const scrollY = window.pageYOffset || document.documentElement.scrollTop; + + // Début et fin du scroll basé sur le spacer + const scrollStart = spacerTopPosition; + const scrollEnd = spacerTopPosition + scrollDistance; + + console.log('scrollY:', scrollY, 'scrollStart:', scrollStart, 'scrollEnd:', scrollEnd); + + if (scrollY >= scrollStart && scrollY <= scrollEnd) { + // Phase de scroll horizontal : fixer le container + const progress = (scrollY - scrollStart) / scrollDistance; + const translateX = progress * scrollDistance; + + console.log('Horizontal scroll active - progress:', progress); + + wrapper.style.transform = `translateX(-${translateX}px)`; + container.style.position = 'fixed'; + container.style.top = '0'; + container.style.left = '0'; + } else if (scrollY < scrollStart) { + // Avant le spacer : reset + console.log('Before spacer'); + wrapper.style.transform = 'translateX(0)'; + container.style.position = ''; + container.style.top = ''; + container.style.left = ''; + } else { + // Après le spacer : garder le translate final et défixer + console.log('After spacer'); + wrapper.style.transform = `translateX(-${scrollDistance}px)`; + container.style.position = ''; + container.style.top = ''; + container.style.left = ''; + } + } + + // Écouter le scroll + window.addEventListener('scroll', updateHorizontalScroll, { passive: true }); + + // Recalculer au resize + window.addEventListener('resize', function() { + scrollDistance = calculateScrollDistance(); + spacer.style.height = `${scrollDistance + window.innerHeight}px`; + spacerTopPosition = getSpacerTopPosition(); + updateHorizontalScroll(); + }); + + // Initial call + updateHorizontalScroll(); + }); +} \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 773fc50..74adb2c 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,18 +1,34 @@ import { headerToggle, headerScrollVisibility } from './header.js'; import { copyLink } from './share.js'; -import { bannerStickyMobile } from './banner-sticky-mobile.js'; +import { panelToggle, tocMobile } from './panel.js'; +import { btnGroupMobile } from './btn-group-mobile.js'; import { bannerStickyDesktop } from './banner-sticky-desktop.js'; import { themeToggle } from './themeToggle.js'; +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'; + const responsiveMedium = 1080; const responsiveSmall = 768; -window.onload = async function () { +window.onload = async function () { console.log("SCRIPT LOADED"); headerToggle(); - headerScrollVisibility(); - copyLink(); + panelToggle(responsiveSmall); themeToggle(); - bannerStickyMobile(responsiveSmall); + + + report(responsiveSmall); + + tocMobile(responsiveSmall); + copyLink(); + btnGroupMobile(responsiveSmall) bannerStickyDesktop(responsiveSmall); + initHeroSlider(); + playVideo(); + initDropdowns(responsiveSmall); + initSwipers(); } \ No newline at end of file diff --git a/assets/js/share.js b/assets/js/share.js index 5c42a65..c26fb8f 100644 --- a/assets/js/share.js +++ b/assets/js/share.js @@ -1,14 +1,16 @@ export function copyLink() { let buttons = document.querySelectorAll('.copy-link button'); buttons.forEach(function (button, index) { - let link = button.parentNode.querySelector("input").value; + let input = button.parentNode.querySelector("input"); + let link = input.value; button.addEventListener('click', function() { navigator.clipboard.writeText(link).then(() => { - const originalText = button.textContent; - button.textContent = 'Lien copié'; + input.value = 'Lien copié !'; + input.classList.add('is-copied'); setTimeout(() => { - button.textContent = originalText; + input.value = link; + input.classList.remove('is-copied'); }, 1000); }).catch(err => { console.error('Erreur lors de la copie:', err); diff --git a/assets/js/swipers.js b/assets/js/swipers.js new file mode 100644 index 0000000..c69ed3d --- /dev/null +++ b/assets/js/swipers.js @@ -0,0 +1,54 @@ +import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs'; + +export function initSwipers(container = document) { + const sliders = container.querySelectorAll('.swiper'); + + if (sliders.length === 0) { + return; + } + + sliders.forEach((sliderElement) => { + // Éviter de réinitialiser un swiper déjà initialisé + if (sliderElement.swiper) { + return; + } + + const swiper = new Swiper(sliderElement, { + // Optional parameters + slidesPerView: 1, + spaceBetween: 20, + speed: 600, + + // Touch/Swipe settings + touchRatio: 1, + touchAngle: 45, + grabCursor: true, + simulateTouch: true, + allowTouchMove: true, + + // Navigation arrows + navigation: { + nextEl: sliderElement.querySelector('.swiper-button-next'), + prevEl: sliderElement.querySelector('.swiper-button-prev'), + }, + + // Pagination + pagination: { + el: sliderElement.querySelector('.swiper-pagination'), + clickable: true, + }, + + // Keyboard control + keyboard: { + enabled: true, + }, + + // Accessibility + a11y: { + prevSlideMessage: 'Investigation précédente', + nextSlideMessage: 'Investigation suivante', + paginationBulletMessage: 'Aller à l\'investigation {{index}}', + }, + }); + }); +} diff --git a/site/blueprints/files/cover.yml b/site/blueprints/files/cover.yml deleted file mode 100644 index ca64d64..0000000 --- a/site/blueprints/files/cover.yml +++ /dev/null @@ -1,12 +0,0 @@ -title: Image de couverture - -fields: - alt: - label: Texte alternatif - type: text - help: Description de l'image pour l'accessibilité - caption: - label: Légende - type: textarea - size: small - help: Légende affichée sous l'image diff --git a/site/blueprints/pages/folder.yml b/site/blueprints/pages/folder.yml new file mode 100644 index 0000000..f47cd72 --- /dev/null +++ b/site/blueprints/pages/folder.yml @@ -0,0 +1,21 @@ +title: Dossier + +tabs: + contentTab: + label: Contenu + icon: page + fields: + description: + label: Description + type: textarea + size: medium + buttons: false + cover: + label: Visuel de couverture + type: files + multiple: false + layout: cards + image: + ratio: 12/7 + cover: true + help: Image utilisée dans la liste des dossiers diff --git a/site/blueprints/pages/folders.yml b/site/blueprints/pages/folders.yml new file mode 100644 index 0000000..6b17e90 --- /dev/null +++ b/site/blueprints/pages/folders.yml @@ -0,0 +1,17 @@ +title: Dossiers + +tabs: + contentTab: + label: Contenu + sections: + folders: + type: pages + text: "{{ page.title }}" + info: "{{ page.description }}" + layout: cards + size: huge + search: true + image: + cover: true + ratio: 12/7 + template: folder diff --git a/site/blueprints/pages/investigation-summary.yml b/site/blueprints/pages/investigation-summary.yml index c062b0b..fe5cc1b 100644 --- a/site/blueprints/pages/investigation-summary.yml +++ b/site/blueprints/pages/investigation-summary.yml @@ -1,7 +1,4 @@ -title: Investigation -create: - fields: - - subtitle +title: Investigation Summary tabs: contentTab: @@ -9,18 +6,22 @@ tabs: icon: page columns: - width: 2/6 - fields: - publicationDate: - label: Date de publication - type: date - display: DD / MM / YYYY - default: today - width: 1/4 + sections: + createdSection: + type: fields + fields: + created: + label: Première publication + type: date + display: DD / MM / YYYY + default: today + width: 1/2 + reportSection: + label: Rapport + type: pages + template: report - width: 4/6 fields: - subtitle: - label: Sous-titre - type: text chapo: label: Chapo type: writer @@ -30,29 +31,57 @@ tabs: label: Visuel de couverture type: files multiple: false - min: 1 layout: cards - size: full - uploads: - template: cover image: ratio: 12/7 cover: true - body: - label: Corps - type: layout - layouts: - - "1/1" - - "1/2, 1/2" - - "1/3, 1/3, 1/3" - fieldsets: - - heading - - text - - image + help: Image utilisée dans les listes d'enquêtes + heroType: + label: Type de hero + type: select + options: + image: Image simple + video: Vidéo + default: image + width: 1/3 + heroImages: + label: Images hero + type: files + multiple: true + layout: cards + when: + heroType: image + videoExtractUrl: + label: URL vidéo d'extrait (autoplay) + type: url + when: + heroType: video + width: 1/2 + videoFullUrl: + label: URL vidéo complète (YouTube embed) + type: url + when: + heroType: video + width: 1/2 + synthesis: + label: Synthèse + type: textarea + size: large + buttons: false metadataTab: label: Métadonnées icon: table fields: + folder: + label: Dossier + type: select + options: query + query: + fetch: site.find('dossiers').children + text: "{{ page.title }}" + value: "{{ page.slug }}" + empty: Aucun dossier + width: 1/3 incidentDate: label: Date de l'incident type: date @@ -70,8 +99,12 @@ tabs: label: Mots-clés type: tags width: 1/2 + methodology: + label: Méthodologie + type: tags + width: 1/2 partners: - label: Partenaire(s) + label: Partenaires type: structure width: 1/2 fields: @@ -80,32 +113,13 @@ tabs: type: text link: label: Lien - type: link - options: - - url - methodologies: - label: Méthodologie - type: entries - field: - type: text - line: - type: line + type: url team: - label: Équipe - type: structure - columns: - responsability: - width: 1/2 - names: - width: 1/2 - fields: - responsability: - label: Responsabilité - type: text - width: 1/2 - names: - label: Nom - type: entries - width: 1/2 - field: - type: text + label: Équipe Index + type: tags + width: 1/2 + relatedInvestigations: + label: Enquêtes en lien + type: pages + multiple: true + query: site.find('enquetes').children diff --git a/site/blueprints/pages/investigations.yml b/site/blueprints/pages/investigations.yml index 85a23c1..82c3cbd 100644 --- a/site/blueprints/pages/investigations.yml +++ b/site/blueprints/pages/investigations.yml @@ -14,3 +14,4 @@ tabs: image: cover: true ratio: 12/7 + template: investigation-summary diff --git a/site/blueprints/pages/investigation.yml b/site/blueprints/pages/report.yml similarity index 79% rename from site/blueprints/pages/investigation.yml rename to site/blueprints/pages/report.yml index ffa08e1..b9c260f 100644 --- a/site/blueprints/pages/investigation.yml +++ b/site/blueprints/pages/report.yml @@ -81,24 +81,3 @@ tabs: type: link options: - url - line: - type: line - indexTeam: - label: Équipe Index - type: structure - columns: - responsability: - width: 1/2 - names: - width: 1/2 - fields: - responsability: - label: Responsabilité - type: text - width: 1/2 - names: - label: Nom - type: entries - width: 1/2 - field: - type: text diff --git a/site/cache/index.html b/site/cache/index.html new file mode 100644 index 0000000..e69de29 diff --git a/site/config/config.php b/site/config/config.php index bc17179..dfed172 100644 --- a/site/config/config.php +++ b/site/config/config.php @@ -2,6 +2,8 @@ return [ 'debug' => true, + 'locale' => 'fr_FR.UTF-8', + 'date.handler' => 'intl', 'thumbs' => [ 'quality' => 80, 'presets' => [ @@ -30,53 +32,5 @@ return [ 'campaign_slug' => 'soutenir-index-en-2024', 'campaign_url' => 'https://donorbox.org/soutenir-index-en-2024', 'api_base_url' => 'https://donorbox.org/api/v1' - ], - - 'routes' => [ - // Route pour /enquetes/:slug/resume - Page virtuelle résumé - [ - 'pattern' => 'enquetes/(:any)/resume', - 'action' => function($slug) { - $parent = page('enquetes/' . $slug); - if (!$parent) { - return false; - } - - if ($parent->intendedTemplate()->name() !== 'investigation') { - return false; - } - - // Créer une page virtuelle avec le template investigation-summary - return Page::factory([ - 'slug' => 'resume', - 'template' => 'investigation-summary', - 'parent' => $parent, - 'content' => $parent->content()->toArray() - ]); - } - ], - - // Route pour /enquetes/:slug/detail - Page virtuelle détail - [ - 'pattern' => 'enquetes/(:any)/detail', - 'action' => function($slug) { - $parent = page('enquetes/' . $slug); - if (!$parent) { - return false; - } - - if ($parent->intendedTemplate()->name() !== 'investigation') { - return false; - } - - // Créer une page virtuelle avec le template investigation - return Page::factory([ - 'slug' => 'detail', - 'template' => 'investigation', - 'parent' => $parent, - 'content' => $parent->content()->toArray() - ]); - } - ] ] ]; \ No newline at end of file diff --git a/site/config/routes/investigations.php b/site/config/routes/investigations.php deleted file mode 100644 index 29dfff4..0000000 --- a/site/config/routes/investigations.php +++ /dev/null @@ -1,62 +0,0 @@ - 'enquetes/(:any)/resume', - 'action' => function($slug) { - $parent = page('enquetes/' . $slug); - if (!$parent) { - return false; - } - - if ($parent->intendedTemplate()->name() !== 'investigation') { - return false; - } - - // Créer une page virtuelle avec le template investigation-summary - return Page::factory([ - 'slug' => 'resume', - 'template' => 'investigation-summary', - 'parent' => $parent, - 'content' => $parent->content()->toArray() - ]); - } - ], - - // Route pour /enquetes/:slug/detail - Page virtuelle détail - [ - 'pattern' => 'enquetes/(:any)/detail', - 'action' => function($slug) { - $parent = page('enquetes/' . $slug); - if (!$parent) { - return false; - } - - if ($parent->intendedTemplate()->name() !== 'investigation') { - return false; - } - - // Créer une page virtuelle avec le template investigation - return Page::factory([ - 'slug' => 'detail', - 'template' => 'investigation', - 'parent' => $parent, - 'content' => $parent->content()->toArray() - ]); - } - ] -]; diff --git a/site/controllers/investigation.php b/site/controllers/investigation.php deleted file mode 100644 index 9f0788d..0000000 --- a/site/controllers/investigation.php +++ /dev/null @@ -1,19 +0,0 @@ -slug() !== 'resume' && $page->slug() !== 'detail') { - // Redirection 301 vers la page résumé - go($page->url() . '/resume', 301); - } - - // Si c'est une page virtuelle, laisser le template s'afficher normalement - return compact('page'); -}; diff --git a/site/snippets/back-to-top.php b/site/snippets/back-to-top.php new file mode 100644 index 0000000..8868e95 --- /dev/null +++ b/site/snippets/back-to-top.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/site/snippets/blocks/heading.php b/site/snippets/blocks/heading.php deleted file mode 100644 index f2d61fd..0000000 --- a/site/snippets/blocks/heading.php +++ /dev/null @@ -1,4 +0,0 @@ -level()->or('h2'); -?> -<>text() ?>> diff --git a/site/snippets/blocks/image.php b/site/snippets/blocks/image.php deleted file mode 100644 index ec2beee..0000000 --- a/site/snippets/blocks/image.php +++ /dev/null @@ -1,8 +0,0 @@ -image()->toFile()): ?> -
- <?= $block->alt()->or($image->alt()) ?> - caption()->isNotEmpty()): ?> -
caption() ?>
- -
- diff --git a/site/snippets/blocks/text.php b/site/snippets/blocks/text.php deleted file mode 100644 index c0078c3..0000000 --- a/site/snippets/blocks/text.php +++ /dev/null @@ -1 +0,0 @@ -text() ?> diff --git a/site/snippets/card-open-graph.php b/site/snippets/card-open-graph.php index a88df84..9853bf8 100644 --- a/site/snippets/card-open-graph.php +++ b/site/snippets/card-open-graph.php @@ -80,6 +80,8 @@ ?>
+
+
<?= $ogData['title'] ?> @@ -105,4 +107,5 @@
+
\ No newline at end of file diff --git a/site/snippets/footer.php b/site/snippets/footer.php index 16332a7..1d6ca27 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -1,8 +1,11 @@ - +