Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jmartin
|
89b2bd7090 |
+9
-8
@@ -1,20 +1,21 @@
|
||||
---
|
||||
title: "P'titsPas : la petite enfance, vue du large."
|
||||
title: "P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire"
|
||||
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"]
|
||||
date: 2025-05-17T12:00:00+02:00
|
||||
hero_image: "/images/page_login_4.1.png"
|
||||
hero_image_alt: "Illustration P'titsPas"
|
||||
hero_tagline: "Clarté · neutralité · territoire"
|
||||
hero_image_alt: "Logo P'titsPas"
|
||||
hero_tagline: "Zéro algo opaque · Zéro notation · 100 % collectivité"
|
||||
intro_md: |
|
||||
**Modernisez la mise en relation Parents - Assistantes Maternelles** avec une plateforme conçue pour les collectivités — sans notation des professionnels, sans algorithme opaque.
|
||||
**Modernisez la mise en relation Parents - Assistantes Maternelles avec une plateforme 100% éthique, conçue pour les collectivités.**
|
||||
|
||||
Les RPE portent une charge immense : **P'titsPas** apaise le quotidien administratif tout en laissant la collectivité piloter le service rendu aux familles.
|
||||
Les RPE sont saturés, la gestion administrative est lourde et les parents peinent à trouver une information fiable ?
|
||||
**P'titsPas** centralise et sécurise tout le parcours d'accueil individuel, tout en redonnant la main à la collectivité.
|
||||
|
||||
Une même règle du jeu pour tous : **service public numérique** exigeant.
|
||||
Plus qu'un outil de gestion, c'est la garantie d'un **Service Public Numérique** exemplaire.
|
||||
ethics:
|
||||
- title: "Sans notation"
|
||||
detail: " des professionnels"
|
||||
detail: " des pros"
|
||||
- title: "Sans algorithme opaque"
|
||||
detail: " de sélection"
|
||||
- title: "100 % conforme"
|
||||
@@ -28,5 +29,5 @@ why_md: |
|
||||
* **⚖️ É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.
|
||||
* **📱 Simplicité d'Usage :** Une interface pensée pour tous (parents, assistantes mat', agents), accessible sur mobile et PC.
|
||||
cta_title: "Un horizon commun pour votre politique petite enfance"
|
||||
cta_title: "Reprenez la main sur votre politique petite enfance"
|
||||
---
|
||||
|
||||
@@ -57,19 +57,19 @@
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="theme-horizon-nuit">
|
||||
<body class="theme-cahier-pop">
|
||||
<a class="skip-link" href="#contenu-principal">Aller au contenu</a>
|
||||
<header class="hn-header">
|
||||
<div class="hn-header__inner">
|
||||
<a class="hn-brand" href="{{ "/" | relURL }}">P'tits<span class="hn-brand__gold">Pas</span></a>
|
||||
<nav class="hn-nav" id="hn-nav" aria-label="Navigation principale">
|
||||
<button type="button" class="hn-nav-toggle" id="hn-nav-toggle" aria-expanded="false" aria-controls="hn-nav-panel" aria-label="Ouvrir le menu">
|
||||
<header class="cp-header">
|
||||
<div class="cp-header__inner">
|
||||
<a class="cp-logo" href="{{ "/" | relURL }}">P'titsPas</a>
|
||||
<nav class="cp-nav" id="cp-nav" aria-label="Navigation principale">
|
||||
<button type="button" class="cp-nav-toggle" id="cp-nav-toggle" aria-expanded="false" aria-controls="cp-nav-panel" aria-label="Ouvrir le menu">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="hn-nav-panel" id="hn-nav-panel">
|
||||
<ul class="hn-nav-list">
|
||||
<div class="cp-nav-panel" id="cp-nav-panel">
|
||||
<ul class="cp-nav-list">
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
@@ -78,7 +78,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main id="contenu-principal" class="hn-main">
|
||||
<main id="contenu-principal" class="cp-main">
|
||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="hn-panel">
|
||||
<div class="cp-page">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="hn-panel">
|
||||
<div class="cp-page">
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
+19
-21
@@ -1,36 +1,34 @@
|
||||
{{ define "main" }}
|
||||
<div class="hn-home">
|
||||
<section class="hn-hero" aria-label="Accroche">
|
||||
<p class="hn-hero__kicker">{{ .Params.hero_tagline | default "Plateforme publique — petite enfance" }}</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="hn-hero__visual">
|
||||
<div class="cp-home">
|
||||
<section class="cp-hero">
|
||||
<figure class="cp-polaroid">
|
||||
<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">
|
||||
</figure>
|
||||
<div class="cp-hero-copy">
|
||||
<p class="cp-tagline">{{ .Params.hero_tagline | default "Service public numérique — petite enfance" }}</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<div class="hn-dual">
|
||||
<div class="hn-panel hn-prose">
|
||||
<div class="cp-zine-grid">
|
||||
<div class="cp-panel cp-panel--mint">
|
||||
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<aside class="hn-ethics" aria-label="Engagements">
|
||||
<h2>Principes</h2>
|
||||
<ul>
|
||||
<div class="cp-panel">
|
||||
<div class="cp-stickers" aria-label="Engagements">
|
||||
{{ range .Params.ethics }}
|
||||
<li><strong>{{ .title }}</strong>{{ .detail }}</li>
|
||||
<div class="cp-sticker"><strong>{{ .title }}</strong>{{ .detail }}</div>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<section class="hn-constellation">
|
||||
<div class="hn-constellation-inner hn-prose">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cp-band">
|
||||
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="hn-cta" aria-labelledby="hn-cta-title">
|
||||
<h2 id="hn-cta-title">{{ .Params.cta_title | default "Échanger avec nous" }}</h2>
|
||||
<p>Parcours clair · données maîtrisées · service public</p>
|
||||
<section class="cp-cta" aria-labelledby="cp-cta-title">
|
||||
<h2 id="cp-cta-title">{{ .Params.cta_title | default "Passer à l'action" }}</h2>
|
||||
<div>
|
||||
<a class="hn-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
|
||||
<a class="hn-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
|
||||
<a class="cp-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
|
||||
<a class="cp-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<footer class="hn-footer">
|
||||
<footer class="cp-footer">
|
||||
<p>© {{ now.Year }} P'titsPas</p>
|
||||
<nav aria-label="Liens de pied de page">
|
||||
<a href="{{ "mentions-legales" | relURL }}">Mentions légales</a>
|
||||
|
||||
+320
-365
@@ -1,27 +1,22 @@
|
||||
/* Proposition « Horizon nuit » — nocturne, lumière et serif (contraste maximal avec « Cahier pop ») */
|
||||
/* Proposition « Cahier pop » — néo-galet / fanzine (très différent de la vitrine classique) */
|
||||
|
||||
@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");
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@400;600;700;800&display=swap");
|
||||
|
||||
:root {
|
||||
--hn-void: #06080c;
|
||||
--hn-deep: #0e1219;
|
||||
--hn-mist: rgba(230, 223, 209, 0.92);
|
||||
--hn-mist-dim: rgba(200, 190, 175, 0.75);
|
||||
--hn-gold: #e8c547;
|
||||
--hn-gold-soft: rgba(232, 197, 71, 0.35);
|
||||
--hn-aurora: rgba(120, 190, 255, 0.12);
|
||||
--hn-line: rgba(232, 197, 71, 0.22);
|
||||
--font-serif: "Cormorant Garamond", Georgia, serif;
|
||||
--font-sans: "Sora", system-ui, sans-serif;
|
||||
--ink: #14110f;
|
||||
--paper: #fffef7;
|
||||
--tape: #ffeb80;
|
||||
--mint-pop: #7dd3c0;
|
||||
--peach-pop: #ffb4a2;
|
||||
--lav-pop: #c4b5fd;
|
||||
--border: 3px solid var(--ink);
|
||||
--shadow-hard: 6px 6px 0 var(--ink);
|
||||
--shadow-soft: 4px 4px 0 rgba(20, 17, 15, 0.35);
|
||||
--font-display: "Syne", system-ui, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
||||
--nav-cut: 52rem;
|
||||
}
|
||||
|
||||
.hn-brand__gold {
|
||||
color: var(--hn-gold);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
@@ -42,491 +37,451 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit {
|
||||
body.theme-cahier-pop {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 300;
|
||||
font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
|
||||
line-height: 1.7;
|
||||
color: var(--hn-mist);
|
||||
background: var(--hn-void);
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1rem);
|
||||
line-height: 1.55;
|
||||
color: var(--ink);
|
||||
background-color: var(--paper);
|
||||
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;
|
||||
min-height: 100vh;
|
||||
radial-gradient(circle at 12% 18%, rgba(255, 180, 162, 0.35) 0%, transparent 42%),
|
||||
radial-gradient(circle at 88% 8%, rgba(196, 181, 253, 0.4) 0%, transparent 38%),
|
||||
radial-gradient(circle at 1px 1px, rgba(20, 17, 15, 0.07) 1px, transparent 0);
|
||||
background-size: auto, auto, 18px 18px;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--hn-gold);
|
||||
outline: 3px solid var(--mint-pop);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
z-index: 3000;
|
||||
padding: 0.65rem 1rem;
|
||||
background: var(--hn-deep);
|
||||
color: var(--hn-gold);
|
||||
border: 1px solid var(--hn-line);
|
||||
z-index: 2000;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
left: 0.75rem;
|
||||
top: 0.75rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.hn-header {
|
||||
.cp-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(14px);
|
||||
background: color-mix(in srgb, var(--hn-deep) 82%, transparent);
|
||||
border-bottom: 1px solid var(--hn-line);
|
||||
background: var(--tape);
|
||||
border-bottom: var(--border);
|
||||
box-shadow: 0 4px 0 rgba(20, 17, 15, 0.12);
|
||||
}
|
||||
|
||||
.hn-header__inner {
|
||||
max-width: 80rem;
|
||||
.cp-header__inner {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.25rem;
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hn-brand {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
|
||||
letter-spacing: 0.02em;
|
||||
.cp-logo {
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: var(--hn-mist);
|
||||
color: var(--ink);
|
||||
border: var(--border);
|
||||
padding: 0.35rem 0.65rem;
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-soft);
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
.hn-nav {
|
||||
.cp-logo:hover {
|
||||
transform: rotate(0deg) translate(-2px, -2px);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
.cp-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.hn-nav-toggle {
|
||||
.cp-nav-toggle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--hn-line);
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--hn-mist);
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.hn-nav-toggle span {
|
||||
.cp-nav-toggle span {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1px;
|
||||
width: 1.1rem;
|
||||
height: 3px;
|
||||
margin: 0 auto;
|
||||
background: currentColor;
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.hn-nav-panel {
|
||||
max-height: 0;
|
||||
.cp-nav-panel {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
max-height: 0;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
.hn-nav.is-open .hn-nav-panel {
|
||||
max-height: 24rem;
|
||||
.cp-nav.is-open .cp-nav-panel {
|
||||
max-height: 22rem;
|
||||
}
|
||||
|
||||
.hn-nav-list {
|
||||
.cp-nav-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0.75rem 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 1.25rem;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.hn-nav-list a {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
.cp-nav-list a {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
text-decoration: none;
|
||||
color: var(--hn-mist-dim);
|
||||
padding: 0.35rem 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color 0.2s ease, border-color 0.2s ease;
|
||||
color: var(--ink);
|
||||
border: var(--border);
|
||||
padding: 0.45rem 0.65rem;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
}
|
||||
|
||||
.hn-nav-list a:hover {
|
||||
color: var(--hn-gold);
|
||||
border-bottom-color: var(--hn-gold);
|
||||
.cp-nav-list a:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 5px 5px 0 var(--ink);
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
.hn-nav-toggle {
|
||||
.cp-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hn-nav-panel {
|
||||
.cp-nav-panel {
|
||||
max-height: none !important;
|
||||
overflow: visible;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cp-nav-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 51.99rem) {
|
||||
.hn-nav-panel {
|
||||
.cp-nav-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.75rem);
|
||||
top: calc(100% + 0.35rem);
|
||||
left: 0;
|
||||
background: color-mix(in srgb, var(--hn-deep) 96%, black);
|
||||
border: 1px solid var(--hn-line);
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--paper);
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-hard);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.hn-nav-list {
|
||||
.cp-nav-list {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.hn-main {
|
||||
max-width: 80rem;
|
||||
/* Main shell */
|
||||
.cp-main {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem 4rem;
|
||||
padding: 1.5rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.hn-panel {
|
||||
border: 1px solid var(--hn-line);
|
||||
background: color-mix(in srgb, var(--hn-deep) 75%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 2px;
|
||||
padding: clamp(1.25rem, 3vw, 2.5rem);
|
||||
.cp-page {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-hard);
|
||||
padding: clamp(1.25rem, 3vw, 2.25rem);
|
||||
}
|
||||
|
||||
.hn-panel .content {
|
||||
max-width: 42rem;
|
||||
.cp-page .content {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Home */
|
||||
.hn-hero {
|
||||
min-height: clamp(22rem, 55vh, 36rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 3rem 0 2.5rem;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hn-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--hn-gold), transparent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hn-hero__kicker {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-gold);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hn-hero h1 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
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);
|
||||
}
|
||||
|
||||
.hn-hero__visual {
|
||||
margin-top: 2rem;
|
||||
max-width: 28rem;
|
||||
border: 1px solid var(--hn-line);
|
||||
padding: 0.35rem;
|
||||
background: color-mix(in srgb, var(--hn-deep) 90%, transparent);
|
||||
}
|
||||
|
||||
.hn-hero__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: saturate(0.92) contrast(1.05);
|
||||
}
|
||||
|
||||
.hn-dual {
|
||||
.cp-hero {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
margin: 2.5rem 0;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.hn-dual {
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
align-items: start;
|
||||
@media (min-width: 52rem) {
|
||||
.cp-hero {
|
||||
grid-template-columns: 1fr 1.05fr;
|
||||
}
|
||||
}
|
||||
|
||||
.hn-prose {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hn-prose strong {
|
||||
font-weight: 500;
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
.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;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hn-ethics li {
|
||||
position: relative;
|
||||
padding: 0.65rem 0 0.65rem 1.25rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-size: 0.9rem;
|
||||
color: var(--hn-mist-dim);
|
||||
}
|
||||
|
||||
.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;
|
||||
color: var(--hn-mist);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.hn-constellation {
|
||||
position: relative;
|
||||
padding: 2.5rem 0;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
.cp-polaroid {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
padding: 0.75rem 0.75rem 2.25rem;
|
||||
box-shadow: var(--shadow-hard);
|
||||
transform: rotate(-2.2deg);
|
||||
max-width: 22rem;
|
||||
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;
|
||||
color: var(--hn-mist);
|
||||
@media (min-width: 52rem) {
|
||||
.cp-polaroid {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hn-constellation-inner a {
|
||||
color: var(--hn-gold);
|
||||
.cp-polaroid img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: var(--border);
|
||||
}
|
||||
|
||||
.hn-cta {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
margin-top: 2rem;
|
||||
border: 1px solid var(--hn-line);
|
||||
background: linear-gradient(160deg, color-mix(in srgb, var(--hn-deep) 90%, transparent), rgba(232, 197, 71, 0.06));
|
||||
.cp-hero-copy h1 {
|
||||
font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.85rem);
|
||||
line-height: 1.08;
|
||||
margin: 0 0 0.75rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.hn-cta h2 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
|
||||
margin-top: 0;
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
.hn-cta p {
|
||||
font-size: 0.8rem;
|
||||
.cp-tagline {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-mist-dim);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hn-btn {
|
||||
border: var(--border);
|
||||
display: inline-block;
|
||||
margin: 0.35rem 0.5rem;
|
||||
padding: 0.65rem 1.4rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: var(--lav-pop);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cp-zine-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.cp-zine-grid {
|
||||
grid-template-columns: 1.35fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-panel {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.cp-panel--mint {
|
||||
background: color-mix(in srgb, var(--mint-pop) 55%, #fff);
|
||||
}
|
||||
|
||||
.cp-stickers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.cp-sticker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
border: var(--border);
|
||||
padding: 0.55rem 0.65rem;
|
||||
background: var(--peach-pop);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
transform: rotate(var(--rot, 0deg));
|
||||
}
|
||||
|
||||
.cp-sticker:nth-child(1) {
|
||||
--rot: -0.8deg;
|
||||
}
|
||||
|
||||
.cp-sticker:nth-child(2) {
|
||||
--rot: 1deg;
|
||||
background: var(--lav-pop);
|
||||
}
|
||||
|
||||
.cp-sticker:nth-child(3) {
|
||||
--rot: -0.4deg;
|
||||
background: var(--tape);
|
||||
}
|
||||
|
||||
.cp-sticker strong {
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.95rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.cp-band {
|
||||
border: var(--border);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: 1.5rem 1.25rem;
|
||||
box-shadow: var(--shadow-hard);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cp-band h2 {
|
||||
margin-top: 0;
|
||||
color: var(--tape);
|
||||
font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
|
||||
}
|
||||
|
||||
.cp-band a {
|
||||
color: var(--mint-pop);
|
||||
}
|
||||
|
||||
.cp-cta {
|
||||
text-align: center;
|
||||
border: var(--border);
|
||||
padding: 1.75rem 1rem;
|
||||
background: linear-gradient(135deg, var(--peach-pop), var(--tape));
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
.cp-cta h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cp-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
text-decoration: none;
|
||||
color: var(--hn-gold);
|
||||
border: 1px solid var(--hn-gold);
|
||||
background: transparent;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
color: var(--ink);
|
||||
border: var(--border);
|
||||
padding: 0.65rem 1.1rem;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
margin: 0.35rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.hn-btn:hover {
|
||||
background: var(--hn-gold);
|
||||
color: var(--hn-void);
|
||||
.cp-btn:hover {
|
||||
transform: translate(-3px, -3px);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
/* Inner pages */
|
||||
body.theme-horizon-nuit h1,
|
||||
body.theme-horizon-nuit h2,
|
||||
body.theme-horizon-nuit h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
color: var(--hn-mist);
|
||||
/* Legacy content pages */
|
||||
body.theme-cahier-pop .logo-accueil img {
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .logo-accueil img {
|
||||
border: 1px solid var(--hn-line);
|
||||
padding: 0.25rem;
|
||||
background: color-mix(in srgb, var(--hn-deep) 80%, transparent);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .content-section {
|
||||
border: 1px solid var(--hn-line);
|
||||
background: color-mix(in srgb, var(--hn-deep) 70%, transparent);
|
||||
body.theme-cahier-pop .content-section {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit a {
|
||||
color: var(--hn-gold);
|
||||
body.theme-cahier-pop h1,
|
||||
body.theme-cahier-pop h2,
|
||||
body.theme-cahier-pop h3 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .cta-button {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.18em;
|
||||
body.theme-cahier-pop a {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
body.theme-cahier-pop .cta-button {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--hn-gold);
|
||||
background: transparent;
|
||||
color: var(--hn-gold);
|
||||
padding: 0.6rem 1.2rem;
|
||||
letter-spacing: 0.06em;
|
||||
border: var(--border);
|
||||
background: var(--tape);
|
||||
color: var(--ink);
|
||||
padding: 0.6rem 1rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .cta-button:hover {
|
||||
background: var(--hn-gold);
|
||||
color: var(--hn-void);
|
||||
body.theme-cahier-pop .cta-button:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit form label {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.12em;
|
||||
body.theme-cahier-pop form input,
|
||||
body.theme-cahier-pop form textarea {
|
||||
border: var(--border);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
body.theme-cahier-pop button,
|
||||
body.theme-cahier-pop input[type="submit"] {
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-mist-dim);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit form input,
|
||||
body.theme-horizon-nuit form textarea {
|
||||
background: color-mix(in srgb, var(--hn-void) 60%, transparent);
|
||||
border: 1px solid var(--hn-line);
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit button,
|
||||
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;
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-soft);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.hn-footer {
|
||||
margin-top: 3rem;
|
||||
padding: 2rem 1rem;
|
||||
border-top: 1px solid var(--hn-line);
|
||||
.cp-footer {
|
||||
border-top: var(--border);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.cp-footer a {
|
||||
color: var(--mint-pop);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-mist-dim);
|
||||
}
|
||||
|
||||
.hn-footer nav {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.hn-footer a {
|
||||
color: var(--hn-mist-dim);
|
||||
text-decoration: none;
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.hn-footer a:hover {
|
||||
color: var(--hn-gold);
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
+4
-4
@@ -1,7 +1,7 @@
|
||||
(function () {
|
||||
var nav = document.getElementById("hn-nav");
|
||||
var nav = document.getElementById("cp-nav");
|
||||
if (!nav) return;
|
||||
var toggle = document.getElementById("hn-nav-toggle");
|
||||
var toggle = document.getElementById("cp-nav-toggle");
|
||||
var mq = window.matchMedia("(max-width: 51.99rem)");
|
||||
|
||||
function setOpen(open) {
|
||||
@@ -17,7 +17,7 @@
|
||||
var next = !nav.classList.contains("is-open");
|
||||
setOpen(next);
|
||||
if (next) {
|
||||
var first = nav.querySelector(".hn-nav-list a");
|
||||
var first = nav.querySelector(".cp-nav-list a");
|
||||
if (first) requestAnimationFrame(function () { first.focus(); });
|
||||
}
|
||||
});
|
||||
@@ -30,7 +30,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
nav.querySelectorAll(".hn-nav-list a").forEach(function (a) {
|
||||
nav.querySelectorAll(".cp-nav-list a").forEach(function (a) {
|
||||
a.addEventListener("click", function () {
|
||||
if (mq.matches) setOpen(false);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user