From 4c4a96df1e79649aeb1434d9370f33fc1bbb9ffd Mon Sep 17 00:00:00 2001 From: isUnknown Date: Sun, 12 Apr 2026 11:08:03 +0200 Subject: [PATCH] =?UTF-8?q?Vid=C3=A9o=20fullscreen=20:=20cursor=20pointer?= =?UTF-8?q?=20sur=20le=20bouton=20close,=20fermeture=20avec=20Echap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 --- assets/css/style.css | 2 +- assets/css/template/support/_section--video.scss | 4 ++-- assets/js/onload.js | 10 ++++++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index a13f35e..4a21864 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1 +1 @@ -:root{--font: "Executive", Arial, sans-serif;--title: "System", Arial, sans-serif;--fs-x-small: 10px;--fs-small: 12px;--fs-normal: 16px;--fs-medium: 20px;--fs-big: 30px;--fs-x-big: 38px;--fs-button-bold: 22px;--leading-tight: 1;--leading-normal: 1.2;--fw-normal: 400;--fw-medium: 500;--fw-bold: 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-600: #6d6d6d;--grey-800: #383838;--border: 1px solid var(--color-txt);--border-light: 1px solid var(--grey-800);--header-h: 80px;--header-h-shrinked: 50px;--padding-body: 20px;--radius-small: 4px;--spacing: 30px;--h-block: 30px;--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275)}@media screen and (max-width: 720px){:root{--fs-medium: 20px;--fs-big: 26px}}*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased;scroll-behavior:smooth}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}main{padding-top:var(--header-h)}.nav--tabs{height:calc(var(--h-block)*1);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-family:var(--font);font-size:var(--fs-small);font-weight:var(--fw-medium);padding:0 2ch}.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)}.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;color:var(--color-accent);font-weight:var(--fw-medium);text-decoration:none;cursor:pointer}.btn__default .icon,.btn__default .txt{z-index:10}.btn__default .icon{width:var(--size);height:var(--size);display:flex;align-items:center;justify-content:center;color:var(--color-bg);text-align:center}.btn__default .icon svg{fill:var(--color-bg);width:80%}.btn__default .txt{font-family:var(--font-title);color:var(--color-accent);font-size:var(--fs-normal);font-weight:var(--fw-bold);padding-left:1ch}.btn__default::after{content:"";display:block;background-color:var(--color-accent);border-radius:calc(var(--size)/2);width:var(--size);height:var(--size);position:absolute;left:0;z-index:0;transition:width .2s}.btn__default:hover .txt{color:var(--color-bg);display:block}.btn__default:hover::after{width:100%}#donation-cta-mobile{width:100%;display:flex;align-items:center;justify-content:center;padding-top:calc(var(--spacing)*.5);padding-bottom:calc(var(--spacing)*1.5);position:fixed;bottom:0px;left:0;z-index:100;opacity:0;transition:opacity ease-in .2s;pointer-events:none}#donation-cta-mobile.is-visible{pointer-events:all;opacity:1}#donation-cta-mobile.is-sticky{position:relative}@media screen and (min-width: 720px){#donation-cta-mobile{display:none !important}}.donation-cta{--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)}.donation-cta a{text-decoration:none;display:flex;align-items:center;gap:.5ch}.donation-cta .icon{height:28px;position:relative;top:1px}.donation-cta svg{fill:var(--color-bg);width:24px;height:24px}.newsletter-form{--size: 24px;position:relative;display:flex;align-items:center;position:relative}.newsletter-form input[type=email]{height:calc(var(--h-block)*1.25);width:100%;border-radius:calc(var(--h-block)*.625);outline:none;border:none;padding:0 2ch;font-family:var(--font);font-size:var(--fs-normal);z-index:40;padding-top:4px}.newsletter-form input[type=email]::placeholder{font-family:var(--font);font-size:var(--fs-normal)}.newsletter-form input[type=email]:focus{outline:3px solid var(--grey-400)}.newsletter-form button[type=submit].btn--bold{position:absolute;right:2px;z-index:100}.newsletter-form button[type=submit].btn--bold{--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:.75ch;color:var(--color-accent);font-weight:var(--fw-medium);text-decoration:none;cursor:pointer}.newsletter-form button[type=submit].btn--bold .icon,.newsletter-form button[type=submit].btn--bold .txt{z-index:10}.newsletter-form button[type=submit].btn--bold .icon{width:var(--size);height:var(--size);display:flex;align-items:center;justify-content:center;color:var(--color-bg);text-align:center}.newsletter-form button[type=submit].btn--bold .icon svg{fill:var(--color-bg);width:80%}.newsletter-form button[type=submit].btn--bold .txt{position:relative;top:2px;font-size:var(--fs-normal);display:none;padding-left:1ch}.newsletter-form button[type=submit].btn--bold::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 .2s}.newsletter-form button[type=submit].btn--bold:hover .txt{color:var(--color-bg);display:block}.newsletter-form button[type=submit].btn--bold:hover::after{width:100%}.gauge-container{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;top:calc(var(--spacing)*.25);padding:0 calc(var(--spacing)*.5)}#gauge{--gauge-h: 12px;width:100%;margin-bottom:calc(var(--spacing)*.25);height:var(--gauge-h);border-radius:calc(var(--gauge-h)*.5);background-color:var(--color-bg);border:1px solid var(--color-txt);position:relative;box-shadow:7px 6px 5px -3px rgba(0,0,0,.14)}#gauge::before{content:"";display:block;height:calc(var(--gauge-h) - 2px);border-radius:calc(var(--gauge-h)*.5);width:var(--pourcent);min-width:20px;background-color:var(--color-accent);position:absolute;top:0px;left:0px;transition:width cubic-bezier(0.86, 0, 0.07, 1) 1s}.gauge-info .property{font-size:var(--fs-small);padding-bottom:3px}.gauge-info .value{font-size:var(--fs-small)}.gauge-info:last-of-type{text-align:right}#gauge-info--supporters{text-align:center;display:flex;flex-direction:column;justify-content:center}#gauge-info--supporters .value{font-weight:bold;display:inline}#gauge-info--supporters .property{display:inline;padding-bottom:0}@media screen and (min-width: 720px){#gauge{--gauge-h: 18px;border:2px solid var(--color-txt)}#gauge::before{height:calc(var(--gauge-h) - 4px)}.gauge-info .property{font-size:var(--fs-small)}.gauge-info .value{font-size:var(--fs-normal)}}[data-template=subscription-newsletter] .hero-heading,[data-template=thanks] .hero-heading,[data-template=support] .hero-heading,[data-template=store] .hero-heading{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}[data-template=subscription-newsletter] .hero-heading strong,[data-template=thanks] .hero-heading strong,[data-template=support] .hero-heading strong,[data-template=store] .hero-heading strong{font-weight:var(--fw-bolf);color:var(--color-accent)}[data-template=subscription-newsletter] .hero-heading .link-don,[data-template=thanks] .hero-heading .link-don,[data-template=support] .hero-heading .link-don,[data-template=store] .hero-heading .link-don{display:block;color:var(--color-accent);text-decoration:none}[data-template=subscription-newsletter] .hero-heading .link-don:hover,[data-template=thanks] .hero-heading .link-don:hover,[data-template=support] .hero-heading .link-don:hover,[data-template=store] .hero-heading .link-don:hover{text-decoration:underline 2px;text-underline-offset:4px}[data-template=subscription-newsletter] .subheading,[data-template=thanks] .subheading,[data-template=support] .subheading,[data-template=store] .subheading{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: 720px){[data-template=subscription-newsletter] .subheading,[data-template=thanks] .subheading,[data-template=support] .subheading,[data-template=store] .subheading{text-align:center;margin:var(--spacing) 0}}[data-template=subscription-newsletter] .text-details,[data-template=thanks] .text-details,[data-template=support] .text-details,[data-template=store] .text-details{font-size:var(--fs-small);margin-bottom:.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)*.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:.5em}@keyframes add-border{from{border-bottom-color:transparent}to{border-bottom:var(--grey-800)}}#site-header{position:fixed;left:var(--padding-body);top:0px;z-index:900;width:calc(100vw - var(--padding-body)*2);height:var(--header-h);background-color:var(--color-bg);display:flex;align-items:center;justify-content:space-between}#site-header.is-shrinked{height:var(--header-h-shrinked);border-bottom:var(--border-light)}#site-header .site-title{display:flex;width:120px;transition:all ease-in .2s;overflow:hidden}#site-header .site-title svg{fill:var(--color-txt)}#site-header.is-shrinked .site-title{width:80px !important}#site-header .header-left,#site-header .header-right{width:90px;display:flex;align-items:center;justify-content:flex-end}#site-header .header-center{display:flex;flex-direction:column;align-items:center}#site-header #toggle-lang{list-style:none;display:flex;justify-content:flex-end;gap:.75ch;text-transform:uppercase;color:var(--grey-400);line-height:1;margin:0;padding:0}#site-header #toggle-lang a{text-decoration:none}#site-header #toggle-lang li.is-selected{color:var(--color-txt)}#site-footer{background-color:#000;width:100vw;position:relative;left:calc(var(--padding-body)*-1);padding:calc(var(--padding-body)*2) var(--padding-body)}#site-footer p{margin:calc(var(--spacing)*.5) 0}#site-footer p a{text-decoration:none}#site-footer p a:hover{text-decoration:underline}#site-footer .text-small{font-size:var(--fs-x-small)}#site-footer #socials-list{list-style:none;columns:2;max-width:500px;margin:0}#site-footer #socials-list a{display:flex;align-items:center;gap:1ch;text-decoration:none;height:calc(var(--spacing)*1)}#site-footer #socials-list a::after{content:"↗";color:var(--grey-300)}#site-footer #socials-list .text{line-height:1}#site-footer #socials-list .icon{width:20px;height:20px;position:relative;top:-2px}#site-footer #socials-list svg{display:flex;align-items:center;width:20px;height:20px}@media screen and (max-width: 720px){#site-footer{margin-top:calc(var(--spacing)*2)}#site-footer .footer-socials{margin-top:calc(var(--spacing)*1.5)}#site-footer .footer-mentions{margin-top:calc(var(--spacing)*.5)}#site-footer .footer-mentions p{margin-top:calc(var(--spacing)*2)}}@media screen and (min-width: 720px){#site-footer .footer-container{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--spacing)*2);max-width:1200px;margin:0 auto}#site-footer .footer-mentions{grid-column:span 2;text-align:center}#site-footer .footer-mentions p{font-size:var(--font-size);margin-top:calc(var(--spacing)*2)}}@media screen and (min-width: 1080px){#site-footer .footer-container{column-gap:calc(var(--spacing)*4)}}@media screen and (max-width: 720px){#site-footer .footer-mentions{padding-top:calc(var(--spacing)*1);text-align:center}#site-footer .footer-mentions p{margin-top:0}}[data-template=support] section{display:flex;flex-direction:column;margin:0 auto;padding-bottom:calc(var(--spacing)*.75);margin-bottom:calc(var(--spacing)*.75);border-bottom:var(--border-light)}[data-template=support] #section__hero{margin-top:calc(var(--spacing)*1);display:block}[data-template=support] #section__questions{border-bottom:none}[data-template=support] #section__donation:target{padding-top:calc(var(--header-h)*1.25)}[data-template=support] #section__video{display:flex;flex-direction:column;align-items:center}[data-template=support] #section__video .video-container{display:flex}[data-template=support] #section__video video{width:100%;border:1px solid var(--grey-800);max-height:90vh;display:flex}@media screen and (min-width: 1080px){[data-template=support] main{display:grid;grid-template-columns:50% 50%;grid-template-rows:repeat(4, auto);max-width:1200px;margin:0 auto;padding-bottom:0}[data-template=support] #section__donation{padding-top:calc(var(--spacing)*1)}[data-template=support] #section__donation,[data-template=support] #section__comments{border:none}[data-template=support] #section__baseline{padding:calc(var(--spacing)*.5) 0}[data-template=support] .gauge-container{padding-top:calc(var(--spacing)*1)}[data-template=support] .col-left,[data-template=support] .col-right{padding-top:calc(var(--spacing)*1)}[data-template=support] .col-left{grid-column:1;grid-row:1/5}[data-template=support] .col-right{position:sticky;top:calc(var(--spacing)*2.5);grid-column:2;grid-row:1;overflow:hidden}}@media screen and (max-width: 1080px){[data-template=support] main{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;max-width:600px;margin:0 auto}[data-template=support] section{width:100%}[data-template=support] .col-left,[data-template=support] .col-right{display:contents}[data-template=support] #section__hero{order:1}[data-template=support] #section__donation{order:2}[data-template=support] #section__baseline{order:3}[data-template=support] #section__video{order:4}[data-template=support] #section__comments{order:5}[data-template=support] #section__questions{order:6;margin-bottom:calc(var(--spacing)*2)}}@media screen and (max-height: 670px)and (min-width: 1080px){[data-template=support] .col-left,[data-template=support] .col-right{display:contents}[data-template=support] section{width:100%}[data-template=support] #section__donation{grid-row:1;grid-column:2;position:sticky;top:calc(var(--spacing)*3.75)}[data-template=support] #section__hero{grid-row:1;grid-column:1}[data-template=support] #section__baseline{grid-row:2;grid-column:1}[data-template=support] #section__video{grid-row:3;grid-column:1}[data-template=support] #section__comments{grid-row:4;grid-column:1;border-bottom:var(--border-light)}[data-template=support] #section__questions{grid-row:5;grid-column:1}}#section__donation{display:flex;align-items:center}#section__donation .donation-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:calc(var(--padding-body)*.75);display:none}@media screen and (min-width: 1080px){#section__donation .donation-grid{width:420px}}@media screen and (max-width: 1080px){#section__donation .donation-grid{width:100%;max-width:420px}}#section__donation .donation-grid .donation-btn--full{grid-column:span 2}#section__donation .donation-grid.is-selected{display:grid}#section__donation .donation-btn{background-color:var(--color-txt);color:var(--color-bg);border-radius:var(--radius-small);height:calc(var(--h-block)*2)}#section__donation .donation-btn .bold{font-family:var(--title);font-size:var(--fs-medium);font-weight:var(--fw-bold);margin-bottom:.25em}#section__donation .donation-btn .small{font-family:var(--font);font-weight:var(--fw-medium);font-size:var(--fs-small)}#section__donation .donation-btn:hover{outline:4px solid var(--color-accent);cursor:pointer}.comment-text{font-size:var(--fs-medium);font-weight:var(--fw-medium);line-height:var(--leading-tight);line-height:1.1;max-width:28ch;text-align:center}.comment-name{margin-top:calc(var(--spacing)*.5);text-align:center}.swiper{width:100%;max-width:700px;height:auto;position:relative;padding-bottom:40px}.swiper .swiper-slide{display:flex;flex-direction:column;align-items:center}.swiper .comments-dots{position:absolute;bottom:10px;left:0;width:100%;text-align:center}.swiper .comments-dots .swiper-pagination-bullet{background-color:var(--grey-600);opacity:1}.swiper .comments-dots .swiper-pagination-bullet-active{background-color:var(--color-txt);opacity:1}#section__questions{max-width:700px}#section__questions summary::marker{content:"";display:none}#section__questions summary::-webkit-details-marker{content:"";display:none}#section__questions details{border-bottom:var(--border)}#section__questions details:first-of-type{border-top:var(--border)}#section__questions details summary{padding-top:calc(var(--spacing)*.25 + 2px);padding-bottom:calc(var(--spacing)*.25);cursor:pointer;position:relative;padding-right:2ch}#section__questions details[open] summary::after{content:"✕";position:absolute;right:0}#section__questions details p{margin:calc(var(--spacing)*.5) 0}#section__questions details ul,#section__questions details ol{margin-bottom:calc(var(--spacing)*.5)}#section__video{margin-bottom:calc(var(--spacing)*2)}#section__video .btn-expand{margin-top:calc(var(--spacing)*1);--size: var(--h-block);font-family:var(--font);font-size:var(--fs-small);font-weight:var(--fw-normal);line-height:1;border:var(--border-light);height:var(--size);border-radius:calc(var(--size)/2);padding-left:1.5ch;padding-right:2ch;padding-top:1px;position:relative;cursor:pointer;display:flex;align-items:center;gap:1ch;font-weight:var(--fw-medium);text-decoration:none;cursor:pointer}#section__video .btn-expand:hover{background-color:var(--grey-800);border-color:var(--color-txt)}#section__video .btn-expand svg{fill:var(--color-txt);width:10px;position:relative;top:1px;left:1px}#section__video .testimonies-list{list-style:none;width:100%;margin-top:calc(var(--spacing)*1);display:none}#section__video .testimonies-list .testimony-item{position:relative;padding-left:40px;padding-right:2ch;margin-bottom:calc(var(--spacing)*.75);cursor:pointer}@media screen and (max-width: 520px){#section__video .testimonies-list .testimony-item .desktop-break{display:none}}#section__video .testimonies-list .testimony-item:hover{color:var(--grey-100)}#section__video .testimonies-list .testimony-item .icon{--size: 20px;flex-shrink:0;width:var(--size);height:var(--size);border-radius:calc(var(--size)/2);border:var(--border);display:flex;align-items:center;justify-content:center;position:absolute;left:0px}#section__video .testimonies-list .testimony-item svg{fill:var(--color-txt);width:7px}#section__video #testimonies-toggle{display:none}#section__video #testimonies-toggle:checked~.testimonies-list{display:block}#video__fullscreen{width:100vw;height:100vh;background-color:var(--color-bg);padding:var(--padding-body);position:fixed;top:0px;left:0;z-index:3000}#video__fullscreen iframe{width:90%;height:calc(100vh - 60px);height:calc(100dvh - 60px);border:var(--border)}#video__fullscreen #video__close{height:60px;font-size:20px;width:100%;font-weight:bold;display:flex;align-items:top;justify-content:flex-end}body.is-fullscreen{overflow:hidden}[data-template=store] main{margin-bottom:calc(var(--spacing)*2)}[data-template=store] .hero-heading{margin-top:calc(var(--spacing)*2)}[data-template=store] #store__container{margin-top:calc(var(--spacing)*2);margin-bottom:calc(var(--spacing)*4);width:100%;max-width:1000px}[data-template=store] #store__container .store__product{position:relative}[data-template=store] #store__container .store__product figure{aspect-ratio:4/3;background-color:var(--color-bg);background-color:var(--data-bg);margin-bottom:calc(var(--spacing)*.5);overflow:hidden}[data-template=store] #store__container .store__product img{width:100%;height:100%;object-fit:contain;transition:var(--curve) .5s}[data-template=store] #store__container .store__product a{text-decoration:none}[data-template=store] #store__container .store__product .link-block{display:block;height:100%;width:100%;position:absolute;top:0;left:0;cursor:pointer}[data-template=store] #store__container .store__product:hover figure{overflow:hidden}[data-template=store] #store__container .store__product:hover img{transform:scale(1.05)}[data-template=store] #store__container .store__product:hover .line-1{text-decoration:underline}@media screen and (max-width: 720px){[data-template=store] #store__container .store__product{margin-top:calc(var(--spacing)*1.5);margin-bottom:calc(var(--spacing)*.5)}}@media screen and (min-width: 720px){[data-template=store] #store__container{display:grid;grid-template-columns:repeat(6, 1fr);column-gap:calc(var(--padding-body)*.75);row-gap:calc(var(--spacing)*2);margin-left:auto;margin-right:auto}[data-template=store] #store__container .store__product{grid-column:span 2}[data-template=store] #store__container .store__product:nth-of-type(1),[data-template=store] #store__container .store__product:nth-of-type(2){grid-column:span 3}}[data-template=store] #site-footer{margin-top:calc(var(--spacing)*4);padding-top:0px}.section__product,.store__nav{max-width:1000px;margin-left:auto;margin-right:auto}.store__nav{padding-top:calc(var(--spacing)*1)}.store__nav a{text-decoration:none}.store__nav a:hover{text-decoration:underline}.store__nav a::before{content:"← "}.section__product figure{aspect-ratio:1/1}.section__product figure img{width:100%;height:100%;object-fit:contain}.section__product #list-size{list-style:none;display:flex;margin-top:calc(var(--spacing)*.5);margin-bottom:calc(var(--spacing)*.5);gap:2ch}.section__product #list-size li{position:relative}.section__product #list-size li input[type=radio]{position:fixed;opacity:0;pointer-events:none}.section__product #list-size li label{font-family:var(--title);font-size:var(--fs-normal);height:4ch;width:4ch;border-radius:50%;border:var(--border);border-color:transparent;display:flex;align-items:center;justify-content:center;padding-top:0px;cursor:pointer}.section__product #list-size li input[type=radio]:checked+label{border-color:var(--color-txt)}.section__product #list-size li input[type=radio]:not(:checked)+label:hover{border-color:var(--grey-600);background-color:var(--grey-800)}.section__product .hero{margin-bottom:calc(var(--spacing)*1);padding-top:calc(var(--spacing)*.5);border-top:var(--border-light)}.section__product .hero .hero-heading{margin:0;text-align:left}.section__product .add-to-cart,.section__product #list-size{margin:0;border-bottom:var(--border-light);padding:calc(var(--spacing)*.5) 0}@media screen and (max-width: 720px){.store__nav a{padding-top:0;font-size:var(--fs-small)}.section__product{display:flex;flex-direction:column}.section__product .col-left{display:contents}.section__product .hero{margin-top:calc(var(--spacing)*.5);order:1}.section__product figure{order:2;margin-bottom:calc(var(--spacing)*1)}.section__product .details{order:3;margin-bottom:calc(var(--spacing)*1.5)}.section__product .size{border-top:var(--border-light);order:4}.section__product .add-to-cart{order:5}}@media screen and (min-width: 720px){.section__product{display:grid;grid-template-columns:50% 50%;aspect-ratio:2/1;margin-top:calc(var(--spacing)*.5);position:relative}.section__product .col-left{padding-right:var(--padding-body)}.section__product .details{margin-bottom:calc(var(--spacing)*3)}.section__product .add-to-cart,.section__product #list-size{width:calc(50% - var(--padding-body))}.section__product .add-to-cart{position:absolute;bottom:10px}.section__product #list-size{position:absolute;bottom:calc(var(--spacing)*2);border-top:var(--border-light)}}[data-template=thanks] .hero-heading{margin-top:calc(var(--spacing)*3);margin-bottom:calc(var(--spacing)*3)}[data-template=thanks] .subheading{text-align:left;max-width:800px;margin:var(--spacing) auto}[data-template=thanks] .subheading a{color:var(--color-accent);text-decoration:none}[data-template=thanks] .subheading a:hover{text-decoration:underline}[data-template=thanks] #site-footer{border-top:none;margin-top:calc(var(--spacing)*4)}.snipcart-modal__container{z-index:1000}[data-template=subscription-newsletter] main{margin-top:calc(var(--spacing)*2)}[data-template=subscription-newsletter] #form__newsletter__container{max-width:700px;margin:calc(var(--spacing)*3) auto;margin-bottom:calc(var(--spacing)*4)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form{margin:calc(var(--spacing)*1) 0}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form input[type=email]{height:calc(var(--h-block)*1.75);border-radius:calc(var(--h-block)*.875);font-size:var(--fs-medium)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form input[type=email]::placeholder{font-size:var(--fs-medium)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form button[type=submit].btn--bold{--size: calc(var(--h-block)*1.75 - 4px)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form button[type=submit].btn--bold .icon svg{width:28px}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form .txt{padding-left:2ch}[data-template=subscription-newsletter] #form__newsletter__container .subheading{max-width:52ch;text-align:left}[data-template=subscription-newsletter] #form__newsletter__container .text-details{color:var(--color-txt);max-width:80ch}[data-template=subscription-newsletter] #site-footer{margin-top:calc(var(--spacing)*4);padding-top:0px} +:root{--font: "Executive", Arial, sans-serif;--title: "System", Arial, sans-serif;--fs-x-small: 10px;--fs-small: 12px;--fs-normal: 16px;--fs-medium: 20px;--fs-big: 30px;--fs-x-big: 38px;--fs-button-bold: 22px;--leading-tight: 1;--leading-normal: 1.2;--fw-normal: 400;--fw-medium: 500;--fw-bold: 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-600: #6d6d6d;--grey-800: #383838;--border: 1px solid var(--color-txt);--border-light: 1px solid var(--grey-800);--header-h: 80px;--header-h-shrinked: 50px;--padding-body: 20px;--radius-small: 4px;--spacing: 30px;--h-block: 30px;--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275)}@media screen and (max-width: 720px){:root{--fs-medium: 20px;--fs-big: 26px}}*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased;scroll-behavior:smooth}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}main{padding-top:var(--header-h)}.nav--tabs{height:calc(var(--h-block)*1);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-family:var(--font);font-size:var(--fs-small);font-weight:var(--fw-medium);padding:0 2ch}.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)}.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;color:var(--color-accent);font-weight:var(--fw-medium);text-decoration:none;cursor:pointer}.btn__default .icon,.btn__default .txt{z-index:10}.btn__default .icon{width:var(--size);height:var(--size);display:flex;align-items:center;justify-content:center;color:var(--color-bg);text-align:center}.btn__default .icon svg{fill:var(--color-bg);width:80%}.btn__default .txt{font-family:var(--font-title);color:var(--color-accent);font-size:var(--fs-normal);font-weight:var(--fw-bold);padding-left:1ch}.btn__default::after{content:"";display:block;background-color:var(--color-accent);border-radius:calc(var(--size)/2);width:var(--size);height:var(--size);position:absolute;left:0;z-index:0;transition:width .2s}.btn__default:hover .txt{color:var(--color-bg);display:block}.btn__default:hover::after{width:100%}#donation-cta-mobile{width:100%;display:flex;align-items:center;justify-content:center;padding-top:calc(var(--spacing)*.5);padding-bottom:calc(var(--spacing)*1.5);position:fixed;bottom:0px;left:0;z-index:100;opacity:0;transition:opacity ease-in .2s;pointer-events:none}#donation-cta-mobile.is-visible{pointer-events:all;opacity:1}#donation-cta-mobile.is-sticky{position:relative}@media screen and (min-width: 720px){#donation-cta-mobile{display:none !important}}.donation-cta{--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)}.donation-cta a{text-decoration:none;display:flex;align-items:center;gap:.5ch}.donation-cta .icon{height:28px;position:relative;top:1px}.donation-cta svg{fill:var(--color-bg);width:24px;height:24px}.newsletter-form{--size: 24px;position:relative;display:flex;align-items:center;position:relative}.newsletter-form input[type=email]{height:calc(var(--h-block)*1.25);width:100%;border-radius:calc(var(--h-block)*.625);outline:none;border:none;padding:0 2ch;font-family:var(--font);font-size:var(--fs-normal);z-index:40;padding-top:4px}.newsletter-form input[type=email]::placeholder{font-family:var(--font);font-size:var(--fs-normal)}.newsletter-form input[type=email]:focus{outline:3px solid var(--grey-400)}.newsletter-form button[type=submit].btn--bold{position:absolute;right:2px;z-index:100}.newsletter-form button[type=submit].btn--bold{--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:.75ch;color:var(--color-accent);font-weight:var(--fw-medium);text-decoration:none;cursor:pointer}.newsletter-form button[type=submit].btn--bold .icon,.newsletter-form button[type=submit].btn--bold .txt{z-index:10}.newsletter-form button[type=submit].btn--bold .icon{width:var(--size);height:var(--size);display:flex;align-items:center;justify-content:center;color:var(--color-bg);text-align:center}.newsletter-form button[type=submit].btn--bold .icon svg{fill:var(--color-bg);width:80%}.newsletter-form button[type=submit].btn--bold .txt{position:relative;top:2px;font-size:var(--fs-normal);display:none;padding-left:1ch}.newsletter-form button[type=submit].btn--bold::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 .2s}.newsletter-form button[type=submit].btn--bold:hover .txt{color:var(--color-bg);display:block}.newsletter-form button[type=submit].btn--bold:hover::after{width:100%}.gauge-container{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;top:calc(var(--spacing)*.25);padding:0 calc(var(--spacing)*.5)}#gauge{--gauge-h: 12px;width:100%;margin-bottom:calc(var(--spacing)*.25);height:var(--gauge-h);border-radius:calc(var(--gauge-h)*.5);background-color:var(--color-bg);border:1px solid var(--color-txt);position:relative;box-shadow:7px 6px 5px -3px rgba(0,0,0,.14)}#gauge::before{content:"";display:block;height:calc(var(--gauge-h) - 2px);border-radius:calc(var(--gauge-h)*.5);width:var(--pourcent);min-width:20px;background-color:var(--color-accent);position:absolute;top:0px;left:0px;transition:width cubic-bezier(0.86, 0, 0.07, 1) 1s}.gauge-info .property{font-size:var(--fs-small);padding-bottom:3px}.gauge-info .value{font-size:var(--fs-small)}.gauge-info:last-of-type{text-align:right}#gauge-info--supporters{text-align:center;display:flex;flex-direction:column;justify-content:center}#gauge-info--supporters .value{font-weight:bold;display:inline}#gauge-info--supporters .property{display:inline;padding-bottom:0}@media screen and (min-width: 720px){#gauge{--gauge-h: 18px;border:2px solid var(--color-txt)}#gauge::before{height:calc(var(--gauge-h) - 4px)}.gauge-info .property{font-size:var(--fs-small)}.gauge-info .value{font-size:var(--fs-normal)}}[data-template=subscription-newsletter] .hero-heading,[data-template=thanks] .hero-heading,[data-template=support] .hero-heading,[data-template=store] .hero-heading{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}[data-template=subscription-newsletter] .hero-heading strong,[data-template=thanks] .hero-heading strong,[data-template=support] .hero-heading strong,[data-template=store] .hero-heading strong{font-weight:var(--fw-bolf);color:var(--color-accent)}[data-template=subscription-newsletter] .hero-heading .link-don,[data-template=thanks] .hero-heading .link-don,[data-template=support] .hero-heading .link-don,[data-template=store] .hero-heading .link-don{display:block;color:var(--color-accent);text-decoration:none}[data-template=subscription-newsletter] .hero-heading .link-don:hover,[data-template=thanks] .hero-heading .link-don:hover,[data-template=support] .hero-heading .link-don:hover,[data-template=store] .hero-heading .link-don:hover{text-decoration:underline 2px;text-underline-offset:4px}[data-template=subscription-newsletter] .subheading,[data-template=thanks] .subheading,[data-template=support] .subheading,[data-template=store] .subheading{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: 720px){[data-template=subscription-newsletter] .subheading,[data-template=thanks] .subheading,[data-template=support] .subheading,[data-template=store] .subheading{text-align:center;margin:var(--spacing) 0}}[data-template=subscription-newsletter] .text-details,[data-template=thanks] .text-details,[data-template=support] .text-details,[data-template=store] .text-details{font-size:var(--fs-small);margin-bottom:.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)*.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:.5em}@keyframes add-border{from{border-bottom-color:transparent}to{border-bottom:var(--grey-800)}}#site-header{position:fixed;left:var(--padding-body);top:0px;z-index:900;width:calc(100vw - var(--padding-body)*2);height:var(--header-h);background-color:var(--color-bg);display:flex;align-items:center;justify-content:space-between}#site-header.is-shrinked{height:var(--header-h-shrinked);border-bottom:var(--border-light)}#site-header .site-title{display:flex;width:120px;transition:all ease-in .2s;overflow:hidden}#site-header .site-title svg{fill:var(--color-txt)}#site-header.is-shrinked .site-title{width:80px !important}#site-header .header-left,#site-header .header-right{width:90px;display:flex;align-items:center;justify-content:flex-end}#site-header .header-center{display:flex;flex-direction:column;align-items:center}#site-header #toggle-lang{list-style:none;display:flex;justify-content:flex-end;gap:.75ch;text-transform:uppercase;color:var(--grey-400);line-height:1;margin:0;padding:0}#site-header #toggle-lang a{text-decoration:none}#site-header #toggle-lang li.is-selected{color:var(--color-txt)}#site-footer{background-color:#000;width:100vw;position:relative;left:calc(var(--padding-body)*-1);padding:calc(var(--padding-body)*2) var(--padding-body)}#site-footer p{margin:calc(var(--spacing)*.5) 0}#site-footer p a{text-decoration:none}#site-footer p a:hover{text-decoration:underline}#site-footer .text-small{font-size:var(--fs-x-small)}#site-footer #socials-list{list-style:none;columns:2;max-width:500px;margin:0}#site-footer #socials-list a{display:flex;align-items:center;gap:1ch;text-decoration:none;height:calc(var(--spacing)*1)}#site-footer #socials-list a::after{content:"↗";color:var(--grey-300)}#site-footer #socials-list .text{line-height:1}#site-footer #socials-list .icon{width:20px;height:20px;position:relative;top:-2px}#site-footer #socials-list svg{display:flex;align-items:center;width:20px;height:20px}@media screen and (max-width: 720px){#site-footer{margin-top:calc(var(--spacing)*2)}#site-footer .footer-socials{margin-top:calc(var(--spacing)*1.5)}#site-footer .footer-mentions{margin-top:calc(var(--spacing)*.5)}#site-footer .footer-mentions p{margin-top:calc(var(--spacing)*2)}}@media screen and (min-width: 720px){#site-footer .footer-container{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--spacing)*2);max-width:1200px;margin:0 auto}#site-footer .footer-mentions{grid-column:span 2;text-align:center}#site-footer .footer-mentions p{font-size:var(--font-size);margin-top:calc(var(--spacing)*2)}}@media screen and (min-width: 1080px){#site-footer .footer-container{column-gap:calc(var(--spacing)*4)}}@media screen and (max-width: 720px){#site-footer .footer-mentions{padding-top:calc(var(--spacing)*1);text-align:center}#site-footer .footer-mentions p{margin-top:0}}[data-template=support] section{display:flex;flex-direction:column;margin:0 auto;padding-bottom:calc(var(--spacing)*.75);margin-bottom:calc(var(--spacing)*.75);border-bottom:var(--border-light)}[data-template=support] #section__hero{margin-top:calc(var(--spacing)*1);display:block}[data-template=support] #section__questions{border-bottom:none}[data-template=support] #section__donation:target{padding-top:calc(var(--header-h)*1.25)}[data-template=support] #section__video{display:flex;flex-direction:column;align-items:center}[data-template=support] #section__video .video-container{display:flex}[data-template=support] #section__video video{width:100%;border:1px solid var(--grey-800);max-height:90vh;display:flex}@media screen and (min-width: 1080px){[data-template=support] main{display:grid;grid-template-columns:50% 50%;grid-template-rows:repeat(4, auto);max-width:1200px;margin:0 auto;padding-bottom:0}[data-template=support] #section__donation{padding-top:calc(var(--spacing)*1)}[data-template=support] #section__donation,[data-template=support] #section__comments{border:none}[data-template=support] #section__baseline{padding:calc(var(--spacing)*.5) 0}[data-template=support] .gauge-container{padding-top:calc(var(--spacing)*1)}[data-template=support] .col-left,[data-template=support] .col-right{padding-top:calc(var(--spacing)*1)}[data-template=support] .col-left{grid-column:1;grid-row:1/5}[data-template=support] .col-right{position:sticky;top:calc(var(--spacing)*2.5);grid-column:2;grid-row:1;overflow:hidden}}@media screen and (max-width: 1080px){[data-template=support] main{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;max-width:600px;margin:0 auto}[data-template=support] section{width:100%}[data-template=support] .col-left,[data-template=support] .col-right{display:contents}[data-template=support] #section__hero{order:1}[data-template=support] #section__donation{order:2}[data-template=support] #section__baseline{order:3}[data-template=support] #section__video{order:4}[data-template=support] #section__comments{order:5}[data-template=support] #section__questions{order:6;margin-bottom:calc(var(--spacing)*2)}}@media screen and (max-height: 670px)and (min-width: 1080px){[data-template=support] .col-left,[data-template=support] .col-right{display:contents}[data-template=support] section{width:100%}[data-template=support] #section__donation{grid-row:1;grid-column:2;position:sticky;top:calc(var(--spacing)*3.75)}[data-template=support] #section__hero{grid-row:1;grid-column:1}[data-template=support] #section__baseline{grid-row:2;grid-column:1}[data-template=support] #section__video{grid-row:3;grid-column:1}[data-template=support] #section__comments{grid-row:4;grid-column:1;border-bottom:var(--border-light)}[data-template=support] #section__questions{grid-row:5;grid-column:1}}#section__donation{display:flex;align-items:center}#section__donation .donation-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:calc(var(--padding-body)*.75);display:none}@media screen and (min-width: 1080px){#section__donation .donation-grid{width:420px}}@media screen and (max-width: 1080px){#section__donation .donation-grid{width:100%;max-width:420px}}#section__donation .donation-grid .donation-btn--full{grid-column:span 2}#section__donation .donation-grid.is-selected{display:grid}#section__donation .donation-btn{background-color:var(--color-txt);color:var(--color-bg);border-radius:var(--radius-small);height:calc(var(--h-block)*2)}#section__donation .donation-btn .bold{font-family:var(--title);font-size:var(--fs-medium);font-weight:var(--fw-bold);margin-bottom:.25em}#section__donation .donation-btn .small{font-family:var(--font);font-weight:var(--fw-medium);font-size:var(--fs-small)}#section__donation .donation-btn:hover{outline:4px solid var(--color-accent);cursor:pointer}.comment-text{font-size:var(--fs-medium);font-weight:var(--fw-medium);line-height:var(--leading-tight);line-height:1.1;max-width:28ch;text-align:center}.comment-name{margin-top:calc(var(--spacing)*.5);text-align:center}.swiper{width:100%;max-width:700px;height:auto;position:relative;padding-bottom:40px}.swiper .swiper-slide{display:flex;flex-direction:column;align-items:center}.swiper .comments-dots{position:absolute;bottom:10px;left:0;width:100%;text-align:center}.swiper .comments-dots .swiper-pagination-bullet{background-color:var(--grey-600);opacity:1}.swiper .comments-dots .swiper-pagination-bullet-active{background-color:var(--color-txt);opacity:1}#section__questions{max-width:700px}#section__questions summary::marker{content:"";display:none}#section__questions summary::-webkit-details-marker{content:"";display:none}#section__questions details{border-bottom:var(--border)}#section__questions details:first-of-type{border-top:var(--border)}#section__questions details summary{padding-top:calc(var(--spacing)*.25 + 2px);padding-bottom:calc(var(--spacing)*.25);cursor:pointer;position:relative;padding-right:2ch}#section__questions details[open] summary::after{content:"✕";position:absolute;right:0}#section__questions details p{margin:calc(var(--spacing)*.5) 0}#section__questions details ul,#section__questions details ol{margin-bottom:calc(var(--spacing)*.5)}#section__video{margin-bottom:calc(var(--spacing)*2)}#section__video .btn-expand{margin-top:calc(var(--spacing)*1);--size: var(--h-block);font-family:var(--font);font-size:var(--fs-small);font-weight:var(--fw-normal);line-height:1;border:var(--border-light);height:var(--size);border-radius:calc(var(--size)/2);padding-left:1.5ch;padding-right:2ch;padding-top:1px;position:relative;cursor:pointer;display:flex;align-items:center;gap:1ch;font-weight:var(--fw-medium);text-decoration:none;cursor:pointer}#section__video .btn-expand:hover{background-color:var(--grey-800);border-color:var(--color-txt)}#section__video .btn-expand svg{fill:var(--color-txt);width:10px;position:relative;top:1px;left:1px}#section__video .testimonies-list{list-style:none;width:100%;margin-top:calc(var(--spacing)*1);display:none}#section__video .testimonies-list .testimony-item{position:relative;padding-left:40px;padding-right:2ch;margin-bottom:calc(var(--spacing)*.75);cursor:pointer}@media screen and (max-width: 520px){#section__video .testimonies-list .testimony-item .desktop-break{display:none}}#section__video .testimonies-list .testimony-item:hover{color:var(--grey-100)}#section__video .testimonies-list .testimony-item .icon{--size: 20px;flex-shrink:0;width:var(--size);height:var(--size);border-radius:calc(var(--size)/2);border:var(--border);display:flex;align-items:center;justify-content:center;position:absolute;left:0px}#section__video .testimonies-list .testimony-item svg{fill:var(--color-txt);width:7px}#section__video #testimonies-toggle{display:none}#section__video #testimonies-toggle:checked~.testimonies-list{display:block}#video__fullscreen{width:100vw;height:100vh;background-color:var(--color-bg);padding:var(--padding-body);position:fixed;top:0px;left:0;z-index:3000}#video__fullscreen iframe{width:90%;height:calc(100vh - 60px);height:calc(100dvh - 60px);border:var(--border)}#video__fullscreen #video__close{height:60px;font-size:20px;width:100%;font-weight:bold;display:flex;align-items:top;justify-content:flex-end;cursor:pointer}body.is-fullscreen{overflow:hidden}[data-template=store] main{margin-bottom:calc(var(--spacing)*2)}[data-template=store] .hero-heading{margin-top:calc(var(--spacing)*2)}[data-template=store] #store__container{margin-top:calc(var(--spacing)*2);margin-bottom:calc(var(--spacing)*4);width:100%;max-width:1000px}[data-template=store] #store__container .store__product{position:relative}[data-template=store] #store__container .store__product figure{aspect-ratio:4/3;background-color:var(--color-bg);background-color:var(--data-bg);margin-bottom:calc(var(--spacing)*.5);overflow:hidden}[data-template=store] #store__container .store__product img{width:100%;height:100%;object-fit:contain;transition:var(--curve) .5s}[data-template=store] #store__container .store__product a{text-decoration:none}[data-template=store] #store__container .store__product .link-block{display:block;height:100%;width:100%;position:absolute;top:0;left:0;cursor:pointer}[data-template=store] #store__container .store__product:hover figure{overflow:hidden}[data-template=store] #store__container .store__product:hover img{transform:scale(1.05)}[data-template=store] #store__container .store__product:hover .line-1{text-decoration:underline}@media screen and (max-width: 720px){[data-template=store] #store__container .store__product{margin-top:calc(var(--spacing)*1.5);margin-bottom:calc(var(--spacing)*.5)}}@media screen and (min-width: 720px){[data-template=store] #store__container{display:grid;grid-template-columns:repeat(6, 1fr);column-gap:calc(var(--padding-body)*.75);row-gap:calc(var(--spacing)*2);margin-left:auto;margin-right:auto}[data-template=store] #store__container .store__product{grid-column:span 2}[data-template=store] #store__container .store__product:nth-of-type(1),[data-template=store] #store__container .store__product:nth-of-type(2){grid-column:span 3}}[data-template=store] #site-footer{margin-top:calc(var(--spacing)*4);padding-top:0px}.section__product,.store__nav{max-width:1000px;margin-left:auto;margin-right:auto}.store__nav{padding-top:calc(var(--spacing)*1)}.store__nav a{text-decoration:none}.store__nav a:hover{text-decoration:underline}.store__nav a::before{content:"← "}.section__product figure{aspect-ratio:1/1}.section__product figure img{width:100%;height:100%;object-fit:contain}.section__product #list-size{list-style:none;display:flex;margin-top:calc(var(--spacing)*.5);margin-bottom:calc(var(--spacing)*.5);gap:2ch}.section__product #list-size li{position:relative}.section__product #list-size li input[type=radio]{position:fixed;opacity:0;pointer-events:none}.section__product #list-size li label{font-family:var(--title);font-size:var(--fs-normal);height:4ch;width:4ch;border-radius:50%;border:var(--border);border-color:transparent;display:flex;align-items:center;justify-content:center;padding-top:0px;cursor:pointer}.section__product #list-size li input[type=radio]:checked+label{border-color:var(--color-txt)}.section__product #list-size li input[type=radio]:not(:checked)+label:hover{border-color:var(--grey-600);background-color:var(--grey-800)}.section__product .hero{margin-bottom:calc(var(--spacing)*1);padding-top:calc(var(--spacing)*.5);border-top:var(--border-light)}.section__product .hero .hero-heading{margin:0;text-align:left}.section__product .add-to-cart,.section__product #list-size{margin:0;border-bottom:var(--border-light);padding:calc(var(--spacing)*.5) 0}@media screen and (max-width: 720px){.store__nav a{padding-top:0;font-size:var(--fs-small)}.section__product{display:flex;flex-direction:column}.section__product .col-left{display:contents}.section__product .hero{margin-top:calc(var(--spacing)*.5);order:1}.section__product figure{order:2;margin-bottom:calc(var(--spacing)*1)}.section__product .details{order:3;margin-bottom:calc(var(--spacing)*1.5)}.section__product .size{border-top:var(--border-light);order:4}.section__product .add-to-cart{order:5}}@media screen and (min-width: 720px){.section__product{display:grid;grid-template-columns:50% 50%;aspect-ratio:2/1;margin-top:calc(var(--spacing)*.5);position:relative}.section__product .col-left{padding-right:var(--padding-body)}.section__product .details{margin-bottom:calc(var(--spacing)*3)}.section__product .add-to-cart,.section__product #list-size{width:calc(50% - var(--padding-body))}.section__product .add-to-cart{position:absolute;bottom:10px}.section__product #list-size{position:absolute;bottom:calc(var(--spacing)*2);border-top:var(--border-light)}}[data-template=thanks] .hero-heading{margin-top:calc(var(--spacing)*3);margin-bottom:calc(var(--spacing)*3)}[data-template=thanks] .subheading{text-align:left;max-width:800px;margin:var(--spacing) auto}[data-template=thanks] .subheading a{color:var(--color-accent);text-decoration:none}[data-template=thanks] .subheading a:hover{text-decoration:underline}[data-template=thanks] #site-footer{border-top:none;margin-top:calc(var(--spacing)*4)}.snipcart-modal__container{z-index:1000}[data-template=subscription-newsletter] main{margin-top:calc(var(--spacing)*2)}[data-template=subscription-newsletter] #form__newsletter__container{max-width:700px;margin:calc(var(--spacing)*3) auto;margin-bottom:calc(var(--spacing)*4)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form{margin:calc(var(--spacing)*1) 0}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form input[type=email]{height:calc(var(--h-block)*1.75);border-radius:calc(var(--h-block)*.875);font-size:var(--fs-medium)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form input[type=email]::placeholder{font-size:var(--fs-medium)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form button[type=submit].btn--bold{--size: calc(var(--h-block)*1.75 - 4px)}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form button[type=submit].btn--bold .icon svg{width:28px}[data-template=subscription-newsletter] #form__newsletter__container .newsletter-form .txt{padding-left:2ch}[data-template=subscription-newsletter] #form__newsletter__container .subheading{max-width:52ch;text-align:left}[data-template=subscription-newsletter] #form__newsletter__container .text-details{color:var(--color-txt);max-width:80ch}[data-template=subscription-newsletter] #site-footer{margin-top:calc(var(--spacing)*4);padding-top:0px} diff --git a/assets/css/template/support/_section--video.scss b/assets/css/template/support/_section--video.scss index d97a627..f99f65f 100644 --- a/assets/css/template/support/_section--video.scss +++ b/assets/css/template/support/_section--video.scss @@ -128,10 +128,10 @@ font-size: 20px; width: 100%; font-weight: bold; - display: flex; + display: flex; align-items: top; justify-content: flex-end; - + cursor: pointer; } } diff --git a/assets/js/onload.js b/assets/js/onload.js index f554713..ab3fbc9 100644 --- a/assets/js/onload.js +++ b/assets/js/onload.js @@ -79,10 +79,16 @@ function videos(){ document.body.classList.add("is-fullscreen"); let close = document.querySelector("#video__close"); - close.addEventListener("click", (event) => { + function closeFullscreen() { div.remove(); document.body.classList.remove("is-fullscreen"); - }); + document.removeEventListener("keydown", onEscape); + } + function onEscape(e) { + if (e.key === "Escape") closeFullscreen(); + } + close.addEventListener("click", closeFullscreen); + document.addEventListener("keydown", onEscape); }); });