newsletter apage

assets/css/components/_bottom-bar.scss

@@ -55,6 +55,9 @@
         .icon{
             transform: rotate(-90deg);
             transform-origin: center;
+            svg{
+                fill: var(--color-txt);
+            }
         }
     }
 

assets/css/components/_buttons.scss

@@ -366,6 +366,7 @@ fill: var(--color-txt-light);
         display: flex;
     align-items: center;
     gap: 1ch;
+    text-decoration: none;
     }
 
     .text{
@@ -390,6 +391,7 @@ fill: var(--color-txt-light);
         svg{
             width: 12px;
             height: 12px;
+            fill: var(--color-txt);
         }
     }
 

assets/css/components/_dl-table.scss

@@ -0,0 +1,37 @@
+
+  .dl-table {
+    margin-top: calc(var(--spacing) * 1.5);
+    border-bottom: var(--border-light);
+    max-width: var(--max-w-content);
+    max-width: var(--max-w-cards);
+    margin-inline: auto;
+    font-size: var(--fs-normal);
+
+      @media #{$small} {
+         font-size: var(--fs-small);
+        }
+
+    .dl__group {
+      @include grid-content();
+      column-gap: 1ch;
+      border-top: var(--border-light);
+      padding: calc(var(--spacing) * 0.5) 0;
+    }
+
+    dt {
+      color: var(--color-txt-light);
+      padding-right: 1ch;
+    }
+
+    ul:not(.keywords) {
+      list-style: none;
+
+      li {
+        padding-bottom: 0.2em;
+      }
+    }
+
+    a:hover{
+      opacity: 0.8;
+    }
+  }

assets/css/components/_newsletter-form.scss

@@ -0,0 +1,112 @@
+.form__newsletter {
+         margin-top: calc(var(--spacing)*2);
+  --size: 24px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  max-width: var(--max-w-content);
+  margin-inline: auto;
+}
+.form__newsletter input[type=email] {
+  height: calc(var(--h-block) * 1.5);
+  width: 100%;
+  border-radius: calc(var(--h-block) * 0.75);
+  outline: none;
+  border: none;
+  padding: 0 2ch;
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  z-index: 40;
+  padding-top: 4px;
+  border: 1px solid var(--color-txt);
+  background-color: white;
+
+    font-family: var(--font);
+    font-size: var(--fs-normal);
+    font-weight: 500;
+    color: black;
+
+  &::-moz-placeholder,
+  &::placeholder {
+    font-family: var(--font);
+    font-size: var(--fs-normal);
+    font-weight: 500;
+    color: black!important;
+}
+  
+}
+
+.form__newsletter input[type=email]:focus {
+  outline: 3px solid var(--grey-400);
+}
+.form__newsletter button[type=submit] {
+  position: absolute;
+  right: 2px;
+  z-index: 100;
+  --size: calc(var(--h-block)*1.5 - 4px);
+  font-family: var(--font);
+  font-size: var(--fs-button-bold);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  gap: 0.75ch;
+  color: var(--color-accent);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+  cursor: pointer;
+}
+.form__newsletter button[type=submit] .icon, 
+.form__newsletter button[type=submit] .txt {
+  z-index: 10;
+}
+.form__newsletter button[type=submit] .icon {
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-bg);
+  text-align: center;
+}
+.form__newsletter button[type=submit] .icon svg {
+  fill: var(--color-bg);
+  width: 80%;
+}
+.form__newsletter button[type=submit] .txt {
+  position: relative;
+  top: 2px;
+  font-size: var(--fs-normal);
+  display: none;
+  padding-left: 1ch;
+}
+.form__newsletter button[type=submit]::after {
+  content: "";
+  display: block;
+  background-color: var(--color-accent);
+  border-radius: calc(var(--size) / 2);
+  width: var(--size);
+  height: var(--size);
+  position: absolute;
+  right: 0;
+  z-index: 0;
+  transition: width 0.2s;
+}
+.form__newsletter button[type=submit]:hover .txt {
+  color: var(--color-bg);
+  display: block;
+}
+.form__newsletter button[type=submit]:hover::after {
+  width: 100%;
+}
+
+
+[data-template="newsletter"]{
+
+    .details p{
+        font-size: var(--fs-xsmall);
+        margin-top: calc(var(--spacing)*1);
+    }
+
+}

assets/css/partials/_main-layout.scss

