From f2d7c41a7f8f57e90dc3b86746ef8aad792dabc1 Mon Sep 17 00:00:00 2001 From: Bastien DUMONT <bdumont@grandlyon.com> Date: Wed, 22 Jun 2022 15:13:44 +0000 Subject: [PATCH] feat(legal notice): add page legal notice --- index.html | 146 ++- mentions-legales.css | 8 + mentions-legales.html | 175 +++ mentions-legales.scss | 11 + style.css | 2785 +++++++++++++++++------------------------ style.scss | 11 +- 6 files changed, 1452 insertions(+), 1684 deletions(-) create mode 100644 mentions-legales.css create mode 100644 mentions-legales.html create mode 100644 mentions-legales.scss diff --git a/index.html b/index.html index c8f56bc..7b16fa1 100644 --- a/index.html +++ b/index.html @@ -42,20 +42,23 @@ /> </div> <p class="text-18-white-padding"> - Ecolyo vous permet de maîtriser vos dépenses énergétiques et d’eau de votre foyer, il vous suffit d'être équipé d'un - compteur Linky et/ou Gazpar et/ou Téléo pour en profiter ! + Ecolyo vous permet de maîtriser vos dépenses énergétiques et d’eau + de votre foyer, il vous suffit d'être équipé d'un compteur Linky + et/ou Gazpar et/ou Téléo pour en profiter ! </p> <p class="text-18-white-padding"> - Vous pourrez alors visualiser vos consommations d'électricité, - de gaz et d'eau au même endroit en euros, en kWh, en litres et à différentes échelles de temps. + Vous pourrez alors visualiser vos consommations d'électricité, de + gaz et d'eau au même endroit en euros, en kWh, en litres et à + différentes échelles de temps. </p> <a - href="https://ecolyo.com/expehiver2022.html" - target="_blank" - class="button robots-nocontent" + href="https://ecolyo.com/expehiver2022.html" + target="_blank" + class="button robots-nocontent" > - <img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez testeur - </a> + <img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez + testeur + </a> </div> <div class="content-img desktop-illu"> <object @@ -116,23 +119,31 @@ </div> </div> <div class="fluid-pipes"> - <img src="assets/fluid-icons-pipes.svg" alt="illustation des fluides"> + <img + src="assets/fluid-icons-pipes.svg" + alt="illustation des fluides" + /> </div> </div> </section> <section class="security" id="security"> <div class="container"> <div class="container-cloud"> - <p class="xl-text">Pour utiliser Ecolyo il vous faut créer - un Cloud personnel Grand Lyon...</p> + <p class="xl-text"> + Pour utiliser Ecolyo il vous faut créer un Cloud personnel Grand + Lyon... + </p> <div class="container-img"> - <img src="assets/icon-shield.svg" alt="logo cloud grand lyon"> + <img src="assets/icon-shield.svg" alt="logo cloud grand lyon" /> </div> - <p class="xl-text">... afin de sécuriser vos données pour que personne, pas même la métropole, n'ait accès à celles-ci.</p> + <p class="xl-text"> + ... afin de sécuriser vos données pour que personne, pas même la + métropole, n'ait accès à celles-ci. + </p> <p class="xs-text"> - Pour utiliser Ecolyo, - il vous faut créer un Cloud personnel Grand Lyon afin de sécuriser vos données pour que personne, pas même la métropole, - ait accès celles-ci. + Pour utiliser Ecolyo, il vous faut créer un Cloud personnel Grand + Lyon afin de sécuriser vos données pour que personne, pas même la + métropole, ait accès celles-ci. </p> </div> </div> @@ -140,19 +151,31 @@ <section class="views-app"> <div class="content"> <div class="fluid-pipes"> - <img src="assets/fluid-pipes-yellow.svg" alt="illustation des fluides"> + <img + src="assets/fluid-pipes-yellow.svg" + alt="illustation des fluides" + /> </div> <div class="screens-container"> <div class="screen consumption"> - <img src="assets/illu-mobile-consumption.svg" alt="ecran d'un smartphone représentant un diagramme à barre"> + <img + src="assets/illu-mobile-consumption.svg" + alt="ecran d'un smartphone représentant un diagramme à barre" + /> <p><span>Visualiser</span> vos consommations</p> </div> <div class="screen challenge"> - <img src="assets/illu-mobile-challenge.svg" alt="ecran d'un smartphone représentant une illustration de simone"> + <img + src="assets/illu-mobile-challenge.svg" + alt="ecran d'un smartphone représentant une illustration de simone" + /> <p><span>Participer</span> à des défis ludiques</p> </div> <div class="screen ecogesture"> - <img src="assets/illu-mobile-ecogesture.svg" alt="ecran d'un smartphone représentant une illustration d'un chat avec un parapluie"> + <img + src="assets/illu-mobile-ecogesture.svg" + alt="ecran d'un smartphone représentant une illustration d'un chat avec un parapluie" + /> <p><span>Consulter</span> des écogestes utiles</p> </div> </div> @@ -161,32 +184,40 @@ <section class="test-ecolyo" id="test-ecolyo"> <div class="content container"> <div class="text-content"> - <h2 class="text-36-white">Tester Ecolyo</h2> - <p class="text-18-white-padding"> - Candidatez à l'expérimentation Ecolyo pour tester le service avant sa sortie grand public. - </p> - <div class="center-button"> - <a - href="https://ecolyo.com/expehiver2022.html" - target="_blank" - class="button robots-nocontent" - > - <img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez testeur - </a> + <h2 class="text-36-white">Tester Ecolyo</h2> + <p class="text-18-white-padding"> + Candidatez à l'expérimentation Ecolyo pour tester le service avant + sa sortie grand public. + </p> + <div class="center-button"> + <a + href="https://ecolyo.com/expehiver2022.html" + target="_blank" + class="button robots-nocontent" + > + <img src="assets/ecolyo-icon.svg" alt="ecolyo-icon" /> Devenez + testeur + </a> + </div> </div> </div> - </div> </section> <section class="cloud-gl" id="cloud"> <div class="content container"> <div class="text-content"> - <img src="assets/icon-gl.svg" alt="logo cloud grand lyon"> + <img src="assets/icon-gl.svg" alt="logo cloud grand lyon" /> <h2>Accès au service</h2> <p class="text-18-white-padding"> - Vous avez déjà un compte mais ne savez plus comment y accéder ? Pas de panique, pour retrouver l'accès à votre cloud - personnel Grand Lyon au sein duquel vous retrouverez Ecolyo, cliquez sur le bouton ci-dessous + Vous avez déjà un compte mais ne savez plus comment y accéder ? Pas + de panique, pour retrouver l'accès à votre cloud personnel Grand + Lyon au sein duquel vous retrouverez Ecolyo, cliquez sur le bouton + ci-dessous </p> - <a href="https://manager.cozygrandlyon.cloud/grdlyon/reminder" target="_blank" class="button robots-nocontent"> + <a + href="https://manager.cozygrandlyon.cloud/grdlyon/reminder" + target="_blank" + class="button robots-nocontent" + > <span>Accéder</span> à mon cloud personnel </a> </div> @@ -197,19 +228,39 @@ <div class="bottom"> <div class="logos-footer"> <div class="container-img"> - <img class="gl" src="assets/logo-grandlyon.svg" alt="logo grandlyon" /> + <img + class="gl" + src="assets/logo-grandlyon.svg" + alt="logo grandlyon" + /> </div> <div class="container-img"> - <img class="gouv" src="assets/logo-gouv.svg" alt="logo gouvernement" /> - <img class="territory" src="assets/logo-territoire.svg" alt="logo banque des territoire" /> - <img class="tiga" src="assets/logo-tiga-white.svg" alt="logo tiga" /> + <img + class="gouv" + src="assets/logo-gouv.svg" + alt="logo gouvernement" + /> + <img + class="territory" + src="assets/logo-territoire.svg" + alt="logo banque des territoire" + /> + <img + class="tiga" + src="assets/logo-tiga-white.svg" + alt="logo tiga" + /> </div> - </div> - <div class="contact"> - <p> - Il vous reste des questions ? - <a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a> + <div> + <div class="contact"> + <p> + Il vous reste des questions ? + <a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a> + </p> + </div> + <p class="legal-notice"> + <a href="mentions-legales.html">mentions légales</a> </p> </div> <div class="info"> @@ -269,6 +320,5 @@ } } }); - </script> </html> diff --git a/mentions-legales.css b/mentions-legales.css new file mode 100644 index 0000000..f3b9c57 --- /dev/null +++ b/mentions-legales.css @@ -0,0 +1,8 @@ +.main-cta { + overflow-y: hidden; } + +.content-txt { + padding: 1rem 0; } + +h2 { + margin-top: 1rem; } diff --git a/mentions-legales.html b/mentions-legales.html new file mode 100644 index 0000000..6a5197d --- /dev/null +++ b/mentions-legales.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta + name="description" + content="Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer." + /> + <link rel="stylesheet" href="./style.css" /> + <link rel="stylesheet" href="./mentions-legales.css" /> + <link + href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" + rel="stylesheet" + /> + <link rel="icon" href="assets/ecolyo-icon.svg" /> + <title>Ecolyo - Mentions légales</title> + </head> + <body> + <nav> + <a class="main-logo" href="/"> + <img src="./assets/logo-with-text.svg" alt="ecolyo-logo-with-text" /> + + <img src="./assets/beta.svg" alt="beta-logo" class="beta-logo" /> + </a> + <div class="links"> + <a class="navlink" href="/#how-it-works">Comment ça marche ?</a> + <a class="navlink" href="/#security">La sécurité</a> + <a class="navlink" href="/#test-ecolyo">Tester Ecolyo</a> + <a class="navlink" href="/#cloud">Accès au service</a> + </div> + </nav> + <section class="main-cta"> + <div class="container"> + <div class="content-txt"> + <h1 class="text-36-white">Mentions légales</h1> + + <h2 class="text-18-white"> + Mentiones légales du site Ecolyo de la Métropole de Lyon + </h2> + <p class="text-16-white-padding"> + Site Ecolyo de la Métropole de Lyon : <a href="www.ecolyo.com" + >www.ecolyo.com</a + ><br /> + Métropole de Lyon - 20 rue du Lac – CS 33569 - 69505 Lyon cedex + 03<br /> + Tél : (33) 4 78 63 40 40 + </p> + <p class="text-16-white-padding"> + <strong>Directrice de publication :</strong> Karine Lambert, + Directrice de la Direction Environnement Écologie, Energie <br /> + <strong> Animation éditoriale, gestion et mise à jour :</strong> + Marion Bertholon, chef de projet à la direction Environnement, + Ecologie, Energie + </p> + <p class="text-16-white-padding"> + <strong>Photographies :</strong> sauf mention contraire, les photos + sont la propriété de la Métropole de Lyon <br /> + <strong>Vidéos :</strong> sauf mention contraire, les vidéos sont la + propriété de la Métropole de Lyon + </p> + <p class="text-16-white-padding"> + <strong>Charte graphique :</strong> www.soprasteria.fr <br /> + <strong>Réalisation technique :</strong> www.soprasteria.fr<br /> + <strong>Maintenance technique :</strong> Délégation Développement + économique, emploi & savoirs - Innovation numérique systèmes + d'information - Usages et services numériques - Développement des + services numériques Ce site est optimisé pour Internet Explorer + (versions 10 et supérieures), Mozilla Firefox (version 31 et + supérieures), Google Chrome version 36 et supérieures), Safari + (version 7 et supérieures). <br /> + <strong>Hébergement :</strong> Solutec / Synaaps - www.solutec.fr<br /> + </p> + + <h2 class="text-18-white">Dispositions légales</h2> + <p class="text-16-white-padding"> + Les divers éléments du site web (la forme, la mise en page, le + fond, la structure …) sont protégés par le droit des dessins et + modèles, le droit d’auteur, le droit des marques ainsi que le droit + à l’image et ils ne peuvent être copiés ou imités en tout ou partie + sauf autorisation expresse de la Métropole de Lyon. <br /> + Toute personne ne respectant pas les dispositions légales + applicables se rend coupable du délit de contrefaçon et est passible + des sanctions pénales prévues par la loi. + </p> + + <h2 class="text-18-white">Droits d'auteurs</h2> + <p class="text-16-white-padding"> + Le présent site constitue une œuvre dont la "Métropole de Lyon" est + l'auteur au sens des articles L. 111.1 et suivants du Code de la + propriété intellectuelle.<br /> + Les photographies, textes, logos, pictogrammes, ainsi que toutes + œuvres intégrées dans le site sont la propriété de la "Métropole de + Lyon" ou de tiers ayant autorisé la "Métropole de Lyon" à les + utiliser. <br /> + Les reproductions, les transmissions, les modifications, les + réutilisations, sur un support papier ou informatique, dudit site et + des œuvres qui y sont reproduites ne sont autorisées que pour un + usage personnel et privé conforme aux dispositions de l'article L + 122-5 du Code de la Propriété Intellectuelle. Ces reproductions + devront ainsi notamment indiquer clairement la source et l'auteur du + site et/ou de ces œuvres multimédias. <br /> + En aucun cas ces reproductions ne sauraient porter préjudice aux + droits des tiers. <br /> + Les reproductions, les transmissions, les modifications, les + réutilisations à des fins publicitaires, commerciales ou + d'information, de tout ou partie du site, sont totalement + interdites.<br /> + </p> + + <h2 class="text-18-white">Logo de la Métropole de Lyon</h2> + <p class="text-16-white-padding"> + Le logo de la Métropole de Lyon ne peut être modifié – proportions, + couleurs, éléments, constituants – et ne peut être sujet à aucune + transformation, animation ou tout autre processus. Le logo de la + Métropole de Lyon ne peut être utilisé et associé qu'aux seules + informations vérifiables. Il ne peut être notamment utilisé que pour + illustrer des relations avec la Métropole de Lyon ou des actions de + sponsorings dûment établies. <br /> + Quel que soit le cas d'espèce, la Métropole de Lyon se réserve le + droit d'approuver ou de désapprouver toute utilisation du logo de la + Métropole de Lyon, pour assurer son utilisation correcte, + conformément à l'éthique, la morale et aux intérêts de la Métropole + de Lyon. Les conditions susmentionnées s'appliquent dans le cadre de + pages web, elles ne font pas référence à l'utilisation du logo dans + tout autre document. La Métropole de Lyon se réserve le droit de + modifier les conditions d'utilisation du logo de la Métropole de + Lyon à tout moment et sans préavis. + </p> + + <h2 class="text-18-white"> + Établissements de liens vers le site www.ecolyo.com + </h2> + <p class="text-16-white-padding"> + La Métropole de Lyon autorise la mise en place d'un lien hypertexte + vers son site www.ecolyo.com pour tous les sites Internet, à + l'exclusion de ceux diffusant des informations à caractère + polémique, pornographique, xénophobe ou pouvant, dans une plus large + mesure porter atteinte à la sensibilité du plus grand nombre.<br /> + Le lien doit aboutir à la page d'accueil du site (home page) et le + site www.ecolyo.com doit apparaître dans une nouvelle fenêtre. Les + pages du site www.ecolyo.com ne doivent en aucun cas être intégrées + à l'intérieur des pages d'un autre site (Frame).<br /> + Dans tous les cas d'espèce, la Métropole de Lyon se réserve le droit + de demander la suppression d'un lien si elle estime que le site + cible ne respecte pas les règles ainsi définies. + </p> + + <h2 class="text-18-white"> + Liens vers des sites tiers depuis le site www.ecolyo.com + </h2> + <p class="text-16-white-padding"> + Les liens hypertextes mis en œuvre au sein du site en direction + d'autres sites et/ou de pages personnelles et d'une manière générale + vers toutes ressources existantes sur internet ne sauraient engager + la responsabilité de la Métropole de Lyon quant aux liens qu'ils + contiennent ou aux changements ou mises à jour qui leur sont + apportés. + </p> + + <h2 class="text-18-white">Mise en garde générale</h2> + <p class="text-16-white-padding"> + Nos services mettent tout en œuvre pour offrir aux visiteurs de ce + site web des informations fiables et vérifiées.<br /> + Cependant, malgré tous les soins apportés, le site peut comporter + des inexactitudes, des défauts de mise à jour ou des erreurs. <br /> + Nous remercions les utilisateurs du site de nous faire part + d'éventuelles omissions, erreurs ou corrections par mail sur la + boite aux lettres du webmestre, ecolyo(at)grandlyon.com + </p> + </div> + </div> + </section> + </body> +</html> diff --git a/mentions-legales.scss b/mentions-legales.scss new file mode 100644 index 0000000..b615b17 --- /dev/null +++ b/mentions-legales.scss @@ -0,0 +1,11 @@ +.main-cta { + overflow-y: hidden; +} + +.content-txt { + padding: 1rem 0; +} + +h2 { + margin-top: 1rem; +} diff --git a/style.css b/style.css index 3fa2d99..3aa9339 100644 --- a/style.css +++ b/style.css @@ -1,811 +1,640 @@ +/* line 2, experimentation-page.scss */ .experimentation-page li { - list-style-type: none; -} + list-style-type: none; } +/* line 5, experimentation-page.scss */ .experimentation-page ul { - padding: 0; -} + padding: 0; } +/* line 8, experimentation-page.scss */ .experimentation-page a { - text-decoration: none; -} + text-decoration: none; } +/* line 11, experimentation-page.scss */ .experimentation-page img { - max-width: 100%; -} + max-width: 100%; } +/* line 14, experimentation-page.scss */ .experimentation-page p { font-size: 1rem; color: rgba(255, 255, 255, 0.9); - line-height: 1.5; -} + line-height: 1.5; } +/* line 19, experimentation-page.scss */ .experimentation-page .green { - color: #4dab9a; -} + color: #4dab9a; } +/* line 22, experimentation-page.scss */ .experimentation-page .orange { - color: #ffa344; -} + color: #ffa344; } +/* line 25, experimentation-page.scss */ .experimentation-page .pink { - color: #e255a1; -} + color: #e255a1; } +/* line 28, experimentation-page.scss */ .experimentation-page .blue { - color: #529cca; -} + color: #529cca; } +/* line 31, experimentation-page.scss */ .experimentation-page .red { - color: #ff7369; -} + color: #ff7369; } +/* line 34, experimentation-page.scss */ .experimentation-page .yellow { - color: #f1c017; -} + color: #f1c017; } +/* line 37, experimentation-page.scss */ .experimentation-page .purple { - color: #9a6dd7; -} + color: #9a6dd7; } +/* line 40, experimentation-page.scss */ .experimentation-page .icon, .experimentation-page .icon-tools::before, .experimentation-page .icon-folded-hands::before, .experimentation-page .icon-star-struck::before, .experimentation-page .icon-light-bulb::before, .experimentation-page .icon-glass::before, .experimentation-page .icon-target::before, .experimentation-page .icon-speak::before, .experimentation-page .icon-wink::before, .experimentation-page .icon-alert::before, .experimentation-page .icon-tree::before, .experimentation-page .icon-note::before, .experimentation-page .icon-wrestling::before, .experimentation-page .icon-microscope::before, .experimentation-page .icon-link::before, .experimentation-page .icon-file-cabinet::before { - padding-left: 0.75rem; -} - -.experimentation-page .icon::before, .experimentation-page .icon-tools::before, .experimentation-page .icon-folded-hands::before, .experimentation-page .icon-star-struck::before, .experimentation-page .icon-light-bulb::before, .experimentation-page .icon-glass::before, .experimentation-page .icon-target::before, .experimentation-page .icon-speak::before, .experimentation-page .icon-wink::before, .experimentation-page .icon-alert::before, .experimentation-page .icon-tree::before, .experimentation-page .icon-note::before, .experimentation-page .icon-wrestling::before, .experimentation-page .icon-microscope::before, .experimentation-page .icon-link::before, .experimentation-page .icon-file-cabinet::before { - content: ""; - display: inline-block; - width: 17px; - height: 17px; -} - -.experimentation-page .icon-tools::before { - background: url("assets/icon-tools.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-folded-hands::before { - background: url("assets/icon-folded-hands.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-star-struck::before { - background: url("assets/icon-star-struck.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-light-bulb::before { - background: url("assets/icon-lightbulb.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-glass::before { - background: url("assets/glass.svg") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-target::before { - background: url("assets/icon-target.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-speak::before { - background: url("assets/icon-speak.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-wink::before { - background: url("assets/icon-wink.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-alert::before { - background: url("assets/icon-alert.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-tree::before { - background: url("assets/icon-tree.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-note::before { - background: url("assets/icon-note.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-wrestling::before { - background: url("assets/icon-wrestling.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-microscope::before { - background: url("assets/icon-microscope.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-link::before { - background: url("assets/icon-link.png") no-repeat; - background-size: contain; -} - -.experimentation-page .icon-file-cabinet::before { - background: url("assets/icon-file-cabinet.png") no-repeat; - background-size: contain; -} - + padding-left: 0.75rem; } + /* line 42, experimentation-page.scss */ + .experimentation-page .icon::before, .experimentation-page .icon-tools::before, .experimentation-page .icon-folded-hands::before, .experimentation-page .icon-star-struck::before, .experimentation-page .icon-light-bulb::before, .experimentation-page .icon-glass::before, .experimentation-page .icon-target::before, .experimentation-page .icon-speak::before, .experimentation-page .icon-wink::before, .experimentation-page .icon-alert::before, .experimentation-page .icon-tree::before, .experimentation-page .icon-note::before, .experimentation-page .icon-wrestling::before, .experimentation-page .icon-microscope::before, .experimentation-page .icon-link::before, .experimentation-page .icon-file-cabinet::before { + content: ""; + display: inline-block; + width: 17px; + height: 17px; } + /* line 48, experimentation-page.scss */ + .experimentation-page .icon-tools::before { + background: url("assets/icon-tools.png") no-repeat; + background-size: contain; } + /* line 53, experimentation-page.scss */ + .experimentation-page .icon-folded-hands::before { + background: url("assets/icon-folded-hands.png") no-repeat; + background-size: contain; } + /* line 58, experimentation-page.scss */ + .experimentation-page .icon-star-struck::before { + background: url("assets/icon-star-struck.png") no-repeat; + background-size: contain; } + /* line 63, experimentation-page.scss */ + .experimentation-page .icon-light-bulb::before { + background: url("assets/icon-lightbulb.png") no-repeat; + background-size: contain; } + /* line 68, experimentation-page.scss */ + .experimentation-page .icon-glass::before { + background: url("assets/glass.svg") no-repeat; + background-size: contain; } + /* line 73, experimentation-page.scss */ + .experimentation-page .icon-target::before { + background: url("assets/icon-target.png") no-repeat; + background-size: contain; } + /* line 78, experimentation-page.scss */ + .experimentation-page .icon-speak::before { + background: url("assets/icon-speak.png") no-repeat; + background-size: contain; } + /* line 83, experimentation-page.scss */ + .experimentation-page .icon-wink::before { + background: url("assets/icon-wink.png") no-repeat; + background-size: contain; } + /* line 88, experimentation-page.scss */ + .experimentation-page .icon-alert::before { + background: url("assets/icon-alert.png") no-repeat; + background-size: contain; } + /* line 93, experimentation-page.scss */ + .experimentation-page .icon-tree::before { + background: url("assets/icon-tree.png") no-repeat; + background-size: contain; } + /* line 98, experimentation-page.scss */ + .experimentation-page .icon-note::before { + background: url("assets/icon-note.png") no-repeat; + background-size: contain; } + /* line 103, experimentation-page.scss */ + .experimentation-page .icon-wrestling::before { + background: url("assets/icon-wrestling.png") no-repeat; + background-size: contain; } + /* line 108, experimentation-page.scss */ + .experimentation-page .icon-microscope::before { + background: url("assets/icon-microscope.png") no-repeat; + background-size: contain; } + /* line 113, experimentation-page.scss */ + .experimentation-page .icon-link::before { + background: url("assets/icon-link.png") no-repeat; + background-size: contain; } + /* line 118, experimentation-page.scss */ + .experimentation-page .icon-file-cabinet::before { + background: url("assets/icon-file-cabinet.png") no-repeat; + background-size: contain; } + +/* line 124, experimentation-page.scss */ .experimentation-page h2, .experimentation-page h3, .experimentation-page h4 { color: #f1c017; padding-bottom: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.07); -} + border-bottom: 1px solid rgba(255, 255, 255, 0.07); } +/* line 131, experimentation-page.scss */ .experimentation-page h2 { font-size: 1.875em; line-height: 1.3; - margin-bottom: 0.75rem; -} + margin-bottom: 0.75rem; } +/* line 136, experimentation-page.scss */ .experimentation-page h3, .experimentation-page h4 { font-size: 1rem; line-height: 1.5; - margin-bottom: 1rem; -} + margin-bottom: 1rem; } +/* line 142, experimentation-page.scss */ .experimentation-page header { height: calc(15vh + 75px); - overflow: hidden; -} - -@media (min-width: 768px) { - .experimentation-page header { - height: calc(20vh + 75px); - } -} - -@media (min-width: 1200px) { - .experimentation-page header { - height: calc(30vh + 80px); - } -} - + overflow: hidden; } + @media (min-width: 768px) { + /* line 142, experimentation-page.scss */ + .experimentation-page header { + height: calc(20vh + 75px); } } + @media (min-width: 1200px) { + /* line 142, experimentation-page.scss */ + .experimentation-page header { + height: calc(30vh + 80px); } } + +/* line 152, experimentation-page.scss */ .experimentation-page .item { border: 1px solid rgba(255, 255, 255, 0.07); - padding: 1rem; -} + padding: 1rem; } +/* line 156, experimentation-page.scss */ .experimentation-page .banner-exp { height: 100%; - width: 100%; -} - -.experimentation-page .banner-exp img { - display: inline-block; - -o-object-fit: cover; - object-fit: cover; - width: 100%; - height: 380px; - -o-object-position: 20% 25%; - object-position: 20% 25%; -} + width: 100%; } + /* line 159, experimentation-page.scss */ + .experimentation-page .banner-exp img { + display: inline-block; + object-fit: cover; + width: 100%; + height: 380px; + object-position: 20% 25%; } +/* line 167, experimentation-page.scss */ .experimentation-page main, .experimentation-page footer { - background: #2f3437; -} + background: #2f3437; } +/* line 171, experimentation-page.scss */ .experimentation-page .wrapper { width: 100%; - padding: 0 1rem; -} - -@media (min-width: 1200px) { - .experimentation-page .wrapper { - max-width: 900px; - margin: 0 auto; - padding: 0 6rem; - } -} - + padding: 0 1rem; } + @media (min-width: 1200px) { + /* line 171, experimentation-page.scss */ + .experimentation-page .wrapper { + max-width: 900px; + margin: 0 auto; + padding: 0 6rem; } } + +/* line 180, experimentation-page.scss */ .experimentation-page h1 { font-size: 2rem; padding-top: 5.2rem; position: relative; - margin-bottom: 2.5rem; -} - -@media (min-width: 768px) { - .experimentation-page h1 { - font-size: 2.5rem; - } -} - -.experimentation-page h1::before { - content: url("assets/glass.svg"); - display: inline-block; - width: 78px; - position: absolute; - top: -44px; - left: 0; -} + margin-bottom: 2.5rem; } + @media (min-width: 768px) { + /* line 180, experimentation-page.scss */ + .experimentation-page h1 { + font-size: 2.5rem; } } + /* line 188, experimentation-page.scss */ + .experimentation-page h1::before { + content: url("assets/glass.svg"); + display: inline-block; + width: 78px; + position: absolute; + top: -44px; + left: 0; } +/* line 198, experimentation-page.scss */ .experimentation-page #intro .title { color: #f1c017; font-size: 1.25rem; margin-bottom: 2rem; font-style: italic; border: none; - padding: 0; -} + padding: 0; } +/* line 206, experimentation-page.scss */ .experimentation-page #intro p:not(.title) { - margin-bottom: 0.5rem; -} + margin-bottom: 0.5rem; } +/* line 209, experimentation-page.scss */ .experimentation-page #intro .list { - margin: 2rem 0; -} - -.experimentation-page #intro .list li { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding-bottom: 1.5rem; -} - -@media (min-width: 768px) { + margin: 2rem 0; } + /* line 211, experimentation-page.scss */ .experimentation-page #intro .list li { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.experimentation-page #intro .list .item { - -ms-flex-preferred-size: 80%; - flex-basis: 80%; - color: #f1c017; - position: relative; - padding: 1rem 1rem 1rem 3rem; -} - -.experimentation-page #intro .list .item::before { - position: absolute; - left: 1rem; - top: 1rem; -} - -.experimentation-page #intro .list .item-img { - -ms-flex-preferred-size: 20%; - flex-basis: 20%; - text-align: center; -} - -.experimentation-page #intro .list .item-img img { - max-width: 72px; -} - + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + padding-bottom: 1.5rem; } + @media (min-width: 768px) { + /* line 211, experimentation-page.scss */ + .experimentation-page #intro .list li { + flex-direction: row; + align-items: center; } } + /* line 221, experimentation-page.scss */ + .experimentation-page #intro .list .item { + flex-basis: 80%; + color: #f1c017; + position: relative; + padding: 1rem 1rem 1rem 3rem; } + /* line 226, experimentation-page.scss */ + .experimentation-page #intro .list .item::before { + position: absolute; + left: 1rem; + top: 1rem; } + /* line 232, experimentation-page.scss */ + .experimentation-page #intro .list .item-img { + flex-basis: 20%; + text-align: center; } + /* line 235, experimentation-page.scss */ + .experimentation-page #intro .list .item-img img { + max-width: 72px; } + +/* line 242, experimentation-page.scss */ .experimentation-page #method .method-container { - margin: 2rem 0; -} + margin: 2rem 0; } +/* line 245, experimentation-page.scss */ .experimentation-page #method .method-number { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + flex-direction: column-reverse; + justify-content: space-between; padding: 0.75rem 0; - margin-bottom: 0.5rem; -} - -@media (min-width: 768px) { - .experimentation-page #method .method-number { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } -} - -.experimentation-page #method .method-number .content { - -ms-flex-preferred-size: 70%; - flex-basis: 70%; -} - -.experimentation-page #method .method-number .number { - text-align: center; - -ms-flex-preferred-size: 30%; - flex-basis: 30%; - font-size: 1.5em; - line-height: 1.3; - color: #f1c017; - font-weight: bold; - margin-bottom: 0.5rem; -} - -@media (min-width: 768px) { + margin-bottom: 0.5rem; } + @media (min-width: 768px) { + /* line 245, experimentation-page.scss */ + .experimentation-page #method .method-number { + flex-direction: row; } } + /* line 254, experimentation-page.scss */ + .experimentation-page #method .method-number .content { + flex-basis: 70%; } + /* line 257, experimentation-page.scss */ .experimentation-page #method .method-number .number { - margin-bottom: 0; - } -} - + text-align: center; + flex-basis: 30%; + font-size: 1.5em; + line-height: 1.3; + color: #f1c017; + font-weight: bold; + margin-bottom: 0.5rem; } + @media (min-width: 768px) { + /* line 257, experimentation-page.scss */ + .experimentation-page #method .method-number .number { + margin-bottom: 0; } } + +/* line 271, experimentation-page.scss */ .experimentation-page #method .tips-frame p { color: #f1c017; font-weight: bold; padding-left: 2rem; - position: relative; -} - -.experimentation-page #method .tips-frame p::before { - position: absolute; - top: 0; - left: 0; -} + position: relative; } + /* line 276, experimentation-page.scss */ + .experimentation-page #method .tips-frame p::before { + position: absolute; + top: 0; + left: 0; } +/* line 283, experimentation-page.scss */ .experimentation-page #method .method-test { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin: 1rem 0; -} - -@media (min-width: 768px) { - .experimentation-page #method .method-test { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } -} - -.experimentation-page #method .method-test .container-img, -.experimentation-page #method .method-test p { - -ms-flex-preferred-size: 48%; - flex-basis: 48%; -} - -.experimentation-page #method .method-test .container-img { - margin-bottom: 0.5rem; -} - -@media (min-width: 768px) { + flex-direction: column; + justify-content: space-between; + margin: 1rem 0; } + @media (min-width: 768px) { + /* line 283, experimentation-page.scss */ + .experimentation-page #method .method-test { + flex-direction: row; } } + /* line 291, experimentation-page.scss */ + .experimentation-page #method .method-test .container-img, + .experimentation-page #method .method-test p { + flex-basis: 48%; } + /* line 295, experimentation-page.scss */ .experimentation-page #method .method-test .container-img { - margin-bottom: 0; - } -} + margin-bottom: 0.5rem; } + @media (min-width: 768px) { + /* line 295, experimentation-page.scss */ + .experimentation-page #method .method-test .container-img { + margin-bottom: 0; } } +/* line 303, experimentation-page.scss */ .experimentation-page .tips-frame { padding: 1rem; - background: rgba(69, 75, 78, 0.3); -} + background: rgba(69, 75, 78, 0.3); } +/* line 308, experimentation-page.scss */ .experimentation-page #results h3 { font-size: 1.25rem; line-height: 1.3; - margin-top: 1.5rem; -} + margin-top: 1.5rem; } +/* line 313, experimentation-page.scss */ .experimentation-page #results .usages { margin: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); - padding-bottom: 0.5rem; -} - -.experimentation-page #results .usages h4 { - margin-bottom: 0.5rem; -} - -.experimentation-page #results .usages p { - font-style: italic; - color: #f1c017; -} - + padding-bottom: 0.5rem; } + /* line 317, experimentation-page.scss */ + .experimentation-page #results .usages h4 { + margin-bottom: 0.5rem; } + /* line 320, experimentation-page.scss */ + .experimentation-page #results .usages p { + font-style: italic; + color: #f1c017; } + +/* line 325, experimentation-page.scss */ .experimentation-page #results .list { - margin: 0.5rem 0; -} + margin: 0.5rem 0; } +/* line 328, experimentation-page.scss */ .experimentation-page #results .item { - margin-bottom: 0.5rem; -} - -.experimentation-page #results .item span, -.experimentation-page #results .item p { - position: relative; - padding-left: 2rem; - display: block; -} - -.experimentation-page #results .item span:before, -.experimentation-page #results .item p:before { - position: absolute; - top: 0; - left: 0; -} - + margin-bottom: 0.5rem; } + /* line 330, experimentation-page.scss */ + .experimentation-page #results .item span, + .experimentation-page #results .item p { + position: relative; + padding-left: 2rem; + display: block; } + /* line 335, experimentation-page.scss */ + .experimentation-page #results .item span:before, + .experimentation-page #results .item p:before { + position: absolute; + top: 0; + left: 0; } + +/* line 342, experimentation-page.scss */ .experimentation-page #results .consumption { - margin-bottom: 2.5rem; -} + margin-bottom: 2.5rem; } +/* line 345, experimentation-page.scss */ .experimentation-page #results .container-habits { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin: 1rem 0 4rem; -} - -@media (min-width: 768px) { - .experimentation-page #results .container-habits { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } -} - -.experimentation-page #results .container-habits img { - margin: 0.5rem 0; -} - + flex-direction: column; + justify-content: space-between; + margin: 1rem 0 4rem; } + @media (min-width: 768px) { + /* line 345, experimentation-page.scss */ + .experimentation-page #results .container-habits { + flex-direction: row; } } + /* line 353, experimentation-page.scss */ + .experimentation-page #results .container-habits img { + margin: 0.5rem 0; } + +/* line 357, experimentation-page.scss */ .experimentation-page #results .col-2 { - -ms-flex-preferred-size: 48%; - flex-basis: 48%; -} + flex-basis: 48%; } +/* line 361, experimentation-page.scss */ .experimentation-page #results .changes .icon-wink { - margin-left: 0.5rem; -} + margin-left: 0.5rem; } +/* line 365, experimentation-page.scss */ .experimentation-page #results .easy { - margin: 2.5rem 0; -} - -.experimentation-page #results .easy .sus { - margin-bottom: 2rem; -} - -.experimentation-page #results .easy .sus-title { - color: #f1c017; - margin: 2rem 0; - font-weight: bold; -} - -.experimentation-page #results .easy .btn-more { - color: #ffa344; - background: none; - border: none; - cursor: pointer; - padding-left: 0; - margin: 1rem 0; - font-size: 1rem; -} - -.experimentation-page #results .easy .btn-more:focus { - outline: none; -} - -.experimentation-page #results .easy .btn-more::before { - content: ""; - display: inline-block; - width: 0; - height: 0; - border-style: solid; - border-width: 5.5px 0 5.5px 9.5px; - border-color: transparent transparent transparent #ffa344; - margin-right: 0.5rem; - -webkit-transition: 0.3s all; - transition: 0.3s all; -} - -.experimentation-page #results .easy .btn-more.arrow-down::before { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); -} - -.experimentation-page #results .easy .info-sus { - display: none; -} - -.experimentation-page #results .easy .info-sus p { - color: #ffa344; - padding-left: 1rem; -} - -.experimentation-page #results .easy .info-sus p:first-child { - margin-bottom: 2.5rem; -} - -.experimentation-page #results .easy .info-sus.collapsed { - display: block; -} - + margin: 2.5rem 0; } + /* line 367, experimentation-page.scss */ + .experimentation-page #results .easy .sus { + margin-bottom: 2rem; } + /* line 370, experimentation-page.scss */ + .experimentation-page #results .easy .sus-title { + color: #f1c017; + margin: 2rem 0; + font-weight: bold; } + /* line 375, experimentation-page.scss */ + .experimentation-page #results .easy .btn-more { + color: #ffa344; + background: none; + border: none; + cursor: pointer; + padding-left: 0; + margin: 1rem 0; + font-size: 1rem; } + /* line 383, experimentation-page.scss */ + .experimentation-page #results .easy .btn-more:focus { + outline: none; } + /* line 386, experimentation-page.scss */ + .experimentation-page #results .easy .btn-more::before { + content: ""; + display: inline-block; + width: 0; + height: 0; + border-style: solid; + border-width: 5.5px 0 5.5px 9.5px; + border-color: transparent transparent transparent #ffa344; + margin-right: 0.5rem; + transition: 0.3s all; } + /* line 397, experimentation-page.scss */ + .experimentation-page #results .easy .btn-more.arrow-down::before { + transform: rotate(90deg); } + /* line 401, experimentation-page.scss */ + .experimentation-page #results .easy .info-sus { + display: none; } + /* line 403, experimentation-page.scss */ + .experimentation-page #results .easy .info-sus p { + color: #ffa344; + padding-left: 1rem; } + /* line 406, experimentation-page.scss */ + .experimentation-page #results .easy .info-sus p:first-child { + margin-bottom: 2.5rem; } + /* line 410, experimentation-page.scss */ + .experimentation-page #results .easy .info-sus.collapsed { + display: block; } + +/* line 415, experimentation-page.scss */ .experimentation-page #results .reasons { - margin: 2rem 0 1rem; -} + margin: 2rem 0 1rem; } +/* line 419, experimentation-page.scss */ .experimentation-page #results .container-alert h4, .experimentation-page #results .container-alert p { - color: #ff7369; -} + color: #ff7369; } +/* line 424, experimentation-page.scss */ .experimentation-page #results .alert { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.experimentation-page #results .alert > div:first-child { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; -} - -.experimentation-page #results .alert > div:last-child { - -ms-flex-preferred-size: 18%; - flex-basis: 18%; - padding-top: 2rem; -} - -.experimentation-page #results .alert .icon-alert:before { - top: 5px; -} - + justify-content: space-between; } + /* line 427, experimentation-page.scss */ + .experimentation-page #results .alert > div:first-child { + flex-basis: 75%; } + /* line 430, experimentation-page.scss */ + .experimentation-page #results .alert > div:last-child { + flex-basis: 18%; + padding-top: 2rem; } + /* line 435, experimentation-page.scss */ + .experimentation-page #results .alert .icon-alert:before { + top: 5px; } + +/* line 441, experimentation-page.scss */ .experimentation-page #results .features ul { - margin: 3rem 0; -} + margin: 3rem 0; } +/* line 447, experimentation-page.scss */ .experimentation-page #tasks .col-task { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + flex-direction: column; + justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 1rem; - margin-bottom: 2rem; -} - -.experimentation-page #tasks .col-task:nth-of-type(1) { - margin-top: 4rem; -} - -.experimentation-page #tasks .col-task .container-img { - -ms-flex-preferred-size: 30%; - flex-basis: 30%; - margin-bottom: 1rem; -} - -@media (min-width: 768px) { + margin-bottom: 2rem; } + /* line 454, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-of-type(1) { + margin-top: 4rem; } + /* line 457, experimentation-page.scss */ .experimentation-page #tasks .col-task .container-img { - margin-bottom: 0; - } -} - -.experimentation-page #tasks .col-task .container-img img { - max-width: 60%; -} - -@media (min-width: 768px) { - .experimentation-page #tasks .col-task .container-img img { - max-width: 100%; - } -} - -.experimentation-page #tasks .col-task .task-content { - -ms-flex-preferred-size: 70%; - flex-basis: 70%; -} - -.experimentation-page #tasks .col-task .item { - margin-bottom: 2rem; -} - -.experimentation-page #tasks .col-task:nth-child(even) { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; -} - -.experimentation-page #tasks .col-task:nth-child(even) .container-img { - padding: 0; - text-align: center; -} - -@media (min-width: 768px) { - .experimentation-page #tasks .col-task:nth-child(even) .container-img { - padding-left: 1rem; - text-align: initial; - } -} - -.experimentation-page #tasks .col-task:nth-child(even) .task-content { - padding: 0; -} - -@media (min-width: 768px) { - .experimentation-page #tasks .col-task:nth-child(even) .task-content { - padding-right: 3rem; - } -} - -.experimentation-page #tasks .col-task:nth-child(odd) { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -.experimentation-page #tasks .col-task:nth-child(odd) .container-img { - padding: 0; - text-align: center; -} - -@media (min-width: 768px) { - .experimentation-page #tasks .col-task:nth-child(odd) .container-img { - padding-right: 1rem; - text-align: initial; - } -} - -.experimentation-page #tasks .col-task:nth-child(odd) .task-content { - padding: 0; -} - -@media (min-width: 768px) { - .experimentation-page #tasks .col-task:nth-child(odd) .task-content { - padding-left: 3rem; - } -} - -@media (min-width: 768px) { - .experimentation-page #tasks .col-task:nth-child(odd), .experimentation-page #tasks .col-task:nth-child(even) { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } -} - + flex-basis: 30%; + margin-bottom: 1rem; } + @media (min-width: 768px) { + /* line 457, experimentation-page.scss */ + .experimentation-page #tasks .col-task .container-img { + margin-bottom: 0; } } + /* line 463, experimentation-page.scss */ + .experimentation-page #tasks .col-task .container-img img { + max-width: 60%; } + @media (min-width: 768px) { + /* line 463, experimentation-page.scss */ + .experimentation-page #tasks .col-task .container-img img { + max-width: 100%; } } + /* line 470, experimentation-page.scss */ + .experimentation-page #tasks .col-task .task-content { + flex-basis: 70%; } + /* line 473, experimentation-page.scss */ + .experimentation-page #tasks .col-task .item { + margin-bottom: 2rem; } + /* line 476, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(even) { + flex-direction: column-reverse; } + /* line 478, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(even) .container-img { + padding: 0; + text-align: center; } + @media (min-width: 768px) { + /* line 478, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(even) .container-img { + padding-left: 1rem; + text-align: initial; } } + /* line 486, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(even) .task-content { + padding: 0; } + @media (min-width: 768px) { + /* line 486, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(even) .task-content { + padding-right: 3rem; } } + /* line 493, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(odd) { + flex-direction: column; } + /* line 495, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(odd) .container-img { + padding: 0; + text-align: center; } + @media (min-width: 768px) { + /* line 495, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(odd) .container-img { + padding-right: 1rem; + text-align: initial; } } + /* line 503, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(odd) .task-content { + padding: 0; } + @media (min-width: 768px) { + /* line 503, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(odd) .task-content { + padding-left: 3rem; } } + @media (min-width: 768px) { + /* line 511, experimentation-page.scss */ + .experimentation-page #tasks .col-task:nth-child(odd), .experimentation-page #tasks .col-task:nth-child(even) { + flex-direction: row; } } + +/* line 518, experimentation-page.scss */ .experimentation-page .container-team { - margin: 3rem 0; -} - -.experimentation-page .container-team .msg { - font-weight: bold; - margin-bottom: 1rem; -} - -.experimentation-page .container-team .yellow { - margin-bottom: 2rem; - font-weight: bold; -} - -.experimentation-page .container-team .text-bold { - font-weight: bold; - margin: 1.5rem 0 3rem; -} - -.experimentation-page .container-team .team { - text-align: right; - font-size: 1.25em; - line-height: 1.3; - font-weight: bold; -} - + margin: 3rem 0; } + /* line 520, experimentation-page.scss */ + .experimentation-page .container-team .msg { + font-weight: bold; + margin-bottom: 1rem; } + /* line 524, experimentation-page.scss */ + .experimentation-page .container-team .yellow { + margin-bottom: 2rem; + font-weight: bold; } + /* line 528, experimentation-page.scss */ + .experimentation-page .container-team .text-bold { + font-weight: bold; + margin: 1.5rem 0 3rem; } + /* line 532, experimentation-page.scss */ + .experimentation-page .container-team .team { + text-align: right; + font-size: 1.25em; + line-height: 1.3; + font-weight: bold; } + +/* line 539, experimentation-page.scss */ .experimentation-page #contact-form { width: 100%; - height: 221px; -} + height: 221px; } +/* line 3, style.scss */ * { margin: 0; line-height: 1; font-family: "Lato", sans-serif; color: white; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} + box-sizing: border-box; } +/* line 10, style.scss */ svg { - overflow: visible; -} + overflow: visible; } +/* line 16, style.scss */ body, html { overflow-x: hidden; - background: #121212; -} + background: #121212; } +/* line 66, style.scss */ .text-18-white { font-weight: 400; color: white; font-size: 1.125rem; - line-height: 1.6rem; -} + line-height: 1.6rem; } +/* line 72, style.scss */ .text-18-white-padding { font-weight: 400; padding-top: 2rem; color: white; font-size: 1.125rem; - line-height: 1.6rem; -} + line-height: 1.6rem; } +/* line 79, style.scss */ .text-18-black-padding { font-weight: 400; padding-top: 2rem; color: #121212; font-size: 1.125rem; - line-height: 1.6rem; -} + line-height: 1.6rem; } +/* line 86, style.scss */ .text-16-black-padding { font-weight: 400; padding-top: 2rem; color: #121212; font-size: 1rem; - line-height: 1.3rem; -} + line-height: 1.3rem; } +/* line 93, style.scss */ .text-18-black { font-weight: 400; color: #121212; font-size: 1.125rem; - line-height: 1.6rem; -} + line-height: 1.6rem; } +/* line 99, style.scss */ .text-36-white { font-weight: 900; - font-size: 2.25rem; -} + font-size: 2.25rem; } +/* line 103, style.scss */ .text-36-black { font-weight: 900; font-size: 2.25rem; - color: #121212; -} + color: #121212; } +/* line 109, style.scss */ nav { height: 80px; width: 100%; @@ -814,1058 +643,748 @@ nav { top: 0; z-index: 100; background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%); - display: -ms-grid; display: grid; justify-items: end; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -ms-grid-columns: 1.2fr 3fr 0.3fr; - grid-template-columns: 1.2fr 3fr 0.3fr; - -webkit-transition: all 300ms ease; - transition: all 300ms ease; -} - -@media all and (max-width: 1200px) { - nav { - height: 75px; - } -} - -nav .main-logo { - -ms-grid-column: 1; - grid-column: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -nav .main-logo .beta-logo { - width: 60px; - margin-left: 0.7rem; -} - -nav .links { - -ms-grid-column: 2; - grid-column: 2; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; align-items: center; -} - -nav .links > a:not(:last-child) { - margin-right: 2.5rem; -} - -nav .links .navlink { - display: inline-block; - margin-right: 1.5rem; - text-decoration: none; - text-align: center; -} - + grid-template-columns: 1.2fr 3fr 0.3fr; + transition: all 300ms ease; } + @media all and (max-width: 1200px) { + /* line 109, style.scss */ + nav { + height: 75px; } } + /* line 126, style.scss */ + nav .main-logo { + grid-column: 1; + display: flex; + align-items: center; } + /* line 130, style.scss */ + nav .main-logo .beta-logo { + width: 60px; + margin-left: 0.7rem; } + /* line 135, style.scss */ + nav .links { + grid-column: 2; + display: flex; + align-items: center; + justify-content: center; + align-items: center; } + /* line 140, style.scss */ + nav .links > a:not(:last-child) { + margin-right: 2.5rem; } + /* line 144, style.scss */ + nav .links .navlink { + display: inline-block; + margin-right: 1.5rem; + text-decoration: none; + text-align: center; } + +/* line 152, style.scss */ .container { - padding: 0 1rem; -} - -@media (min-width: 1200px) { - .container { - padding: 0; - } -} + padding: 0 1rem; } + @media (min-width: 1200px) { + /* line 152, style.scss */ + .container { + padding: 0; } } +/* line 158, style.scss */ .main-cta { min-height: 580px; - background-color: #121212; -} - -.main-cta .container { - max-width: 1200px; - margin: auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - min-height: 580px; - padding-top: 7rem; -} - -@media all and (min-width: 1200px) { + background-color: #121212; } + /* line 161, style.scss */ .main-cta .container { - padding-top: 5rem; - } - .main-cta .container > div:not(:last-child) { - margin-right: 2rem; - } -} - -.main-cta .container .content-txt .button { - cursor: pointer; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-decoration: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - background: #f1c017; - color: #121212; - border-radius: 2px; - width: 100%; - height: 56px; - max-width: -webkit-fit-content; - max-width: -moz-fit-content; - max-width: fit-content; - padding: 1rem; - margin: 2rem 0; - border: 0; - -webkit-transition: all 400ms ease; - transition: all 400ms ease; - font-size: 1.25rem; - text-align: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - font-weight: 700; - background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017; - margin: 2rem auto; -} - -@media all and (min-width: 1200px) { - .main-cta .container .content-txt .button > div:not(:last-child) { - margin-right: 1rem; - } -} - -.main-cta .container .content-txt .button img { - margin-right: 1rem; -} - -.main-cta .container .content-txt .button:hover { - -webkit-box-shadow: 0px 0px 20px 0px #f1c017; - box-shadow: 0px 0px 20px 0px #f1c017; -} - -.main-cta .container .content-txt .button span { - font-weight: 900; -} - -@media (min-width: 1200px) { - .main-cta .container .content-txt .button { - margin: 2rem 0; - } -} - -@media (min-width: 1200px) { - .main-cta .container .content-txt p { - padding-right: 3rem; - } -} - -.main-cta .container .mobile-illu { - display: block; -} - -@media (min-width: 1200px) { - .main-cta .container .mobile-illu { - display: none; - } -} - -.main-cta .container .content-img { - width: 100%; -} - + max-width: 1200px; + margin: auto; + display: flex; + justify-content: center; + align-items: center; + min-height: 580px; + padding-top: 7rem; } + @media all and (min-width: 1200px) { + /* line 161, style.scss */ + .main-cta .container { + padding-top: 5rem; } + /* line 171, style.scss */ + .main-cta .container > div:not(:last-child) { + margin-right: 2rem; } } + /* line 176, style.scss */ + .main-cta .container .content-txt .button { + cursor: pointer; + display: flex; + text-decoration: none; + align-items: center; + justify-content: space-between; + background: #f1c017; + color: #121212; + border-radius: 2px; + width: 100%; + height: 56px; + max-width: fit-content; + padding: 1rem; + margin: 2rem 0; + border: 0; + transition: all 400ms ease; + font-size: 1.25rem; + text-align: center; + justify-content: center; + font-weight: 700; + background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017; + margin: 2rem auto; } + @media all and (min-width: 1200px) { + /* line 41, style.scss */ + .main-cta .container .content-txt .button > div:not(:last-child) { + margin-right: 1rem; } } + /* line 45, style.scss */ + .main-cta .container .content-txt .button img { + margin-right: 1rem; } + /* line 59, style.scss */ + .main-cta .container .content-txt .button:hover { + box-shadow: 0px 0px 20px 0px #f1c017; } + /* line 62, style.scss */ + .main-cta .container .content-txt .button span { + font-weight: 900; } + @media (min-width: 1200px) { + /* line 176, style.scss */ + .main-cta .container .content-txt .button { + margin: 2rem 0; } } + @media (min-width: 1200px) { + /* line 194, style.scss */ + .main-cta .container .content-txt p { + padding-right: 3rem; } } + /* line 199, style.scss */ + .main-cta .container .mobile-illu { + display: block; } + @media (min-width: 1200px) { + /* line 199, style.scss */ + .main-cta .container .mobile-illu { + display: none; } } + /* line 205, style.scss */ + .main-cta .container .content-img { + width: 100%; } + +/* line 210, style.scss */ .explanation { min-height: 680px; background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%); - display: -webkit-box; - display: -ms-flexbox; display: flex; - text-align: center; -} - -.explanation .content { - margin: auto; - width: 100%; - padding-top: 0; -} - -@media (min-width: 1200px) { + text-align: center; } + /* line 219, style.scss */ .explanation .content { - width: auto; - padding-top: 8rem; - } -} - -.explanation .content .compteurs { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin-top: 5rem; -} - -@media all and (min-width: 1200px) { - .explanation .content .compteurs > *:not(:last-child) { - margin-right: 0.8rem; - } -} - -.explanation .content .compteurs span { - color: #a0a0a0; - text-transform: uppercase; - font-size: 1.1rem; -} - -.explanation .content .compteurs .bloc { - width: 280px; - height: 280px; - padding: 0.5rem 0.5rem 1rem 0.5rem; - border: solid 1px; - text-align: center; - background: -webkit-gradient(linear, left top, left bottom, from(#323339), to(#25262b)); - background: linear-gradient(180deg, #323339 0%, #25262b 100%); - -webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55); - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55); - border-radius: 4px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - position: relative; -} - -.explanation .content .compteurs .bloc h3 { - margin-top: 8rem; - font-weight: 900; - font-size: 2rem; -} - -.explanation .content .compteurs .bloc .compteur-img { - max-height: 160px; - position: absolute; - top: -3rem; - left: 0; - right: 0; - margin: auto; -} - -.explanation .content .compteurs .bloc p { - padding-top: 0.5rem; -} - -.explanation .content .compteurs .bloc .provider-logo { - margin-top: auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 35px; -} - -.explanation .content .compteurs .bloc .provider-logo img { - margin: auto; -} - -.explanation .content .compteurs .elec-color { - border-color: rgba(216, 123, 57, 0.4); - -webkit-transition: all 300ms ease; - transition: all 300ms ease; -} - -.explanation .content .compteurs .elec-color:hover { - -webkit-box-shadow: 0 0 10px 0 #d87b39; - box-shadow: 0 0 10px 0 #d87b39; -} - -.explanation .content .compteurs .elec-color h3 { - color: #d87b39; -} - -.explanation .content .compteurs .gaz-color { - border-color: rgba(69, 209, 184, 0.4); - -webkit-transition: all 300ms ease; - transition: all 300ms ease; -} - -.explanation .content .compteurs .gaz-color:hover { - -webkit-box-shadow: 0 0 10px 0 #45d1b8; - box-shadow: 0 0 10px 0 #45d1b8; -} - -.explanation .content .compteurs .gaz-color h3 { - color: #45d1b8; -} - -.explanation .content .compteurs .water-color { - border-color: rgba(58, 152, 236, 0.4); - -webkit-transition: all 300ms ease; - transition: all 300ms ease; -} - -.explanation .content .compteurs .water-color:hover { - -webkit-box-shadow: 0 0 10px 0 #3a98ec; - box-shadow: 0 0 10px 0 #3a98ec; -} - -.explanation .content .compteurs .water-color h3 { - color: #3a98ec; -} - -.explanation .content .fluid-pipes { - margin-top: 1.5rem; -} - -@media (max-width: 1200px) { - .explanation .content .fluid-pipes img { + margin: auto; width: 100%; - } -} - + padding-top: 0; } + @media (min-width: 1200px) { + /* line 219, style.scss */ + .explanation .content { + width: auto; + padding-top: 8rem; } } + /* line 227, style.scss */ + .explanation .content .compteurs { + display: flex; + align-items: center; + justify-content: center; + margin-top: 5rem; } + @media all and (min-width: 1200px) { + /* line 233, style.scss */ + .explanation .content .compteurs > *:not(:last-child) { + margin-right: 0.8rem; } } + /* line 237, style.scss */ + .explanation .content .compteurs span { + color: #a0a0a0; + text-transform: uppercase; + font-size: 1.1rem; } + /* line 242, style.scss */ + .explanation .content .compteurs .bloc { + width: 280px; + height: 280px; + padding: 0.5rem 0.5rem 1rem 0.5rem; + border: solid 1px; + text-align: center; + background: linear-gradient(180deg, #323339 0%, #25262b 100%); + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55); + border-radius: 4px; + display: flex; + flex-direction: column; + position: relative; } + /* line 255, style.scss */ + .explanation .content .compteurs .bloc h3 { + margin-top: 8rem; + font-weight: 900; + font-size: 2rem; } + /* line 260, style.scss */ + .explanation .content .compteurs .bloc .compteur-img { + max-height: 160px; + position: absolute; + top: -3rem; + left: 0; + right: 0; + margin: auto; } + /* line 268, style.scss */ + .explanation .content .compteurs .bloc p { + padding-top: 0.5rem; } + /* line 271, style.scss */ + .explanation .content .compteurs .bloc .provider-logo { + margin-top: auto; + display: flex; + height: 35px; } + /* line 275, style.scss */ + .explanation .content .compteurs .bloc .provider-logo img { + margin: auto; } + /* line 280, style.scss */ + .explanation .content .compteurs .elec-color { + border-color: rgba(216, 123, 57, 0.4); + transition: all 300ms ease; } + /* line 283, style.scss */ + .explanation .content .compteurs .elec-color:hover { + box-shadow: 0 0 10px 0 #d87b39; } + /* line 286, style.scss */ + .explanation .content .compteurs .elec-color h3 { + color: #d87b39; } + /* line 290, style.scss */ + .explanation .content .compteurs .gaz-color { + border-color: rgba(69, 209, 184, 0.4); + transition: all 300ms ease; } + /* line 293, style.scss */ + .explanation .content .compteurs .gaz-color:hover { + box-shadow: 0 0 10px 0 #45d1b8; } + /* line 296, style.scss */ + .explanation .content .compteurs .gaz-color h3 { + color: #45d1b8; } + /* line 300, style.scss */ + .explanation .content .compteurs .water-color { + border-color: rgba(58, 152, 236, 0.4); + transition: all 300ms ease; } + /* line 303, style.scss */ + .explanation .content .compteurs .water-color:hover { + box-shadow: 0 0 10px 0 #3a98ec; } + /* line 306, style.scss */ + .explanation .content .compteurs .water-color h3 { + color: #3a98ec; } + /* line 311, style.scss */ + .explanation .content .fluid-pipes { + margin-top: 1.5rem; } + @media (max-width: 1200px) { + /* line 313, style.scss */ + .explanation .content .fluid-pipes img { + width: 100%; } } + +/* line 321, style.scss */ .security { background: #f1c017; - display: -webkit-box; - display: -ms-flexbox; display: flex; margin-top: -1rem; - position: relative; -} - -.security:before, .security::after { - content: ""; - display: inline-block; - position: absolute; - width: 100%; - height: 10px; - left: 0; - background-image: url("assets/pattern-dot.svg"); - background-color: #b97715; - background-repeat: repeat-x; - background-position: center; - z-index: 1; -} - -.security::before { - top: -0.5rem; -} - -.security:after { - bottom: -0.5rem; -} - -.security .container { - max-width: 1200px; - margin: 0 auto; -} - -.security .container-cloud { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - padding: 7rem 0 2rem; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -@media (min-width: 1200px) { + position: relative; } + /* line 326, style.scss */ + .security:before, .security::after { + content: ""; + display: inline-block; + position: absolute; + width: 100%; + height: 10px; + left: 0; + background-image: url("assets/pattern-dot.svg"); + background-color: #b97715; + background-repeat: repeat-x; + background-position: center; + z-index: 1; } + /* line 340, style.scss */ + .security::before { + top: -0.5rem; } + /* line 343, style.scss */ + .security:after { + bottom: -0.5rem; } + /* line 346, style.scss */ + .security .container { + max-width: 1200px; + margin: 0 auto; } + /* line 350, style.scss */ .security .container-cloud { - padding: 3rem 0; - } -} - -.security p { - color: #121212; - font-size: 1.5rem; - font-weight: 700; - -ms-flex-preferred-size: 40%; - flex-basis: 40%; -} - -.security p:nth-of-type(1) { - text-align: right; -} - -.security .xs-text { - display: block; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - text-align: center; -} - -@media (min-width: 1200px) { + display: flex; + position: relative; + padding: 7rem 0 2rem; + justify-content: space-between; + align-items: center; } + @media (min-width: 1200px) { + /* line 350, style.scss */ + .security .container-cloud { + padding: 3rem 0; } } + /* line 360, style.scss */ + .security p { + color: #121212; + font-size: 1.5rem; + font-weight: 700; + flex-basis: 40%; } + /* line 365, style.scss */ + .security p:nth-of-type(1) { + text-align: right; } + /* line 369, style.scss */ .security .xs-text { - display: none; - } -} - -.security .xl-text { - display: none; -} - -@media (min-width: 1200px) { - .security .xl-text { display: block; - } -} - -.security .container-img { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -@media (max-width: 1200px) { + flex-basis: 100%; + text-align: center; } + @media (min-width: 1200px) { + /* line 369, style.scss */ + .security .xs-text { + display: none; } } + /* line 377, style.scss */ + .security .xl-text { + display: none; } + @media (min-width: 1200px) { + /* line 377, style.scss */ + .security .xl-text { + display: block; } } + /* line 383, style.scss */ .security .container-img { - top: -70px; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - width: 45%; - } -} - -.security .container-img img { - max-width: 192px; - width: 100%; - display: inline-block; -} - + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } + @media (max-width: 1200px) { + /* line 383, style.scss */ + .security .container-img { + top: -70px; + transform: translateX(-50%); + width: 45%; } } + /* line 394, style.scss */ + .security .container-img img { + max-width: 192px; + width: 100%; + display: inline-block; } + +/* line 401, style.scss */ .views-app { background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%); - padding-bottom: 5rem; -} - -@media (max-width: 1200px) { - .views-app { - padding-bottom: 1rem; - } -} - -.views-app .content { - max-width: 945px; - width: 100%; - margin: 0 auto; -} - -.views-app .fluid-pipes { - text-align: center; -} - -@media (max-width: 1200px) { + padding-bottom: 5rem; } + @media (max-width: 1200px) { + /* line 401, style.scss */ + .views-app { + padding-bottom: 1rem; } } + /* line 411, style.scss */ + .views-app .content { + max-width: 945px; + width: 100%; + margin: 0 auto; } + /* line 416, style.scss */ .views-app .fluid-pipes { - display: none; - } -} - -.views-app .screens-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -@media (max-width: 1200px) { + text-align: center; } + @media (max-width: 1200px) { + /* line 416, style.scss */ + .views-app .fluid-pipes { + display: none; } } + /* line 422, style.scss */ .views-app .screens-container { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - margin-top: 0.5rem; - } - .views-app .screens-container .screen { - text-align: center; - padding-top: 6rem; - position: relative; - } - .views-app .screens-container .screen:before, .views-app .screens-container .screen:after { - content: ""; - display: inline-block; - height: 100px; - width: 1px; - background: #f1c017; - position: absolute; - top: 0; - z-index: 1; - } - .views-app .screens-container .screen::before { - left: 48%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - } - .views-app .screens-container .screen::after { - left: 52%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - } - .views-app .screens-container img { - width: 90%; - position: relative; - z-index: 2; - } - .views-app .screens-container p { - margin: 1.5rem 0; - } -} - -.views-app .screens-container .screen:first-child, .views-app .screens-container .screen:last-child { - margin-top: 0; -} - -@media (min-width: 1200px) { - .views-app .screens-container .screen:first-child, .views-app .screens-container .screen:last-child { - margin-top: -4rem; - } -} - -.views-app .screens-container .screen.consumption span { - color: #f1c017; -} - -.views-app .screens-container .screen.challenge span { - color: #61f0f2; -} - -.views-app .screens-container .screen.ecogesture span { - color: #7fd771; -} - -.views-app p { - line-height: 24px; - font-size: 1.25rem; - text-align: center; - margin: 1.5rem 0; -} - -@media (min-width: 1200px) { + display: flex; + justify-content: center; } + @media (max-width: 1200px) { + /* line 422, style.scss */ + .views-app .screens-container { + flex-direction: column; + margin-top: 0.5rem; } + /* line 428, style.scss */ + .views-app .screens-container .screen { + text-align: center; + padding-top: 6rem; + position: relative; } + /* line 432, style.scss */ + .views-app .screens-container .screen:before, .views-app .screens-container .screen:after { + content: ""; + display: inline-block; + height: 100px; + width: 1px; + background: #f1c017; + position: absolute; + top: 0; + z-index: 1; } + /* line 443, style.scss */ + .views-app .screens-container .screen::before { + left: 48%; + transform: translateX(-50%); } + /* line 447, style.scss */ + .views-app .screens-container .screen::after { + left: 52%; + transform: translateX(-50%); } + /* line 452, style.scss */ + .views-app .screens-container img { + width: 90%; + position: relative; + z-index: 2; } + /* line 457, style.scss */ + .views-app .screens-container p { + margin: 1.5rem 0; } } + /* line 462, style.scss */ + .views-app .screens-container .screen:first-child, .views-app .screens-container .screen:last-child { + margin-top: 0; } + @media (min-width: 1200px) { + /* line 462, style.scss */ + .views-app .screens-container .screen:first-child, .views-app .screens-container .screen:last-child { + margin-top: -4rem; } } + /* line 470, style.scss */ + .views-app .screens-container .screen.consumption span { + color: #f1c017; } + /* line 475, style.scss */ + .views-app .screens-container .screen.challenge span { + color: #61f0f2; } + /* line 480, style.scss */ + .views-app .screens-container .screen.ecogesture span { + color: #7fd771; } + /* line 486, style.scss */ .views-app p { - margin: 2rem 0 0; - } -} - -.views-app p span { - display: block; - font-size: 1.5rem; -} - + line-height: 24px; + font-size: 1.25rem; + text-align: center; + margin: 1.5rem 0; } + @media (min-width: 1200px) { + /* line 486, style.scss */ + .views-app p { + margin: 2rem 0 0; } } + /* line 494, style.scss */ + .views-app p span { + display: block; + font-size: 1.5rem; } + +/* line 500, style.scss */ .test-ecolyo { background-color: black; padding: 3.75rem 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-align: center; -} - -.test-ecolyo .container { - max-width: 1200px; - margin: auto; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.test-ecolyo .container .button { - cursor: pointer; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-decoration: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - background: #f1c017; - color: #121212; - border-radius: 2px; - width: 100%; - height: 56px; - max-width: -webkit-fit-content; - max-width: -moz-fit-content; - max-width: fit-content; - padding: 1rem; - margin: 2rem 0; - border: 0; - -webkit-transition: all 400ms ease; - transition: all 400ms ease; - font-size: 1.25rem; - text-align: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - font-weight: 700; - background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017; -} - -@media all and (min-width: 1200px) { - .test-ecolyo .container .button > div:not(:last-child) { - margin-right: 1rem; - } -} - -.test-ecolyo .container .button img { - margin-right: 1rem; -} - -.test-ecolyo .container .button:hover { - -webkit-box-shadow: 0px 0px 20px 0px #f1c017; - box-shadow: 0px 0px 20px 0px #f1c017; -} - -.test-ecolyo .container .button span { - font-weight: 900; -} - -.test-ecolyo .center-button { - margin-top: 1rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} + text-align: center; } + /* line 505, style.scss */ + .test-ecolyo .container { + max-width: 1200px; + margin: auto; + display: flex; + justify-content: center; + align-items: center; } + /* line 511, style.scss */ + .test-ecolyo .container .button { + cursor: pointer; + display: flex; + text-decoration: none; + align-items: center; + justify-content: space-between; + background: #f1c017; + color: #121212; + border-radius: 2px; + width: 100%; + height: 56px; + max-width: fit-content; + padding: 1rem; + margin: 2rem 0; + border: 0; + transition: all 400ms ease; + font-size: 1.25rem; + text-align: center; + justify-content: center; + font-weight: 700; + background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017; } + @media all and (min-width: 1200px) { + /* line 41, style.scss */ + .test-ecolyo .container .button > div:not(:last-child) { + margin-right: 1rem; } } + /* line 45, style.scss */ + .test-ecolyo .container .button img { + margin-right: 1rem; } + /* line 59, style.scss */ + .test-ecolyo .container .button:hover { + box-shadow: 0px 0px 20px 0px #f1c017; } + /* line 62, style.scss */ + .test-ecolyo .container .button span { + font-weight: 900; } + /* line 525, style.scss */ + .test-ecolyo .center-button { + margin-top: 1rem; + display: flex; + justify-content: center; } +/* line 531, style.scss */ .cloud-gl { padding: 2rem 0 3rem; - background: #ffffff; -} - -.cloud-gl .container { - max-width: 1200px; - margin: auto; -} - -.cloud-gl .text-content { - max-width: 689px; - text-align: center; - margin: 0 auto; -} - -.cloud-gl h2, -.cloud-gl p { - color: #121212; -} - -.cloud-gl h2 { - font-size: 1.75rem; - font-weight: 900; - margin: 0.5rem 0 1rem; -} - -.cloud-gl p { - line-height: 1.463rem; - padding: 0; - font-weight: 500; -} - -.cloud-gl .button { - display: inline-block; - background: #ff0101; - text-align: center; - border-radius: 4px; - padding: 0.5rem 1.25rem; - margin-top: 1.25rem; - text-decoration: none; - max-width: 221px; - font-size: 1.125rem; - line-height: 1.238rem; - -webkit-transition: all 0.4s; - transition: all 0.4s; -} - -.cloud-gl .button:hover { - -webkit-box-shadow: 0px 0px 10px 0px #ff0101; - box-shadow: 0px 0px 10px 0px #ff0101; -} - -.cloud-gl .button span { - display: block; -} - + background: #ffffff; } + /* line 534, style.scss */ + .cloud-gl .container { + max-width: 1200px; + margin: auto; } + /* line 538, style.scss */ + .cloud-gl .text-content { + max-width: 689px; + text-align: center; + margin: 0 auto; } + /* line 543, style.scss */ + .cloud-gl h2, + .cloud-gl p { + color: #121212; } + /* line 547, style.scss */ + .cloud-gl h2 { + font-size: 1.75rem; + font-weight: 900; + margin: 0.5rem 0 1rem; } + /* line 552, style.scss */ + .cloud-gl p { + line-height: 1.463rem; + padding: 0; + font-weight: 500; } + /* line 557, style.scss */ + .cloud-gl .button { + display: inline-block; + background: #ff0101; + text-align: center; + border-radius: 4px; + padding: 0.5rem 1.25rem; + margin-top: 1.25rem; + text-decoration: none; + max-width: 221px; + font-size: 1.125rem; + line-height: 1.238rem; + transition: all 0.4s; } + /* line 569, style.scss */ + .cloud-gl .button:hover { + box-shadow: 0px 0px 10px 0px #ff0101; } + /* line 572, style.scss */ + .cloud-gl .button span { + display: block; } + +/* line 577, style.scss */ footer { min-height: 230px; background-color: black; - width: 100%; -} - -footer .content { - padding-top: 5rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - min-height: 230px; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -@media (max-width: 1200px) { + width: 100%; } + /* line 581, style.scss */ footer .content { - padding-top: 2rem; - } -} - -footer .content h2 { - text-align: center; -} - -footer .content .button { - cursor: pointer; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-decoration: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - background: #f1c017; - color: #121212; - border-radius: 2px; - width: 100%; - height: 56px; - max-width: -webkit-fit-content; - max-width: -moz-fit-content; - max-width: fit-content; - padding: 1rem; - margin: 2rem 0; - border: 0; - -webkit-transition: all 400ms ease; - transition: all 400ms ease; - font-size: 1.25rem; - text-align: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - font-weight: 700; - margin-top: -6rem; - background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017; -} - -@media all and (min-width: 1200px) { - footer .content .button > div:not(:last-child) { - margin-right: 1rem; - } -} - -footer .content .button img { - margin-right: 1rem; -} - -footer .content .button:hover { - -webkit-box-shadow: 0px 0px 20px 0px #f1c017; - box-shadow: 0px 0px 20px 0px #f1c017; -} - -footer .content .button span { - font-weight: 900; -} - -footer .content .bottom { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 100%; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 1rem 2rem; -} - -@media (max-width: 1200px) { - footer .content .bottom { - padding: 1rem; - } -} - -footer .content .bottom .logos-footer { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -@media (max-width: 1200px) { - footer .content .bottom .logos-footer { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; + padding-top: 5rem; + display: flex; + flex-direction: column; + align-items: center; + min-height: 230px; + justify-content: space-between; } + @media (max-width: 1200px) { + /* line 581, style.scss */ + footer .content { + padding-top: 2rem; } } + /* line 591, style.scss */ + footer .content h2 { + text-align: center; } + /* line 594, style.scss */ + footer .content .button { + cursor: pointer; + display: flex; + text-decoration: none; + align-items: center; + justify-content: space-between; + background: #f1c017; + color: #121212; + border-radius: 2px; + width: 100%; + height: 56px; + max-width: fit-content; + padding: 1rem; + margin: 2rem 0; + border: 0; + transition: all 400ms ease; + font-size: 1.25rem; + text-align: center; + justify-content: center; + font-weight: 700; + margin-top: -6rem; + background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017; } + @media all and (min-width: 1200px) { + /* line 41, style.scss */ + footer .content .button > div:not(:last-child) { + margin-right: 1rem; } } + /* line 45, style.scss */ + footer .content .button img { + margin-right: 1rem; } + /* line 59, style.scss */ + footer .content .button:hover { + box-shadow: 0px 0px 20px 0px #f1c017; } + /* line 62, style.scss */ + footer .content .button span { + font-weight: 900; } + /* line 608, style.scss */ + footer .content .bottom { + display: flex; + align-items: center; + width: 100%; + justify-content: space-between; + padding: 1rem 2rem; } + @media (max-width: 1200px) { + /* line 608, style.scss */ + footer .content .bottom { + padding: 1rem; } } + /* line 617, style.scss */ + footer .content .bottom .logos-footer { + display: flex; + align-items: center; } + @media (max-width: 1200px) { + /* line 617, style.scss */ + footer .content .bottom .logos-footer { flex-direction: column; - margin-left: 0; - width: 100%; - } -} - -@media (min-width: 1200px) { - footer .content .bottom .logos-footer { - -ms-flex-preferred-size: 33.33%; - flex-basis: 33.33%; - } -} - -footer .content .bottom .logos-footer .container-img:last-child { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -@media (max-width: 1200px) { - footer .content .bottom .logos-footer .container-img:last-child { - width: 100%; - } - footer .content .bottom .logos-footer .container-img:last-child img:not(.tiga) { - width: 31.33%; - margin-right: 5%; - } -} - -footer .content .bottom .logos-footer img:not(.tiga) { - margin-right: 2rem; -} - -footer .content .bottom .logos-footer .gl { - width: 130px; - margin-right: 2rem; -} - -@media (max-width: 1200px) { - footer .content .bottom .logos-footer .gl { - margin-right: 0; - } -} - -footer .content .bottom .logos-footer .tiga { - width: 67px; -} - -@media (max-width: 1200px) { - footer .content .bottom .logos-footer .tiga { - width: 25%; - } -} - -@media (min-width: 1200px) { - footer .content .bottom .contact { - -ms-flex-preferred-size: 33.33%; - flex-basis: 33.33%; - text-align: center; - } -} - -@media (min-width: 1400px) { - footer .content .bottom .contact { - margin-left: -5.5rem; - } -} - -footer .content .bottom .contact a { - color: #f1c017; - font-weight: 700; -} - -@media (max-width: 1200px) { - footer .content .bottom .contact a { - display: block; - margin-top: 1rem; - } -} - -footer .content .info { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin-left: -5rem; -} - -footer .content .info img { - margin-right: 0.3rem; -} - -footer .content .info a { - text-decoration: none; -} - -@media (min-width: 1200px) { - footer .content .info { - -ms-flex-preferred-size: 33.33%; - flex-basis: 33.33%; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - } -} + margin-left: 0; + width: 100%; } } + @media (min-width: 1200px) { + /* line 617, style.scss */ + footer .content .bottom .logos-footer { + flex-basis: 33.33%; } } + /* line 629, style.scss */ + footer .content .bottom .logos-footer .container-img:last-child { + display: flex; + align-items: center; } + @media (max-width: 1200px) { + /* line 629, style.scss */ + footer .content .bottom .logos-footer .container-img:last-child { + width: 100%; } + /* line 634, style.scss */ + footer .content .bottom .logos-footer .container-img:last-child img:not(.tiga) { + width: 31.33%; + margin-right: 5%; } } + /* line 641, style.scss */ + footer .content .bottom .logos-footer img:not(.tiga) { + margin-right: 2rem; } + /* line 644, style.scss */ + footer .content .bottom .logos-footer .gl { + width: 130px; + margin-right: 2rem; } + @media (max-width: 1200px) { + /* line 644, style.scss */ + footer .content .bottom .logos-footer .gl { + margin-right: 0; } } + /* line 651, style.scss */ + footer .content .bottom .logos-footer .tiga { + width: 67px; } + @media (max-width: 1200px) { + /* line 651, style.scss */ + footer .content .bottom .logos-footer .tiga { + width: 25%; } } + @media (min-width: 1200px) { + /* line 658, style.scss */ + footer .content .bottom .contact { + flex-basis: 33.33%; + text-align: center; } } + /* line 663, style.scss */ + footer .content .bottom .contact a { + color: #f1c017; + font-weight: 700; } + @media (max-width: 1200px) { + /* line 663, style.scss */ + footer .content .bottom .contact a { + display: block; + margin-top: 1rem; } } + /* line 672, style.scss */ + footer .content .bottom .legal-notice { + margin-top: 0.5rem; + text-align: center; } + /* line 675, style.scss */ + footer .content .bottom .legal-notice a { + color: #a0a0a0; + font-weight: normal; } + /* line 682, style.scss */ + footer .content .info { + display: flex; + align-items: center; + margin-left: -5rem; } + /* line 685, style.scss */ + footer .content .info img { + margin-right: 0.3rem; } + /* line 689, style.scss */ + footer .content .info a { + text-decoration: none; } + @media (min-width: 1200px) { + /* line 682, style.scss */ + footer .content .info { + flex-basis: 33.33%; + justify-content: flex-end; } } @media all and (max-width: 1200px) { + /* line 701, style.scss */ .text-36-white, .text-36-black { - font-size: 1.85rem; - } + font-size: 1.85rem; } + /* line 705, style.scss */ .navlink { - display: none; - } + display: none; } + /* line 708, style.scss */ nav { - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; - } - nav .button-column .button { - height: 44px; - max-width: 120px; - font-size: 1rem; - text-align: center; - display: none; - } - nav .main-logo { - margin: auto; - } - nav .main-logo img { - max-width: 100px; - } - nav .main-logo img:nth-child(2) { - width: 45px; - } - nav .links { - display: none; - } + grid-template-columns: 1fr; } + /* line 711, style.scss */ + nav .button-column .button { + height: 44px; + max-width: 120px; + font-size: 1rem; + text-align: center; + display: none; } + /* line 720, style.scss */ + nav .main-logo { + margin: auto; } + /* line 722, style.scss */ + nav .main-logo img { + max-width: 100px; } + /* line 724, style.scss */ + nav .main-logo img:nth-child(2) { + width: 45px; } + /* line 729, style.scss */ + nav .links { + display: none; } + /* line 733, style.scss */ .banner p { - margin-left: 0.6rem; - } + margin-left: 0.6rem; } + /* line 737, style.scss */ .main-cta .desktop-illu { - display: none; - } + display: none; } + /* line 741, style.scss */ .main-cta .container .content-img { - min-height: 0; - } - .main-cta .container .content-img .illu { - width: 100%; - margin-left: -0.5rem; - } + min-height: 0; } + /* line 743, style.scss */ + .main-cta .container .content-img .illu { + width: 100%; + margin-left: -0.5rem; } + /* line 750, style.scss */ .explanation { - padding: 4rem 2rem; - } - .explanation .content .compteurs { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .explanation .content .compteurs > div:not(.gaz-color) { - margin-bottom: 2rem; - } - .explanation .content .compteurs span { - margin-bottom: 4rem; - } + padding: 4rem 2rem; } + /* line 753, style.scss */ + .explanation .content .compteurs { + flex-direction: column; } + /* line 755, style.scss */ + .explanation .content .compteurs > div:not(.gaz-color) { + margin-bottom: 2rem; } + /* line 759, style.scss */ + .explanation .content .compteurs span { + margin-bottom: 4rem; } + /* line 766, style.scss */ .security .container .button { width: 100%; font-size: 0.95rem; padding: 1rem; - text-align: center; - } + text-align: center; } + /* line 773, style.scss */ .test-ecolyo { - padding: 2rem 0; - } - .test-ecolyo .content .button { - width: 100%; - font-size: 1.25rem; - padding: 1rem; - text-align: center; - } + padding: 2rem 0; } + /* line 775, style.scss */ + .test-ecolyo .content .button { + width: 100%; + font-size: 1.25rem; + padding: 1rem; + text-align: center; } + /* line 784, style.scss */ footer .content .button { margin-top: 1rem; - margin-bottom: 3rem; - } + margin-bottom: 3rem; } + /* line 788, style.scss */ footer .content .bottom { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - footer .content .bottom > div:not(:last-child) { - margin-bottom: 2rem; - } - footer .content .bottom .contact { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - margin: auto; - text-align: center; - } - footer .content .bottom .logos-footer { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - max-width: 250px; - margin-left: 1.5rem; - } - footer .content .bottom .info { - margin-left: 0; - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; - -webkit-transform: scale(0.8); - transform: scale(0.8); - } -} -/*# sourceMappingURL=style.css.map */ \ No newline at end of file + flex-direction: column; } + /* line 790, style.scss */ + footer .content .bottom > div:not(:last-child) { + margin-bottom: 2rem; } + /* line 793, style.scss */ + footer .content .bottom .contact { + order: 1; + margin: auto; + text-align: center; } + /* line 798, style.scss */ + footer .content .bottom .logos-footer { + order: 2; + max-width: 250px; + margin-left: 1.5rem; } + /* line 803, style.scss */ + footer .content .bottom .info { + margin-left: 0; + order: 3; + transform: scale(0.8); } } diff --git a/style.scss b/style.scss index de039cf..cf638e2 100644 --- a/style.scss +++ b/style.scss @@ -660,9 +660,6 @@ footer { flex-basis: 33.33%; text-align: center; } - @media (min-width: 1400px) { - margin-left: -5.5rem; - } a { color: $yellow; font-weight: 700; @@ -672,6 +669,14 @@ footer { } } } + .legal-notice { + margin-top: 0.5rem; + text-align: center; + a { + color: $grey; + font-weight: normal; + } + } } .info { -- GitLab