Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision

Target

Select target project
  • web-et-numerique/factory/llle_project/ecolyo_landing_page
1 result
Select Git revision
Show changes
Commits on Source (2)
Hide whitespace changes
Inline Side-by-side
index.html
View file @ 2436cd24
......@@ -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>
mentions-legales.css 0 → 100644
View file @ 2436cd24
.main-cta {
overflow-y: hidden; }
.content-txt {
padding: 1rem 0; }
h2 {
margin-top: 1rem; }
mentions-legales.html 0 → 100644
View file @ 2436cd24
<!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>
mentions-legales.scss 0 → 100644
View file @ 2436cd24
.main-cta {
overflow-y: hidden;
}
.content-txt {
padding: 1rem 0;
}
h2 {
margin-top: 1rem;
}
style.css
View file @ 2436cd24
/* 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); } }
style.scss
View file @ 2436cd24
......@@ -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 {
......