@@ -14,8 +14,8 @@ body{
         padding-top: var(--header-h);
         padding-bottom: calc(var(--spacing)*6);
 
-        min-height: 100dvh;
+        // min-height: 100dvh;
-        min-height: 100vh;
+        // min-height: 100vh;
 
         .page__content{
             max-width: var(--max-w-cards);

assets/css/style.css

@@ -674,6 +674,7 @@ button:disabled {
   display: flex;
   align-items: center;
   gap: 1ch;
+  text-decoration: none;
 }
 #btn--back-to-top .text {
   font-size: var(--fs-small);
@@ -695,6 +696,7 @@ button:disabled {
 #btn--back-to-top .icon svg {
   width: 12px;
   height: 12px;
+  fill: var(--color-txt);
 }
 #btn--back-to-top:hover {
   opacity: 0.8;
@@ -2461,6 +2463,43 @@ figcaption, .caption {
   box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
 }
 
+.dl-table {
+  margin-top: calc(var(--spacing) * 1.5);
+  border-bottom: var(--border-light);
+  max-width: var(--max-w-content);
+  max-width: var(--max-w-cards);
+  margin-inline: auto;
+  font-size: var(--fs-normal);
+}
+@media screen and (max-width: 768px) {
+  .dl-table {
+    font-size: var(--fs-small);
+  }
+}
+.dl-table .dl__group {
+  display: grid;
+  grid-gap: var(--padding-inner);
+  grid-template-columns: 2fr 3fr;
+  position: relative;
+  -moz-column-gap: 1ch;
+       column-gap: 1ch;
+  border-top: var(--border-light);
+  padding: calc(var(--spacing) * 0.5) 0;
+}
+.dl-table dt {
+  color: var(--color-txt-light);
+  padding-right: 1ch;
+}
+.dl-table ul:not(.keywords) {
+  list-style: none;
+}
+.dl-table ul:not(.keywords) li {
+  padding-bottom: 0.2em;
+}
+.dl-table a:hover {
+  opacity: 0.8;
+}
+
 #bottom-bar {
   position: fixed;
   left: 0;
@@ -2519,6 +2558,9 @@ figcaption, .caption {
   transform: rotate(-90deg);
   transform-origin: center;
 }
+#bottom-bar .btn--back-to-top .icon svg {
+  fill: var(--color-txt);
+}
 #bottom-bar .title-group {
   font-size: var(--fs-small);
   display: flex;
@@ -2563,6 +2605,124 @@ figcaption, .caption {
   }
 }
 
+.form__newsletter {
+  margin-top: calc(var(--spacing) * 2);
+  --size: 24px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  position: relative;
+  max-width: var(--max-w-content);
+  margin-inline: auto;
+}
+
+.form__newsletter input[type=email] {
+  height: calc(var(--h-block) * 1.5);
+  width: 100%;
+  border-radius: calc(var(--h-block) * 0.75);
+  outline: none;
+  border: none;
+  padding: 0 2ch;
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  z-index: 40;
+  padding-top: 4px;
+  border: 1px solid var(--color-txt);
+  background-color: white;
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  font-weight: 500;
+  color: black;
+}
+.form__newsletter input[type=email]::-moz-placeholder {
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  font-weight: 500;
+  color: black !important;
+}
+.form__newsletter input[type=email]::-moz-placeholder, .form__newsletter input[type=email]::placeholder {
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  font-weight: 500;
+  color: black !important;
+}
+
+.form__newsletter input[type=email]:focus {
+  outline: 3px solid var(--grey-400);
+}
+
+.form__newsletter button[type=submit] {
+  position: absolute;
+  right: 2px;
+  z-index: 100;
+  --size: calc(var(--h-block)*1.5 - 4px);
+  font-family: var(--font);
+  font-size: var(--fs-button-bold);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  gap: 0.75ch;
+  color: var(--color-accent);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.form__newsletter button[type=submit] .icon,
+.form__newsletter button[type=submit] .txt {
+  z-index: 10;
+}
+
+.form__newsletter button[type=submit] .icon {
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-bg);
+  text-align: center;
+}
+
+.form__newsletter button[type=submit] .icon svg {
+  fill: var(--color-bg);
+  width: 80%;
+}
+
+.form__newsletter button[type=submit] .txt {
+  position: relative;
+  top: 2px;
+  font-size: var(--fs-normal);
+  display: none;
+  padding-left: 1ch;
+}
+
+.form__newsletter button[type=submit]::after {
+  content: "";
+  display: block;
+  background-color: var(--color-accent);
+  border-radius: calc(var(--size) / 2);
+  width: var(--size);
+  height: var(--size);
+  position: absolute;
+  right: 0;
+  z-index: 0;
+  transition: width 0.2s;
+}
+
+.form__newsletter button[type=submit]:hover .txt {
+  color: var(--color-bg);
+  display: block;
+}
+
+.form__newsletter button[type=submit]:hover::after {
+  width: 100%;
+}
+
+[data-template=newsletter] .details p {
+  font-size: var(--fs-xsmall);
+  margin-top: calc(var(--spacing) * 1);
+}
+
 #support-bar {
   height: var(--header-h);
   background-color: var(--color-accent);
