add missing component files for tailwindcss

templates/styles/base/_basic.css

@@ -0,0 +1,73 @@
+html,
+body {
+  @apply font-sans;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  overscroll-behavior-y: none;
+}
+
+img {
+  @apply block max-w-full;
+}
+
+.true-w-full {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
+.root {
+  @apply relative z-0 overflow-hidden min-h-screen;
+}
+
+.master {
+  @apply relative px-8 mx-auto;
+
+  max-width: 84rem;
+}
+
+.container {
+  @apply relative grid grid-cols-12 gap-2.5 mx-auto;
+
+  max-width: 84rem;
+}
+
+.sm-no-break {
+  content: '';
+
+  &:after {
+    content: ' ';
+  }
+
+  @screen md {
+    content: initial;
+
+    &:after {
+      content: initial;
+    }
+  }
+}
+
+.md-no-break {
+  content: '';
+
+  &:after {
+    content: ' ';
+  }
+
+  @screen lg {
+    content: initial;
+
+    &:after {
+      content: initial;
+    }
+  }
+}

templates/styles/base/_bg-circles.css

@@ -0,0 +1,61 @@
+.-has-bg-circle {
+  @apply relative;
+
+  &::before {
+    content: '';
+    @apply absolute w-[31.25rem] h-[31.25rem] bg-okfn-blue/70 rounded-full blur-[8.4375rem] mix-blend-darken;
+  }
+
+  /* 700px */
+  &.-bg-circle-lg {
+    &::before {
+      @apply w-[43.75rem] h-[43.75rem];
+    }
+  }
+
+  /* 500px more blur */
+  &.-bg-circle-sm {
+    &::before {
+      @apply blur-[34rem];
+    }
+  }
+
+  /* 500px more blur */
+  &.-bg-circle-xs {
+    &::before {
+      @apply w-[5.875rem] h-[5.875rem] blur-[1.25rem];
+    }
+  }
+
+  &.-bg-circle-okfn-green {
+    &::before {
+      @apply bg-okfn-green/80;
+    }
+  }
+
+  &.-bg-circle-okfn-purple {
+    &::before {
+      @apply bg-okfn-purple/80;
+    }
+  }
+
+  &.-bg-circle-okfn-yellow {
+    &::before {
+      @apply bg-okfn-yellow/80;
+    }
+  }
+}
+
+.-has-bg-circles {
+  @apply relative;
+
+  &::before {
+    content: '';
+    @apply absolute top-1/2 right-1/2 w-[8.75rem] h-[8.75rem] bg-okfn-blue rounded-full blur-[2rem] translate-x-4 -translate-y-1/2;
+  }
+
+  &::after {
+    content: '';
+    @apply absolute top-1/2 left-1/2 w-[9.375rem] h-[9.375rem] bg-okfn-green rounded-full blur-[2.25rem] mix-blend-multiply -translate-x-4 -translate-y-1/2;
+  }
+}

templates/styles/base/_buttons.css

@@ -0,0 +1,3 @@
+.btn {
+  @apply inline-block px-12 py-[1.1875rem] bg-black text-white text-2xl font-bold rounded-[1.25rem];
+}

templates/styles/base/_forms.css

@@ -0,0 +1,19 @@
+.form {
+  .input {
+    &-fake {
+      @apply p-2 pl-5 border-2 border-black bg-white rounded-[1.25rem] text-xl text-black;
+
+      .btn {
+        @apply px-6 py-[0.6875rem] text-xl rounded-2xl;
+      }
+
+      .form-control {
+        @apply outline-none bg-transparent;
+
+        &::placeholder {
+          @apply text-black;
+        }
+      }
+    }
+  }
+}

templates/styles/base/_links.css

@@ -0,0 +1,11 @@
+.link {
+  &-arrow-curved {
+    @apply inline-flex items-center font-mono whitespace-nowrap;
+
+    &::before {
+      content: '';
+      mask: url(/images/icons/arrow-curved.svg) no-repeat center;
+      @apply w-4 h-4 mr-3 bg-current;
+    }
+  }
+}

templates/styles/base/_main-footer.css

@@ -0,0 +1,41 @@
+.main-footer {
+  @apply py-12 bg-okfn-blue;
+
+  &__head {
+    @apply col-span-12 mb-12 md:mb-0;
+
+    .lg {
+      img {
+        @apply mx-auto md:mx-0;
+      }
+    }
+  }
+
+  &__nav {
+    @apply col-span-6 md:col-span-2 md:flex md:items-end gap-16 mb-12 md:mb-0 font-bold;
+
+    &.-main {
+      @apply md:col-span-4;
+    }
+
+    ul {
+      @apply flex-1;
+
+      & + ul {
+        @apply mt-4 md:mt-0;
+      }
+    }
+
+    li {
+      @apply mb-4;
+
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+  }
+
+  &__disclaimers {
+    @apply col-span-12 md:col-start-10 md:col-span-4;
+  }
+}