add form styles

assets/css/buttons.css

@@ -15,12 +15,19 @@ a.button {
   margin-bottom: 5px;
   text-decoration: none;
   text-align: center;
-  border-radius: 8px;
-  border: 1px solid transparent;
+  border-radius: 0;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  font: inherit;
+  font-weight: bold;
   appearance: none;
   cursor: pointer;
   outline: none;
 
+  &:hover {
+    background: color-mod(var(--accent) a(90%));
+  }
+
   /* variants */
 
   &.outline {
@@ -34,20 +41,11 @@ a.button {
     }
   }
 
-  &.primary {
-    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
-
-    &:hover {
-      box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
-    }
-  }
-
   &.link {
     background: none;
     font-size: 1rem;
   }
 
-
   /* sizes */
 
   &.small {
@@ -64,6 +62,8 @@ a.read-more,
 a.read-more:hover,
 a.read-more:active {
   display: inline-flex;
+  border: none;
+  color: var(--accent);
   background: none;
   box-shadow: none;
   padding: 0;

assets/css/form.css

@@ -0,0 +1,30 @@
+input, textarea, select {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: 0;
+  padding: 10px;
+  font: inherit;
+  appearance: none;
+
+  &:focus, :active {
+    border-color: var(--color);
+    outline: 1px solid var(--color);
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+}
+
+select {
+  background: var(--background);
+
+  option {
+    background: var(--background);
+  }
+}
+
+::placeholder {
+  color: color-mod(var(--accent) a(50%));
+}

assets/css/style.css

@@ -2,6 +2,7 @@
 
 @import 'font.css';
 @import 'buttons.css';
+@import 'form.css';
 
 @import 'header.css';
 @import 'logo.css';