@@ -2981,8 +3141,6 @@ body main {
   padding: 0 var(--padding-body);
   padding-top: var(--header-h);
   padding-bottom: calc(var(--spacing) * 6);
-  min-height: 100dvh;
-  min-height: 100vh;
 }
 body main .page__content {
   max-width: var(--max-w-cards);
@@ -3233,6 +3391,22 @@ main .page__header ul.details li:hover {
   }
 }
 
+[data-template=newsletter] .page__header,
+[data-template=about] .page__header,
+[data-template=privacy-policy] .page__header,
+[data-template=legal-notices] .page__header {
+  border-bottom: none;
+  padding-bottom: 0px;
+}
+[data-template=newsletter] .page__header .page__title,
+[data-template=about] .page__header .page__title,
+[data-template=privacy-policy] .page__header .page__title,
+[data-template=legal-notices] .page__header .page__title {
+  text-align: center;
+  border-bottom: var(--border-medium);
+  padding-bottom: calc(var(--spacing) * 0.5);
+}
+
 [data-template=investigation] main {
   position: relative;
 }
@@ -3259,39 +3433,6 @@ main .page__header ul.details li:hover {
     margin-bottom: calc(var(--spacing) * 2);
   }
 }
-[data-template=investigation] main #investigation__dl {
-  margin-top: calc(var(--spacing) * 1.5);
-  border-bottom: var(--border-light);
-  max-width: var(--max-w-content);
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
-  font-size: var(--fs-normal);
-}
-@media screen and (max-width: 768px) {
-  [data-template=investigation] main #investigation__dl {
-    font-size: var(--fs-small);
-  }
-}
-[data-template=investigation] main #investigation__dl .dl__group {
-  display: grid;
-  grid-gap: var(--padding-inner);
-  grid-template-columns: 2fr 3fr;
-  position: relative;
-  -moz-column-gap: 1ch;
-       column-gap: 1ch;
-  border-top: var(--border-light);
-  padding: calc(var(--spacing) * 0.5) 0;
-}
-[data-template=investigation] main #investigation__dl dt {
-  color: var(--color-txt-light);
-  padding-right: 1ch;
-}
-[data-template=investigation] main #investigation__dl ul:not(.keywords) {
-  list-style: none;
-}
-[data-template=investigation] main #investigation__dl ul:not(.keywords) li {
-  padding-bottom: 0.2em;
-}
 
 #investigation__content {
   padding-top: calc(var(--spacing) * 4);

assets/css/style.scss

@@ -28,9 +28,12 @@
 @import "components/card-open-graph";
 @import "components/swiper";
 @import "components/slider-before-after";
+@import "components/dl-table";
 @import "components/bottom-bar";
+@import "components/newsletter-form";
 @import "components/support-bar";
 
+
 @import "partials/site-header";
 @import "partials/site-menu";
 @import "partials/site-footer";

assets/css/template/_investigation.scss

@@ -33,39 +33,6 @@
 
 
 
-  #investigation__dl {
-    margin-top: calc(var(--spacing) * 1.5);
-    border-bottom: var(--border-light);
-    max-width: var(--max-w-content);
-      max-width: var(--max-w-cards);
-    margin-inline: auto;
-      font-size: var(--fs-normal);
-
-      @media #{$small} {
-         font-size: var(--fs-small);
-        }
-
-    .dl__group {
-      @include grid-content();
-      column-gap: 1ch;
-      border-top: var(--border-light);
-      padding: calc(var(--spacing) * 0.5) 0;
-    }
-
-    dt {
-      color: var(--color-txt-light);
-      padding-right: 1ch;
-    }
-
-    ul:not(.keywords) {
-      list-style: none;
-
-      li {
-        padding-bottom: 0.2em;
-      }
-    }
-  }
-
 
 
 
@@ -77,3 +44,6 @@
 
 }
 
+
+
+

assets/css/template/_page-single.scss

@@ -30,3 +30,22 @@
              padding-top: 0;
          }
 }
+
+
+
+[data-template="newsletter"],
+[data-template="about"],
+[data-template="privacy-policy"],
+[data-template="legal-notices"]{
+    .page__header{
+        border-bottom: none;
+        padding-bottom: 0px;
+
+        .page__title{
+            text-align: center;
+            border-bottom: var(--border-medium);
+              padding-bottom: calc(var(--spacing) * 0.5);
+
+        }
+    }
+}

