Implemented phase 1 for the POC prototype in the Website service.

Services/Website/Resources/Static/css/index.css

@@ -1,23 +1,176 @@
 /* CCN — landing page. */
 
+.home {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-10);
+}
+
 .hero {
   display: flex;
+  align-items: center;
+  gap: 64px;
+  padding-bottom: var(--space-8);
+  border-bottom: 1px solid var(--line);
+}
+
+.hero__text {
+  display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: var(--space-3);
-  max-width: 640px;
-  padding: var(--space-1) 0 var(--space-2);
+  max-width: 680px;
+}
+
+.hero__text .type-lead {
+  max-width: 560px;
 }
 
 .hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
-  padding-top: var(--space-3);
+  padding-top: var(--space-2);
+}
+
+/* The fanned covers join the hero on desktop. */
+.hero__covers {
+  display: none;
+}
+
+.formats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.formats__tile {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.formats__tile:hover {
+  border-color: var(--ink);
+  color: var(--ink);
+}
+
+.formats__name {
+  font-family: var(--font-display);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+.home__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.promises {
+  display: grid;
+  gap: var(--space-8);
+  padding-top: var(--space-10);
+  border-top: 1px solid var(--line);
+}
+
+.promises__item {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.promises__title {
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+.promises__text {
+  color: var(--ink-soft);
+}
+
+@media (min-width: 600px) {
+  .promises {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .formats {
+    gap: var(--space-5);
+  }
+
+  .formats__tile {
+    padding: var(--space-5) 22px;
+  }
+
+  .formats__name {
+    font-size: 22px;
+  }
 }
 
 @media (min-width: 1024px) {
+  .home {
+    gap: var(--space-14);
+    padding-top: 0;
+  }
+
   .hero {
+    min-height: 420px;
+    padding-bottom: 0;
+  }
+
+  .hero__text {
+    gap: 22px;
+  }
+
+  .hero__covers {
+    position: relative;
+    display: block;
+    flex-shrink: 0;
+    width: 520px;
+    height: 340px;
+  }
+
+  .hero__covers .cover {
+    position: absolute;
+    box-shadow: var(--shadow-cover-sm);
+  }
+
+  .hero__covers .cover--left {
+    top: 40px;
+    left: 0;
+    width: 200px;
+    transform: rotate(-6deg);
+  }
+
+  .hero__covers .cover--centre {
+    top: 0;
+    left: 160px;
+    z-index: 1;
+    width: 220px;
+    box-shadow: var(--shadow-cover);
+  }
+
+  .hero__covers .cover--right {
+    top: 56px;
+    left: 340px;
+    width: 190px;
+    transform: rotate(7deg);
+  }
+
+  .formats {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .home__row {
     gap: var(--space-5);
-    padding: var(--space-10) 0;
   }
 }