diff --git a/assets/css/base/_body.scss b/assets/css/base/_body.scss index 3c0010e..e47d48f 100644 --- a/assets/css/base/_body.scss +++ b/assets/css/base/_body.scss @@ -5,7 +5,9 @@ box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; - -o-font-smoothing: antialiased + -o-font-smoothing: antialiased; + + scroll-behavior: smooth; } a { color: currentColor; @@ -27,15 +29,10 @@ body{ color: var(--color-txt); background-color: var(--color-bg); - padding: 0px var(--padding-body); - width: 100vw; overflow-x: hidden; } - - -//temp -main{ - // padding-top: calc(var(--header-h-shrinked) - var(--padding-body)); +img{ + max-width: 100%; } \ No newline at end of file diff --git a/assets/css/base/_responsive.scss b/assets/css/base/_responsive.scss index 41926a1..7bd78b6 100644 --- a/assets/css/base/_responsive.scss +++ b/assets/css/base/_responsive.scss @@ -1,14 +1,12 @@ $desktop: "screen and (min-width: 1200px)"; -$medium: "screen and (max-width: 1200px)"; -$small-up: "screen and (min-width: 720px)"; -$small: "screen and (max-width: 720px)"; -$x-small: "screen and (max-width: 560px)"; +$medium: "screen and (max-width: 1080px)"; +$medium-up: "screen and (min-width: 1080px)"; +$small-up: "screen and (min-width: 768px)"; +$small: "screen and (max-width: 768px)"; +$x-small: "screen and (max-width: 560px)"; +$paysage: "screen and (max-height: 670px) and (min-width: 1080px)"; @media #{$medium}{ - :root{ - --padding: 16px; - --padding-cards: 0.75rem; - --padding-cards-small: 0.5rem; - } + } diff --git a/assets/css/base/_var.scss b/assets/css/base/_var.scss index 8d3c8c6..78f0c3d 100644 --- a/assets/css/base/_var.scss +++ b/assets/css/base/_var.scss @@ -1,55 +1,90 @@ -:root{ - --font: Arial, sans-serif; +:root { + --font: 'Executive', Arial, sans-serif; + --title: 'System', Arial, sans-serif; - // --fs-small: 9px; - // --font-size: 12px; - // --fs-medium: 18px; - // --fs-big: 24px; + // --fs-xsmall: 10px; + // --fs-small: 12px; + // --fs-normal: 16px; + // --fs-medium: 22px; + // --fs-big: 38px; - --fs-x-small: 9px; - --fs-small: 13px; - --fs-normal: 18px; - --fs-medium: 22px; + --fs-xsmall: 10px; + --fs-small: 12px; + --fs-normal: 16px; + --fs-medium: 20px; + --fs-big: 30px; + --fs-xbig: 38px; + + --fs-button-bold: 22px; + + --max-w-content: 700px; + + @media #{$small} { + --fs-medium: 20px; + --fs-big: 26px; + } + + --leading-tight: 1.05; + --leading-normal: 1.2; + // --leading-relaxed: 1.4; + // --leading-loose: 1.8; + + --fw-normal: 400; + --fw-medium: 500; + --fw-bold: 600; + + + --grey-100: #d8d8d8; + --grey-200: #c8c8c8; + --grey-300: #b9b9b9; + --grey-400: #969696; + --grey-600: #6d6d6d; + --grey-800: #383838; + + --color-bg: #161616; + --color-txt: #ffffff; + --color-txt-light: var(--grey-400); + --color-accent: #00ff00; + --color-accent-50: #e9ffe9; + --color-accent-100: #d8fdd8; + --dark: black; + + + + --border: 1px solid var(--color-txt); + --border-light: 1px solid var(--grey-800); + + + --header-h: 80px; + --header-h-shrinked: 50px; + --menu-w: 420px; + --banner-medium: 220px; + + + + + // responsive + --padding-body: 26px; + --padding-inner: 14px; + + --radius-small: 4px; + --radius-btn: 4px; + --spacing: 30px; + --h-block: 30px; + + --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + + +@media #{$small}{ + :root { + --fs-xsmall: 10px; + --fs-small: 11px; + --fs-normal: 14px; + --fs-medium: 18px; --fs-big: 28px; - --fs-x-big: 36px; + --fs-xbig: 32px; - --leading-tight: 1; - --leading-normal: 1.2; - // --leading-relaxed: 1.4; - // --leading-loose: 1.8; - - --fw-normal: 400; - --fw-medium: 600; - - - --color-bg: #161616; - --color-txt: #FFFFFF; - --color-accent: #00FF00; - --color-accent-50: #e9ffe9; - --color-accent-100: #d8fdd8; - - --grey-100: #d8d8d8; - --grey-300: #B9B9B9; - --grey-400: #969696; - --grey-800: #383838; - - --border: 1px solid var(--color-txt); - - - --header-h: 140px; - --header-h-shrinked: 60px; - - - // responsive - --padding-body: 16px; - - - --radius-small: 4px; - --spacing: 40px; - --h-block: 40px; - - - - - + --header-h: 60px; + } } \ No newline at end of file diff --git a/assets/css/components/_btn--don.scss b/assets/css/components/_btn--don.scss new file mode 100644 index 0000000..3c4e2d0 --- /dev/null +++ b/assets/css/components/_btn--don.scss @@ -0,0 +1,60 @@ +#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/_buttons.scss b/assets/css/components/_buttons.scss index 2fedcdd..1b7d186 100644 --- a/assets/css/components/_buttons.scss +++ b/assets/css/components/_buttons.scss @@ -1,55 +1,157 @@ -.btn--bold .btn--bold__container{ - --size: 28px; - font-size: var(--fs-big); - height: var(--size); +button { + cursor: pointer; + font-family: var(--font); + font-size: var(--fons-normal); + color: var(--color-txt); + &:hover { + color: var(--grey-100); + } - position: relative; + a { + text-decoration: none; + width: 100%; + height: 100%; + } +} + +button:disabled { + cursor: auto; +} + +.soutenir { + a { + color: var(--color-accent); + &:hover { + color: var(--color-accent) !important; + text-decoration: underline !important; + } + } +} + +.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); + text-transform: uppercase; + line-height: 1; + overflow: hidden; + white-space: nowrap; + a { display: flex; align-items: center; - gap: 0.75ch; - padding-right: 1ch; + justify-content: center; + width: 100%; + height: 100%; + padding: 0 2ch; + padding-top: 4px; + } + &.no-link { + display: flex; + align-items: center; + justify-content: center; + padding: 0 2ch; + padding-top: 4px; + } +} + +.btn--bold { + background-color: var(--color-txt); + color: var(--color-bg); + &:hover { + background-color: var(--color-accent); + border-color: var(--color-accent); + a { + color: 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); + } +} + +// 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; + + .icon, + .txt { + z-index: 10; + } + + .icon { + width: var(--size); + height: var(--size); + 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-weight: var(--fw-medium); - - text-decoration: none; + font-size: var(--fs-normal); + font-weight: var(--fw-bold); + padding-left: 1ch; + } - cursor: pointer; + &::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; + } - .icon, .txt{ z-index: 10; } - - .icon{ - width: var(--size); - height: var(--size); - display: flex; - align-items: center; - justify-content: center; - padding-top: 1px; - padding-left: 2px; - - svg{ - width: 70%; - fill: var(--color-bg); - } + &:hover { + // + .txt { + color: var(--color-bg); + display: block; } - - &::before{ - content: ''; - display: block; - background-color: var(--color-accent); - border-radius: calc(var(--size)/2); - width: var(--size); - height: var(--size); - position: absolute; - left: 0px; - z-index: 0; - transition: width .2s + &::after { + width: 100%; } - - &:hover{ - color: var(--color-bg); - &::before{ - width: 100%; - } - } -} \ No newline at end of file + } +} diff --git a/assets/css/components/_comments-slider.scss b/assets/css/components/_comments-slider.scss deleted file mode 100644 index 2e08bfa..0000000 --- a/assets/css/components/_comments-slider.scss +++ /dev/null @@ -1,74 +0,0 @@ -.comments-slider { - display: flex; - overflow-x: auto; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - gap: 0; - padding: 0; - scrollbar-width: none; /* Firefox */ - - @media #{$small-up}{ - padding-left: 20%; - flex: 0 0 40%; - } - - } - - .comments-slider::-webkit-scrollbar { - display: none; - } - - .comment { - scroll-snap-align: start; - // background-color: #444; - - @media #{$small}{ - flex: 0 0 calc(100vw - var(--padding-body)*2); /* mobile */ - padding: 0px 2ch; - } - @media #{$small-up}{ - flex: 0 0 40%; - } - - } - - - .comment__text{ - font-size: var(--fs-medium); - font-weight: var(--fw-medium); - line-height: 1; - max-width: 40ch; - text-align: center; - } - - .comment__name { - margin-top: calc(var(--spacing)*0.5); - text-align: center; - } - - - - - - /* Dots */ - .comments-slider__dots { - display: flex; - @media #{$small-up}{ justify-content: center; } - @media #{$small}{ justify-content: flex-end; } - margin-top: 0.5rem; - gap: 0.4rem; - margin-top: calc(var(--spacing)*1.5); - } - .comments-slider__dots button { - width: 10px; - height: 10px; - border-radius: 50%; - border: none; - background: var(--grey-400); - cursor: pointer; - transition: background 0.3s; - } - .comments-slider__dots button.active { - background: var(--color-txt); - } - \ No newline at end of file diff --git a/assets/css/components/_form-newsletter.scss b/assets/css/components/_form-newsletter.scss index f517914..661f836 100644 --- a/assets/css/components/_form-newsletter.scss +++ b/assets/css/components/_form-newsletter.scss @@ -4,26 +4,26 @@ position: relative; display: flex; align-items: center; + position: relative; - max-width: 36ch; - - margin: calc(var(--spacing)*1) auto; - margin-top: calc(var(--spacing)*1.5); input[type="email"]{ - height: var(--h-block); + height: calc(var(--h-block)*1.25); width: 100%; - border-radius: calc(var(--h-block)*0.5); + border-radius: calc(var(--h-block)*0.625); outline: none; border: none; - padding: 0 1ch; + padding: 0 2ch; + font-family: var(--font); - font-size: var(--fs-medium); + font-size: var(--fs-normal); z-index: 40; + padding-top: 4px; &::placeholder{ - font-size: var(--fs-medium); + font-family: var(--font); + font-size: var(--fs-normal); } &:focus{ @@ -33,49 +33,95 @@ } - - button[type="submit"].btn--bold{ - - z-index: 50; + button[type="submit"].btn--newletter{ position: absolute; - right: 3px; + right: 2px; + z-index: 100; + } - .btn--bold__container{ - z-index: 50; - padding-right: 0; - &::before{ - left: auto; - right: 0; - } + button[type="submit"].btn--newletter { + - .txt{ - font-size: var(--fs-medium); - display: none; - padding-left: 1ch; - } + --size: calc(var(--h-block)*1.25 - 4px); + font-family: var(--font); + font-size: var(--fs-button-bold); + height: var(--size); + + + display: flex; + align-items: center; + gap: 0.75ch; + color: var(--color-accent); + font-weight: var(--fw-medium); + text-decoration: none; - &:hover{ - .txt{ - display: block; - } + cursor: pointer; + + + .icon, .txt{ z-index: 10; } + + .icon{ + width: var(--size); + height: var(--size); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-bg); + text-align: center; + + svg{ + fill: var(--color-bg); + width: 80%; } } - - // shadow on input - &::before{ + .txt{ + position: relative; + top: 2px; + font-size: var(--fs-normal); + display: none; + padding-left: 1ch; + } + + &::after{ content: ''; display: block; - width: 120px; - height: 30px; - background: linear-gradient(90deg,transparent 0%, var(--color-txt) 80%); - position: absolute; - left: -110px; - z-index: 40; + background-color: var(--color-accent); + border-radius: calc(var(--size)/2); + width: var(--size); + height: var(--size); + position: absolute; + right: 0; + z-index: 0; + transition: width .2s } + + &:hover{ + .txt{ + color: var(--color-bg); + display: block; + } + &::after{ + width: 100%; + } + } + + // @media #{$small}{ + // .txt{ + // color: var(--color-bg); + // display: block; + // } + // &::after{ + // width: 100%; + // } + // } + + + } + } \ No newline at end of file diff --git a/assets/css/components/_gauge.scss b/assets/css/components/_gauge.scss deleted file mode 100644 index 849f48c..0000000 --- a/assets/css/components/_gauge.scss +++ /dev/null @@ -1,51 +0,0 @@ -.gauge__container{ - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -#gauge{ - width: 100%; - margin-bottom: calc(var(--spacing)*0.25); - height: calc(var(--h-block)*0.5); - border-radius: calc(var(--h-block)*0.25); - background-color: var(--grey-400); - position: relative; - overflow: hidden; - &::before{ - content: ''; - display: block; - height: calc(var(--h-block)*0.5); - border-radius: calc(var(--h-block)*0.25); - width: 0%; - background-color: var(--color-txt); - position: absolute; - top: 0; - left: 0; - animation: fillGauge 1s ease forwards; - } - -} - -@keyframes fillGauge { - from { - width: 0%; - } - to { - width: var(--pourcent); - } -} - - -.gauge--infos{ - .property{ - font-size: var(--fs-small); - padding-bottom: 3px; - } - - &:last-of-type{ - text-align: right; - } -} - diff --git a/assets/css/components/_heading.scss b/assets/css/components/_heading.scss deleted file mode 100644 index 163b4d3..0000000 --- a/assets/css/components/_heading.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/css/components/_keywords.scss b/assets/css/components/_keywords.scss new file mode 100644 index 0000000..67566a6 --- /dev/null +++ b/assets/css/components/_keywords.scss @@ -0,0 +1,34 @@ +.keywords{ + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 1ch; + + li{ + height: var(--h-block); + border-radius: calc(var(--h-block)*0.5); + border: var(--border-light); + font-size: var(--fs-normal); + overflow: hidden; + + a{ + text-decoration: none; + width: 100%; + height: 100%; + display: flex; + align-items: center; + padding: 0 1.5ch; + line-height: 1; + padding-top: 2px; + + } + + &:hover{ + border-color: var(--color-txt); + a{ + color: currentColor; + } + } + + } +} \ No newline at end of file diff --git a/assets/css/components/_list-socials.scss b/assets/css/components/_list-socials.scss index 4f9c9d8..6716e48 100644 --- a/assets/css/components/_list-socials.scss +++ b/assets/css/components/_list-socials.scss @@ -1,32 +1,57 @@ -.list-socials{ - list-style-type: none; - - li { - margin-bottom: calc(var(--spacing)*0.25); - .link--external{ - display: flex; - align-items: center; - gap: 1ch; - text-decoration: none; - - - - .icon svg { - width: 25px; - fill: var(--color-txt); - } - - .arrow svg{ - position: relative; - top: 3px; - width: 12px; - fill: var(--grey-400); - } - - - } +.list-socials { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 400px; + a{ + display: flex; + align-items: center; + text-decoration: none; + } + + .icon{ + width: 24px; + height: 24px; + position: relative; + top: -2px; + } + svg{ + display: flex; + align-items: center; + width: 24px; + height: 24px; + } - - -} \ No newline at end of file + .text{ display: none; } +} + + + +// with text +@media #{$small-up}{ + .footer__socials .list-socials{ + + display: block; + + li{ + margin-bottom: calc(var(--spacing)*0.5); + break-inside: avoid; + } + + a{ + gap: 1ch; + + height: calc(var(--spacing)*1); + &::after{ + content: '↗'; + color: var(--grey-300); + } + } + .text{ + display: block; + line-height: 1; + } + } +} diff --git a/assets/css/components/_modal-share.scss b/assets/css/components/_modal-share.scss new file mode 100644 index 0000000..c6375c5 --- /dev/null +++ b/assets/css/components/_modal-share.scss @@ -0,0 +1,122 @@ +.modal--share{ + border: var(--border); + border-radius: var(--radius-btn); + 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; + } + + .socials{ + display: block; + list-style: none; + + li{ + font-size: var(--fs-normal); + padding-bottom: 6px; + border-bottom: var(--border-light); + padding-top: 6px; + + a{ + display: flex; + align-items: center; + gap: 1ch; + text-decoration: none; + } + .icon { + width: 20px; + height: 20px; + svg{ + width: 100%; + height: 100%; + } + } + .text{ + 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); + + .copy-link__field{ + flex-grow: 1; + display: grid; + grid-template-columns: var(--h-block) 1fr; + + } + + + .icon{ + display: flex; + width: var(--h-block); + height: 100%; + align-items: center; + justify-content: center; + position: relative; + // top: -2px; + grid-row: 1; + grid-column: 1; + } + .icon svg{ + width: 12px; + } + input{ + font-size: var(--fs-small); + font-family: var(--font); + background: none; + border: none; + color: var(--color-txt); + padding-top: 2px; + grid-column: 1/end; + grid-row: 1; + padding-left: var(--h-block); + padding-right: 0.5ch; + border: var(--border-light); + border-radius: var(--radius-btn); + height: var(--h-block); + &:focus{ + border-color: var(--color-txt); + outline: none; + + } + } + + button{ + background-color: var(--color-txt); + color: var(--color-bg); + border-radius: var(--radius-btn); + padding: 0 1ch; + font-size: var(--fs-small); + padding-top: 2px; + &:hover{ + background-color: var(--color-accent); + + } + } + } + +} + + diff --git a/assets/css/components/_nav-tabs.scss b/assets/css/components/_nav-tabs.scss index 497c6e3..2cbf6df 100644 --- a/assets/css/components/_nav-tabs.scss +++ b/assets/css/components/_nav-tabs.scss @@ -1,5 +1,5 @@ .nav--tabs{ - height: var(--h-block); + height: calc(var(--h-block)*1); width: auto; border: var(--border); border-radius: var(--radius-small); @@ -14,8 +14,10 @@ .nav--tabs__btn{ + font-family: var(--font); font-size: var(--fs-small); - padding: 0 1ch; + font-weight: var(--fw-medium); + padding: 0 2ch; &.is-selected{ background-color: var(--color-txt); diff --git a/assets/css/components/_player.scss b/assets/css/components/_player.scss deleted file mode 100644 index 95a4e7f..0000000 --- a/assets/css/components/_player.scss +++ /dev/null @@ -1,53 +0,0 @@ -.player__container { - width: 100%; - height: 100%; - - - - .player__element { - width: 100%; - height: 100%; - display: grid; - place-items: center; - overflow: hidden; - // display: none; - - - .player__btn { - svg { - fill: var(--color-txt); - width: 100%; - } - - position: absolute; - width: 60px; - height: 60px; - cursor: pointer; - } - - img, - video { - width: 100%; - height: 100%; - object-fit: cover; - } - - } - - - .player__iframe { - display: none; - width: 100%; - height: 100%; - iframe{ - width: 100%; - height: 100%; - - } - } - - - -} - - diff --git a/assets/css/components/_text.scss b/assets/css/components/_text.scss index ae52854..2aa69f1 100644 --- a/assets/css/components/_text.scss +++ b/assets/css/components/_text.scss @@ -1,21 +1,47 @@ -#page-don{ - - // text ----------------------------------------- +[data-template="subscription-newsletter"], +[data-template="thanks"], +[data-template="support"], +[data-template="store"]{ .p__baseline-big{ + font-family: var(--title); font-size: var(--fs-big); - font-weight: var(--fw-medium); - line-height: var(--leading-tight); + font-weight: var(--fw-bold); + line-height: 1.1; text-align: center; - margin: calc(var(--spacing)*1.75) 0; + margin: calc(var(--spacing)*1) 0; + + strong{ + font-weight: var(--fw-bolf); + color: var(--color-accent); + } + + .link-don{ + display: block; + color: var(--color-accent); + text-decoration: none; + // &::after{ + // content: ' ↗'; + // font-size: 0.8em; + // } + &:hover{ + text-decoration: underline 2px; + text-underline-offset: 4px; + + } + } } .p__baseline{ font-size: var(--fs-medium); font-weight: var(--fw-medium); - line-height: var(--leading-tight); + line-height: 1.1; text-align: center; - margin: var(--spacing) 0; + margin: calc(var(--spacing)*1) 0; + @media #{$small}{ + text-align: center; + margin: var(--spacing) 0; + } } .p__details{ @@ -24,42 +50,19 @@ color: var(--grey-400); } - - // heading --------------------------------------------- - - .hero-heading{ - font-size: var(--fs-x-big); - line-height: var(--leading-tight); - font-weight: var(--fw-medium); - display: inline; - background: var(--color-txt); - color: var(--color-bg); - padding: 0 0.3em; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; - text-align: center; - } - .section__heading{ - font-size: var(--fs-medium); - font-weight: var(--fw-medium); - line-height: 1; - - height: calc(var(--spacing)*3); - border-bottom: var(--border); - text-align: center; - display: flex; - align-items: center; - justify-content: center; - } - - .subsection__heading{ font-size: var(--fs-normal); font-weight: var(--fw-medium); line-height: 1; - margin-top: calc(var(--spacing)*0.75); - margin-bottom: calc(var(--spacing)*1); + text-align: center; + margin-top: calc(var(--spacing)*0.5); + margin-bottom: calc(var(--spacing)*1); } + ul, ol{ + margin-left: 3ch; + margin-bottom: 0.5em; + } -} \ No newline at end of file +} + diff --git a/assets/css/pages/dons/_section-donation.scss b/assets/css/pages/dons/_section-donation.scss deleted file mode 100644 index 0ae6977..0000000 --- a/assets/css/pages/dons/_section-donation.scss +++ /dev/null @@ -1,44 +0,0 @@ -#section__donation{ - display: flex; - flex-direction: column; - - - - .btn--donation__container{ - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: var(--padding-body); - margin-bottom: calc(var(--spacing)*0.75); - - .btn--donation__grow-2{ - grid-column: span 2; - } - } - - - .btn--donation{ - background-color: var(--color-txt); - color: var(--color-bg); - border-radius: var(--radius-small); - height: calc(var(--h-block)*2); - - .bold{ - font-size: var(--fs-medium); - font-weight: var(--fw-medium); - margin-bottom: 0.25em; - } - - .small{ - font-size: var(--fs-small); - } - - &:hover{ - background-color: var(--color-accent-50); - // outline: 4px solid var(--color-accent); - cursor: pointer; - } - - } - - -} \ No newline at end of file diff --git a/assets/css/pages/dons/_section-hero.scss b/assets/css/pages/dons/_section-hero.scss deleted file mode 100644 index 86b1aa8..0000000 --- a/assets/css/pages/dons/_section-hero.scss +++ /dev/null @@ -1,24 +0,0 @@ -#section__hero{ - - - .hero-heading__container{ - text-align: center; - margin-top: calc(var(--spacing)*1.5); - margin-bottom: calc(var(--spacing)*1.5); - } - - - - .btn--bold{ - display: block; - margin: var(--spacing) auto; - margin-bottom: calc(var(--spacing)*1.5); - } - - .jauge__container{ - margin-top: calc(var(--spacing)*1.5); - } - - - -} \ No newline at end of file diff --git a/assets/css/pages/dons/_section-player.scss b/assets/css/pages/dons/_section-player.scss deleted file mode 100644 index b6f6422..0000000 --- a/assets/css/pages/dons/_section-player.scss +++ /dev/null @@ -1,30 +0,0 @@ -#section__player{ - - position: relative; - left: calc(var(--padding-body)*-1); - - @media #{$small}{ - width: 100vw; - // aspect-ratio: 1/1; - .player__container, .player__element, .player__iframe, iframe{ - width: 100%; - height: 75vh; - overflow: hidden; - } - - } - - @media #{$small-up}{ - position: relative; - width: 100vw; - height: 60vh; - .player__container, .player__element, .player__iframe, iframe{ - width: 100%; - height: 60vh; - overflow: hidden; - } - } - - - -} \ No newline at end of file diff --git a/assets/css/pages/dons/_section-questions.scss b/assets/css/pages/dons/_section-questions.scss deleted file mode 100644 index 4564232..0000000 --- a/assets/css/pages/dons/_section-questions.scss +++ /dev/null @@ -1,78 +0,0 @@ -#section__questions{ - details{ - border-bottom: var(--border); - - - summary{ - height: calc(var(--h-block)*1); - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - - &::after{ - content: "▶"; - font-size: 0.8em; - color: var(--grey-400); - } - } - - p{ - padding-top: calc(var(--spacing)*0.25); - margin-bottom: var(--spacing); - border-top: var(--border); - } - - - &::details-content { - - max-height: 0; - transition: max-height ease-in .5s; - overflow: hidden; - - // display: grid; - // grid-template-rows: 0fr; - // overflow: hidden; - // transition: grid-template-rows 1s; - - } - - &[open]{ - - - - &::details-content { - max-height: 1000px; - filter: none; - } - - - summary::after{ - transform: rotate(90deg); - transform-origin: center; - } - } - } - - - - .btn--bold{ - display: block; - margin: calc(var(--spacing) * 1.5) auto; - margin-bottom: 0; - } - - -} - - -// @keyframes fadeInDown { -// 0% { -// opacity: 0; -// transform: translateY(-1.25em); -// } -// 100% { -// opacity: 1; -// transform: translateY(0); -// } -// } \ No newline at end of file diff --git a/assets/css/pages/dons/_section-socials.scss b/assets/css/pages/dons/_section-socials.scss deleted file mode 100644 index 59227b1..0000000 --- a/assets/css/pages/dons/_section-socials.scss +++ /dev/null @@ -1,8 +0,0 @@ -#section__socials{ - - .list-socials{ - columns: 2; - - } - -} \ No newline at end of file diff --git a/assets/css/pages/dons/_section-store.scss b/assets/css/pages/dons/_section-store.scss deleted file mode 100644 index 4f2500f..0000000 --- a/assets/css/pages/dons/_section-store.scss +++ /dev/null @@ -1,40 +0,0 @@ -#section__store{ - - - .store__product{ - - - margin-top: calc(var(--spacing)*1.5); - margin-bottom: calc(var(--spacing)*0.5); - position: relative; - - figure{ - aspect-ratio: 4/3; - background-color: var(--color-bg); - background-color: var(--data-bg); - margin-bottom: calc(var(--spacing)*0.5); - - - } - img{ - width: 100%; - height: 100%; - object-fit: contain; - } - - a{ - text-decoration: none; - } - - .link-block{ - display: block; - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - cursor: pointer; - } - } - -} \ No newline at end of file diff --git a/assets/css/pages/dons/_sections.scss b/assets/css/pages/dons/_sections.scss deleted file mode 100644 index 08de315..0000000 --- a/assets/css/pages/dons/_sections.scss +++ /dev/null @@ -1,14 +0,0 @@ -.section__page-don:not(#section__player), .subsection__page-don{ - border-bottom: var(--border); - padding-bottom: calc(var(--spacing)*2); -} - - - -@media #{$small}{ - - #section__hero, #section__comments{ - padding-bottom: calc(var(--spacing)*0.5)!important; - } - -} \ No newline at end of file diff --git a/assets/css/partials/_main-layout.scss b/assets/css/partials/_main-layout.scss new file mode 100644 index 0000000..6783d03 --- /dev/null +++ b/assets/css/partials/_main-layout.scss @@ -0,0 +1,12 @@ +body { + min-height: 100dvh; + min-height: 100vh; + + display: flex; + flex-direction: column; + + main { + flex-grow: 1; + padding: 0 var(--padding-body); + } +} diff --git a/assets/css/partials/_site-footer.scss b/assets/css/partials/_site-footer.scss new file mode 100644 index 0000000..2c1bcc0 --- /dev/null +++ b/assets/css/partials/_site-footer.scss @@ -0,0 +1,94 @@ +#site-footer{ + + background-color: var(--dark); + padding: calc(var(--padding-body)*2) var(--padding-body); + + + .logo { + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*1); + svg{ + width: 100px; + } + } + + p{ + margin: calc(var(--spacing)*0.5) 0; + a{ + text-decoration: none; + &:hover{ + text-decoration: underline; + color: currentColor; + } + } + } + + .p__small{ + font-size: var(--fs-xsmall); + color: var(--grey-600); + } + + .footer__mentions{ + p{ + font-size: var(--fs-small); + color: var(--color-txt) + } + } + + + + @media #{$small}{ + margin-top: calc(var(--spacing)*2); + + + .footer__socials{ + margin-top: calc(var(--spacing)*0.75); + 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); + } + } + .footer__mentions{ + + border-top: var(--border-light); + padding-top: calc(var(--spacing)*0.25); + p{ + font-size: var(--fs-small); + text-align: center; + } + } + } + + + @media #{$small-up}{ + + .site-footer__container{ + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: calc(var(--spacing)*2); + + max-width: 1200px; + margin: 0 auto; + } + + .footer__socials .container{ + max-width: 400px; + columns: 2; + margin-top: calc(var(--spacing)*1); + } + + .footer__mentions{ + grid-column: span 2; + p{ + margin-top: calc(var(--spacing)*1); + } + + } + + } + + +} \ No newline at end of file diff --git a/assets/css/partials/_site-header.scss b/assets/css/partials/_site-header.scss index c45507a..aa9adae 100644 --- a/assets/css/partials/_site-header.scss +++ b/assets/css/partials/_site-header.scss @@ -1,110 +1,150 @@ -#site-header{ +@keyframes add-border { + from { + border-bottom-color: transparent; + } + to { + border-bottom: var(--grey-800); + } +} - position: fixed; - left: 0px; - top: 0px; - z-index: 100000; +#site-header { - width: 100vw; - height: var(--header-h); - padding: 0 var(--padding-body); + z-index: 900; + --gap: 3ch; - background-color: transparent; - border-bottom: var(--border); - border-color: transparent; + width: 100vw; + height: var(--header-h); + background-color: var(--color-bg); + padding: 0 var(--padding-body); - // display: grid; - // grid-template-columns: 1fr; + .site-header__inner{ + width: 100%; + height: 100%; display: flex; align-items: center; justify-content: space-between; + gap: var(--gap); + } - .burger svg{ - fill: var(--color-txt); - width: 40px; + + a{ + text-decoration: none; + &:hover{ + color: var(--grey-200); } + } + + #site-title { + flex-grow: 2; + svg{ + width: 100px; + @media #{$small}{ + width: 80px; + } + } + } + + .title-page{ + display: none; + flex-grow: 2; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; + font-size: var(--fs-small); + line-height: 2; + + } + + ul{ + list-style-type: none; + display: flex; + align-items: center; + gap: var(--gap); + text-transform: uppercase; + } + + + #theme-toggle{ + width: var(--h-block); + height: var(--h-block); + display: flex; + align-items: center; + justify-content: center; + svg{ + width: 18px; + position: relative; + top: -2px; + + } + } + + #lang-toggle{ + display: flex; + gap: 1ch; + button:disabled{ color: var(--color-txt-light); } + } + + #menu-toggle{ + cursor: pointer; + svg{ + width: 30px; + } + .close{ display: none; } + } - .site-title{ - display: flex; - width: 120px; - overflow: hidden; - svg{ - fill: var(--color-txt); - - } + button{ + + &:hover{ + svg{ fill: var(--grey-200)!important; } } + } + +} +#site-header.is-visible{ + position: fixed; + top: 0; - nav{ - height: 0; - overflow: hidden; - opacity: 0; + .site-header__inner{ + border-bottom: var(--border-light); + + #nav-highlight li:not(.soutenir){ + display: none; } - nav ul{ - height: 100%; - display: flex; - align-items: center; - justify-content: center; - gap: 2ch; - list-style: 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); + } +} - .header-left, .header-right{ - width: 100px; - } +@media #{$medium}{ + #nav-highlight{ + display: none; + } +} - .header-center{ - - display: flex; - flex-direction: column; - align-items: center; - - - } - - - #go-to-panier{ - display: flex; - justify-content: flex-end; - align-items: center; - gap: 1ch; - text-decoration: none; - - - #go-to-panier__nbr{ - - min-width: 2.6ch; - height: 2.6ch; - border-radius: 1.3ch; - border: var(--border); - display: flex; - align-items: center; - justify-content: center; - padding: 0 6px; - } - } - - - &.is-shrinked{ - background-color: var(--color-bg); - height: var(--header-h-shrinked); - transition: ease-in .3s; - border-color: var(--color-txt); - - nav{ - height: var(--h-block); - opacity: 1; - } - - .site-title{ - opacity: 0; - height: 0; - } - } -} \ No newline at end of file diff --git a/assets/css/partials/_site-menu.scss b/assets/css/partials/_site-menu.scss new file mode 100644 index 0000000..25aa0ed --- /dev/null +++ b/assets/css/partials/_site-menu.scss @@ -0,0 +1,108 @@ +#site-menu{ + position: fixed; + width: var(--menu-w); + @media #{$small}{ width: 100vw; } + height: calc(100dvh - var(--header-h)); + height: calc(100vh - var(--header-h)); + top: var(--header-h); + right: calc(var(--menu-w)*-1); + transition: right .3s ease-in; + background-color: var(--color-bg); + border-left: var(--border-light); + padding: var(--padding-body); + z-index: 1000; + + display: flex; + flex-direction: column; + // display: none; + + // .baseline{ + // font-size: var(--fs-medium); + // } + + 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; + li{ + font-size: var(--fs-normal); + a{ + display: block; + text-decoration: none; + padding: 0.5em 0; + &:hover{ + text-decoration: underline; + // color: var(--grey-200); + } + } + } + + .highlight{ + text-transform: uppercase; + } + } + } +} + +body.menu-open{ + overflow: hidden; + main, footer, #nav-highlight{ + transition: opacity .3s ease-in; + opacity: 0.1; + } + #site-menu{ + right: 0; + + } + + #menu-toggle{ + .open{ display: none; } + .close{ display: block!important; } + } + +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index c1720e0..db53b3c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,34 +1,65 @@ @charset "UTF-8"; :root { - --font: Arial, sans-serif; - --fs-x-small: 9px; - --fs-small: 13px; - --fs-normal: 18px; - --fs-medium: 22px; - --fs-big: 28px; - --fs-x-big: 36px; - --leading-tight: 1; + --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-button-bold: 22px; + --max-w-content: 700px; + --leading-tight: 1.05; --leading-normal: 1.2; --fw-normal: 400; - --fw-medium: 600; + --fw-medium: 500; + --fw-bold: 600; + --grey-100: #d8d8d8; + --grey-200: #c8c8c8; + --grey-300: #b9b9b9; + --grey-400: #969696; + --grey-600: #6d6d6d; + --grey-800: #383838; --color-bg: #161616; - --color-txt: #FFFFFF; - --color-accent: #00FF00; + --color-txt: #ffffff; + --color-txt-light: var(--grey-400); + --color-accent: #00ff00; --color-accent-50: #e9ffe9; --color-accent-100: #d8fdd8; - --grey-100: #d8d8d8; - --grey-300: #B9B9B9; - --grey-400: #969696; - --grey-800: #383838; + --dark: black; --border: 1px solid var(--color-txt); - --header-h: 140px; - --header-h-shrinked: 60px; - --padding-body: 16px; + --border-light: 1px solid var(--grey-800); + --header-h: 80px; + --header-h-shrinked: 50px; + --menu-w: 420px; + --banner-medium: 220px; + --padding-body: 26px; + --padding-inner: 14px; --radius-small: 4px; - --spacing: 40px; - --h-block: 40px; + --radius-btn: 4px; + --spacing: 30px; + --h-block: 30px; + --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +@media screen and (max-width: 768px) { + :root { + --fs-medium: 20px; + --fs-big: 26px; + } } +@media screen and (max-width: 768px) { + :root { + --fs-xsmall: 10px; + --fs-small: 11px; + --fs-normal: 14px; + --fs-medium: 18px; + --fs-big: 28px; + --fs-xbig: 32px; + --header-h: 60px; + } +} * { margin: 0; padding: 0; @@ -36,6 +67,7 @@ -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; + scroll-behavior: smooth; } a { @@ -59,99 +91,266 @@ body { font-size: var(--fs-normal); color: var(--color-txt); background-color: var(--color-bg); - padding: 0px var(--padding-body); width: 100vw; overflow-x: hidden; } -@media screen and (max-width: 1200px) { - :root { - --padding: 16px; - --padding-cards: 0.75rem; - --padding-cards-small: 0.5rem; +img { + max-width: 100%; +} + +@keyframes add-border { + from { + border-bottom-color: transparent; + } + to { + border-bottom: var(--grey-800); } } -#page-don .p__baseline-big { - font-size: var(--fs-big); - font-weight: var(--fw-medium); - line-height: var(--leading-tight); - text-align: center; - margin: calc(var(--spacing) * 1.75) 0; +#site-header { + z-index: 900; + --gap: 3ch; + width: 100vw; + height: var(--header-h); + background-color: var(--color-bg); + padding: 0 var(--padding-body); } -#page-don .p__baseline { - font-size: var(--fs-medium); - font-weight: var(--fw-medium); - line-height: var(--leading-tight); - text-align: center; - margin: var(--spacing) 0; +#site-header .site-header__inner { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--gap); } -#page-don .p__details { +#site-header a { + text-decoration: none; +} +#site-header a:hover { + color: var(--grey-200); +} +#site-header #site-title { + flex-grow: 2; +} +#site-header #site-title svg { + width: 100px; +} +@media screen and (max-width: 768px) { + #site-header #site-title svg { + width: 80px; + } +} +#site-header .title-page { + display: none; + flex-grow: 2; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; font-size: var(--fs-small); - margin-bottom: 0.5em; - color: var(--grey-400); + line-height: 2; } -#page-don .hero-heading { - font-size: var(--fs-x-big); - line-height: var(--leading-tight); - font-weight: var(--fw-medium); - display: inline; - background: var(--color-txt); - color: var(--color-bg); - padding: 0 0.3em; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; - text-align: center; +#site-header ul { + list-style-type: none; + display: flex; + align-items: center; + gap: var(--gap); + text-transform: uppercase; } -#page-don .section__heading { - font-size: var(--fs-medium); - font-weight: var(--fw-medium); - line-height: 1; - height: calc(var(--spacing) * 3); - border-bottom: var(--border); - text-align: center; +#site-header #theme-toggle { + width: var(--h-block); + height: var(--h-block); display: flex; align-items: center; justify-content: center; } -#page-don .subsection__heading { - font-size: var(--fs-normal); - font-weight: var(--fw-medium); - line-height: 1; - margin-top: calc(var(--spacing) * 0.75); - margin-bottom: calc(var(--spacing) * 1); +#site-header #theme-toggle svg { + width: 18px; + position: relative; + top: -2px; +} +#site-header #lang-toggle { + display: flex; + gap: 1ch; +} +#site-header #lang-toggle button:disabled { + color: var(--color-txt-light); +} +#site-header #menu-toggle { + cursor: pointer; +} +#site-header #menu-toggle svg { + width: 30px; +} +#site-header #menu-toggle .close { + display: none; +} +#site-header button:hover svg { + fill: var(--grey-200) !important; } -.btn--bold .btn--bold__container { - --size: 28px; - font-size: var(--fs-big); +#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; + } +} +button { + cursor: pointer; + font-family: var(--font); + font-size: var(--fons-normal); + color: var(--color-txt); +} +button:hover { + color: var(--grey-100); +} +button a { + text-decoration: none; + width: 100%; + height: 100%; +} + +button:disabled { + cursor: auto; +} + +.soutenir a { + color: var(--color-accent); +} +.soutenir a:hover { + color: var(--color-accent) !important; + text-decoration: underline !important; +} + +.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); + text-transform: uppercase; + line-height: 1; + overflow: hidden; + white-space: nowrap; +} +.btn--bold a, +.btn--bold-inline a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 0 2ch; + padding-top: 4px; +} +.btn--bold.no-link, +.btn--bold-inline.no-link { + display: flex; + align-items: center; + justify-content: center; + padding: 0 2ch; + padding-top: 4px; +} + +.btn--bold { + background-color: var(--color-txt); + color: var(--color-bg); +} +.btn--bold:hover { + background-color: var(--color-accent); + border-color: var(--color-accent); +} +.btn--bold:hover a { + color: var(--color-bg); +} + +.btn--bold-inline { + background-color: var(--color-bg); +} + +.btn--bold-inline:hover { + background-color: var(--grey-800); + color: var(--color-txt); +} +.btn--bold-inline:hover a { + background-color: var(--grey-800); + color: var(--color-txt); +} + +.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: 0.75ch; - padding-right: 1ch; + gap: 0ch; color: var(--color-accent); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; } -.btn--bold .btn--bold__container .icon, .btn--bold .btn--bold__container .txt { +.btn__default .icon, +.btn__default .txt { z-index: 10; } -.btn--bold .btn--bold__container .icon { +.btn__default .icon { width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; - padding-top: 1px; - padding-left: 2px; + color: var(--color-bg); + text-align: center; } -.btn--bold .btn--bold__container .icon svg { - width: 70%; +.btn__default .icon svg { fill: var(--color-bg); + width: 80%; } -.btn--bold .btn--bold__container::before { +.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); @@ -159,148 +358,46 @@ body { width: var(--size); height: var(--size); position: absolute; - left: 0px; + left: 0; z-index: 0; transition: width 0.2s; } -.btn--bold .btn--bold__container:hover { +.btn__default:hover .txt { color: var(--color-bg); + display: block; } -.btn--bold .btn--bold__container:hover::before { +.btn__default:hover::after { width: 100%; } -.nav--tabs { - height: var(--h-block); - width: auto; - border: var(--border); - border-radius: var(--radius-small); - overflow: hidden; - display: inline-flex; - width: auto; - margin: 0 auto; - margin-bottom: var(--spacing); -} -.nav--tabs .nav--tabs__btn { - font-size: var(--fs-small); - padding: 0 1ch; -} -.nav--tabs .nav--tabs__btn.is-selected { - background-color: var(--color-txt); - color: var(--color-bg); -} -.nav--tabs .nav--tabs__btn:not(.is-selected):hover { - background-color: var(--grey-800); - cursor: pointer; -} -.nav--tabs .nav--tabs__btn + .nav--tabs__btn { - border-left: var(--border); -} - -.list-socials { - list-style-type: none; -} -.list-socials li { - margin-bottom: calc(var(--spacing) * 0.25); -} -.list-socials li .link--external { - display: flex; - align-items: center; - gap: 1ch; - text-decoration: none; -} -.list-socials li .link--external .icon svg { - width: 25px; - fill: var(--color-txt); -} -.list-socials li .link--external .arrow svg { - position: relative; - top: 3px; - width: 12px; - fill: var(--grey-400); -} - -.player__container { - width: 100%; - height: 100%; -} -.player__container .player__element { - width: 100%; - height: 100%; - display: grid; - place-items: center; - overflow: hidden; -} -.player__container .player__element .player__btn { - position: absolute; - width: 60px; - height: 60px; - cursor: pointer; -} -.player__container .player__element .player__btn svg { - fill: var(--color-txt); - width: 100%; -} -.player__container .player__element img, -.player__container .player__element video { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; -} -.player__container .player__iframe { - display: none; - width: 100%; - height: 100%; -} -.player__container .player__iframe iframe { - width: 100%; - height: 100%; -} - -.gauge__container { - width: 100%; +.keywords { + list-style: none; display: flex; flex-wrap: wrap; - justify-content: space-between; + gap: 1ch; } - -#gauge { - width: 100%; - margin-bottom: calc(var(--spacing) * 0.25); - height: calc(var(--h-block) * 0.5); - border-radius: calc(var(--h-block) * 0.25); - background-color: var(--grey-400); - position: relative; +.keywords li { + height: var(--h-block); + border-radius: calc(var(--h-block) * 0.5); + border: var(--border-light); + font-size: var(--fs-normal); overflow: hidden; } -#gauge::before { - content: ""; - display: block; - height: calc(var(--h-block) * 0.5); - border-radius: calc(var(--h-block) * 0.25); - width: 0%; - background-color: var(--color-txt); - position: absolute; - top: 0; - left: 0; - animation: fillGauge 1s ease forwards; +.keywords li a { + text-decoration: none; + width: 100%; + height: 100%; + display: flex; + align-items: center; + padding: 0 1.5ch; + line-height: 1; + padding-top: 2px; } - -@keyframes fillGauge { - from { - width: 0%; - } - to { - width: var(--pourcent); - } +.keywords li:hover { + border-color: var(--color-txt); } -.gauge--infos .property { - font-size: var(--fs-small); - padding-bottom: 3px; -} -.gauge--infos:last-of-type { - text-align: right; +.keywords li:hover a { + color: currentColor; } .form__newsletter { @@ -308,374 +405,886 @@ body { position: relative; display: flex; align-items: center; - max-width: 36ch; - margin: calc(var(--spacing) * 1) auto; - margin-top: calc(var(--spacing) * 1.5); + position: relative; } .form__newsletter input[type=email] { - height: var(--h-block); + height: calc(var(--h-block) * 1.25); width: 100%; - border-radius: calc(var(--h-block) * 0.5); + border-radius: calc(var(--h-block) * 0.625); outline: none; border: none; - padding: 0 1ch; - font-size: var(--fs-medium); + padding: 0 2ch; + font-family: var(--font); + font-size: var(--fs-normal); z-index: 40; + padding-top: 4px; } .form__newsletter input[type=email]::-moz-placeholder { - font-size: var(--fs-medium); + font-family: var(--font); + font-size: var(--fs-normal); } .form__newsletter input[type=email]::placeholder { - font-size: var(--fs-medium); + font-family: var(--font); + font-size: var(--fs-normal); } .form__newsletter input[type=email]:focus { outline: 3px solid var(--grey-400); } -.form__newsletter button[type=submit].btn--bold { - z-index: 50; +.form__newsletter button[type=submit].btn--newletter { position: absolute; - right: 3px; + right: 2px; + z-index: 100; } -.form__newsletter button[type=submit].btn--bold .btn--bold__container { - z-index: 50; - padding-right: 0; -} -.form__newsletter button[type=submit].btn--bold .btn--bold__container::before { - left: auto; - right: 0; -} -.form__newsletter button[type=submit].btn--bold .btn--bold__container .txt { - font-size: var(--fs-medium); - display: none; - padding-left: 1ch; -} -.form__newsletter button[type=submit].btn--bold .btn--bold__container:hover .txt { - display: block; -} -.form__newsletter button[type=submit].btn--bold::before { - content: ""; - display: block; - width: 120px; - height: 30px; - background: linear-gradient(90deg, transparent 0%, var(--color-txt) 80%); - position: absolute; - left: -110px; - z-index: 40; -} - -.comments-slider { - display: flex; - overflow-x: auto; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - gap: 0; - padding: 0; - scrollbar-width: none; /* Firefox */ -} -@media screen and (min-width: 720px) { - .comments-slider { - padding-left: 20%; - flex: 0 0 40%; - } -} - -.comments-slider::-webkit-scrollbar { - display: none; -} - -.comment { - scroll-snap-align: start; -} -@media screen and (max-width: 720px) { - .comment { - flex: 0 0 calc(100vw - var(--padding-body) * 2); /* mobile */ - padding: 0px 2ch; - } -} -@media screen and (min-width: 720px) { - .comment { - flex: 0 0 40%; - } -} - -.comment__text { - font-size: var(--fs-medium); - font-weight: var(--fw-medium); - line-height: 1; - max-width: 40ch; - text-align: center; -} - -.comment__name { - margin-top: calc(var(--spacing) * 0.5); - text-align: center; -} - -/* Dots */ -.comments-slider__dots { - display: flex; - margin-top: 0.5rem; - gap: 0.4rem; - margin-top: calc(var(--spacing) * 1.5); -} -@media screen and (min-width: 720px) { - .comments-slider__dots { - justify-content: center; - } -} -@media screen and (max-width: 720px) { - .comments-slider__dots { - justify-content: flex-end; - } -} - -.comments-slider__dots button { - width: 10px; - height: 10px; - border-radius: 50%; - border: none; - background: var(--grey-400); - cursor: pointer; - transition: background 0.3s; -} - -.comments-slider__dots button.active { - background: var(--color-txt); -} - -#site-header { - position: fixed; - left: 0px; - top: 0px; - z-index: 100000; - width: 100vw; - height: var(--header-h); - padding: 0 var(--padding-body); - background-color: transparent; - border-bottom: var(--border); - border-color: transparent; +.form__newsletter button[type=submit].btn--newletter { + --size: calc(var(--h-block)*1.25 - 4px); + font-family: var(--font); + font-size: var(--fs-button-bold); + height: var(--size); display: flex; align-items: center; - justify-content: space-between; + gap: 0.75ch; + color: var(--color-accent); + font-weight: var(--fw-medium); + text-decoration: none; + cursor: pointer; } -#site-header .burger svg { - fill: var(--color-txt); - width: 40px; +.form__newsletter button[type=submit].btn--newletter .icon, .form__newsletter button[type=submit].btn--newletter .txt { + z-index: 10; } -#site-header .site-title { - display: flex; - width: 120px; - overflow: hidden; -} -#site-header .site-title svg { - fill: var(--color-txt); -} -#site-header nav { - height: 0; - overflow: hidden; - opacity: 0; -} -#site-header nav ul { - height: 100%; +.form__newsletter button[type=submit].btn--newletter .icon { + width: var(--size); + height: var(--size); display: flex; align-items: center; justify-content: center; - gap: 2ch; + color: var(--color-bg); + text-align: center; +} +.form__newsletter button[type=submit].btn--newletter .icon svg { + fill: var(--color-bg); + width: 80%; +} +.form__newsletter button[type=submit].btn--newletter .txt { + position: relative; + top: 2px; + font-size: var(--fs-normal); + display: none; + padding-left: 1ch; +} +.form__newsletter button[type=submit].btn--newletter::after { + content: ""; + display: block; + background-color: var(--color-accent); + border-radius: calc(var(--size) / 2); + width: var(--size); + height: var(--size); + position: absolute; + right: 0; + z-index: 0; + transition: width 0.2s; +} +.form__newsletter button[type=submit].btn--newletter:hover .txt { + color: var(--color-bg); + display: block; +} +.form__newsletter button[type=submit].btn--newletter:hover::after { + width: 100%; +} + +.list-socials { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 400px; +} +.list-socials a { + display: flex; + align-items: center; + text-decoration: none; +} +.list-socials .icon { + width: 24px; + height: 24px; + position: relative; + top: -2px; +} +.list-socials svg { + display: flex; + align-items: center; + width: 24px; + height: 24px; +} +.list-socials .text { + display: none; +} + +@media screen and (min-width: 768px) { + .footer__socials .list-socials { + display: block; + } + .footer__socials .list-socials li { + margin-bottom: calc(var(--spacing) * 0.5); + -moz-column-break-inside: avoid; + break-inside: avoid; + } + .footer__socials .list-socials a { + gap: 1ch; + height: calc(var(--spacing) * 1); + } + .footer__socials .list-socials a::after { + content: "↗"; + color: var(--grey-300); + } + .footer__socials .list-socials .text { + display: block; + line-height: 1; + } +} +.modal--share { + border: var(--border); + border-radius: var(--radius-btn); + 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 .socials { + display: block; list-style: none; } -#site-header .header-left, #site-header .header-right { - width: 100px; +.modal--share .socials li { + font-size: var(--fs-normal); + padding-bottom: 6px; + border-bottom: var(--border-light); + padding-top: 6px; } -#site-header .header-center { +.modal--share .socials li a { display: flex; - flex-direction: column; - align-items: center; -} -#site-header #go-to-panier { - display: flex; - justify-content: flex-end; align-items: center; gap: 1ch; text-decoration: none; } -#site-header #go-to-panier #go-to-panier__nbr { - min-width: 2.6ch; - height: 2.6ch; - border-radius: 1.3ch; - border: var(--border); +.modal--share .socials li .icon { + width: 20px; + height: 20px; +} +.modal--share .socials li .icon svg { + width: 100%; + height: 100%; +} +.modal--share .socials li .text { + 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); +} +.modal--share .copy-link .copy-link__field { + flex-grow: 1; + display: grid; + grid-template-columns: var(--h-block) 1fr; +} +.modal--share .copy-link .icon { + display: flex; + width: var(--h-block); + height: 100%; align-items: center; justify-content: center; - padding: 0 6px; + position: relative; + grid-row: 1; + grid-column: 1; } -#site-header.is-shrinked { - background-color: var(--color-bg); - height: var(--header-h-shrinked); - transition: ease-in 0.3s; - border-color: var(--color-txt); +.modal--share .copy-link .icon svg { + width: 12px; } -#site-header.is-shrinked nav { +.modal--share .copy-link input { + font-size: var(--fs-small); + font-family: var(--font); + background: none; + border: none; + color: var(--color-txt); + padding-top: 2px; + grid-column: 1/end; + grid-row: 1; + padding-left: var(--h-block); + padding-right: 0.5ch; + border: var(--border-light); + border-radius: var(--radius-btn); height: var(--h-block); - opacity: 1; } -#site-header.is-shrinked .site-title { - opacity: 0; - height: 0; +.modal--share .copy-link input:focus { + border-color: var(--color-txt); + outline: none; } - -.section__page-don:not(#section__player), .subsection__page-don { - border-bottom: var(--border); - padding-bottom: calc(var(--spacing) * 2); -} - -@media screen and (max-width: 720px) { - #section__hero, #section__comments { - padding-bottom: calc(var(--spacing) * 0.5) !important; - } -} -#section__player { - position: relative; - left: calc(var(--padding-body) * -1); -} -@media screen and (max-width: 720px) { - #section__player { - width: 100vw; - } - #section__player .player__container, #section__player .player__element, #section__player .player__iframe, #section__player iframe { - width: 100%; - height: 75vh; - overflow: hidden; - } -} -@media screen and (min-width: 720px) { - #section__player { - position: relative; - width: 100vw; - height: 60vh; - } - #section__player .player__container, #section__player .player__element, #section__player .player__iframe, #section__player iframe { - width: 100%; - height: 60vh; - overflow: hidden; - } -} - -#section__hero .hero-heading__container { - text-align: center; - margin-top: calc(var(--spacing) * 1.5); - margin-bottom: calc(var(--spacing) * 1.5); -} -#section__hero .btn--bold { - display: block; - margin: var(--spacing) auto; - margin-bottom: calc(var(--spacing) * 1.5); -} -#section__hero .jauge__container { - margin-top: calc(var(--spacing) * 1.5); -} - -#section__store .store__product { - margin-top: calc(var(--spacing) * 1.5); - margin-bottom: calc(var(--spacing) * 0.5); - position: relative; -} -#section__store .store__product figure { - aspect-ratio: 4/3; - background-color: var(--color-bg); - background-color: var(--data-bg); - margin-bottom: calc(var(--spacing) * 0.5); -} -#section__store .store__product img { - width: 100%; - height: 100%; - -o-object-fit: contain; - object-fit: contain; -} -#section__store .store__product a { - text-decoration: none; -} -#section__store .store__product .link-block { - display: block; - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - cursor: pointer; -} - -#section__donation { - display: flex; - flex-direction: column; -} -#section__donation .btn--donation__container { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: var(--padding-body); - margin-bottom: calc(var(--spacing) * 0.75); -} -#section__donation .btn--donation__container .btn--donation__grow-2 { - grid-column: span 2; -} -#section__donation .btn--donation { +.modal--share .copy-link button { background-color: var(--color-txt); color: var(--color-bg); - border-radius: var(--radius-small); - height: calc(var(--h-block) * 2); -} -#section__donation .btn--donation .bold { - font-size: var(--fs-medium); - font-weight: var(--fw-medium); - margin-bottom: 0.25em; -} -#section__donation .btn--donation .small { + border-radius: var(--radius-btn); + padding: 0 1ch; font-size: var(--fs-small); + padding-top: 2px; } -#section__donation .btn--donation:hover { - background-color: var(--color-accent-50); - cursor: pointer; +.modal--share .copy-link button:hover { + background-color: var(--color-accent); } -#section__questions details { - border-bottom: var(--border); +[data-template=subscription-newsletter] .p__baseline-big, +[data-template=thanks] .p__baseline-big, +[data-template=support] .p__baseline-big, +[data-template=store] .p__baseline-big { + font-family: var(--title); + font-size: var(--fs-big); + font-weight: var(--fw-bold); + line-height: 1.1; + text-align: center; + margin: calc(var(--spacing) * 1) 0; } -#section__questions details summary { - height: calc(var(--h-block) * 1); +[data-template=subscription-newsletter] .p__baseline-big strong, +[data-template=thanks] .p__baseline-big strong, +[data-template=support] .p__baseline-big strong, +[data-template=store] .p__baseline-big strong { + font-weight: var(--fw-bolf); + color: var(--color-accent); +} +[data-template=subscription-newsletter] .p__baseline-big .link-don, +[data-template=thanks] .p__baseline-big .link-don, +[data-template=support] .p__baseline-big .link-don, +[data-template=store] .p__baseline-big .link-don { + display: block; + color: var(--color-accent); + text-decoration: none; +} +[data-template=subscription-newsletter] .p__baseline-big .link-don:hover, +[data-template=thanks] .p__baseline-big .link-don:hover, +[data-template=support] .p__baseline-big .link-don:hover, +[data-template=store] .p__baseline-big .link-don:hover { + -webkit-text-decoration: underline 2px; + text-decoration: underline 2px; + text-underline-offset: 4px; +} +[data-template=subscription-newsletter] .p__baseline, +[data-template=thanks] .p__baseline, +[data-template=support] .p__baseline, +[data-template=store] .p__baseline { + font-size: var(--fs-medium); + font-weight: var(--fw-medium); + line-height: 1.1; + text-align: center; + margin: calc(var(--spacing) * 1) 0; +} +@media screen and (max-width: 768px) { + [data-template=subscription-newsletter] .p__baseline, + [data-template=thanks] .p__baseline, + [data-template=support] .p__baseline, + [data-template=store] .p__baseline { + text-align: center; + margin: var(--spacing) 0; + } +} +[data-template=subscription-newsletter] .p__details, +[data-template=thanks] .p__details, +[data-template=support] .p__details, +[data-template=store] .p__details { + font-size: var(--fs-small); + margin-bottom: 0.5em; + color: var(--grey-400); +} +[data-template=subscription-newsletter] .section__heading, +[data-template=thanks] .section__heading, +[data-template=support] .section__heading, +[data-template=store] .section__heading { + font-size: var(--fs-normal); + font-weight: var(--fw-medium); + line-height: 1; + text-align: center; + margin-top: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--spacing) * 1); +} +[data-template=subscription-newsletter] ul, [data-template=subscription-newsletter] ol, +[data-template=thanks] ul, +[data-template=thanks] ol, +[data-template=support] ul, +[data-template=support] ol, +[data-template=store] ul, +[data-template=store] ol { + margin-left: 3ch; + margin-bottom: 0.5em; +} + +@keyframes add-border { + from { + border-bottom-color: transparent; + } + to { + border-bottom: var(--grey-800); + } +} +#site-header { + z-index: 900; + --gap: 3ch; + width: 100vw; + height: var(--header-h); + background-color: var(--color-bg); + padding: 0 var(--padding-body); +} +#site-header .site-header__inner { + width: 100%; + height: 100%; display: flex; align-items: center; justify-content: space-between; + gap: var(--gap); +} +#site-header a { + text-decoration: none; +} +#site-header a:hover { + color: var(--grey-200); +} +#site-header #site-title { + flex-grow: 2; +} +#site-header #site-title svg { + width: 100px; +} +@media screen and (max-width: 768px) { + #site-header #site-title svg { + width: 80px; + } +} +#site-header .title-page { + display: none; + flex-grow: 2; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; + font-size: var(--fs-small); + line-height: 2; +} +#site-header ul { + list-style-type: none; + display: flex; + align-items: center; + gap: var(--gap); + text-transform: uppercase; +} +#site-header #theme-toggle { + width: var(--h-block); + height: var(--h-block); + display: flex; + align-items: center; + justify-content: center; +} +#site-header #theme-toggle svg { + width: 18px; + position: relative; + top: -2px; +} +#site-header #lang-toggle { + display: flex; + gap: 1ch; +} +#site-header #lang-toggle button:disabled { + color: var(--color-txt-light); +} +#site-header #menu-toggle { cursor: pointer; } -#section__questions details summary::after { - content: "▶"; - font-size: 0.8em; - color: var(--grey-400); +#site-header #menu-toggle svg { + width: 30px; } -#section__questions details p { - padding-top: calc(var(--spacing) * 0.25); - margin-bottom: var(--spacing); - border-top: var(--border); +#site-header #menu-toggle .close { + display: none; } -#section__questions details::details-content { - max-height: 0; - transition: max-height ease-in 0.5s; - overflow: hidden; -} -#section__questions details[open]::details-content { - max-height: 1000px; - filter: none; -} -#section__questions details[open] summary::after { - transform: rotate(90deg); - transform-origin: center; -} -#section__questions .btn--bold { - display: block; - margin: calc(var(--spacing) * 1.5) auto; - margin-bottom: 0; +#site-header button:hover svg { + fill: var(--grey-200) !important; } -#section__socials .list-socials { - -moz-columns: 2; - columns: 2; +#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; + } +} +#site-menu { + position: fixed; + width: var(--menu-w); + height: calc(100dvh - var(--header-h)); + height: calc(100vh - var(--header-h)); + top: var(--header-h); + right: calc(var(--menu-w) * -1); + transition: right 0.3s ease-in; + background-color: var(--color-bg); + border-left: var(--border-light); + padding: var(--padding-body); + z-index: 1000; + display: flex; + flex-direction: column; +} +@media screen and (max-width: 768px) { + #site-menu { + width: 100vw; + } +} +#site-menu 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; +} +#site-menu nav ul { + list-style-type: none; + text-transform: uppercase; +} +#site-menu nav ul li { + font-size: var(--fs-normal); +} +#site-menu nav ul li a { + display: block; + text-decoration: none; + padding: 0.5em 0; +} +#site-menu nav ul li a:hover { + text-decoration: underline; +} +#site-menu nav ul .highlight { + text-transform: uppercase; +} + +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; +} +body.menu-open #menu-toggle .open { + display: none; +} +body.menu-open #menu-toggle .close { + display: block !important; +} + +#site-footer { + background-color: var(--dark); + padding: calc(var(--padding-body) * 2) var(--padding-body); +} +#site-footer .logo { + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing) * 1); +} +#site-footer .logo svg { + width: 100px; +} +#site-footer p { + margin: calc(var(--spacing) * 0.5) 0; +} +#site-footer p a { + text-decoration: none; +} +#site-footer p a:hover { + text-decoration: underline; + color: currentColor; +} +#site-footer .p__small { + font-size: var(--fs-xsmall); + color: var(--grey-600); +} +#site-footer .footer__mentions p { + font-size: var(--fs-small); + color: var(--color-txt); +} +@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); + border-top: var(--border-light); + } + #site-footer .footer__socials .list-socials { + margin-top: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--spacing) * 0.75); + } + #site-footer .footer__mentions { + border-top: var(--border-light); + padding-top: calc(var(--spacing) * 0.25); + } + #site-footer .footer__mentions p { + font-size: var(--fs-small); + text-align: center; + } +} +@media screen and (min-width: 768px) { + #site-footer .site-footer__container { + display: grid; + grid-template-columns: 1fr 1fr; + -moz-column-gap: calc(var(--spacing) * 2); + column-gap: calc(var(--spacing) * 2); + max-width: 1200px; + margin: 0 auto; + } + #site-footer .footer__socials .container { + max-width: 400px; + -moz-columns: 2; + columns: 2; + margin-top: calc(var(--spacing) * 1); + } + #site-footer .footer__mentions { + grid-column: span 2; + } + #site-footer .footer__mentions p { + margin-top: calc(var(--spacing) * 1); + } +} + +body { + min-height: 100dvh; + min-height: 100vh; + display: flex; + flex-direction: column; +} +body main { + flex-grow: 1; + padding: 0 var(--padding-body); +} + +.page-enquete { + position: relative; +} +.page-enquete header .page-type { + text-transform: uppercase; + color: var(--color-txt-light); + margin-bottom: calc(var(--spacing) * 0.5); +} +.page-enquete header h2 { + font-size: var(--fs-xbig); + line-height: var(--leading-tight); +} +.page-enquete .section__article a:hover { + color: var(--grey-200); +} +.page-enquete .section__article .section__title { + font-weight: normal; + text-transform: uppercase; + margin-bottom: calc(var(--spacing) * 0.5); +} +.page-enquete #hero { + width: 100vw; + position: relative; + left: calc(var(--padding-body) * -1); +} +.page-enquete #hero figcaption { + color: var(--color-txt-light); + font-size: var(--fs-small); + padding-top: calc(var(--spacing) * 0.5); +} +.page-enquete #hero.hero-video figure { + width: 100%; +} +.page-enquete #hero.hero-video figure img { + width: 100%; + aspect-ratio: 16/9; + -o-object-fit: cover; + object-fit: cover; +} +.page-enquete #nav--page ul { + list-style: none; +} +.page-enquete #nav--page ul li { + text-align: center; + color: var(--color-txt-light); +} +.page-enquete #nav--page ul li a { + display: block; + padding: 0.3em 0; + text-decoration: none; +} +.page-enquete #section__short { + font-size: var(--fs-medium); +} +.page-enquete #section__dl { + margin-top: calc(var(--spacing) * 1.5); + border-bottom: var(--border-light); +} +.page-enquete #section__dl .dl__group { + display: grid; + grid-template-columns: 40% 1fr; + border-top: var(--border-light); + padding: calc(var(--spacing) * 0.5) 0; +} +.page-enquete #section__dl dt { + color: var(--color-txt-light); + padding-right: 1ch; +} +.page-enquete #section__dl ul:not(.keywords) { + list-style: none; +} +.page-enquete #section__dl ul:not(.keywords) li { + padding-bottom: 0.2em; +} +.page-enquete #section__synthese p + p { + margin-top: 0.5em; +} +.page-enquete #section__synthese h4 { + margin-top: 2em; + margin-bottom: 1em; + font-size: var(--fs-normal); + font-weight: normal; + -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; +} + +#share-banner__desktop ~ .modal--share { + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in; +} + +#share-banner__desktop:checked ~ .modal--share { + opacity: 1; + pointer-events: auto; +} + +@media screen and (max-width: 768px) { + .page-enquete header { + padding-top: calc(var(--spacing) * 1.5); + } + .page-enquete header .page-type { + font-size: var(--fs-small); + } + .page-enquete .section__article { + margin: calc(var(--spacing) * 1.5) 0; + } + .page-enquete #section__impacts, + .page-enquete #section__en-lien { + margin-top: 0px; + } + .page-enquete #hero { + margin: calc(var(--spacing) * 1.5) 0; + } + .page-enquete #hero figcaption { + margin: 0 var(--padding-body); + } + .page-enquete .modal--share { + position: absolute; + width: calc(100% - var(--padding-body) * 2); + bottom: calc(var(--spacing) * 2); + } + .page-enquete #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; + } + .page-enquete #banner--page #nav--page { + display: none; + } + .page-enquete #banner--page .btn--group { + display: flex; + gap: calc(var(--spacing) * 0.25); + position: relative; + } + .page-enquete #banner--page .btn--group > button, + .page-enquete #banner--page .btn--group > label { + width: 50%; + cursor: pointer; + } + .page-enquete #banner--page { + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in; + } + .page-enquete #banner--page.is-visible { + opacity: 1; + pointer-events: auto; + } +} +@media screen and (max-width: 560px) { + .page-enquete #section__dl .dl__group { + grid-template-columns: 32% 1fr; + -moz-column-gap: 1ch; + column-gap: 1ch; + } +} +@media screen and (min-width: 768px) { + .page-enquete #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; + } + .page-enquete #banner--page .btn--group { + display: flex; + flex-direction: column; + align-items: center; + gap: calc(var(--spacing) * 0.25); + } + .page-enquete #banner--page .btn--group > button, + .page-enquete #banner--page .btn--group > label { + width: 100%; + max-width: 160px; + cursor: pointer; + } + .page-enquete #hero { + margin: calc(var(--spacing) * 3) 0; + } + .page-enquete .section__article { + margin-left: var(--banner-medium); + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); + } + .page-enquete #section__short { + margin-top: var(--padding-body); + } + .page-enquete header { + max-width: var(--max-w-content); + margin: calc(var(--spacing) * 2) auto; + } + .page-enquete .section__article .section__title { + font-size: var(--fs-medium); + margin-bottom: var(--spacing); + } + .page-enquete #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 screen and (min-width: 1080px) { + .page-enquete #banner--page { + width: calc((100% - var(--max-w-content)) / 2); + } + .page-enquete #hero { + margin: calc(var(--spacing) * 3) 0; + } + .page-enquete #hero figcaption { + max-width: var(--max-w-content); + margin: 0 auto; + } + .page-enquete header { + max-width: var(--max-w-content); + margin: calc(var(--spacing) * 2) auto; + } + .page-enquete .section__article { + max-width: var(--max-w-content); + margin: calc(var(--spacing) * 3) auto; + } }/*# 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 5e06ab6..72657e9 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","base/_responsive.scss","components/_text.scss","components/_buttons.scss","components/_nav-tabs.scss","components/_list-socials.scss","components/_player.scss","components/_gauge.scss","components/_form-newsletter.scss","components/_comments-slider.scss","partials/_site-header.scss","pages/dons/_sections.scss","pages/dons/_section-player.scss","pages/dons/_section-hero.scss","pages/dons/_section-store.scss","pages/dons/_section-donation.scss","pages/dons/_section-questions.scss","pages/dons/_section-socials.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/_keywords.scss","components/_form-newsletter.scss","components/_list-socials.scss","components/_modal-share.scss","components/_text.scss","partials/_site-menu.scss","partials/_site-footer.scss","partials/_main-layout.scss","template/_page-enquete.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 f7744ef..d811aef 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,29 +1,26 @@ @charset "UTF-8"; -@import "base/var"; -@import "base/body"; -@import "base/responsive"; +@import 'base/responsive'; +@import 'base/var'; +@import 'base/body'; -@import "components/text"; -@import "components/heading"; -@import "components/buttons"; -@import "components/nav-tabs"; -@import "components/list-socials"; +@import 'partials/site-header'; -@import "components/player"; -@import "components/gauge"; -@import "components/form-newsletter"; -@import "components/comments-slider"; +// @import 'components/nav-tabs'; +// @import 'components/btn--default'; +@import 'components/buttons'; +@import 'components/keywords'; +@import 'components/form-newsletter'; +@import 'components/list-socials'; +@import 'components/modal-share'; +@import 'components/text'; -@import "partials/site-header"; +@import 'partials/site-header'; +@import 'partials/site-menu'; +@import 'partials/site-footer'; +@import 'partials/main-layout'; -@import "pages/dons/sections"; -@import "pages/dons/section-player"; -@import "pages/dons/section-hero"; -@import "pages/dons/section-store"; -@import "pages/dons/section-donation"; -@import "pages/dons/section-questions"; -@import "pages/dons/section-socials"; +@import 'template/page-enquete'; diff --git a/assets/css/template/_page-enquete.scss b/assets/css/template/_page-enquete.scss new file mode 100644 index 0000000..70a4874 --- /dev/null +++ b/assets/css/template/_page-enquete.scss @@ -0,0 +1,324 @@ +.page-enquete { + position: relative; + + header { + .page-type { + text-transform: uppercase; + color: var(--color-txt-light); + margin-bottom: calc(var(--spacing) * 0.5); + } + h2 { + font-size: var(--fs-xbig); + line-height: var(--leading-tight); + } + } + + .section__article { + a:hover { + color: var(--grey-200); + } + .section__title { + font-weight: normal; + text-transform: uppercase; + margin-bottom: calc(var(--spacing) * 0.5); + } + } + + #hero { + width: 100vw; + position: relative; + left: calc(var(--padding-body) * -1); + + figcaption { + color: var(--color-txt-light); + font-size: var(--fs-small); + padding-top: calc(var(--spacing) * 0.5); + } + + &.hero-video { + figure { + width: 100%; + + img { + width: 100%; + aspect-ratio: 16/9; + object-fit: cover; + } + } + } + } + + #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; + } + } + } + } + + #section__short { + font-size: var(--fs-medium); + } + + #section__dl { + margin-top: calc(var(--spacing) * 1.5); + border-bottom: var(--border-light); + + .dl__group { + display: grid; + grid-template-columns: 40% 1fr; + 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; + } + } + } + + #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; + } + } +} + +// SHARE ACTIONS -------------------------------------------------- +// ---------------------------------------------------------------- + +#share-banner__desktop { + display: none; +} +#share-banner__desktop ~ .modal--share { + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in; +} + +#share-banner__desktop:checked ~ .modal--share { + opacity: 1; + pointer-events: auto; +} + +// .page-enquete{ +// #banner--page.is-sticky { +// position: fixed; +// bottom: 0; +// left: 0; +// right: 0; +// z-index: 100; +// } +// } + +// SMALL ---------------------------------------------------------- +// ---------------------------------------------------------------- + +@media #{$small} { + .page-enquete { + 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 0.2s ease-in; + } + + #banner--page.is-visible { + opacity: 1; + pointer-events: auto; + } + } +} + +@media #{$x-small} { + .page-enquete { + #section__dl .dl__group { + grid-template-columns: 32% 1fr; + column-gap: 1ch; + } + } +} + +// DESKTOP ---------------------------------------------------------- +// ---------------------------------------------------------------- + +@media #{$small-up} { + .page-enquete { + #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} { + .page-enquete { + #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; + } + } +} diff --git a/assets/icons/close.svg b/assets/icons/close.svg new file mode 100644 index 0000000..d02ecbb --- /dev/null +++ b/assets/icons/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/menu.svg b/assets/icons/menu.svg new file mode 100644 index 0000000..cf2f2b5 --- /dev/null +++ b/assets/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/index-logo.svg b/assets/images/index-logo.svg new file mode 100644 index 0000000..3d9e694 --- /dev/null +++ b/assets/images/index-logo.svg @@ -0,0 +1,14 @@ + + Index.ngo + + + + + + + + + + + + diff --git a/site/controllers/support.php b/site/controllers/support.php deleted file mode 100644 index d1b4138..0000000 --- a/site/controllers/support.php +++ /dev/null @@ -1,55 +0,0 @@ -option('donorbox'); - $apiKey = $config['api_key']; - $campaignSlug = $config['campaign_slug']; - - // Valeurs par défaut - $data = [ - 'amount_raised' => 0, - 'donor_count' => 0, - 'goal_amount' => 20000, // Objectif par défaut - 'percentage' => 0, - 'campaign_url' => $config['campaign_url'] - ]; - - // Si la clé API est configurée, récupérer les données en temps réel - if (!empty($apiKey)) { - try { - $apiUrl = $config['api_base_url'] . '/campaigns/' . $campaignSlug; - - $ch = curl_init(); - curl_setopt($ch, CURLOPT_URL, $apiUrl); - curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); - curl_setopt($ch, CURLOPT_HTTPHEADER, [ - 'Authorization: Bearer ' . $apiKey, - 'Content-Type: application/json' - ]); - - $response = curl_exec($ch); - $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); - curl_close($ch); - - if ($httpCode === 200 && $response) { - $campaignData = json_decode($response, true); - - if ($campaignData) { - $data['amount_raised'] = $campaignData['amount_raised'] ?? 0; - $data['donor_count'] = $campaignData['donor_count'] ?? 0; - $data['goal_amount'] = $campaignData['goal_amount'] ?? 20000; - - // Calculer le pourcentage - if ($data['goal_amount'] > 0) { - $data['percentage'] = round(($data['amount_raised'] / $data['goal_amount']) * 100, 0); - } - } - } - } catch (Exception $e) { - // En cas d'erreur, on garde les valeurs par défaut - // Optionnel : logger l'erreur - } - } - - return $data; -}; diff --git a/site/snippets/footer.php b/site/snippets/footer.php index 0e1fcd2..bf0d989 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -1,3 +1,63 @@ - + + \ No newline at end of file diff --git a/site/snippets/header.php b/site/snippets/header.php index 97ff0e0..465fdce 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -13,17 +13,48 @@ - - + - + diff --git a/site/templates/home.php b/site/templates/home.php index 0b9d300..112717c 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -1,13 +1,10 @@ - - - Donner 15€ mensuellement - - - Donner 10€ ponctuellement - +
+

+ L’objet central de notre action est de concourir à la manifestation de la vérité dans des affaires où celle-ci est entravée par des intérêts de pouvoir. + Nos enquêtes portent principalement principalement sur les cas de violences policières, en France comme à l'international, ainsi que sur les violations des droits humains au sens large. Nous intervenons également dans les situations où nos techniques d'investigation numérique peuvent permettre d'établir les faits autour d'une controverse d'intérêt public, qu'elle soit historique ou contemporaine. + Notre champ d’action est avant tout public. Nos enquêtes et rapports d’expertise sont souvent publiés en partenariat avec d'autres médias d'information et sont régulièrement utilisés dans les procédures judiciaires sur les affaires concernées, contribuant ainsi à l'établissement des faits. + Nous œuvrons également à la diffusion des techniques et des méthodes de l’investigation en sources ouvertes (OSINT) au sein de la société civile. Dans le cadre de notre programme de formation, nous animons des ateliers avec des collectifs citoyens, des ONG, des universités et le grand public. Enfin, nous intervenons régulièrement dans la sphère publique pour présenter nos travaux et notre approche. +

+
\ No newline at end of file