site/blueprints/blocks/heading-sub.yml

@@ -0,0 +1,23 @@
+name: Titre
+icon: title
+wysiwyg: true
+preview: heading
+fields:
+  level:
+    label: Niveau
+    type: toggles
+    empty: false
+    default: "h4"
+    labels: false
+    options:
+      - value: h4
+        icon: h4
+        text: H4
+      - value: h5
+        icon: h5
+        text: H5
+  text:
+    label: Texte
+    type: writer
+    inline: true
+    placeholder: Titre…

site/blueprints/pages/about.yml

@@ -4,4 +4,20 @@ tabs:
   contentTab:
     label: Contenu
     icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading-sub
+          - text
+          - image
+          - beforeafter
+          - video
+          - gallery
+          - insert
   seo: seo/page

site/blueprints/pages/contact.yml

@@ -3,4 +3,17 @@ title: Contact
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading
+          - text
+          - image
   seo: seo/page

site/blueprints/pages/legal-notices.yml

@@ -3,4 +3,37 @@ title: Mentions légales
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      definitions:
+        label: Tableau de définitions
+        help: Affiché sous forme de liste en deux colonnes (terme — définition)
+        type: structure
+        fields:
+          term:
+            label: Terme
+            type: text
+            width: 1/3
+          definition:
+            label: Définition
+            type: writer
+            width: 2/3
+            marks:
+              - bold
+              - italic
+              - highlight
+              - link
+            nodes:
+              - bulletList
+              - orderedList
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading-sub
+          - text
   seo: seo/page

site/blueprints/pages/newsletter.yml

@@ -0,0 +1,30 @@
+title: Newsletter
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: email
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      chapo:
+        label: Chapeau
+        type: writer
+        nodes: false
+        marks:
+          - bold
+          - italic
+          - underline
+          - link
+      details:
+        label: Détails
+        type: writer
+        nodes: false
+        marks:
+          - bold
+          - italic
+          - underline
+          - link
+  seo: seo/page

site/blueprints/pages/privacy-policy.yml

@@ -0,0 +1,18 @@
+title: Politique de confidentialité
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading-sub
+          - text
+  seo: seo/page

site/blueprints/site.yml

@@ -5,4 +5,14 @@ tabs:
     label: Contenu
     sections:
       investigations: fields/investigations
+      legal:
+        type: pages
+        label: Pages légales
+        templates:
+          - legal-notices
+          - privacy-policy
+          - newsletter
+        layout: list
+        text: "{{ page.title }}"
+        create: false
   seo: seo/site

site/config/menu.php

@@ -93,6 +93,24 @@ return [
       return Str::contains($path, 'pages/mentions-legales');
     }
   ],
