Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jmartin
|
efc2ef442c |
+11
-12
@@ -1,25 +1,24 @@
|
|||||||
---
|
---
|
||||||
title: "P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire"
|
title: "P'titsPas : la petite enfance, vue du large."
|
||||||
description: "Solution numérique publique pour les collectivités : gestion transparente des relations parents-assistantes maternelles, sans notation ni algorithme opaque. Égalité et neutralité garanties."
|
description: "Solution numérique publique pour les collectivités : gestion transparente des relations parents-assistantes maternelles, sans notation ni algorithme opaque. Égalité et neutralité garanties."
|
||||||
keywords: ["P'titsPas", "ptitspas", "p'tits pas", "ptits pas", "petitspas", "petit pas", "petits pas", "opetitspas", "pitispas", "ptitpas", "p'titpas", "Ptitspas", "PTITSPAS", "petite enfance", "assistante maternelle", "collectivité", "commune", "garde enfant", "RPE", "relais petite enfance", "plateforme publique", "transparence", "neutralité", "gestion municipale petite enfance", "plateforme numérique collectivité", "mise en relation parents assistante maternelle", "solution publique garde enfant", "service public petite enfance", "accompagnement parental collectivité", "transparence service public", "égalité accès garde enfant", "politique municipale enfance", "dématérialisation services municipaux"]
|
keywords: ["P'titsPas", "ptitspas", "p'tits pas", "ptits pas", "petitspas", "petit pas", "petits pas", "opetitspas", "pitispas", "ptitpas", "p'titpas", "Ptitspas", "PTITSPAS", "petite enfance", "assistante maternelle", "collectivité", "commune", "garde enfant", "RPE", "relais petite enfance", "plateforme publique", "transparence", "neutralité", "gestion municipale petite enfance", "plateforme numérique collectivité", "mise en relation parents assistante maternelle", "solution publique garde enfant", "service public petite enfance", "accompagnement parental collectivité", "transparence service public", "égalité accès garde enfant", "politique municipale enfance", "dématérialisation services municipaux"]
|
||||||
date: 2025-05-17T12:00:00+02:00
|
date: 2025-05-17T12:00:00+02:00
|
||||||
hero_image: "/images/page_login_4.1.png"
|
hero_image: "/images/page_login_4.1.png"
|
||||||
hero_image_alt: "Logo P'titsPas"
|
hero_image_alt: "Illustration P'titsPas"
|
||||||
hero_tagline: "Plateforme publique pour les collectivités — transparence, neutralité, service public numérique."
|
hero_tagline: "Clarté · neutralité · territoire"
|
||||||
intro_md: |
|
intro_md: |
|
||||||
**Modernisez la mise en relation Parents - Assistantes Maternelles avec une plateforme 100% éthique, conçue pour les collectivités.**
|
**Modernisez la mise en relation Parents - Assistantes Maternelles** avec une plateforme conçue pour les collectivités — sans notation des professionnels, sans algorithme opaque.
|
||||||
|
|
||||||
Les RPE sont saturés, la gestion administrative est lourde et les parents peinent à trouver une information fiable ?
|
Les RPE portent une charge immense : **P'titsPas** apaise le quotidien administratif tout en laissant la collectivité piloter le service rendu aux familles.
|
||||||
**P'titsPas** centralise et sécurise tout le parcours d'accueil individuel, tout en redonnant la main à la collectivité.
|
|
||||||
|
|
||||||
Plus qu'un outil de gestion, c'est la garantie d'un **Service Public Numérique** exemplaire.
|
Une même règle du jeu pour tous : **service public numérique** exigeant.
|
||||||
ethics:
|
ethics:
|
||||||
- title: "Sans notation"
|
- title: "Sans notation"
|
||||||
detail: "des professionnels"
|
detail: " des professionnels"
|
||||||
- title: "Sans algorithme opaque"
|
- title: "Sans algorithme opaque"
|
||||||
detail: "de sélection"
|
detail: " de sélection"
|
||||||
- title: "100% conforme"
|
- title: "100 % conforme"
|
||||||
detail: "aux valeurs de la République"
|
detail: " aux valeurs de la République"
|
||||||
why_md: |
|
why_md: |
|
||||||
## Pourquoi choisir P'titsPas pour votre commune ?
|
## Pourquoi choisir P'titsPas pour votre commune ?
|
||||||
|
|
||||||
@@ -29,5 +28,5 @@ why_md: |
|
|||||||
* **⚖️ Équité Territoriale :** Offrez la même qualité de service à tous les administrés, quel que soit leur quartier.
|
* **⚖️ Équité Territoriale :** Offrez la même qualité de service à tous les administrés, quel que soit leur quartier.
|
||||||
* **🤝 Valorisation des RPE :** Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur l'accompagnement humain.
|
* **🤝 Valorisation des RPE :** Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur l'accompagnement humain.
|
||||||
* **📱 Simplicité d'Usage :** Une interface pensée pour tous (parents, assistantes mat', agents), accessible sur mobile et PC.
|
* **📱 Simplicité d'Usage :** Une interface pensée pour tous (parents, assistantes mat', agents), accessible sur mobile et PC.
|
||||||
cta_title: "Reprenez le contrôle de votre politique Petite Enfance"
|
cta_title: "Un horizon commun pour votre politique petite enfance"
|
||||||
---
|
---
|
||||||
|
|||||||
+17
-17
@@ -12,28 +12,28 @@ Que vous souhaitiez une démonstration personnalisée, obtenir un devis, ou simp
|
|||||||
|
|
||||||
Utilisez le formulaire ci-dessous pour nous faire part de votre projet. Nous nous engageons à vous répondre dans les plus brefs délais.
|
Utilisez le formulaire ci-dessous pour nous faire part de votre projet. Nous nous engageons à vous répondre dans les plus brefs délais.
|
||||||
|
|
||||||
<form class="site-form" action="/contact.php" method="POST">
|
<form action="/contact.php" method="POST" style="max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px;">
|
||||||
<div>
|
<div style="margin-bottom: 15px;">
|
||||||
<label for="name">Nom Prénom :</label>
|
<label for="name" style="display: block; margin-bottom: 5px;">Nom Prénom :</label>
|
||||||
<input type="text" id="name" name="name" required>
|
<input type="text" id="name" name="name" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="margin-bottom: 15px;">
|
||||||
<label for="collectivite">Collectivité / Organisation :</label>
|
<label for="collectivite" style="display: block; margin-bottom: 5px;">Collectivité / Organisation :</label>
|
||||||
<input type="text" id="collectivite" name="collectivite" required>
|
<input type="text" id="collectivite" name="collectivite" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="margin-bottom: 15px;">
|
||||||
<label for="email">Adresse E-mail :</label>
|
<label for="email" style="display: block; margin-bottom: 5px;">Adresse E-mail :</label>
|
||||||
<input type="email" id="email" name="email" required>
|
<input type="email" id="email" name="email" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="margin-bottom: 15px;">
|
||||||
<label for="phone">Téléphone (facultatif) :</label>
|
<label for="phone" style="display: block; margin-bottom: 5px;">Téléphone (facultatif) :</label>
|
||||||
<input type="tel" id="phone" name="phone">
|
<input type="tel" id="phone" name="phone" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="margin-bottom: 15px;">
|
||||||
<label for="message">Votre Message :</label>
|
<label for="message" style="display: block; margin-bottom: 5px;">Votre Message :</label>
|
||||||
<textarea id="message" name="message" rows="6" required></textarea>
|
<textarea id="message" name="message" rows="6" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit">Envoyer votre demande</button>
|
<button type="submit" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">Envoyer Votre Demande</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
Nous avons hâte de collaborer avec vous pour améliorer la gestion de la petite enfance sur votre territoire !
|
Nous avons hâte de collaborer avec vous pour améliorer la gestion de la petite enfance sur votre territoire !
|
||||||
@@ -10,25 +10,21 @@ P'titsPas offre une suite complète de fonctionnalités conçues pour simplifier
|
|||||||
|
|
||||||
Nous comprenons que chaque acteur a des besoins spécifiques. C'est pourquoi P'titsPas propose des tableaux de bord et des outils dédiés :
|
Nous comprenons que chaque acteur a des besoins spécifiques. C'est pourquoi P'titsPas propose des tableaux de bord et des outils dédiés :
|
||||||
|
|
||||||
{{% featureblock title="Pour les Parents et Assistantes Maternelles : Une expérience fluide et rassurante" %}}
|
### Pour les Parents et Assistantes Maternelles : Une expérience fluide et rassurante
|
||||||
Bien que P'titsPas soit un outil au service de la collectivité, nous savons que l'adhésion des familles est la clé du succès. Une adoption facilitée signifie moins de sollicitations pour vos services et une plus grande satisfaction citoyenne.
|
Bien que P'titsPas soit un outil au service de la collectivité, nous savons que l'adhésion des familles est la clé du succès. Une adoption facilitée signifie moins de sollicitations pour vos services et une plus grande satisfaction citoyenne.
|
||||||
|
|
||||||
* ✅ **Recherche facilitée** : Mise en relation transparente basée sur les besoins réels.
|
* ✅ **Recherche facilitée** : Mise en relation transparente basée sur les besoins réels.
|
||||||
* ✅ **Gestion administrative simplifiée** : Contrats, avenants et suivi des heures en quelques clics.
|
* ✅ **Gestion administrative simplifiée** : Contrats, avenants et suivi des heures en quelques clics.
|
||||||
* ✅ **Communication directe et tracée** : Pour apaiser les relations et garder un historique.
|
* ✅ **Communication directe et tracée** : Pour apaiser les relations et garder un historique.
|
||||||
* ✅ **Agenda partagé** : Une meilleure organisation au quotidien.
|
* ✅ **Agenda partagé** : Une meilleure organisation au quotidien.
|
||||||
{{% /featureblock %}}
|
|
||||||
|
|
||||||
{{% featureblock title="Pour vos Gestionnaires RPE : Gagnez du temps et de la visibilité" %}}
|
### Pour vos Gestionnaires RPE : Gagnez du temps et de la visibilité
|
||||||
Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur leur cœur de métier : l'accompagnement humain.
|
Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur leur cœur de métier : l'accompagnement humain.
|
||||||
|
|
||||||
* 📊 **Tableau de bord de supervision** : Une vue d'ensemble immédiate des contrats et disponibilités sur le territoire.
|
* 📊 **Tableau de bord de supervision** : Une vue d'ensemble immédiate des contrats et disponibilités sur le territoire.
|
||||||
* ⚡ **Validation rapide** : Gestion fluide des comptes et suivi des dossiers en temps réel.
|
* ⚡ **Validation rapide** : Gestion fluide des comptes et suivi des dossiers en temps réel.
|
||||||
* 🤝 **Outils de médiation** : Intervenez facilement en cas de désaccord grâce à l'historique des échanges.
|
* 🤝 **Outils de médiation** : Intervenez facilement en cas de désaccord grâce à l'historique des échanges.
|
||||||
* 📢 **Communication ciblée** : Organisez vos événements RPE et diffusez l'information efficacement.
|
* 📢 **Communication ciblée** : Organisez vos événements RPE et diffusez l'information efficacement.
|
||||||
{{% /featureblock %}}
|
|
||||||
|
|
||||||
{{% featureblock title="Pour votre DSI et Direction : Une solution souveraine et maîtrisée" %}}
|
### Pour votre DSI et Direction : Une solution souveraine et maîtrisée
|
||||||
P'titsPas s'intègre à votre écosystème avec un niveau d'exigence élevé en matière de sécurité et de personnalisation.
|
P'titsPas s'intègre à votre écosystème avec un niveau d'exigence élevé en matière de sécurité et de personnalisation.
|
||||||
|
|
||||||
* 🔒 **Sécurité et Conformité RGPD** : Une conception "Privacy by Design", hébergement souverain et chiffrement des données sensibles (NIR).
|
* 🔒 **Sécurité et Conformité RGPD** : Une conception "Privacy by Design", hébergement souverain et chiffrement des données sensibles (NIR).
|
||||||
@@ -36,18 +32,14 @@ P'titsPas s'intègre à votre écosystème avec un niveau d'exigence élevé en
|
|||||||
* ⚙️ **Gestion fine des droits** : Administration centralisée des comptes et des paramètres de la plateforme.
|
* ⚙️ **Gestion fine des droits** : Administration centralisée des comptes et des paramètres de la plateforme.
|
||||||
* 📈 **Pilotage par la donnée** : Statistiques d'usage, nombre de contrats, taux d'occupation... exportables pour vos rapports.
|
* 📈 **Pilotage par la donnée** : Statistiques d'usage, nombre de contrats, taux d'occupation... exportables pour vos rapports.
|
||||||
* 🧩 **Évolutivité** : Activez uniquement les modules dont vous avez besoin (Blog, IA, etc.).
|
* 🧩 **Évolutivité** : Activez uniquement les modules dont vous avez besoin (Blog, IA, etc.).
|
||||||
{{% /featureblock %}}
|
|
||||||
|
|
||||||
## Des Workflows Clairs et Sécurisés
|
## Des Workflows Clairs et Sécurisés
|
||||||
|
|
||||||
De la recherche d'une assistante maternelle à la fin de contrat, P'titsPas structure chaque étape :
|
De la recherche d'une assistante maternelle à la fin de contrat, P'titsPas structure chaque étape :
|
||||||
|
|
||||||
{{% featureblock %}}
|
|
||||||
* **Recherche et mise en relation** guidées.
|
* **Recherche et mise en relation** guidées.
|
||||||
* **Création et validation de contrats** dématérialisée et collaborative.
|
* **Création et validation de contrats** dématérialisée et collaborative.
|
||||||
* **Gestion des avenants** simplifiée.
|
* **Gestion des avenants** simplifiée.
|
||||||
* **Procédure de fin de contrat** accompagnée, avec calcul du solde de tout compte.
|
* **Procédure de fin de contrat** accompagnée, avec calcul du solde de tout compte.
|
||||||
{{% /featureblock %}}
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -3,32 +3,26 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
||||||
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||||
<meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
|
<meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
|
||||||
<meta name="author" content="{{ .Site.Params.author | default .Site.Title }}">
|
<meta name="author" content="{{ .Site.Params.author | default .Site.Title }}">
|
||||||
|
|
||||||
{{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
|
{{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
|
||||||
<meta name="robots" content="noindex, nofollow">
|
<meta name="robots" content="noindex, nofollow">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
|
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
|
||||||
<meta property="og:url" content="{{ .Permalink }}">
|
<meta property="og:url" content="{{ .Permalink }}">
|
||||||
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||||
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||||
<meta property="og:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
<meta property="og:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
||||||
<meta property="og:locale" content="fr_FR">
|
<meta property="og:locale" content="fr_FR">
|
||||||
|
|
||||||
<meta property="twitter:card" content="summary_large_image">
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
<meta property="twitter:url" content="{{ .Permalink }}">
|
<meta property="twitter:url" content="{{ .Permalink }}">
|
||||||
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||||
<meta property="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
<meta property="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||||
<meta property="twitter:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
<meta property="twitter:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
||||||
|
|
||||||
<link rel="canonical" href="{{ .Permalink }}">
|
<link rel="canonical" href="{{ .Permalink }}">
|
||||||
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}">
|
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}">
|
||||||
|
|
||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{
|
{
|
||||||
"@context": "https://schema.org",
|
"@context": "https://schema.org",
|
||||||
@@ -49,9 +43,7 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
|
<link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
|
||||||
|
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script>
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script>
|
||||||
<script>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
@@ -65,19 +57,19 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="theme-horizon-nuit">
|
||||||
<a class="skip-link" href="#contenu-principal">Aller au contenu</a>
|
<a class="skip-link" href="#contenu-principal">Aller au contenu</a>
|
||||||
<header class="site-header">
|
<header class="hn-header">
|
||||||
<div class="site-header__inner">
|
<div class="hn-header__inner">
|
||||||
<a class="site-logo" href="{{ "/" | relURL }}">P'titsPas</a>
|
<a class="hn-brand" href="{{ "/" | relURL }}">P'tits<span class="hn-brand__gold">Pas</span></a>
|
||||||
<nav class="site-nav" id="site-nav" aria-label="Navigation principale">
|
<nav class="hn-nav" id="hn-nav" aria-label="Navigation principale">
|
||||||
<button type="button" class="nav-toggle" aria-expanded="false" aria-controls="site-nav-panel" id="site-nav-toggle" aria-label="Ouvrir le menu">
|
<button type="button" class="hn-nav-toggle" id="hn-nav-toggle" aria-expanded="false" aria-controls="hn-nav-panel" aria-label="Ouvrir le menu">
|
||||||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
<span aria-hidden="true"></span>
|
||||||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
<span aria-hidden="true"></span>
|
||||||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
<span aria-hidden="true"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="site-nav__panel" id="site-nav-panel">
|
<div class="hn-nav-panel" id="hn-nav-panel">
|
||||||
<ul class="site-nav__list">
|
<ul class="hn-nav-list">
|
||||||
{{ range .Site.Menus.main }}
|
{{ range .Site.Menus.main }}
|
||||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
@@ -86,7 +78,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main id="contenu-principal" class="site-main">
|
<main id="contenu-principal" class="hn-main">
|
||||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||||
</main>
|
</main>
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="page-shell">
|
<div class="hn-panel">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="page-shell">
|
<div class="hn-panel">
|
||||||
<article class="content">
|
<article class="content">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
+23
-32
@@ -1,45 +1,36 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="home">
|
<div class="hn-home">
|
||||||
<section class="home-hero">
|
<section class="hn-hero" aria-label="Accroche">
|
||||||
{{ partial "home-path-motif.html" . }}
|
<p class="hn-hero__kicker">{{ .Params.hero_tagline | default "Plateforme publique — petite enfance" }}</p>
|
||||||
<div class="home-hero__inner">
|
<h1>{{ .Title }}</h1>
|
||||||
<div class="home-hero__media">
|
<div class="hn-hero__visual">
|
||||||
<img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="1200" height="630" fetchpriority="high">
|
<img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="900" height="560" fetchpriority="high">
|
||||||
</div>
|
|
||||||
<div class="home-hero__copy">
|
|
||||||
<h1 class="home-hero__title">{{ .Title }}</h1>
|
|
||||||
{{ with .Params.hero_tagline }}<p class="accroche">{{ . }}</p>{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div class="hn-dual">
|
||||||
<div class="home-bento">
|
<div class="hn-panel hn-prose">
|
||||||
<article class="home-card home-card--intro">
|
|
||||||
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
|
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
|
||||||
</article>
|
</div>
|
||||||
<aside class="home-card home-card--ethics" aria-label="Engagements">
|
<aside class="hn-ethics" aria-label="Engagements">
|
||||||
<h2 class="visually-hidden">Nos engagements</h2>
|
<h2>Principes</h2>
|
||||||
<ol class="ethics-steps">
|
<ul>
|
||||||
{{ range .Params.ethics }}
|
{{ range .Params.ethics }}
|
||||||
<li>
|
<li><strong>{{ .title }}</strong>{{ .detail }}</li>
|
||||||
<strong>{{ .title }}</strong>
|
|
||||||
{{ .detail }}
|
|
||||||
</li>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ol>
|
</ul>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
<section class="hn-constellation">
|
||||||
<section class="home-why">
|
<div class="hn-constellation-inner hn-prose">
|
||||||
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
|
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="hn-cta" aria-labelledby="hn-cta-title">
|
||||||
<section class="home-cta" aria-labelledby="home-cta-title">
|
<h2 id="hn-cta-title">{{ .Params.cta_title | default "Échanger avec nous" }}</h2>
|
||||||
<h2 id="home-cta-title" class="visually-hidden">Actions</h2>
|
<p>Parcours clair · données maîtrisées · service public</p>
|
||||||
{{ with .Params.cta_title }}<h3>{{ . }}</h3>{{ end }}
|
|
||||||
<div>
|
<div>
|
||||||
<a href="{{ "fonctionnalites" | relURL }}" class="cta-button">Voir les fonctionnalités clés</a>
|
<a class="hn-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
|
||||||
<a href="{{ "contact" | relURL }}" class="cta-button">Demander une démo</a>
|
<a class="hn-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<footer class="footer-site">
|
<footer class="hn-footer">
|
||||||
<p>© {{ now.Year }} P'titsPas — Tous droits réservés.</p>
|
<p>© {{ now.Year }} P'titsPas</p>
|
||||||
<nav class="footer-site__links" aria-label="Liens de pied de page">
|
<nav aria-label="Liens de pied de page">
|
||||||
<a href="{{ "mentions-legales" | relURL }}">Mentions légales</a>
|
<a href="{{ "mentions-legales" | relURL }}">Mentions légales</a>
|
||||||
<a href="{{ "politique-de-confidentialite" | relURL }}">Politique de confidentialité</a>
|
<a href="{{ "politique-de-confidentialite" | relURL }}">Confidentialité</a>
|
||||||
<a href="{{ "technique" | relURL }}">Données techniques</a>
|
<a href="{{ "technique" | relURL }}">Données techniques</a>
|
||||||
</nav>
|
</nav>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
<img class="home-hero__motif home-hero__motif-img" src="{{ "images/motif-trajet.svg" | relURL }}" width="520" height="140" alt="" role="presentation" decoding="async">
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
{{- $title := .Get "title" -}}
|
|
||||||
<div class="feature-card">
|
|
||||||
{{- if $title -}}
|
|
||||||
<h4 class="feature-card__title">{{ $title }}</h4>
|
|
||||||
{{- end -}}
|
|
||||||
<div class="feature-card__body">{{ .Inner | markdownify }}</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
{{- $title := .Get "title" -}}
|
|
||||||
<section class="feature-section">
|
|
||||||
{{- if $title -}}
|
|
||||||
<h3 class="feature-section__title">{{ $title }}</h3>
|
|
||||||
{{- end -}}
|
|
||||||
<div class="feature-section__body">{{ .Inner | markdownify }}</div>
|
|
||||||
</section>
|
|
||||||
+340
-461
@@ -1,35 +1,25 @@
|
|||||||
/* Charte P'titsPas — vitrine modernisée (tokens + layout) */
|
/* Proposition « Horizon nuit » — nocturne, lumière et serif (contraste maximal avec « Cahier pop ») */
|
||||||
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sora:wght@300;400;500;600&display=swap");
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--color-peche-doux: #ffd7a8;
|
--hn-void: #06080c;
|
||||||
--color-menthe-claire: #aee1cd;
|
--hn-deep: #0e1219;
|
||||||
--color-rose-tendre: #f6b2c4;
|
--hn-mist: rgba(230, 223, 209, 0.92);
|
||||||
--color-jaune-pale: #ffecb3;
|
--hn-mist-dim: rgba(200, 190, 175, 0.75);
|
||||||
--color-lavande: #e6e6fa;
|
--hn-gold: #e8c547;
|
||||||
--color-corail-leger: #ffdab9;
|
--hn-gold-soft: rgba(232, 197, 71, 0.35);
|
||||||
--color-texte-principal: #2c2c2c;
|
--hn-aurora: rgba(120, 190, 255, 0.12);
|
||||||
--color-texte-secondaire: #555;
|
--hn-line: rgba(232, 197, 71, 0.22);
|
||||||
--color-blanc: #fff;
|
--font-serif: "Cormorant Garamond", Georgia, serif;
|
||||||
--color-lien: #c45b6e;
|
--font-sans: "Sora", system-ui, sans-serif;
|
||||||
--color-lien-hover: #a8485a;
|
--nav-cut: 52rem;
|
||||||
--color-surface: rgba(255, 255, 255, 0.92);
|
}
|
||||||
--shadow-soft: 0 2px 12px rgba(44, 44, 44, 0.06);
|
|
||||||
--shadow-card: 0 4px 24px rgba(44, 44, 44, 0.08);
|
.hn-brand__gold {
|
||||||
--radius-sm: 8px;
|
color: var(--hn-gold);
|
||||||
--radius-md: 16px;
|
font-style: italic;
|
||||||
--radius-lg: 24px;
|
font-weight: 400;
|
||||||
--space-1: 0.5rem;
|
|
||||||
--space-2: 1rem;
|
|
||||||
--space-3: 1.5rem;
|
|
||||||
--space-4: 2rem;
|
|
||||||
--space-5: 3rem;
|
|
||||||
--font-display: "Merienda", cursive;
|
|
||||||
--font-body: "Source Sans 3", system-ui, sans-serif;
|
|
||||||
--header-height: 4rem;
|
|
||||||
--content-max: 72rem;
|
|
||||||
--nav-break: 52rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
@@ -39,7 +29,6 @@
|
|||||||
animation-duration: 0.01ms !important;
|
animation-duration: 0.01ms !important;
|
||||||
animation-iteration-count: 1 !important;
|
animation-iteration-count: 1 !important;
|
||||||
transition-duration: 0.01ms !important;
|
transition-duration: 0.01ms !important;
|
||||||
scroll-behavior: auto !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -53,601 +42,491 @@ html {
|
|||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body.theme-horizon-nuit {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-sans);
|
||||||
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
|
font-weight: 300;
|
||||||
line-height: 1.65;
|
font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
|
||||||
color: var(--color-texte-principal);
|
line-height: 1.7;
|
||||||
background: linear-gradient(165deg, var(--color-blanc) 0%, var(--color-lavande) 35%, var(--color-menthe-claire) 100%);
|
color: var(--hn-mist);
|
||||||
|
background: var(--hn-void);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(ellipse 120% 80% at 50% -30%, var(--hn-gold-soft), transparent 55%),
|
||||||
|
radial-gradient(ellipse 70% 50% at 100% 20%, var(--hn-aurora), transparent 50%),
|
||||||
|
radial-gradient(ellipse 50% 40% at 0% 80%, rgba(180, 120, 255, 0.06), transparent 45%);
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 3px solid var(--color-menthe-claire);
|
outline: 2px solid var(--hn-gold);
|
||||||
outline-offset: 3px;
|
outline-offset: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skip-link {
|
.skip-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -9999px;
|
left: -9999px;
|
||||||
z-index: 1000;
|
z-index: 3000;
|
||||||
padding: var(--space-2) var(--space-3);
|
padding: 0.65rem 1rem;
|
||||||
background: var(--color-texte-principal);
|
background: var(--hn-deep);
|
||||||
color: var(--color-blanc);
|
color: var(--hn-gold);
|
||||||
font-weight: 600;
|
border: 1px solid var(--hn-line);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: var(--radius-sm);
|
font-family: var(--font-sans);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skip-link:focus {
|
.skip-link:focus {
|
||||||
left: var(--space-2);
|
left: 1rem;
|
||||||
top: var(--space-2);
|
top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visually-hidden {
|
/* Header */
|
||||||
position: absolute;
|
.hn-header {
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ——— Header ——— */
|
|
||||||
.site-header {
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 50;
|
z-index: 100;
|
||||||
background: color-mix(in srgb, var(--color-menthe-claire) 92%, transparent);
|
backdrop-filter: blur(14px);
|
||||||
backdrop-filter: blur(10px);
|
background: color-mix(in srgb, var(--hn-deep) 82%, transparent);
|
||||||
border-bottom: 1px solid color-mix(in srgb, var(--color-texte-principal) 8%, transparent);
|
border-bottom: 1px solid var(--hn-line);
|
||||||
box-shadow: var(--shadow-soft);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header__inner {
|
.hn-header__inner {
|
||||||
max-width: var(--content-max);
|
max-width: 80rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: var(--space-2) var(--space-3);
|
padding: 1rem 1.25rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: var(--space-2);
|
gap: 1rem;
|
||||||
min-height: var(--header-height);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-logo {
|
.hn-brand {
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-serif);
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
|
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
|
||||||
color: var(--color-texte-principal);
|
letter-spacing: 0.02em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
color: var(--hn-mist);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-logo:hover {
|
.hn-nav {
|
||||||
text-decoration: none;
|
|
||||||
color: var(--color-lien-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-toggle {
|
.hn-nav-toggle {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 5px;
|
||||||
width: 2.75rem;
|
width: 2.6rem;
|
||||||
height: 2.75rem;
|
height: 2.6rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: 1px solid var(--hn-line);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: 50%;
|
||||||
background: var(--color-blanc);
|
background: transparent;
|
||||||
|
color: var(--hn-mist);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: var(--shadow-soft);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-toggle__bar {
|
.hn-nav-toggle span {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1.25rem;
|
width: 1rem;
|
||||||
height: 2px;
|
height: 1px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: var(--color-texte-principal);
|
background: currentColor;
|
||||||
border-radius: 1px;
|
|
||||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav.is-open .nav-toggle__bar:nth-child(1) {
|
.hn-nav-panel {
|
||||||
transform: translateY(8px) rotate(45deg);
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav.is-open .nav-toggle__bar:nth-child(2) {
|
.hn-nav.is-open .hn-nav-panel {
|
||||||
opacity: 0;
|
max-height: 24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav.is-open .nav-toggle__bar:nth-child(3) {
|
.hn-nav-list {
|
||||||
transform: translateY(-8px) rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__list {
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
gap: 0.25rem 1.25rem;
|
||||||
justify-content: center;
|
justify-content: flex-end;
|
||||||
gap: var(--space-1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav__list a {
|
.hn-nav-list a {
|
||||||
display: block;
|
font-size: 0.7rem;
|
||||||
padding: var(--space-1) var(--space-2);
|
font-weight: 500;
|
||||||
font-weight: 600;
|
letter-spacing: 0.22em;
|
||||||
font-size: 0.95rem;
|
text-transform: uppercase;
|
||||||
color: var(--color-texte-principal);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: var(--radius-sm);
|
color: var(--hn-mist-dim);
|
||||||
transition: background-color 0.2s ease;
|
padding: 0.35rem 0;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: color 0.2s ease, border-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav__list a:hover {
|
.hn-nav-list a:hover {
|
||||||
background: var(--color-peche-doux);
|
color: var(--hn-gold);
|
||||||
text-decoration: none;
|
border-bottom-color: var(--hn-gold);
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 51.99rem) {
|
|
||||||
.nav-toggle {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__panel {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 100%;
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
background: color-mix(in srgb, var(--color-blanc) 96%, var(--color-menthe-claire));
|
|
||||||
border-bottom: 1px solid color-mix(in srgb, var(--color-texte-principal) 8%, transparent);
|
|
||||||
transition: max-height 0.35s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav.is-open .site-nav__panel {
|
|
||||||
max-height: 24rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__list {
|
|
||||||
flex-direction: column;
|
|
||||||
padding: var(--space-3);
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__list a {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 52rem) {
|
@media (min-width: 52rem) {
|
||||||
.nav-toggle {
|
.hn-nav-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav {
|
.hn-nav-panel {
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__panel {
|
|
||||||
position: static;
|
|
||||||
max-height: none !important;
|
max-height: none !important;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__list {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ——— Main ——— */
|
@media (max-width: 51.99rem) {
|
||||||
.site-main {
|
.hn-nav-panel {
|
||||||
max-width: var(--content-max);
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: calc(100% + 0.75rem);
|
||||||
|
left: 0;
|
||||||
|
background: color-mix(in srgb, var(--hn-deep) 96%, black);
|
||||||
|
border: 1px solid var(--hn-line);
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hn-nav-list {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
.hn-main {
|
||||||
|
max-width: 80rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: var(--space-4) var(--space-3) var(--space-5);
|
padding: 0 1rem 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-shell {
|
.hn-panel {
|
||||||
background: var(--color-surface);
|
border: 1px solid var(--hn-line);
|
||||||
border-radius: var(--radius-md);
|
background: color-mix(in srgb, var(--hn-deep) 75%, transparent);
|
||||||
box-shadow: var(--shadow-card);
|
backdrop-filter: blur(8px);
|
||||||
padding: var(--space-4);
|
border-radius: 2px;
|
||||||
|
padding: clamp(1.25rem, 3vw, 2.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-shell .content {
|
.hn-panel .content {
|
||||||
max-width: 52rem;
|
max-width: 42rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
/* Home */
|
||||||
font-family: var(--font-display);
|
.hn-hero {
|
||||||
font-weight: 700;
|
min-height: clamp(22rem, 55vh, 36rem);
|
||||||
font-size: clamp(1.65rem, 1.2rem + 2vw, 2.35rem);
|
display: flex;
|
||||||
line-height: 1.25;
|
flex-direction: column;
|
||||||
color: var(--color-texte-principal);
|
justify-content: flex-end;
|
||||||
margin: 0 0 var(--space-3);
|
padding: 3rem 0 2.5rem;
|
||||||
}
|
margin-bottom: 0;
|
||||||
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-texte-principal);
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accroche {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-texte-secondaire);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-lien);
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-thickness: 1px;
|
|
||||||
text-underline-offset: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: var(--color-lien-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ——— Home ——— */
|
|
||||||
.home-hero {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
background: var(--color-surface);
|
|
||||||
box-shadow: var(--shadow-card);
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-hero__motif {
|
.hn-hero::after {
|
||||||
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
left: 5%;
|
||||||
pointer-events: none;
|
right: 5%;
|
||||||
|
bottom: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--hn-gold), transparent);
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-hero__motif-img {
|
.hn-hero__kicker {
|
||||||
width: 100%;
|
font-size: 0.65rem;
|
||||||
height: 100%;
|
letter-spacing: 0.35em;
|
||||||
object-fit: cover;
|
text-transform: uppercase;
|
||||||
opacity: 0;
|
color: var(--hn-gold);
|
||||||
animation: motifReveal 2s ease forwards 0.2s;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
.hn-hero h1 {
|
||||||
.home-hero__motif-img {
|
font-family: var(--font-serif);
|
||||||
animation: none;
|
font-weight: 500;
|
||||||
opacity: 0.16;
|
font-size: clamp(2.4rem, 1.2rem + 5vw, 4.2rem);
|
||||||
}
|
line-height: 1.05;
|
||||||
|
max-width: 18ch;
|
||||||
|
margin: 0 0 1.5rem;
|
||||||
|
color: var(--hn-mist);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes motifReveal {
|
.hn-hero__visual {
|
||||||
to {
|
margin-top: 2rem;
|
||||||
opacity: 0.16;
|
max-width: 28rem;
|
||||||
}
|
border: 1px solid var(--hn-line);
|
||||||
|
padding: 0.35rem;
|
||||||
|
background: color-mix(in srgb, var(--hn-deep) 90%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-hero__inner {
|
.hn-hero__visual img {
|
||||||
position: relative;
|
display: block;
|
||||||
z-index: 1;
|
|
||||||
display: grid;
|
|
||||||
gap: var(--space-4);
|
|
||||||
padding: var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 48rem) {
|
|
||||||
.home-hero__inner {
|
|
||||||
grid-template-columns: 1fr 1.1fr;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero__media {
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: var(--shadow-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero__media img {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
max-height: 22rem;
|
filter: saturate(0.92) contrast(1.05);
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-hero__title {
|
.hn-dual {
|
||||||
margin-bottom: var(--space-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-bento {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-3);
|
gap: 1.25rem;
|
||||||
margin-bottom: var(--space-4);
|
margin: 2.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 48rem) {
|
@media (min-width: 48rem) {
|
||||||
.home-bento {
|
.hn-dual {
|
||||||
grid-template-columns: 1.4fr 1fr;
|
grid-template-columns: 1.2fr 1fr;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-card {
|
.hn-prose {
|
||||||
background: var(--color-surface);
|
font-weight: 300;
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-card);
|
|
||||||
padding: var(--space-4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-card--ethics {
|
.hn-prose strong {
|
||||||
background: linear-gradient(145deg, var(--color-blanc), var(--color-jaune-pale));
|
font-weight: 500;
|
||||||
|
color: var(--hn-mist);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ethics-steps {
|
.hn-ethics {
|
||||||
|
border-left: 1px solid var(--hn-line);
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hn-ethics h2 {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--hn-gold);
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hn-ethics ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ethics-steps li {
|
.hn-ethics li {
|
||||||
padding: var(--space-2);
|
position: relative;
|
||||||
background: var(--color-blanc);
|
padding: 0.65rem 0 0.65rem 1.25rem;
|
||||||
border-radius: var(--radius-sm);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
border-left: 4px solid var(--color-rose-tendre);
|
font-size: 0.9rem;
|
||||||
font-size: 0.95rem;
|
color: var(--hn-mist-dim);
|
||||||
box-shadow: var(--shadow-soft);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ethics-steps strong {
|
.hn-ethics li::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
margin-top: -3px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--hn-gold);
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hn-ethics strong {
|
||||||
display: block;
|
display: block;
|
||||||
font-family: var(--font-body);
|
color: var(--hn-mist);
|
||||||
|
font-weight: 500;
|
||||||
margin-bottom: 0.15rem;
|
margin-bottom: 0.15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-why {
|
.hn-constellation {
|
||||||
background: var(--color-surface);
|
position: relative;
|
||||||
border-radius: var(--radius-md);
|
padding: 2.5rem 0;
|
||||||
box-shadow: var(--shadow-card);
|
margin: 2rem 0;
|
||||||
padding: var(--space-4);
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-why :first-child {
|
.hn-constellation::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.35), transparent),
|
||||||
|
radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.25), transparent),
|
||||||
|
radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.2), transparent),
|
||||||
|
radial-gradient(1px 1px at 88% 65%, rgba(232, 197, 71, 0.4), transparent),
|
||||||
|
radial-gradient(1px 1px at 12% 80%, rgba(255, 255, 255, 0.18), transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hn-constellation-inner {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hn-constellation-inner h2 {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.35rem);
|
||||||
|
font-weight: 500;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
color: var(--hn-mist);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-why :last-child {
|
.hn-constellation-inner a {
|
||||||
margin-bottom: 0;
|
color: var(--hn-gold);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-cta {
|
.hn-cta {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: var(--space-4);
|
padding: 3rem 1.5rem;
|
||||||
background: linear-gradient(135deg, var(--color-peche-doux), var(--color-rose-tendre));
|
margin-top: 2rem;
|
||||||
border-radius: var(--radius-lg);
|
border: 1px solid var(--hn-line);
|
||||||
box-shadow: var(--shadow-card);
|
background: linear-gradient(160deg, color-mix(in srgb, var(--hn-deep) 90%, transparent), rgba(232, 197, 71, 0.06));
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-cta h2,
|
.hn-cta h2 {
|
||||||
.home-cta h3 {
|
font-family: var(--font-serif);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--space-3);
|
color: var(--hn-mist);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-cta .cta-button {
|
.hn-cta p {
|
||||||
margin: var(--space-1);
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--hn-mist-dim);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ——— Legacy / inner pages ——— */
|
.hn-btn {
|
||||||
.logo-accueil img {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 400px;
|
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section {
|
|
||||||
background: var(--color-surface);
|
|
||||||
padding: var(--space-4);
|
|
||||||
margin-bottom: var(--space-3);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
input[type="submit"],
|
|
||||||
.cta-button {
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-weight: 700;
|
|
||||||
background: var(--color-peche-doux);
|
|
||||||
color: var(--color-texte-principal);
|
|
||||||
border: none;
|
|
||||||
padding: var(--space-2) var(--space-4);
|
|
||||||
border-radius: 999px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: var(--space-1);
|
margin: 0.35rem 0.5rem;
|
||||||
transition: background-color 0.2s ease, transform 0.15s ease;
|
padding: 0.65rem 1.4rem;
|
||||||
box-shadow: var(--shadow-soft);
|
font-size: 0.68rem;
|
||||||
}
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
.cta-button {
|
text-transform: uppercase;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: var(--hn-gold);
|
||||||
|
border: 1px solid var(--hn-gold);
|
||||||
|
background: transparent;
|
||||||
|
transition: background 0.2s ease, color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover,
|
.hn-btn:hover {
|
||||||
input[type="submit"]:hover,
|
background: var(--hn-gold);
|
||||||
.cta-button:hover {
|
color: var(--hn-void);
|
||||||
background: var(--color-rose-tendre);
|
|
||||||
text-decoration: none;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
/* Inner pages */
|
||||||
button:hover,
|
body.theme-horizon-nuit h1,
|
||||||
input[type="submit"]:hover,
|
body.theme-horizon-nuit h2,
|
||||||
.cta-button:hover {
|
body.theme-horizon-nuit h3 {
|
||||||
transform: none;
|
font-family: var(--font-serif);
|
||||||
}
|
font-weight: 500;
|
||||||
|
color: var(--hn-mist);
|
||||||
}
|
}
|
||||||
|
|
||||||
form div {
|
body.theme-horizon-nuit .logo-accueil img {
|
||||||
margin-bottom: var(--space-2);
|
border: 1px solid var(--hn-line);
|
||||||
|
padding: 0.25rem;
|
||||||
|
background: color-mix(in srgb, var(--hn-deep) 80%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
form label {
|
body.theme-horizon-nuit .content-section {
|
||||||
display: block;
|
border: 1px solid var(--hn-line);
|
||||||
margin-bottom: var(--space-1);
|
background: color-mix(in srgb, var(--hn-deep) 70%, transparent);
|
||||||
font-weight: 600;
|
padding: 1.25rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form input[type="text"],
|
body.theme-horizon-nuit a {
|
||||||
form input[type="email"],
|
color: var(--hn-gold);
|
||||||
form input[type="tel"],
|
|
||||||
form textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--space-2);
|
|
||||||
border: 1px solid color-mix(in srgb, var(--color-menthe-claire) 70%, var(--color-texte-principal));
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-form {
|
body.theme-horizon-nuit .cta-button {
|
||||||
max-width: 38rem;
|
font-family: var(--font-sans);
|
||||||
margin: var(--space-4) auto;
|
font-size: 0.68rem;
|
||||||
padding: var(--space-4);
|
letter-spacing: 0.18em;
|
||||||
background: var(--color-surface);
|
text-transform: uppercase;
|
||||||
border-radius: var(--radius-md);
|
border: 1px solid var(--hn-gold);
|
||||||
box-shadow: var(--shadow-soft);
|
background: transparent;
|
||||||
|
color: var(--hn-gold);
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-form button[type="submit"] {
|
body.theme-horizon-nuit .cta-button:hover {
|
||||||
margin-top: var(--space-2);
|
background: var(--hn-gold);
|
||||||
|
color: var(--hn-void);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ——— Feature sections (shortcodes) ——— */
|
body.theme-horizon-nuit form label {
|
||||||
.feature-section {
|
font-size: 0.75rem;
|
||||||
background: var(--color-surface);
|
letter-spacing: 0.12em;
|
||||||
border-radius: var(--radius-md);
|
text-transform: uppercase;
|
||||||
box-shadow: var(--shadow-soft);
|
color: var(--hn-mist-dim);
|
||||||
padding: var(--space-4);
|
|
||||||
margin: var(--space-4) 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-section__title {
|
body.theme-horizon-nuit form input,
|
||||||
margin: 0 0 var(--space-2);
|
body.theme-horizon-nuit form textarea {
|
||||||
padding-bottom: var(--space-2);
|
background: color-mix(in srgb, var(--hn-void) 60%, transparent);
|
||||||
border-bottom: 2px solid var(--color-menthe-claire);
|
border: 1px solid var(--hn-line);
|
||||||
|
color: var(--hn-mist);
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-section__body > :first-child {
|
body.theme-horizon-nuit button,
|
||||||
margin-top: 0;
|
body.theme-horizon-nuit input[type="submit"] {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border: 1px solid var(--hn-gold);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--hn-gold);
|
||||||
|
padding: 0.55rem 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-section__body > :last-child {
|
/* Footer */
|
||||||
margin-bottom: 0;
|
.hn-footer {
|
||||||
}
|
margin-top: 3rem;
|
||||||
|
padding: 2rem 1rem;
|
||||||
.feature-grid {
|
border-top: 1px solid var(--hn-line);
|
||||||
display: grid;
|
|
||||||
gap: var(--space-3);
|
|
||||||
margin: var(--space-3) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 40rem) {
|
|
||||||
.feature-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card {
|
|
||||||
background: color-mix(in srgb, var(--color-blanc) 88%, var(--color-lavande));
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
padding: var(--space-3);
|
|
||||||
border: 1px solid color-mix(in srgb, var(--color-texte-principal) 6%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card__title {
|
|
||||||
margin: 0 0 var(--space-1);
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card__body {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
color: var(--color-texte-secondaire);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ——— Footer ——— */
|
|
||||||
.footer-site {
|
|
||||||
background: color-mix(in srgb, var(--color-jaune-pale) 88%, var(--color-blanc));
|
|
||||||
padding: var(--space-4) var(--space-3);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top: 1px solid color-mix(in srgb, var(--color-peche-doux) 80%, transparent);
|
font-size: 0.72rem;
|
||||||
margin-top: var(--space-5);
|
letter-spacing: 0.15em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--hn-mist-dim);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-site p {
|
.hn-footer nav {
|
||||||
margin: var(--space-1) 0;
|
margin-top: 0.75rem;
|
||||||
font-size: 0.95rem;
|
|
||||||
color: var(--color-texte-secondaire);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-site__links {
|
.hn-footer a {
|
||||||
display: flex;
|
color: var(--hn-mist-dim);
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: var(--space-2) var(--space-3);
|
|
||||||
margin-top: var(--space-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-site__links a {
|
|
||||||
color: var(--color-texte-principal);
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
margin: 0 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-site__links a:hover {
|
.hn-footer a:hover {
|
||||||
text-decoration: underline;
|
color: var(--hn-gold);
|
||||||
color: var(--color-lien-hover);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 140" preserveAspectRatio="xMidYMid slice" fill="none">
|
|
||||||
<path stroke="#7eb9a4" stroke-width="2.5" stroke-linecap="round" opacity="0.35" d="M20 100 C 90 30, 160 120, 230 70 S 360 20, 500 85"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 257 B |
+7
-12
@@ -1,8 +1,7 @@
|
|||||||
(function () {
|
(function () {
|
||||||
var nav = document.getElementById("site-nav");
|
var nav = document.getElementById("hn-nav");
|
||||||
if (!nav) return;
|
if (!nav) return;
|
||||||
|
var toggle = document.getElementById("hn-nav-toggle");
|
||||||
var toggle = nav.querySelector(".nav-toggle");
|
|
||||||
var mq = window.matchMedia("(max-width: 51.99rem)");
|
var mq = window.matchMedia("(max-width: 51.99rem)");
|
||||||
|
|
||||||
function setOpen(open) {
|
function setOpen(open) {
|
||||||
@@ -18,12 +17,8 @@
|
|||||||
var next = !nav.classList.contains("is-open");
|
var next = !nav.classList.contains("is-open");
|
||||||
setOpen(next);
|
setOpen(next);
|
||||||
if (next) {
|
if (next) {
|
||||||
var first = nav.querySelector(".site-nav__list a");
|
var first = nav.querySelector(".hn-nav-list a");
|
||||||
if (first) {
|
if (first) requestAnimationFrame(function () { first.focus(); });
|
||||||
window.requestAnimationFrame(function () {
|
|
||||||
first.focus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -35,13 +30,13 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
nav.querySelectorAll(".site-nav__list a").forEach(function (a) {
|
nav.querySelectorAll(".hn-nav-list a").forEach(function (a) {
|
||||||
a.addEventListener("click", function () {
|
a.addEventListener("click", function () {
|
||||||
if (mq.matches) setOpen(false);
|
if (mq.matches) setOpen(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
mq.addEventListener("change", function (e) {
|
mq.addEventListener("change", function (ev) {
|
||||||
if (!e.matches) setOpen(false);
|
if (!ev.matches) setOpen(false);
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user