Refactor CSS styles and update HTML structure for improved layout and responsiveness
- Updated padding values for sections in custom CSS files to enhance spacing. - Introduced new card styles with hover effects for better user interaction. - Added new gradient card layout in the chill theme for a visually appealing design. - Removed obsolete sector layout and replaced it with a more flexible gradient card layout. - Enhanced feature list layout with improved pagination and sidebar integration. - Created a new shortcode for gradient card sections to streamline feature presentation.
This commit is contained in:
Boris Waaub
@@ -12,6 +12,8 @@ $chill-pink: #D50B51;
|
|||||||
|
|
||||||
$chill-light-blue: #a0dcff;
|
$chill-light-blue: #a0dcff;
|
||||||
|
|
||||||
|
.activity-sector{ --bg-color: #a0dcff; }
|
||||||
|
|
||||||
.badge-generation-document { --badge-color: #D50B51; }
|
.badge-generation-document { --badge-color: #D50B51; }
|
||||||
.badge-rapport-rgpd { --badge-color: #43B09B; }
|
.badge-rapport-rgpd { --badge-color: #43B09B; }
|
||||||
.badge-rapports-statistiques { --badge-color: #C9B99E; }
|
.badge-rapports-statistiques { --badge-color: #C9B99E; }
|
||||||
|
|||||||
+1
-1
@@ -62,7 +62,7 @@ layout: "simple"
|
|||||||
"description": "Pour les structures qui souhaitent déléguer totalement la configuration.",
|
"description": "Pour les structures qui souhaitent déléguer totalement la configuration.",
|
||||||
"featured": true,
|
"featured": true,
|
||||||
"features": [
|
"features": [
|
||||||
"Tout les avantages du pack initial *",
|
"Tous les avantages du pack initial *",
|
||||||
"1 journée de paramétrage supplémentaire"
|
"1 journée de paramétrage supplémentaire"
|
||||||
],
|
],
|
||||||
"additional_description": "* A partir du 4ème utilisateur: 40€ supplémentaire/an.",
|
"additional_description": "* A partir du 4ème utilisateur: 40€ supplémentaire/an.",
|
||||||
|
|||||||
@@ -1,32 +1,51 @@
|
|||||||
---
|
---
|
||||||
title: Installation
|
title: Installation
|
||||||
layout: "simple-card"
|
description: Installation et hébergement de Chill
|
||||||
developers:
|
card: "Chill est un logiciel open-source disponible sous licence libre AGPL. Vous pouvez l'auto-héberger ou faire appel à un prestataire pour son installation et sa maintenance."
|
||||||
title: "Échanger avec les développeurs"
|
bgColor: "activity-sector"
|
||||||
description: "Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill."
|
layout: "gradient-card"
|
||||||
linkDescription: "Pour le rejoindre cliquez sur le lien ci-dessous :"
|
|
||||||
linkLabel: "#chill-social-admin:matrix.org"
|
|
||||||
linkUrl: "https://matrix.to/#/#chill-social-admin:matrix.org"
|
|
||||||
qrLabel: "ou scannez le code QR :"
|
|
||||||
qrImg: "/images/chill-admin.png"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<h3 class="content-subtitle bord-1 mb-2 mt-5">Auto-hébergé</h3>
|
{{< gradient-card-section title="Auto-hébergé" description="Installez Chill sur votre propre serveur à partir des images Docker." >}}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p>Chill est un logiciel open-source disponible sous licence libre AGPL, dont le code source est hébergé sur <a href="https://gitlab.com/Chill-Projet" target="_blank" class="nav-link">son dépôt gitlab</a>.</p>
|
||||||
|
|
||||||
Chill est un logiciel open-source disponible sous licence libre AGPL, dont le code source est hébergé sur <a href="https://gitlab.com/Chill-Projet" target="_blank" class="nav-link">son dépôt gitlab</a>.
|
<p>Avant de l'installer, n'hésitez pas à tester <a href="http://demo.chill.social/" target="_blank" class="nav-link">la démo</a>.</p>
|
||||||
|
|
||||||
Avant de l'installer, n'hésitez pas à tester <a href="http://demo.chill.social/" target="_blank" class="nav-link">la démo</a>.
|
<p>Chill est une application web à installer sur un serveur dédié. L'application est alors disponible pour plusieurs utilisateurs sur une adresse internet, par exemple un sous-domaine du site web de votre organisation.</p>
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
Chill est une application web à installer sur un serveur dédié. L'application est alors disponible pour plusieurs utilisateurs sur une adresse internet, par exemple un sous-domaine du site web de votre organisation.
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
Chill est installable à partir d'images Docker. Moyennant des ressources internes en informatique, vous pouvez installer vous-même Chill en vous référant à la <a href="https://chill.readthedocs.io/en/latest/installation/index.html" target="_blank" class="nav-link"><strong>documentation d'installation</strong></a>.
|
|
||||||
|
|
||||||
La plupart des organisations utilisant Chill passent par un prestataire informatique pour son installation, son hébergement et sa maintenance.
|
<p>Chill est installable à partir d'images Docker. Moyennant des ressources internes en informatique, vous pouvez installer vous-même Chill en vous référant à la documentation d'installation.</p>
|
||||||
|
|
||||||
<h3 class="content-subtitle bord-2 mb-2 mt-5">Par Champs Libres coopérative</h3>
|
<p>La plupart des organisations utilisant Chill passent par un prestataire informatique pour son installation, son hébergement et sa maintenance.</p>
|
||||||
|
|
||||||
- Localisé en Belgique, à Namur
|
<a href="https://chill.readthedocs.io/en/latest/installation/index.html" target="_blank" class="btn btn-primary mt-4">
|
||||||
- Site web: <a href="https://www.champs-libres.coop/page/social/" target="_blank" class="nav-link">Champs-Libres</a>
|
Consulter la documentation d'installation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
{{< gradient-card-section title="Par Champs Libres coopérative" description="Faites appel à Champs Libres pour l'installation, l'hébergement et la maintenance de Chill." >}}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<ul class="list-disc list-inside">
|
||||||
|
<li>Localisé en Belgique, à Namur</li>
|
||||||
|
<li>Hébergement sécurisé et maintenance</li>
|
||||||
|
<li>Support technique professionnel</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="https://www.champs-libres.coop/page/social/" target="_blank" class="btn btn-primary mt-4">
|
||||||
|
Visiter le site de Champs-Libres
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
{{< gradient-card-section title="Échanger avec les développeurs" description="Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill." >}}
|
||||||
|
<div class="flex flex-col items-center gap-4">
|
||||||
|
<p>Pour le rejoindre cliquez sur le lien ci-dessous :</p>
|
||||||
|
<a href="https://matrix.to/#/#chill-social-admin:matrix.org" target="_blank" class="btn btn-primary">
|
||||||
|
#chill-social-admin:matrix.org
|
||||||
|
</a>
|
||||||
|
<p>ou scannez le code QR :</p>
|
||||||
|
<img src="/images/chill-admin.png" alt="QR Code Matrix" class="w-48 h-48">
|
||||||
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
|||||||
@@ -1,29 +1,26 @@
|
|||||||
---
|
---
|
||||||
title: Manuels
|
title: Manuels
|
||||||
layout: "simple-card"
|
description: Manuels d'utilisation de Chill
|
||||||
|
card: "Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs.<br><br>
|
||||||
|
- L'**utilisateur** est le travailleur social qui **utilise Chill dans son quotidien**.<br>
|
||||||
|
- L'**administrateur** est un rôle spécifique, qui peut accéder à une interface d'administration de l'application, lui permettant de régler la **configuration de Chill**"
|
||||||
|
bgColor: "activity-sector"
|
||||||
|
layout: "gradient-card"
|
||||||
---
|
---
|
||||||
|
|
||||||
<h5 class="content-subtitle bord-1 mb-2 mt-5">Manuels d'utilisation de Chill</h5>
|
|
||||||
<div class="mb-4">
|
|
||||||
Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs.
|
|
||||||
|
|
||||||
L'utilisateur est le travailleur social qui utilise Chill dans son quotidien.
|
|
||||||
|
|
||||||
L'administrateur est un rôle spécifique, qui peut accèder à une interface d'administration de l'application, lui permettant de régler la configuration de Chill.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{{< gradient-card-section title="Téléchargement des manuels" description="Accédez aux manuels d'utilisation de Chill pour les administrateurs et les utilisateurs." >}}
|
||||||
<div class="flex flex-col gap-4 items-center">
|
<div class="flex flex-col gap-4 items-center">
|
||||||
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="col text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
|
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="btn btn-primary">
|
||||||
Télecharger le manuel administrateur
|
Télécharger le manuel administrateur
|
||||||
</a>
|
</a>
|
||||||
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
|
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="btn btn-primary">
|
||||||
Télecharger le manuel utilisateur
|
Télécharger le manuel utilisateur
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
{{< gradient-card-section title="Formation des utilisateurs" description="Organisez une journée de formation à l'utilisation de Chill." >}}
|
||||||
<h5 class="content-subtitle bord-2 mb-2 mt-5">Formation des utilisateurs</h5>
|
<a href="/contact" class="btn btn-primary mt-4">Contactez-nous</a>
|
||||||
<div class="mb-4">
|
{{< /gradient-card-section >}}
|
||||||
Renseignez-vous pour organiser une journée de formation à l'utilisation de Chill depuis la <a href="/contact" class="nav-link">page contact</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,32 +1,51 @@
|
|||||||
---
|
---
|
||||||
title: Documentation technique
|
title: Documentation technique
|
||||||
layout: "simple"
|
description: Ressources techniques pour développeurs Chill
|
||||||
developers:
|
card: "Accédez au code source, à la documentation technique et aux outils de développement de Chill."
|
||||||
title: "Échanger avec les développeurs"
|
bgColor: "activity-sector"
|
||||||
description: "Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill."
|
layout: "gradient-card"
|
||||||
linkDescription: "Pour le rejoindre cliquez sur le lien ci-dessous :"
|
|
||||||
linkLabel: "#chill-social-admin:matrix.org"
|
|
||||||
linkUrl: "https://matrix.to/#/#chill-social-admin:matrix.org"
|
|
||||||
qrLabel: "ou scannez le code QR :"
|
|
||||||
qrImg: "/images/chill-admin.png"
|
|
||||||
---
|
---
|
||||||
<div class="max-w-xxl mx-auto p-6 bg-white rounded shadow" >
|
|
||||||
<h3 class="content-subtitle bord-1 mb-2 mt-5">Code source de Chill</h3>
|
|
||||||
Le code source de CHILL est hébergé sur GitLab.
|
|
||||||
|
|
||||||
Le dépôt <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles" target="blank">chill-bundles</a> comporte les fonctionnalités principales de Chill. Ce dépôt est un ensemble de bundles Symfony.
|
{{< gradient-card-section title="Code source de Chill" description="Le code source de Chill est hébergé sur GitLab." >}}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p>Le dépôt <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles" target="_blank">chill-bundles</a> comporte les fonctionnalités principales de Chill. Ce dépôt est un ensemble de bundles Symfony.</p>
|
||||||
|
|
||||||
|
<p>Pour être déployées, il est préférable de les inclure dans une application Symfony en les incluant dans les dépendances Composer. De cette manière, il est aussi possible de personnaliser la configuration et l'exécution de l'application.</p>
|
||||||
|
|
||||||
Pour être déployées, il est préférable de les inclure dans une application Symfony en les incluant dans les dépendances Composer. De cette manière, il est aussi possible de personnaliser la configuration et l'exécution de l'application. La procédure est expliquée dans la <a class="nav-link" href="https://docs.chill.social/en/latest" target="blank"> documentation</a>.
|
<a href="https://gitlab.com/Chill-Projet/chill-bundles" target="_blank" class="btn btn-primary mt-4">
|
||||||
|
Accéder au dépôt GitLab
|
||||||
|
</a>
|
||||||
<h5 class="content-subtitle bord-2 mb-2 mt-5">Issues</h5>
|
|
||||||
|
|
||||||
Les tickets concernant le code de Chill se situent par conséquent dans ce dépôt chill-bundles, voir <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles/-/issues" target="blank"> tickets CHILL</a>.
|
|
||||||
|
|
||||||
|
|
||||||
<h5 class="content-subtitle bord-3 mb-2 mt-5">Documentation technique</h5>
|
|
||||||
|
|
||||||
La documentation technique de Chill se trouve à l'adresse suivante: <a class="nav-link" href="https://docs.chill.social/en/latest/" target="blank">documentation CHILL</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
{{< gradient-card-section title="Issues et tickets" description="Signalez des bugs ou proposez des améliorations." >}}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p>Les tickets concernant le code de Chill se situent dans le dépôt chill-bundles.</p>
|
||||||
|
|
||||||
|
<a href="https://gitlab.com/Chill-Projet/chill-bundles/-/issues" target="_blank" class="btn btn-primary mt-4">
|
||||||
|
Consulter les tickets
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
{{< gradient-card-section title="Documentation technique" description="Consultez la documentation complète pour développeurs." >}}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p>La documentation technique de Chill explique la procédure d'installation, la configuration et le développement de modules personnalisés.</p>
|
||||||
|
|
||||||
|
<a href="https://docs.chill.social/en/latest/" target="_blank" class="btn btn-primary mt-4">
|
||||||
|
Consulter la documentation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
{{< gradient-card-section title="Échanger avec les développeurs" description="Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill." >}}
|
||||||
|
<div class="flex flex-col items-center gap-4">
|
||||||
|
<p>Pour le rejoindre cliquez sur le lien ci-dessous :</p>
|
||||||
|
<a href="https://matrix.to/#/#chill-social-admin:matrix.org" target="_blank" class="btn btn-primary">
|
||||||
|
#chill-social-admin:matrix.org
|
||||||
|
</a>
|
||||||
|
<p>ou scannez le code QR :</p>
|
||||||
|
<img src="/images/chill-admin.png" alt="QR Code Matrix" class="w-48 h-48">
|
||||||
|
</div>
|
||||||
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
|||||||
+11
-18
@@ -1,6 +1,9 @@
|
|||||||
---
|
---
|
||||||
title: "Secteur d'activités"
|
title: "Secteur d'activités"
|
||||||
layout: "sector"
|
description: "Une solution pensée pour le secteur social, dans toute sa diversité"
|
||||||
|
card: "CHILL est une solution complète conçue pour s'adapter aux réalités nombreuses du secteur social. Grâce à sa grande flexibilité, elle répond aux besoins de structures très différentes, quels que soient leur taille ou le public accompagné."
|
||||||
|
layout: "gradient-card"
|
||||||
|
bgColor: "activity-sector"
|
||||||
client_logos:
|
client_logos:
|
||||||
- name: "amli"
|
- name: "amli"
|
||||||
logo: "/images/logos/amli.png"
|
logo: "/images/logos/amli.png"
|
||||||
@@ -50,23 +53,13 @@ client_logos:
|
|||||||
logo: "/images/logos/vendée.png"
|
logo: "/images/logos/vendée.png"
|
||||||
---
|
---
|
||||||
|
|
||||||
{{< section-container class="bg-gradient-to-b from-secondary-50 via-secondary-50 to-white pt-20 pb-32" >}}
|
|
||||||
<div class="text-center">
|
|
||||||
<h1 class="text-4xl md:text-5xl font-bold mb-6">Secteur d'activités</h1>
|
|
||||||
<p class="text-xl text-gray-600 mb-16">Une solution pensée pour le secteur social, dans toute sa diversité</p>
|
|
||||||
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm p-8">
|
|
||||||
<p class="text-xl text-gray-600">
|
|
||||||
CHILL est une solution complète conçue pour s’adapter aux réalités nombreuses du secteur social. Grâce à sa grande flexibilité, elle répond aux besoins de structures très différentes, quels que soient leur taille ou le public accompagné.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{< /section-container >}}
|
|
||||||
|
|
||||||
{{< sector-section title="CHILL, un logiciel ancré dans les valeurs du social" description="CHILL est édité par **Champs Libres**, une **coopérative belge à finalité sociale** active depuis plusieurs années dans le développement de solutions numériques orientées vers l’utilité sociale et collective. Champs Libres promeut le **logiciel libre** et travaille régulièrement avec des organisations du secteur non marchand, des pouvoirs publics et des associations, en développant des outils qui répondent aux besoins réels des utilisateurs et favorisent le partage et la réutilisation du code pour le bien commun.">}}
|
|
||||||
|
{{< gradient-card-section title="CHILL, un logiciel ancré dans les valeurs du social" gradient-card="CHILL est édité par **Champs Libres**, une **coopérative belge à finalité sociale** active depuis plusieurs années dans le développement de solutions numériques orientées vers l’utilité sociale et collective. Champs Libres promeut le **logiciel libre** et travaille régulièrement avec des organisations du secteur non marchand, des pouvoirs publics et des associations, en développant des outils qui répondent aux besoins réels des utilisateurs et favorisent le partage et la réutilisation du code pour le bien commun.">}}
|
||||||
Cette approche pragmatique et éthique signifie que CHILL n’est pas seulement un outil : c’est un projet qui s’est construit <b>avec et pour les travailleurs sociaux</b>, en s’appuyant sur une compréhension profonde des pratiques professionnelles et des défis du terrain.
|
Cette approche pragmatique et éthique signifie que CHILL n’est pas seulement un outil : c’est un projet qui s’est construit <b>avec et pour les travailleurs sociaux</b>, en s’appuyant sur une compréhension profonde des pratiques professionnelles et des défis du terrain.
|
||||||
{{< /sector-section >}}
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
{{< sector-section title="Des domaines d’action variés" description="CHILL est aujourd’hui utilisé dans de nombreux secteurs de l’action sociale">}}
|
{{< gradient-card-section title="Des domaines d’action variés" description="CHILL est aujourd’hui utilisé dans de nombreux secteurs de l’action sociale">}}
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
{{< value-card
|
{{< value-card
|
||||||
@@ -94,11 +87,11 @@ Cette approche pragmatique et éthique signifie que CHILL n’est pas seulement
|
|||||||
icon="/images/sectors/home-heart.svg"
|
icon="/images/sectors/home-heart.svg"
|
||||||
>}}
|
>}}
|
||||||
</div>
|
</div>
|
||||||
{{< /sector-section >}}
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
{{< sector-section title="Une solution adaptée à toutes les organisations" description="Que vous soyez une petite structure locale ou une organisation plus large regroupant plusieurs dizaines, voire centaines de travailleurs sociaux, CHILL s’adapte à votre fonctionnement et à vos pratiques de terrain.">}}
|
{{< gradient-card-section title="Une solution adaptée à toutes les organisations" description="Que vous soyez une petite structure locale ou une organisation plus large regroupant plusieurs dizaines, voire centaines de travailleurs sociaux, CHILL s’adapte à votre fonctionnement et à vos pratiques de terrain.">}}
|
||||||
{{< client-logos title="Ils font déjà confiance à CHILL" >}}
|
{{< client-logos title="Ils font déjà confiance à CHILL" >}}
|
||||||
{{< /sector-section >}}
|
{{< /gradient-card-section >}}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+131
-241
@@ -1,114 +1,89 @@
|
|||||||
|
.activity-sector {
|
||||||
|
--bg-color: #a0dcff; }
|
||||||
|
|
||||||
.badge-generation-document {
|
.badge-generation-document {
|
||||||
--badge-color: #D50B51;
|
--badge-color: #D50B51; }
|
||||||
}
|
|
||||||
|
|
||||||
.badge-rapport-rgpd {
|
.badge-rapport-rgpd {
|
||||||
--badge-color: #43B09B;
|
--badge-color: #43B09B; }
|
||||||
}
|
|
||||||
|
|
||||||
.badge-rapports-statistiques {
|
.badge-rapports-statistiques {
|
||||||
--badge-color: #C9B99E;
|
--badge-color: #C9B99E; }
|
||||||
}
|
|
||||||
|
|
||||||
.badge-suivi-accompagnements {
|
.badge-suivi-accompagnements {
|
||||||
--badge-color: #EDC74B;
|
--badge-color: #EDC74B; }
|
||||||
}
|
|
||||||
|
|
||||||
.badge-suivi-decisions {
|
.badge-suivi-decisions {
|
||||||
--badge-color: #a0dcff;
|
--badge-color: #a0dcff; }
|
||||||
}
|
|
||||||
|
|
||||||
.badge-suivi-usagers {
|
.badge-suivi-usagers {
|
||||||
--badge-color: #333333;
|
--badge-color: #333333; }
|
||||||
}
|
|
||||||
|
|
||||||
.badge-rendez-vous {
|
.badge-rendez-vous {
|
||||||
--badge-color: #E27A3E;
|
--badge-color: #E27A3E; }
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Lato", Arial;
|
font-family: 'Lato', Arial;
|
||||||
src: url("assets/fonts/Lato/Lato-Regular.ttf") format("truetype");
|
src: url("assets/fonts/Lato/Lato-Regular.ttf") format("truetype");
|
||||||
font-display: optional;
|
font-display: optional;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal; }
|
||||||
}
|
|
||||||
body {
|
body {
|
||||||
font-family: "Lato", sans-serif;
|
font-family: 'Lato', sans-serif; }
|
||||||
}
|
|
||||||
body .highlight {
|
body .highlight {
|
||||||
padding: 0.25rem;
|
padding: .25rem; }
|
||||||
}
|
|
||||||
body .highlight-1 {
|
body .highlight-1 {
|
||||||
background-color: #43B09B;
|
background-color: #43B09B; }
|
||||||
}
|
|
||||||
body .highlight-2 {
|
body .highlight-2 {
|
||||||
background-color: #D50B51;
|
background-color: #D50B51; }
|
||||||
}
|
|
||||||
body .highlight-3 {
|
body .highlight-3 {
|
||||||
background-color: #EDC74B;
|
background-color: #EDC74B; }
|
||||||
}
|
|
||||||
|
|
||||||
header.header {
|
header.header {
|
||||||
background-color: #0d242e;
|
background-color: #0d242e; }
|
||||||
}
|
|
||||||
|
|
||||||
footer.footer {
|
footer.footer {
|
||||||
background-color: #0d242e;
|
background-color: #0d242e; }
|
||||||
}
|
|
||||||
|
|
||||||
.chill-pres {
|
.chill-pres {
|
||||||
padding-top: 0rem;
|
padding-top: 0rem; }
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .btn-primary {
|
.navbar .btn-primary {
|
||||||
background-color: #f46839;
|
background-color: #f46839;
|
||||||
border: 1px solid #f46839;
|
border: 1px solid #f46839;
|
||||||
color: white;
|
color: white; }
|
||||||
}
|
|
||||||
.navbar .btn-primary:hover {
|
.navbar .btn-primary:hover {
|
||||||
background-color: #E27A3E;
|
background-color: #E27A3E;
|
||||||
border: 1px solid #E27A3E;
|
border: 1px solid #E27A3E; }
|
||||||
}
|
|
||||||
.navbar .lang-select {
|
.navbar .lang-select {
|
||||||
color: white;
|
color: white; }
|
||||||
}
|
|
||||||
|
|
||||||
section.hero {
|
section.hero {
|
||||||
background-color: #0d242e;
|
background-color: #0d242e; }
|
||||||
}
|
|
||||||
section.hero h1 {
|
section.hero h1 {
|
||||||
color: #43B09B;
|
color: #43B09B; }
|
||||||
}
|
|
||||||
section.section-1 {
|
section.section-1 {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding-top: 10rem;
|
padding-top: 10rem; }
|
||||||
}
|
|
||||||
section.section-1 li {
|
section.section-1 li {
|
||||||
font-weight: 600;
|
font-weight: 600; }
|
||||||
}
|
section.section-2 {
|
||||||
|
background: #e9e3d8;
|
||||||
|
background: linear-gradient(180deg, #e9e3d8 0%, #efefef 100%); }
|
||||||
section.section-2 .container {
|
section.section-2 .container {
|
||||||
color: #0d242e;
|
color: #0d242e;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 4rem;
|
margin-top: 4rem; }
|
||||||
}
|
|
||||||
section.section-2 .container h2 {
|
section.section-2 .container h2 {
|
||||||
line-height: 3.5rem;
|
line-height: 3.5rem; }
|
||||||
}
|
|
||||||
section.section-2 {
|
|
||||||
background: rgb(233, 227, 216);
|
|
||||||
background: linear-gradient(180deg, rgb(233, 227, 216) 0%, rgb(239, 239, 239) 100%);
|
|
||||||
}
|
|
||||||
section.section-3 {
|
section.section-3 {
|
||||||
background: rgb(239, 239, 239);
|
background: #efefef;
|
||||||
background: linear-gradient(180deg, rgb(239, 239, 239) 0%, rgb(255, 255, 255) 100%);
|
background: linear-gradient(180deg, #efefef 0%, white 100%); }
|
||||||
}
|
|
||||||
section.section-3 h2 {
|
section.section-3 h2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1; }
|
||||||
}
|
|
||||||
section.section-3 h2:before {
|
section.section-3 h2:before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
@@ -118,43 +93,35 @@ section.section-3 h2:before {
|
|||||||
background-color: #f46839;
|
background-color: #f46839;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
border-radius: 50px;
|
border-radius: 50px; }
|
||||||
}
|
|
||||||
section.section-4 {
|
section.section-4 {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: white;
|
background-color: white; }
|
||||||
}
|
|
||||||
section.section-4 .row {
|
section.section-4 .row {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem; }
|
||||||
}
|
|
||||||
section.section-4 h4 {
|
section.section-4 h4 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 175px;
|
height: 175px;
|
||||||
color: #0d242e;
|
color: #0d242e;
|
||||||
border: 1px dashed #0d242e;
|
border: 1px dashed #0d242e;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 3rem;
|
padding: 3rem; }
|
||||||
}
|
|
||||||
section.section-4 .btn-primary {
|
section.section-4 .btn-primary {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 52%;
|
top: 52%;
|
||||||
left: 28%;
|
left: 28%; }
|
||||||
}
|
|
||||||
section.section-5 {
|
section.section-5 {
|
||||||
background-color: rgba(67, 176, 155, 0.5);
|
background-color: rgba(67, 176, 155, 0.5); }
|
||||||
}
|
|
||||||
section.section-6 {
|
section.section-6 {
|
||||||
background-color: #0d242e !important;
|
background-color: #0d242e !important;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-image: url("/images/bg/pattern-1.png");
|
background-image: url("/images/bg/pattern-1.png"); }
|
||||||
}
|
|
||||||
section.section-7 h2 {
|
section.section-7 h2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1; }
|
||||||
}
|
|
||||||
section.section-7 h2:before {
|
section.section-7 h2:before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
@@ -164,48 +131,38 @@ section.section-7 h2:before {
|
|||||||
background-color: #fcc958;
|
background-color: #fcc958;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
border-radius: 0;
|
border-radius: 0; }
|
||||||
}
|
|
||||||
|
|
||||||
section h2.title {
|
section h2.title {
|
||||||
color: #0d242e;
|
color: #0d242e; }
|
||||||
}
|
|
||||||
section.big-text h2, section.big-text p, section.li-block h2, section.li-block p {
|
section.big-text h2, section.big-text p, section.li-block h2, section.li-block p {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto; }
|
||||||
}
|
|
||||||
section.big-text .container .row > div:last-child {
|
section.big-text .container .row > div:last-child {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-left: 10%;
|
margin-left: 10%; }
|
||||||
}
|
|
||||||
section.li-block .container .row > div:last-child {
|
section.li-block .container .row > div:last-child {
|
||||||
width: 100%;
|
width: 100%; }
|
||||||
}
|
|
||||||
section.li-block .container .row > div ul {
|
section.li-block .container .row > div ul {
|
||||||
display: flex;
|
display: flex; }
|
||||||
}
|
|
||||||
section.li-block .container .row > div ul li i:first-child {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
section.li-block .container .row > div ul li {
|
section.li-block .container .row > div ul li {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
margin: 0.5em 2rem 0.5em 2rem;
|
margin: 0.5em 2rem 0.5em 2rem;
|
||||||
padding: 2em 1em 1em 1em;
|
padding: 2em 1em 1em 1em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 20px;
|
border-radius: 20px; }
|
||||||
}
|
section.li-block .container .row > div ul li i:first-child {
|
||||||
|
display: none; }
|
||||||
section.li-block.section-1 ul li {
|
section.li-block.section-1 ul li {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
position: relative;
|
position: relative; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(1) {
|
section.li-block.section-1 ul li:nth-child(1) {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(1):before {
|
section.li-block.section-1 ul li:nth-child(1):before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
@@ -215,14 +172,12 @@ section.li-block.section-1 ul li:nth-child(1):before {
|
|||||||
background-color: #56c4aa;
|
background-color: #56c4aa;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
border-radius: 0;
|
border-radius: 0; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(2) {
|
section.li-block.section-1 ul li:nth-child(2) {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(2):before {
|
section.li-block.section-1 ul li:nth-child(2):before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
@@ -232,14 +187,12 @@ section.li-block.section-1 ul li:nth-child(2):before {
|
|||||||
background-color: #f0384d;
|
background-color: #f0384d;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
border-radius: 50px;
|
border-radius: 50px; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(3) {
|
section.li-block.section-1 ul li:nth-child(3) {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(3):before {
|
section.li-block.section-1 ul li:nth-child(3):before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
@@ -249,14 +202,12 @@ section.li-block.section-1 ul li:nth-child(3):before {
|
|||||||
background-color: #E27A3E;
|
background-color: #E27A3E;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
border-radius: 0;
|
border-radius: 0; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(4) {
|
section.li-block.section-1 ul li:nth-child(4) {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(4):before {
|
section.li-block.section-1 ul li:nth-child(4):before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
@@ -266,23 +217,20 @@ section.li-block.section-1 ul li:nth-child(4):before {
|
|||||||
background-color: #fcc958;
|
background-color: #fcc958;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
border-radius: 50px;
|
border-radius: 50px; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row p {
|
section.li-block.section-5 .container .row p {
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li {
|
section.li-block.section-5 .container .row ul li {
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
padding: 0.85rem;
|
padding: .85rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: 0.6s ease-in;
|
transition: 0.6s ease-in; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li::before {
|
section.li-block.section-5 .container .row ul li::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -294,77 +242,58 @@ section.li-block.section-5 .container .row ul li::before {
|
|||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
transition: transform 0.25s ease-out;
|
transition: transform 0.25s ease-out; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li:nth-child(1)::before {
|
section.li-block.section-5 .container .row ul li:nth-child(1)::before {
|
||||||
background-color: rgba(240, 56, 77, 0.85);
|
background-color: rgba(240, 56, 77, 0.85); }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li:nth-child(2)::before {
|
section.li-block.section-5 .container .row ul li:nth-child(2)::before {
|
||||||
background-color: rgba(232, 148, 99, 0.85);
|
background-color: rgba(232, 148, 99, 0.85); }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li:nth-child(3)::before {
|
section.li-block.section-5 .container .row ul li:nth-child(3)::before {
|
||||||
background-color: rgba(67, 178, 157, 0.85);
|
background-color: rgba(67, 178, 157, 0.85); }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li:nth-child(4)::before {
|
section.li-block.section-5 .container .row ul li:nth-child(4)::before {
|
||||||
background-color: rgb(241, 210, 117);
|
background-color: #f1d275; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li:hover::before {
|
section.li-block.section-5 .container .row ul li:hover::before {
|
||||||
transition-delay: 0.2s;
|
transition-delay: 0.2s;
|
||||||
transform: scale(40);
|
transform: scale(40); }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li:hover {
|
section.li-block.section-5 .container .row ul li:hover {
|
||||||
color: #ffffff;
|
color: #ffffff; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li:hover h5 {
|
section.li-block.section-5 .container .row ul li:hover h5 {
|
||||||
color: #EBEBEB;
|
color: #EBEBEB; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li h5 {
|
section.li-block.section-5 .container .row ul li h5 {
|
||||||
color: #0d242e;
|
color: #0d242e;
|
||||||
font-weight: bold;
|
font-weight: bold; }
|
||||||
}
|
|
||||||
section.li-block a.btn-chill {
|
section.li-block a.btn-chill {
|
||||||
background-color: #fc3636;
|
background-color: #fc3636; }
|
||||||
}
|
|
||||||
|
|
||||||
.download {
|
.download {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
display: block;
|
display: block; }
|
||||||
}
|
|
||||||
.download a {
|
.download a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 0.5rem;
|
padding: .5rem; }
|
||||||
}
|
|
||||||
|
|
||||||
section.dark p {
|
section.dark p {
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bolder;
|
font-weight: bolder; }
|
||||||
}
|
|
||||||
|
|
||||||
.hop {
|
.hop {
|
||||||
color: red;
|
color: red; }
|
||||||
}
|
|
||||||
|
|
||||||
.content-subtitle {
|
.content-subtitle {
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
font-weight: bold;
|
font-weight: bold; }
|
||||||
}
|
|
||||||
|
|
||||||
.bord-1 {
|
.bord-1 {
|
||||||
border-left: 4px solid #E27A3E;
|
border-left: 4px solid #E27A3E; }
|
||||||
}
|
|
||||||
|
|
||||||
.bord-2 {
|
.bord-2 {
|
||||||
border-left: 4px solid #C9B99E;
|
border-left: 4px solid #C9B99E; }
|
||||||
}
|
|
||||||
|
|
||||||
.bord-3 {
|
.bord-3 {
|
||||||
border-left: 4px solid #EDC74B;
|
border-left: 4px solid #EDC74B; }
|
||||||
}
|
|
||||||
|
|
||||||
.bord-4 {
|
.bord-4 {
|
||||||
border-left: 4px solid #43B09B;
|
border-left: 4px solid #43B09B; }
|
||||||
}
|
|
||||||
|
|
||||||
.chapo {
|
.chapo {
|
||||||
font-size: large;
|
font-size: large;
|
||||||
@@ -373,10 +302,9 @@ section.dark p {
|
|||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem; }
|
||||||
}
|
|
||||||
.chapo::after {
|
.chapo::after {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -384,133 +312,95 @@ section.dark p {
|
|||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
width: 15%;
|
width: 15%;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background: #DE4849;
|
background: #DE4849; }
|
||||||
}
|
|
||||||
|
|
||||||
figure.image {
|
figure.image {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column; }
|
||||||
}
|
|
||||||
figure.image.left {
|
figure.image.left {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 1.5em;
|
margin-right: 1.5em; }
|
||||||
}
|
|
||||||
figure.image.right {
|
figure.image.right {
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: 1.5em;
|
margin-left: 1.5em; }
|
||||||
}
|
|
||||||
figure.image.center {
|
figure.image.center {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center; }
|
||||||
}
|
|
||||||
figure.image img {
|
figure.image img {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0; }
|
||||||
}
|
|
||||||
.text-brochure {
|
.text-brochure {
|
||||||
text-align: center;
|
text-align: center; }
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1536px) {
|
@media screen and (max-width: 1536px) {
|
||||||
section.li-block.section-5 .container .row ul {
|
section.li-block.section-5 .container .row ul {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li {
|
section.li-block.section-5 .container .row ul li {
|
||||||
flex: 30%;
|
flex: 30%; } }
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1023px) {
|
@media screen and (max-width: 1023px) {
|
||||||
section.section-4 h4 {
|
section.section-4 h4 {
|
||||||
height: 224px;
|
height: 224px; }
|
||||||
}
|
|
||||||
section.section-4 .btn-primary {
|
section.section-4 .btn-primary {
|
||||||
top: 56%;
|
top: 56%; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul {
|
section.li-block.section-5 .container .row ul {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li {
|
section.li-block.section-5 .container .row ul li {
|
||||||
flex: 50%;
|
flex: 50%; } }
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 767px) {
|
@media screen and (max-width: 767px) {
|
||||||
section.hero {
|
section.hero {
|
||||||
height: 110vh;
|
height: 110vh; }
|
||||||
}
|
|
||||||
section.section-3 h2:before {
|
section.section-3 h2:before {
|
||||||
top: -70%;
|
top: -70%;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
z-index: -1;
|
z-index: -1; }
|
||||||
}
|
|
||||||
section.section-4 h4 {
|
section.section-4 h4 {
|
||||||
height: 280px;
|
height: 280px; }
|
||||||
}
|
|
||||||
section.section-4 .btn-primary {
|
section.section-4 .btn-primary {
|
||||||
top: 64%;
|
top: 64%; }
|
||||||
}
|
|
||||||
section.li-block .container .row > div ul {
|
section.li-block .container .row > div ul {
|
||||||
flex-direction: column;
|
flex-direction: column; }
|
||||||
}
|
|
||||||
section.li-block .container .row > div ul li {
|
section.li-block .container .row > div ul li {
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(1) {
|
section.li-block.section-1 ul li:nth-child(1) {
|
||||||
top: -66%;
|
top: -66%; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(2) {
|
section.li-block.section-1 ul li:nth-child(2) {
|
||||||
top: -66%;
|
top: -66%; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(3):before {
|
section.li-block.section-1 ul li:nth-child(3):before {
|
||||||
top: -85%;
|
top: -85%; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(4):before {
|
section.li-block.section-1 ul li:nth-child(4):before {
|
||||||
top: -85%;
|
top: -85%; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul {
|
section.li-block.section-5 .container .row ul {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li {
|
section.li-block.section-5 .container .row ul li {
|
||||||
flex: 50%;
|
flex: 50%; } }
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 513px) {
|
@media screen and (max-width: 513px) {
|
||||||
section.hero {
|
section.hero {
|
||||||
height: 120vh;
|
height: 120vh; }
|
||||||
}
|
|
||||||
section.section-4 h4 {
|
section.section-4 h4 {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem; }
|
||||||
}
|
|
||||||
section.section-4 .btn-primary {
|
section.section-4 .btn-primary {
|
||||||
top: 64%;
|
top: 64%; }
|
||||||
}
|
|
||||||
section.section-5 .container .row ul li {
|
section.section-5 .container .row ul li {
|
||||||
width: 350px;
|
width: 350px; } }
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 470px) {
|
@media screen and (max-width: 470px) {
|
||||||
section.section-4 h4 {
|
section.section-4 h4 {
|
||||||
height: 280px;
|
height: 280px; }
|
||||||
}
|
|
||||||
section.section-4 .btn-primary {
|
section.section-4 .btn-primary {
|
||||||
top: 64%;
|
top: 64%; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(3):before {
|
section.li-block.section-1 ul li:nth-child(3):before {
|
||||||
top: -70%;
|
top: -70%; }
|
||||||
}
|
|
||||||
section.li-block.section-1 ul li:nth-child(4):before {
|
section.li-block.section-1 ul li:nth-child(4):before {
|
||||||
top: -70%;
|
top: -70%; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul {
|
section.li-block.section-5 .container .row ul {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap; }
|
||||||
}
|
|
||||||
section.li-block.section-5 .container .row ul li {
|
section.li-block.section-5 .container .row ul li {
|
||||||
width: 350px;
|
width: 350px; } }
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 420px) {
|
@media screen and (max-width: 420px) {
|
||||||
section.li-block.section-5 .container .row ul li {
|
section.li-block.section-5 .container .row ul li {
|
||||||
width: 300px;
|
width: 300px; } }
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*# sourceMappingURL=custom.css.map */
|
/*# sourceMappingURL=custom.css.map */
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
+43
-13
@@ -1896,17 +1896,36 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
padding-top: 4rem;
|
padding-top: 2rem;
|
||||||
padding-bottom: 4rem;
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.section {
|
.section {
|
||||||
padding-top: 6rem;
|
padding-top: 4rem;
|
||||||
padding-bottom: 6rem;
|
padding-bottom: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||||
|
padding: 1.5rem;
|
||||||
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
|
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||||
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
@@ -2437,6 +2456,10 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-48 {
|
||||||
|
height: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
.max-h-12 {
|
.max-h-12 {
|
||||||
max-height: 3rem;
|
max-height: 3rem;
|
||||||
}
|
}
|
||||||
@@ -2497,6 +2520,10 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-48 {
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
.\!max-w-none {
|
.\!max-w-none {
|
||||||
max-width: none !important;
|
max-width: none !important;
|
||||||
}
|
}
|
||||||
@@ -2587,6 +2614,14 @@ body {
|
|||||||
resize: both;
|
resize: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-inside {
|
||||||
|
list-style-position: inside;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-disc {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
.grid-cols-1 {
|
.grid-cols-1 {
|
||||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
@@ -2603,10 +2638,6 @@ body {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.items-end {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-center {
|
.items-center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -3127,6 +3158,10 @@ body {
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-start {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
.font-mono {
|
.font-mono {
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
}
|
}
|
||||||
@@ -4571,11 +4606,6 @@ body {
|
|||||||
padding-right: 1.5rem;
|
padding-right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sm\:py-20 {
|
|
||||||
padding-top: 5rem;
|
|
||||||
padding-bottom: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:py-32 {
|
.sm\:py-32 {
|
||||||
padding-top: 8rem;
|
padding-top: 8rem;
|
||||||
padding-bottom: 8rem;
|
padding-bottom: 8rem;
|
||||||
|
|||||||
@@ -56,7 +56,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
@apply py-16 md:py-24;
|
@apply py-8 md:py-16;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
{{ define "main" }}
|
||||||
|
<div class="pt-2 {{ .Params.bgColor }}">
|
||||||
|
<style>
|
||||||
|
.gradient-bg {
|
||||||
|
background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 25%, white), white);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="absolute inset-x-0 top-0 h-full gradient-bg opacity-75"></div>
|
||||||
|
<div class="container mx-auto px-4 py-6">
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<div class="relative isolate overflow-hidden">
|
||||||
|
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">{{ .Params.title }}</h1>
|
||||||
|
<p class="text-xl text-gray-600 mb-16">{{ .Params.description }}</p>
|
||||||
|
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm p-8">
|
||||||
|
<p class="text-xl text-gray-600 text-left">
|
||||||
|
{{ .Params.card | markdownify }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
{{ define "main" }}
|
|
||||||
<article class="post">
|
|
||||||
{{ .Content }}
|
|
||||||
</article>
|
|
||||||
{{ end }}
|
|
||||||
@@ -31,7 +31,8 @@
|
|||||||
<a href="{{ $paginator.Prev.URL }}"
|
<a href="{{ $paginator.Prev.URL }}"
|
||||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||||
</svg>
|
</svg>
|
||||||
{{ i18n "previous" }}
|
{{ i18n "previous" }}
|
||||||
</a>
|
</a>
|
||||||
@@ -59,7 +60,8 @@
|
|||||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||||
{{ i18n "next" }}
|
{{ i18n "next" }}
|
||||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
|||||||
@@ -5,8 +5,9 @@
|
|||||||
background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
|
background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
|
||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-bg {
|
.gradient-bg {
|
||||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 15%, white), white);
|
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 25%, white), white);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
|
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
|
||||||
@@ -28,12 +29,14 @@
|
|||||||
<div class="mx-auto max-w-2xl text-center">
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
{{ with .Params.badge }}
|
{{ with .Params.badge }}
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<span class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
<span
|
||||||
|
class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
||||||
{{ . }}
|
{{ . }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ .Title }}</h1>
|
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ .Title }}
|
||||||
|
</h1>
|
||||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Description }}</p>
|
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,7 +48,8 @@
|
|||||||
<!-- Key Features Grid -->
|
<!-- Key Features Grid -->
|
||||||
{{ if .Params.features }}
|
{{ if .Params.features }}
|
||||||
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||||
<div class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-4">
|
<div
|
||||||
|
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-4">
|
||||||
{{ range .Params.features }}
|
{{ range .Params.features }}
|
||||||
<div class="flex flex-col bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-8">
|
<div class="flex flex-col bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-8">
|
||||||
<dt class="text-lg font-semibold leading-7 text-gray-900">
|
<dt class="text-lg font-semibold leading-7 text-gray-900">
|
||||||
@@ -68,7 +72,8 @@
|
|||||||
{{ if .Params.demo }}
|
{{ if .Params.demo }}
|
||||||
<div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
|
<div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
|
||||||
<div class="mx-auto max-w-2xl lg:text-center">
|
<div class="mx-auto max-w-2xl lg:text-center">
|
||||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ i18n "seeItInAction" }}</h2>
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ i18n
|
||||||
|
"seeItInAction" }}</h2>
|
||||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
|
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-16 flex justify-center">
|
<div class="mt-16 flex justify-center">
|
||||||
@@ -95,4 +100,3 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|||||||
+2
-2
@@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
<div class="text-center max-w-3xl mx-auto mb-8">
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">{{ $title }}</h2>
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">{{ $title }}</h2>
|
||||||
<p class="text-xl text-gray-600">{{ $description | markdownify }}</p>
|
<p class="text-xl text-gray-600">{{ $description | markdownify }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Feature Grid -->
|
<!-- Feature Grid -->
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
<div class="text-center max-w-3xl mx-auto mb-8">
|
||||||
{{ .Inner | safeHTML }}
|
{{ .Inner | safeHTML }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user