+  'newsletter' => [
+    'label'   => 'Newsletter',
+    'icon'    => 'email',
+    'link'    => 'pages/newsletter',
+    'current' => function (string $current): bool {
+      $path = Kirby\Cms\App::instance()->path();
+      return Str::contains($path, 'pages/newsletter');
+    }
+  ],
+  'privacy-policy' => [
+    'label'   => 'Politique de confidentialité',
+    'icon'    => 'lock',
+    'link'    => 'pages/politique-de-confidentialite',
+    'current' => function (string $current): bool {
+      $path = Kirby\Cms\App::instance()->path();
+      return Str::contains($path, 'pages/politique-de-confidentialite');
+    }
+  ],
   '-',
   'database' => [
     'label' => 'Bases de données',

site/snippets/nav.php

@@ -15,21 +15,30 @@ de la vérité et de la justice.</p>
 </form>
 
 
-<nav>
+<nav id="nav-pages">
     <ul>
+        <li><a href="<?= page('a-propos')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'About' : 'À propos' ?></a></li>
+        <li><a href="<?= page('enquetes')->url() ?>"><?= t('investigations.title') ?></a></li>
+        <li><a href="<?= page('packages')->url() ?>"><?= t('packages.title') ?></a></li>
+        <li><a href="<?= page('impacts')->url() ?>"><?= t('impacts.title') ?></a></li>
+        <li><a href="<?= page('news')->url() ?>"><?= t('news.title') ?></a></li>
+        <li><a href="<?= page('ressources')->url() ?>"><?= t('resources.title') ?></a></li>
+        <li><a href="<?= page('laboratoire')->url() ?>"><?= t('lab.title') ?></a></li>
+    </ul>
+</nav>
 
-        <li><a href="#">À propos</a></li> <!-- page à créer -->
+<nav id="nav-aside">
-         <li><a href="/enquêtes">Equêtes</a></li>
+    <ul>
-        <li><a href="/packages">Dossiers</a></li>
+        <li><a href="<?= page('contact')->url() ?>">Contact</a></li>
-        <li><a href="#">Contact</a></li>
+        <li><a href="<?= page('newsletter')->url() ?>">Newsletter</a></li>
-        <li><a href="#">À propos</a></li>
+        <li class="support highlight"><a href="#">Soutenez-nous</a></li>
-        <li><a href="#">Ressources</a></li>
+    </ul>
-        <li><a href="#">Newsletter</a></li>
+</nav>
-        <li><a href="#">Mentions légales</a></li>
-
-
-               <li class="support highlight"><a href="#">Soutenez-nous</a></li>
 
+<nav id="nav-legal">
+    <ul>
+        <li><a href="<?= page('mentions-legales')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Legal notices' : 'Mentions légales' ?></a></li>
+        <li><a href="<?= page('politique-de-confidentialite')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Privacy policy' : 'Politique de confidentialité' ?></a></li>
     </ul>
 </nav>
 

site/templates/about.php

@@ -1,4 +1,15 @@
 <?php snippet('header') ?>
-<main>
+<main class="main__single">
+
+<header class="page__header">
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+</header>
+
+<?php if ($page->body()->isNotEmpty()): ?>
+<div class="page__content">
+    <?= $page->body()->toBlocks() ?>
+</div>
+<?php endif ?>
+
 </main>
 <?php snippet('footer') ?>

site/templates/contact.php

@@ -1,2 +1,15 @@
 <?php snippet('header') ?>
+<main class="main__single">
+
+<header class="page__header">
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+</header>
+
+<?php if ($page->body()->isNotEmpty()): ?>
+<div class="page__content">
+    <?= $page->body()->toBlocks() ?>
+</div>
+<?php endif ?>
+
+</main>
 <?php snippet('footer') ?>

site/templates/investigation.php

@@ -62,7 +62,7 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
 
 
 
-<dl id="investigation__dl">
+<dl class="dl-table" id="investigation__dl">
     <?php if ($page->incidentDate()->isNotEmpty()): ?>
     <div class="dl__group">
         <dt>Date de l'incident</dt>

site/templates/legal-notices.php

@@ -1,2 +1,27 @@
 <?php snippet('header') ?>
+<main class="main__single">
+
+<header class="page__header">
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+</header>
+
+<?php $definitions = $page->definitions()->toStructure() ?>
+<?php if ($definitions->isNotEmpty()): ?>
+<dl class="dl-table" id="legal-notices__dl">
+    <?php foreach ($definitions as $item): ?>
+    <div class="dl__group">
+        <dt><?= $item->term()->esc() ?></dt>
+        <dd><?= $item->definition() ?></dd>
+    </div>
+    <?php endforeach ?>
+</dl>
+<?php endif ?>
+
+<?php if ($page->body()->isNotEmpty()): ?>
+<div class="page__content">
+    <?= $page->body()->toBlocks() ?>
+</div>
+<?php endif ?>
+
+</main>
 <?php snippet('footer') ?>

site/templates/newsletter.php

@@ -0,0 +1,39 @@
+<?php snippet('header') ?>
+<main class="main__single">
+
+<header class="page__header">
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+</header>
+
+<div class="page__content">
+
+    <?php if ($page->chapo()->isNotEmpty()): ?>
+    <div class="description">
+        <p><?= $page->chapo() ?></p>
+    </div>
+    <?php endif ?>
+
+<form class="form__newsletter">
+          <input type="email" name="email" placeholder="Votre adresse e-mail" required="">
+          <button class="btn--newsletter" type="submit" aria-label="s’inscrire">
+            <span class="txt">S’inscrire</span>
+            <span class="icon">
+              <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero"></path>
+              </svg>
+            </span>
+          </button>
+        </form>
+
+<?php if ($page->details()->isNotEmpty()): ?>
+
+    <div class="details">
+        <p><?= $page->details() ?></p>
+    </div>
+
+<?php endif ?>
+
+</div>
+
+</main>
+<?php snippet('footer') ?>

site/templates/privacy-policy.php

@@ -0,0 +1,15 @@
+<?php snippet('header') ?>
+<main class="main__single">
+
+<header class="page__header">
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+</header>
+
+<?php if ($page->body()->isNotEmpty()): ?>
+<div class="page__content">
+    <?= $page->body()->toBlocks() ?>
+</div>
+<?php endif ?>
+
+</main>
+<?php snippet('footer') ?>