Initial commit

landing/src/app/ui/maintenance-screen.scss

@@ -0,0 +1,71 @@
+.maintenance {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+  overflow: hidden;
+
+  // The same light as the hero, so this reads as the same site rather than an
+  // error page from somewhere else — but centred behind the message instead of
+  // washing the top of the viewport.
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    width: 34rem;
+    height: 34rem;
+    transform: translate(-50%, -55%);
+    border-radius: 50%;
+    opacity: 0.35;
+    filter: blur(70px);
+    background: radial-gradient(
+      closest-side,
+      var(--pi-color-accent),
+      transparent
+    );
+    pointer-events: none;
+  }
+}
+
+.maintenance__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+// Pinned to the top rather than stacked with the message: the notice should
+// sit in the middle of the viewport, not be pushed down by the wordmark.
+.maintenance__brand {
+  position: absolute;
+  top: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-weight: 700;
+}
+
+// The only branding on this page, so it gets more room than in the header.
+.maintenance__mark {
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: contain;
+}
+
+.maintenance__title {
+  margin: 1rem 0 0;
+}
+
+.maintenance__message {
+  max-width: 40ch;
+  margin: 1rem 0 0;
+}
+
+.maintenance__until {
+  margin-top: 1.5rem;
+}