Compare commits
No commits in common. "778265feabf21c1b5c6ed4009ade7d8a08041bd2" and "73668b049f7769a39ecf0f01cfd97b6044bf99e9" have entirely different histories.
778265feab
...
73668b049f
59 changed files with 3 additions and 2355 deletions
|
|
@ -1,11 +0,0 @@
|
||||||
{
|
|
||||||
"permissions": {
|
|
||||||
"allow": [
|
|
||||||
"Bash(git add:*)",
|
|
||||||
"Bash(git commit:*)",
|
|
||||||
"Bash(cat:*)"
|
|
||||||
],
|
|
||||||
"deny": [],
|
|
||||||
"ask": []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-font-smoothing: antialiased;
|
|
||||||
-o-font-smoothing: antialiased
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
button{
|
|
||||||
background: none;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-txt);
|
|
||||||
}
|
|
||||||
iframe{
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
font-family: var(--font);
|
|
||||||
line-height: var(--leading-normal);
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
|
|
||||||
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));
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
$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)";
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$medium}{
|
|
||||||
:root{
|
|
||||||
--padding: 16px;
|
|
||||||
--padding-cards: 0.75rem;
|
|
||||||
--padding-cards-small: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
:root{
|
|
||||||
--font: Arial, sans-serif;
|
|
||||||
|
|
||||||
// --fs-small: 9px;
|
|
||||||
// --font-size: 12px;
|
|
||||||
// --fs-medium: 18px;
|
|
||||||
// --fs-big: 24px;
|
|
||||||
|
|
||||||
--fs-x-small: 9px;
|
|
||||||
--fs-small: 13px;
|
|
||||||
--fs-normal: 18px;
|
|
||||||
--fs-medium: 22px;
|
|
||||||
--fs-big: 28px;
|
|
||||||
--fs-x-big: 36px;
|
|
||||||
|
|
||||||
--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;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
.btn--bold .btn--bold__container{
|
|
||||||
--size: 28px;
|
|
||||||
font-size: var(--fs-big);
|
|
||||||
height: var(--size);
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75ch;
|
|
||||||
padding-right: 1ch;
|
|
||||||
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;
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-left: 2px;
|
|
||||||
|
|
||||||
svg{
|
|
||||||
width: 70%;
|
|
||||||
fill: var(--color-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::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
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover{
|
|
||||||
color: var(--color-bg);
|
|
||||||
&::before{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
.form__newsletter{
|
|
||||||
--size: 24px;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
max-width: 36ch;
|
|
||||||
|
|
||||||
margin: calc(var(--spacing)*1) auto;
|
|
||||||
margin-top: calc(var(--spacing)*1.5);
|
|
||||||
|
|
||||||
|
|
||||||
input[type="email"]{
|
|
||||||
|
|
||||||
height: var(--h-block);
|
|
||||||
width: 100%;
|
|
||||||
border-radius: calc(var(--h-block)*0.5);
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0 1ch;
|
|
||||||
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
z-index: 40;
|
|
||||||
&::placeholder{
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus{
|
|
||||||
outline: 3px solid var(--grey-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
button[type="submit"].btn--bold{
|
|
||||||
|
|
||||||
z-index: 50;
|
|
||||||
position: absolute;
|
|
||||||
right: 3px;
|
|
||||||
|
|
||||||
.btn--bold__container{
|
|
||||||
z-index: 50;
|
|
||||||
padding-right: 0;
|
|
||||||
|
|
||||||
&::before{
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt{
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
display: none;
|
|
||||||
padding-left: 1ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover{
|
|
||||||
.txt{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// shadow on input
|
|
||||||
&::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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
.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__btn{
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
padding: 0 1ch;
|
|
||||||
|
|
||||||
&.is-selected{
|
|
||||||
background-color: var(--color-txt);
|
|
||||||
color: var(--color-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.is-selected):hover{
|
|
||||||
background-color: var(--grey-800);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav--tabs__btn + .nav--tabs__btn{
|
|
||||||
border-left: var(--border);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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%;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
#page-don{
|
|
||||||
|
|
||||||
// text -----------------------------------------
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p__baseline{
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
font-weight: var(--fw-medium);
|
|
||||||
line-height: var(--leading-tight);
|
|
||||||
text-align: center;
|
|
||||||
margin: var(--spacing) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p__details{
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
#section__socials{
|
|
||||||
|
|
||||||
.list-socials{
|
|
||||||
columns: 2;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
#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;
|
|
||||||
|
|
||||||
// display: grid;
|
|
||||||
// grid-template-columns: 1fr;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.burger svg{
|
|
||||||
fill: var(--color-txt);
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.site-title{
|
|
||||||
display: flex;
|
|
||||||
width: 120px;
|
|
||||||
overflow: hidden;
|
|
||||||
svg{
|
|
||||||
fill: var(--color-txt);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
nav{
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
nav ul{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 2ch;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.header-left, .header-right{
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,681 +0,0 @@
|
||||||
@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;
|
|
||||||
--leading-normal: 1.2;
|
|
||||||
--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;
|
|
||||||
--padding-body: 16px;
|
|
||||||
--radius-small: 4px;
|
|
||||||
--spacing: 40px;
|
|
||||||
--h-block: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-font-smoothing: antialiased;
|
|
||||||
-o-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: none;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-txt);
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: var(--font);
|
|
||||||
line-height: var(--leading-normal);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
#page-don .p__details {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
color: var(--grey-400);
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--bold .btn--bold__container {
|
|
||||||
--size: 28px;
|
|
||||||
font-size: var(--fs-big);
|
|
||||||
height: var(--size);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75ch;
|
|
||||||
padding-right: 1ch;
|
|
||||||
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 {
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.btn--bold .btn--bold__container .icon {
|
|
||||||
width: var(--size);
|
|
||||||
height: var(--size);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-left: 2px;
|
|
||||||
}
|
|
||||||
.btn--bold .btn--bold__container .icon svg {
|
|
||||||
width: 70%;
|
|
||||||
fill: var(--color-bg);
|
|
||||||
}
|
|
||||||
.btn--bold .btn--bold__container::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 0.2s;
|
|
||||||
}
|
|
||||||
.btn--bold .btn--bold__container:hover {
|
|
||||||
color: var(--color-bg);
|
|
||||||
}
|
|
||||||
.btn--bold .btn--bold__container:hover::before {
|
|
||||||
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%;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fillGauge {
|
|
||||||
from {
|
|
||||||
width: 0%;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
width: var(--pourcent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.gauge--infos .property {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
padding-bottom: 3px;
|
|
||||||
}
|
|
||||||
.gauge--infos:last-of-type {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form__newsletter {
|
|
||||||
--size: 24px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 36ch;
|
|
||||||
margin: calc(var(--spacing) * 1) auto;
|
|
||||||
margin-top: calc(var(--spacing) * 1.5);
|
|
||||||
}
|
|
||||||
.form__newsletter input[type=email] {
|
|
||||||
height: var(--h-block);
|
|
||||||
width: 100%;
|
|
||||||
border-radius: calc(var(--h-block) * 0.5);
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0 1ch;
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
z-index: 40;
|
|
||||||
}
|
|
||||||
.form__newsletter input[type=email]::-moz-placeholder {
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
}
|
|
||||||
.form__newsletter input[type=email]::placeholder {
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
}
|
|
||||||
.form__newsletter input[type=email]:focus {
|
|
||||||
outline: 3px solid var(--grey-400);
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit].btn--bold {
|
|
||||||
z-index: 50;
|
|
||||||
position: absolute;
|
|
||||||
right: 3px;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
#site-header .burger svg {
|
|
||||||
fill: var(--color-txt);
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
#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%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 2ch;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
#site-header .header-left, #site-header .header-right {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
#site-header .header-center {
|
|
||||||
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);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
#site-header.is-shrinked {
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
height: var(--header-h-shrinked);
|
|
||||||
transition: ease-in 0.3s;
|
|
||||||
border-color: var(--color-txt);
|
|
||||||
}
|
|
||||||
#site-header.is-shrinked nav {
|
|
||||||
height: var(--h-block);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
#site-header.is-shrinked .site-title {
|
|
||||||
opacity: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
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 {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
}
|
|
||||||
#section__donation .btn--donation:hover {
|
|
||||||
background-color: var(--color-accent-50);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section__questions details {
|
|
||||||
border-bottom: var(--border);
|
|
||||||
}
|
|
||||||
#section__questions details summary {
|
|
||||||
height: calc(var(--h-block) * 1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#section__questions details summary::after {
|
|
||||||
content: "▶";
|
|
||||||
font-size: 0.8em;
|
|
||||||
color: var(--grey-400);
|
|
||||||
}
|
|
||||||
#section__questions details p {
|
|
||||||
padding-top: calc(var(--spacing) * 0.25);
|
|
||||||
margin-bottom: var(--spacing);
|
|
||||||
border-top: var(--border);
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section__socials .list-socials {
|
|
||||||
-moz-columns: 2;
|
|
||||||
columns: 2;
|
|
||||||
}/*# sourceMappingURL=style.css.map */
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,29 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
@import "base/var";
|
|
||||||
@import "base/body";
|
|
||||||
@import "base/responsive";
|
|
||||||
|
|
||||||
@import "components/text";
|
|
||||||
@import "components/heading";
|
|
||||||
@import "components/buttons";
|
|
||||||
@import "components/nav-tabs";
|
|
||||||
@import "components/list-socials";
|
|
||||||
|
|
||||||
@import "components/player";
|
|
||||||
@import "components/gauge";
|
|
||||||
@import "components/form-newsletter";
|
|
||||||
@import "components/comments-slider";
|
|
||||||
|
|
||||||
|
|
||||||
@import "partials/site-header";
|
|
||||||
|
|
||||||
|
|
||||||
@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";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<svg width="34px" height="34px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<rect id="Artboard1" x="0" y="0" width="15.43" height="12.636" style="fill:none;"/>
|
|
||||||
<g id="Artboard11" serif:id="Artboard1">
|
|
||||||
<path d="M0,7.29L0,5.373L9.801,5.373C10.67,5.373 11.757,5.4 12.387,5.427C11.952,5.022 11.366,4.455 10.888,3.969L8.432,1.404L9.366,0L15.43,6.318L9.366,12.636L8.432,11.232L10.888,8.667C11.366,8.181 11.952,7.614 12.387,7.236C11.757,7.263 10.67,7.29 9.801,7.29L0,7.29Z" style="fill-rule:nonzero;"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 741 B |
|
|
@ -1,10 +0,0 @@
|
||||||
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<g transform="matrix(2.125,0,0,2.125,0,3.1875)">
|
|
||||||
<rect x="0" y="0" width="15.43" height="12.636" style="fill:none;"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.5026,-1.5026,1.5026,1.5026,-4.69164,18.7124)">
|
|
||||||
<g>
|
|
||||||
<path d="M0,7.29L0,5.373L9.801,5.373C10.67,5.373 11.757,5.4 12.387,5.427C11.952,5.022 11.366,4.455 10.888,3.969L8.432,1.404L9.366,0L15.43,6.318L9.366,12.636L8.432,11.232L10.888,8.667C11.366,8.181 11.952,7.614 12.387,7.236C11.757,7.263 10.67,7.29 9.801,7.29L0,7.29Z" style="fill-rule:nonzero;"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 850 B |
|
|
@ -1,7 +0,0 @@
|
||||||
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<g transform="matrix(0.999997,0,0,1,-0.499614,-0.41986)">
|
|
||||||
<g id="facebook">
|
|
||||||
<path d="M17.5,2.099C8.995,2.099 2.1,8.994 2.1,17.499C2.1,25.22 7.787,31.595 15.198,32.708L15.198,21.58L11.388,21.58L11.388,17.532L15.198,17.532L15.198,14.839C15.198,10.379 17.371,8.421 21.077,8.421C22.853,8.421 23.791,8.553 24.236,8.613L24.236,12.146L21.707,12.146C20.134,12.146 19.584,13.638 19.584,15.32L19.584,17.532L24.196,17.532L23.57,21.58L19.584,21.58L19.584,32.741C27.101,31.721 32.9,25.295 32.9,17.499C32.9,8.994 26.005,2.099 17.5,2.099Z" style="fill-rule:nonzero;"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 896 B |
|
|
@ -1,7 +0,0 @@
|
||||||
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<g transform="matrix(1.22222,0,0,1.22222,0.500004,0.500006)">
|
|
||||||
<g id="linkedin">
|
|
||||||
<path d="M23.786,0L3.214,0C1.44,0 0,1.44 0,3.214L0,23.786C0,25.56 1.44,27 3.214,27L23.786,27C25.56,27 27,25.56 27,23.786L27,3.214C27,1.44 25.56,0 23.786,0ZM8.357,10.286L8.357,22.5L4.5,22.5L4.5,10.286L8.357,10.286ZM4.5,6.731C4.5,5.831 5.271,5.143 6.429,5.143C7.586,5.143 8.312,5.831 8.357,6.731C8.357,7.631 7.637,8.357 6.429,8.357C5.271,8.357 4.5,7.631 4.5,6.731ZM22.5,22.5L18.643,22.5L18.643,16.071C18.643,14.786 18,13.5 16.393,13.474L16.341,13.474C14.786,13.474 14.143,14.799 14.143,16.071L14.143,22.5L10.286,22.5L10.286,10.286L14.143,10.286L14.143,11.931C14.143,11.931 15.384,10.286 17.878,10.286C20.43,10.286 22.5,12.041 22.5,15.596L22.5,22.5Z" style="fill-rule:nonzero;"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,10 +0,0 @@
|
||||||
<svg height="80px" width="80px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
viewBox="0 0 512 512" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M500.203,236.907L30.869,2.24c-6.613-3.285-14.443-2.944-20.736,0.939C3.84,7.083,0,13.931,0,21.333v469.333
|
|
||||||
c0,7.403,3.84,14.251,10.133,18.155c3.413,2.112,7.296,3.179,11.2,3.179c3.264,0,6.528-0.747,9.536-2.24l469.333-234.667
|
|
||||||
C507.435,271.467,512,264.085,512,256S507.435,240.533,500.203,236.907z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 518 B |
|
|
@ -1,51 +0,0 @@
|
||||||
function updateLinkInterval(link, interval) {
|
|
||||||
const currentHref = link.getAttribute("href");
|
|
||||||
const newHref = currentHref.replace(
|
|
||||||
/default_interval=[om]/,
|
|
||||||
`default_interval=${interval}`
|
|
||||||
);
|
|
||||||
link.setAttribute("href", newHref);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateAmountDisplay(link, amount, interval) {
|
|
||||||
const boldText = link.querySelector(".bold");
|
|
||||||
if (!boldText) return;
|
|
||||||
|
|
||||||
const suffix = interval === "m" ? "€/mois" : "€";
|
|
||||||
boldText.innerHTML = `<span class="amount-value">${amount}</span>${suffix}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchActiveTab(clickedButton, allButtons) {
|
|
||||||
allButtons.forEach((btn) => btn.classList.remove("is-selected"));
|
|
||||||
clickedButton.classList.add("is-selected");
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDonationIntervalChange(interval) {
|
|
||||||
const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");
|
|
||||||
const freeAmountLink = document.querySelector(".btn--donation:not([data-amount])");
|
|
||||||
|
|
||||||
donationLinks.forEach((link) => {
|
|
||||||
const amount = link.getAttribute("data-amount");
|
|
||||||
updateLinkInterval(link, interval);
|
|
||||||
updateAmountDisplay(link, amount, interval);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (freeAmountLink) {
|
|
||||||
updateLinkInterval(freeAmountLink, interval);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
const tabButtons = document.querySelectorAll(".nav--tabs__btn");
|
|
||||||
const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");
|
|
||||||
|
|
||||||
if (tabButtons.length === 0 || donationLinks.length === 0) return;
|
|
||||||
|
|
||||||
tabButtons.forEach((button) => {
|
|
||||||
button.addEventListener("click", function () {
|
|
||||||
const interval = this.getAttribute("data-interval");
|
|
||||||
switchActiveTab(this, tabButtons);
|
|
||||||
handleDonationIntervalChange(interval);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
1
assets/src/_reset.scss
Normal file
1
assets/src/_reset.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
@import "_reset.scss";
|
||||||
1
assets/style.css
Normal file
1
assets/style.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
1
assets/style.css.map
Normal file
1
assets/style.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":[],"names":[],"mappings":"","file":"style.css"}
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
name: field.blocks.heading.name
|
|
||||||
icon: title
|
|
||||||
wysiwyg: true
|
|
||||||
preview: heading
|
|
||||||
fields:
|
|
||||||
level:
|
|
||||||
label: field.blocks.heading.level
|
|
||||||
type: toggles
|
|
||||||
empty: false
|
|
||||||
default: "h2"
|
|
||||||
labels: false
|
|
||||||
options:
|
|
||||||
- value: h3
|
|
||||||
icon: h3
|
|
||||||
text: H3
|
|
||||||
text:
|
|
||||||
label: field.blocks.heading.text
|
|
||||||
type: writer
|
|
||||||
inline: true
|
|
||||||
placeholder: field.blocks.heading.placeholder
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
name: field.blocks.image.name
|
|
||||||
icon: image
|
|
||||||
preview: image
|
|
||||||
fields:
|
|
||||||
image:
|
|
||||||
label: field.blocks.image.name
|
|
||||||
type: files
|
|
||||||
query: model.images
|
|
||||||
multiple: false
|
|
||||||
image:
|
|
||||||
back: black
|
|
||||||
uploads:
|
|
||||||
template: blocks/image
|
|
||||||
alt:
|
|
||||||
label: field.blocks.image.alt
|
|
||||||
type: text
|
|
||||||
icon: title
|
|
||||||
help: Description de l’image, utile si elle ne s’affiche pas. Écrivez comme si vous expliquiez l'image à quelqu'un par téléphone.
|
|
||||||
caption:
|
|
||||||
label: field.blocks.image.caption
|
|
||||||
type: writer
|
|
||||||
icon: text
|
|
||||||
inline: true
|
|
||||||
link:
|
|
||||||
label: field.blocks.image.link
|
|
||||||
type: text
|
|
||||||
icon: url
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
name: field.blocks.text.name
|
|
||||||
icon: text
|
|
||||||
wysiwyg: true
|
|
||||||
preview: text
|
|
||||||
fields:
|
|
||||||
text:
|
|
||||||
type: writer
|
|
||||||
headings:
|
|
||||||
- 4
|
|
||||||
placeholder: field.blocks.text.placeholder
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
title: À propos
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
title: Accueil
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
title: Impacts
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
title: Investigation
|
|
||||||
create:
|
|
||||||
fields:
|
|
||||||
- subtitle
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: page
|
|
||||||
columns:
|
|
||||||
- width: 2/6
|
|
||||||
fields:
|
|
||||||
created:
|
|
||||||
label: Première publication
|
|
||||||
type: date
|
|
||||||
display: DD / MM / YYYY
|
|
||||||
default: today
|
|
||||||
width: 1/4
|
|
||||||
- width: 4/6
|
|
||||||
fields:
|
|
||||||
subtitle:
|
|
||||||
label: Sous-titre
|
|
||||||
type: text
|
|
||||||
chapo:
|
|
||||||
label: Chapo
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
buttons: false
|
|
||||||
cover:
|
|
||||||
label: Visuel de couverture
|
|
||||||
type: files
|
|
||||||
multiple: false
|
|
||||||
min: 1
|
|
||||||
layout: cards
|
|
||||||
size: full
|
|
||||||
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
|
|
||||||
metadataTab:
|
|
||||||
label: Métadonnées
|
|
||||||
icon: table
|
|
||||||
fields:
|
|
||||||
incidentDate:
|
|
||||||
label: Date de l'incident
|
|
||||||
type: date
|
|
||||||
display: DD / MM / YYYY
|
|
||||||
width: 1/3
|
|
||||||
incidentLocation:
|
|
||||||
label: Lieu de l'incident
|
|
||||||
type: text
|
|
||||||
width: 1/3
|
|
||||||
incidentConsequences:
|
|
||||||
label: Conséquence(s)
|
|
||||||
type: text
|
|
||||||
width: 1/3
|
|
||||||
keywords:
|
|
||||||
label: Mots-clés
|
|
||||||
type: tags
|
|
||||||
width: 1/2
|
|
||||||
partners:
|
|
||||||
label: Partenaires
|
|
||||||
type: structure
|
|
||||||
width: 1/2
|
|
||||||
fields:
|
|
||||||
name:
|
|
||||||
label: Nom
|
|
||||||
type: text
|
|
||||||
link:
|
|
||||||
label: Lien
|
|
||||||
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
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
title: Investigations
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
sections:
|
|
||||||
investigations:
|
|
||||||
type: pages
|
|
||||||
template: investigation
|
|
||||||
text: "{{ page.title }}, {{ page.subtitle }}"
|
|
||||||
info: "{{ page.incidentConsequences }} à {{ page.incidentLocation }}"
|
|
||||||
layout: cards
|
|
||||||
size: huge
|
|
||||||
search: true
|
|
||||||
image:
|
|
||||||
cover: true
|
|
||||||
ratio: 12/7
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
title: Produit
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
columns:
|
|
||||||
- width: 1/3
|
|
||||||
sections:
|
|
||||||
gallery:
|
|
||||||
label: Galerie
|
|
||||||
type: files
|
|
||||||
layout: cards
|
|
||||||
min: 1
|
|
||||||
max: 1
|
|
||||||
- width: 2/3
|
|
||||||
fields:
|
|
||||||
price:
|
|
||||||
label: Prix
|
|
||||||
type: number
|
|
||||||
after: €
|
|
||||||
width: 1/3
|
|
||||||
description:
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks: false
|
|
||||||
width: 2/3
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
title: Resources
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
title: Boutique
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
sections:
|
|
||||||
products:
|
|
||||||
label: Produits
|
|
||||||
type: pages
|
|
||||||
template: product
|
|
||||||
ratio: 4/3
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
title: Nous soutenir
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
sections:
|
|
||||||
supportFields:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
heroHeadline:
|
|
||||||
type: headline
|
|
||||||
label: Hero
|
|
||||||
heroMedia:
|
|
||||||
label: Media de couverture
|
|
||||||
type: files
|
|
||||||
multiple: false
|
|
||||||
layout: cards
|
|
||||||
help: image ou vidéo affichée dans le héro, sous la phrase d'accroche
|
|
||||||
heroCatchPhrase:
|
|
||||||
label: Phrase d'accroche
|
|
||||||
type: text
|
|
||||||
heroBaseline:
|
|
||||||
label: Baseline
|
|
||||||
type: text
|
|
||||||
donorLine:
|
|
||||||
type: line
|
|
||||||
donorHeadline:
|
|
||||||
label: Dons
|
|
||||||
type: headline
|
|
||||||
donorCatchPhrase:
|
|
||||||
label: Phrase d'accroche
|
|
||||||
type: text
|
|
||||||
FAQLine:
|
|
||||||
type: line
|
|
||||||
FAQHeadline:
|
|
||||||
label: Questions fréquentes
|
|
||||||
type: headline
|
|
||||||
FAQQuestions:
|
|
||||||
label: Questions / réponses
|
|
||||||
type: structure
|
|
||||||
fields:
|
|
||||||
question:
|
|
||||||
type: text
|
|
||||||
answer:
|
|
||||||
label: Réponse
|
|
||||||
type: text
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
return [
|
|
||||||
'debug' => true,
|
|
||||||
'thumbs' => [
|
|
||||||
'quality' => 80,
|
|
||||||
'presets' => [
|
|
||||||
'grid' => 400,
|
|
||||||
'default' => [
|
|
||||||
'width' => 1024, 'format' => 'webp'
|
|
||||||
],
|
|
||||||
'full' => 2048,
|
|
||||||
'format' => 'webp'
|
|
||||||
],
|
|
||||||
'srcsets' => [
|
|
||||||
'default' => [200, 400, 600, 800, 1024, 1440, 2048],
|
|
||||||
'webp' => [
|
|
||||||
'300w' => ['width' => 300 * 1.2, 'format' => 'webp'],
|
|
||||||
'600w' => ['width' => 600 * 1.2, 'format' => 'webp'],
|
|
||||||
'900w' => ['width' => 900 * 1.2, 'format' => 'webp'],
|
|
||||||
'1200w' => ['width' => 1200 * 1.2, 'format' => 'webp'],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
'panel' => [
|
|
||||||
'menu' => require_once __DIR__ . '/menu.php'
|
|
||||||
],
|
|
||||||
'donorbox' => [
|
|
||||||
'api_key' => '', // À remplir avec la clé API Donorbox
|
|
||||||
'campaign_slug' => 'soutenir-index-en-2024',
|
|
||||||
'campaign_url' => 'https://donorbox.org/soutenir-index-en-2024',
|
|
||||||
'api_base_url' => 'https://donorbox.org/api/v1'
|
|
||||||
]
|
|
||||||
];
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
return [
|
|
||||||
'home' => [
|
|
||||||
'label' => 'Soutien',
|
|
||||||
'icon' => 'money',
|
|
||||||
'link' => 'pages/soutien',
|
|
||||||
'current' => function ($current) {
|
|
||||||
$path = Kirby::instance()->request()->path()->toString();
|
|
||||||
return Str::contains($path, 'pages/soutien');
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'shop' => [
|
|
||||||
'label' => 'Boutique',
|
|
||||||
'icon' => 'cart',
|
|
||||||
'link' => 'pages/boutique',
|
|
||||||
'current' => function ($current) {
|
|
||||||
$path = Kirby::instance()->request()->path()->toString();
|
|
||||||
return Str::contains($path, 'pages/boutique');
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'-',
|
|
||||||
'users'
|
|
||||||
];
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
return function($page) {
|
|
||||||
$config = kirby()->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;
|
|
||||||
};
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<script src="<?= url('assets/js/script.js') ?>"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="<?= url('assets/css/style.css') ?>?version-cache-prevent<?= rand(0, 1000) ?>">
|
|
||||||
<meta name="robots" content="noindex,nofollow">
|
|
||||||
<title>
|
|
||||||
<?php if ($page->isHomePage() == false): ?>
|
|
||||||
<?= $page->title() ?> |
|
|
||||||
<?php endif ?>
|
|
||||||
<?= $site->title() ?>
|
|
||||||
</title>
|
|
||||||
|
|
||||||
<script src="<?= url('assets/js/script.js') ?>"></script>
|
|
||||||
</head>
|
|
||||||
<body data-template="<?= $page->template() ?>">
|
|
||||||
<?php snippet('nav') ?>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<header id="site-header">
|
|
||||||
<div class="header-left">
|
|
||||||
<div class="burger"><svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 16.75c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero"/></svg></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header-center">
|
|
||||||
<h1 class="site-title">
|
|
||||||
<a href="/" aria-label="Retour à l’accueil" w3-include-html="/assets/index-logo.svg"></a>
|
|
||||||
</h1>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>Partie 1</li>
|
|
||||||
<li>Partie 2</li>
|
|
||||||
<li>Partie 3</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header-right">
|
|
||||||
<a href="#" id="go-to-panier">
|
|
||||||
<p>Panier</p>
|
|
||||||
<p id="go-to-panier__nbr">1</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<script type="text/javascript"
|
|
||||||
defer=""
|
|
||||||
src="https://donorbox.org/install-popup-button.js"
|
|
||||||
id="donorbox-popup-button-installer">
|
|
||||||
</script>
|
|
||||||
<a class="dbox-donation-button" id="preview_inline_popup_button" href="https://donorbox.org/soutenir-index-en-2024?amount=15&default_interval=m" style="margin-bottom: 2rem; background: rgb(0, 0, 0); color: rgb(255, 255, 255); text-decoration: none; font-family: Verdana, sans-serif; display: flex; gap: 8px; width: fit-content; font-size: 16px; border-radius: 5px; line-height: 24px; padding: 8px 24px;"><img src="https://donorbox.org/images/white_logo.svg">
|
|
||||||
Donner 15€ mensuellement
|
|
||||||
</a>
|
|
||||||
<a class="dbox-donation-button" id="preview_inline_popup_button" href="https://donorbox.org/soutenir-index-en-2024?amount=20&default_interval=o" style="background: rgb(0, 0, 0); color: rgb(255, 255, 255); text-decoration: none; font-family: Verdana, sans-serif; display: flex; gap: 8px; width: fit-content; font-size: 16px; border-radius: 5px; line-height: 24px; padding: 8px 24px;"><img src="https://donorbox.org/images/white_logo.svg">
|
|
||||||
Donner 10€ ponctuellement
|
|
||||||
</a>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -1,190 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section id="section__player">
|
|
||||||
<div class="player__container">
|
|
||||||
<div class="player__element">
|
|
||||||
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="https://www.index.ngo/wp-content/uploads/2025/09/Enquete-GP_Extrait-embed-site-web.mp4"></video>
|
|
||||||
<button class="player__btn"><?= svg('assets/icons/play-button.svg') ?></button>
|
|
||||||
</div>
|
|
||||||
<div class="player__iframe">
|
|
||||||
<iframe src="https://www.youtube.com/embed/UN3ZVQVaypg"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section id="section__hero" class="section__page-don">
|
|
||||||
<div class="hero-heading__container" class="section__page-don">
|
|
||||||
<h2 class="hero-heading">Pour continuer à enquêter, Index a besoin de vous</h2>
|
|
||||||
</div>
|
|
||||||
<p class="p__baseline-big">Minutieuses et approfondies, nos enquêtes représentent des mois de travail par plusieurs membres de notre équipe. Tout ceci a un coût important.</p>
|
|
||||||
|
|
||||||
<div class="gauge__container">
|
|
||||||
<!-- calculet le pourcentage avec l’API ?-->
|
|
||||||
<div id="gauge" style="--pourcent: <?= $percentage ?>%"></div>
|
|
||||||
|
|
||||||
<div class="gauge--infos" id="gauge--infos__donnateurs">
|
|
||||||
<p class="property">Donnateur·ices</p>
|
|
||||||
<p class="value"><?= $donor_count ?></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gauge--infos" id="gauge--infos__objectif">
|
|
||||||
<p class="property">Objectif</p>
|
|
||||||
<p class="value"><?= number_format($goal_amount, 0, ',', ' ') ?>€</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="p__baseline">Soutenez-nous avant le 31 décembre 2021</p>
|
|
||||||
|
|
||||||
<button class="btn--bold"><a href="#" class="btn--bold__container"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="txt">Faire un don</span></a></button>
|
|
||||||
|
|
||||||
<p class="p__details">Le don donne droit à une réduction fiscale de 66%</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section id="section__donation" class="subsection__page-don">
|
|
||||||
<p class="p__baseline-big">Index est une ONG d’investigation à but non-lucratif. Vos dons garantissent notre indépendance.</p>
|
|
||||||
|
|
||||||
<nav class="nav--tabs">
|
|
||||||
<button class="nav--tabs__btn is-selected" data-interval="o">Je donne une fois</button>
|
|
||||||
<button class="nav--tabs__btn" data-interval="m">Je donne tous les mois</button>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="btn--donation__container">
|
|
||||||
<a href="<?= $campaign_url ?>?amount=5&default_interval=o" class="btn--donation" data-amount="5">
|
|
||||||
<p class="bold"><span class="amount-value">5</span>€</p>
|
|
||||||
<p class="small">Soit <?= round(5 * 0.34) ?>€ <br>après impôts</p>
|
|
||||||
</a>
|
|
||||||
<a href="<?= $campaign_url ?>?amount=10&default_interval=o" class="btn--donation btn--donation__grow-1" data-amount="10">
|
|
||||||
<p class="bold"><span class="amount-value">10</span>€</p>
|
|
||||||
<p class="small">Soit <?= round(10 * 0.34) ?>€ <br>après impôts</p>
|
|
||||||
</a>
|
|
||||||
<a href="<?= $campaign_url ?>?amount=20&default_interval=o" class="btn--donation btn--donation__grow-1" data-amount="20">
|
|
||||||
<p class="bold"><span class="amount-value">20</span>€</p>
|
|
||||||
<p class="small">Soit <?= round(20 * 0.34) ?>€ <br>après impôts</p>
|
|
||||||
</a>
|
|
||||||
<a href="<?= $campaign_url ?>?amount=50&default_interval=o" class="btn--donation btn--donation__grow-1" data-amount="50">
|
|
||||||
<p class="bold"><span class="amount-value">50</span>€</p>
|
|
||||||
<p class="small">Soit <?= round(50 * 0.34) ?>€ <br>après impôts</p>
|
|
||||||
</a>
|
|
||||||
<a href="<?= $campaign_url ?>?default_interval=o" class="btn--donation btn--donation__grow-2">
|
|
||||||
<p class="small">Montant libre</p>
|
|
||||||
<p class="bold">Choisissez votre montant</p>
|
|
||||||
<p class="small">Avec déduction fiscale</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="p__details">Le don donne droit à une réduction fiscale de 66%<br> Vous pouvez stopper votre don à tout moment</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section id="section__comments" class="subsection__page-don">
|
|
||||||
<h4 class="subsection__heading">Commentaires de donnateur·ices</h4>
|
|
||||||
|
|
||||||
<div class="comments-slider">
|
|
||||||
<div class="comment">
|
|
||||||
<p class="comment__text">Vous faites un travail admirable. Merci de faire avancer la Justice avec un grand J. Force à vous!</p>
|
|
||||||
<p class="comment__name">Olivier</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="comment">
|
|
||||||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
|
||||||
<p class="comment__name">Name</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="comment">
|
|
||||||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
|
||||||
<p class="comment__name">Name</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="comment">
|
|
||||||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
|
||||||
<p class="comment__name">Name</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="comments-slider__dots"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section id="section__questions" class="section__page-don">
|
|
||||||
<h3 class="section__heading">Questions fréquentes</h3>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Pourquoi faire un don à index ?</summary>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>À quoi va servir mon don ?</summary>
|
|
||||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus, voluptate porro? Reprehenderit officia debitis suscipit ab deleniti possimus dignissimos error illum labore. Quos cumque modi alias repellendus, necessitatibus qui impedit nisi! Veritatis illo quod praesentium, voluptates explicabo accusantium reprehenderit ullam provident quaerat ipsum dignissimos molestias, deserunt voluptas dolor.</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Pourquoi faire un don à index ?</summary>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Les dons sont-ils défiscalisables ?</summary>
|
|
||||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus.</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Index, c’est quoi au juste ?</summary>
|
|
||||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus, voluptate porro? Reprehenderit officia debitis suscipit ab deleniti possimus dignissimos error illum labore. Quos cumque modi alias repellendus, necessitatibus qui impedit nisi! Veritatis illo quod praesentium, voluptates explicabo accusantium reprehenderit ullam provident quaerat ipsum dignissimos molestias, deserunt voluptas dolor.</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<button class="btn--bold"><a href="#" class="btn--bold__container"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="txt">Faire un don</span></a></button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="section__store" class="section__page-don">
|
|
||||||
<h3 class="section__heading">Boutique</h3>
|
|
||||||
<p class="p__baseline">Vous pouvez également soutenir Index en commandant des articles disponibles sur notre boutique.</p>
|
|
||||||
|
|
||||||
<div class="store__container">
|
|
||||||
<?php foreach(page('boutique')->children() as $product): ?>
|
|
||||||
<article class="store__product">
|
|
||||||
<?php if ($product->hasFiles()): ?>
|
|
||||||
<figure style="--data-bg: #000000">
|
|
||||||
<img src="<?= $product->files()->first()->url() ?>" alt="">
|
|
||||||
</figure>
|
|
||||||
<?php endif ?>
|
|
||||||
<p><?= $product->title() ?></p>
|
|
||||||
<?= $product->description() ?>
|
|
||||||
<a href="#" class="link-block" aria-hidden="true"></a>
|
|
||||||
</article>
|
|
||||||
<?php endforeach ?>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="section__newsletter" class="section__page-don">
|
|
||||||
<h3 class="section__heading">Nous suivre</h3>
|
|
||||||
|
|
||||||
<p class="p__baseline-big">Abonnez-vous <br>à la newsletter d’Index</p>
|
|
||||||
<p class="p__baseline">Recevez nos dernière publications et actualités directement dans votre boite mail.</p>
|
|
||||||
|
|
||||||
<form class="form__newsletter">
|
|
||||||
<input type="email" name="email" placeholder="Votre adresse e-mail*" required />
|
|
||||||
<button class="btn--bold" type="submit" aria-label="s’inscrire"><span class="btn--bold__container"><span class="txt">S’inscrire</span><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></span></button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<p class="p__details">Votre adresse e-mail est uniquement utilisée pour vous envoyer notre newsletter ainsi que les informations relatives aux activités d’INDEX. Vous pouvez vous désinscrire à tout moment à l’aide du lien inclus dans chaque email.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="section__socials" class="subsection__page-don">
|
|
||||||
<h4 class="subsection__heading">Suivez Index sur les réseaux sociaux</h4>
|
|
||||||
<ul class="list-socials">
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue