Add form section

assets/styles/_animations.scss

@@ -20,6 +20,15 @@
     }
 }
 
+@keyframes expand-height {
+    0% {
+        height: 0;
+    }
+    100% {
+        height: calc(100% - var(--regular-icon-size));
+    }
+}
+
 @keyframes fade-in-from-bottom {
     0% {
         opacity: 0;

assets/styles/_fonts.scss

@@ -59,3 +59,102 @@
     font-weight: 900;
     font-style: normal;
 }
+
+// Karla
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-ExtraLight.ttf) format('truetype');
+    font-weight: 200;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-ExtraLightItalic.ttf) format('truetype');
+    font-weight: 200;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-Light.ttf) format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-LightItalic.ttf) format('truetype');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-Regular.ttf) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-Italic.ttf) format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-Medium.ttf) format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-MediumItalic.ttf) format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-SemiBold.ttf) format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-SemiBoldItalic.ttf) format('truetype');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-Bold.ttf) format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-BoldItalic.ttf) format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-ExtraBold.ttf) format('truetype');
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Karla';
+    src: url(~/assets/fonts/karla/Karla-ExtraBoldItalic.ttf) format('truetype');
+    font-weight: 800;
+    font-style: italic;
+}

assets/styles/_variables.scss

@@ -1,69 +0,0 @@
-// --------------------------------------------------
-// VARIABLES
-// --------------------------------------------------
-
-:root {
-
-    // Fonts
-
-    --text-font-family: 'Cairo', sans-serif;
-    --title-font-family: 'Cairo', sans-serif;
-    --extra-light-font-weight: 200;
-    --light-font-weight: 300;
-    --regular-font-weight: 400;
-    --medium-font-weight: 500;
-    --semi-bold-font-weight: 600;
-    --bold-font-weight: 700;
-    --extra-bold-font-weight: 800;
-    --black-font-weight: 900;
-    --h1-font-size: 2rem;
-    --h2-font-size: 1.8rem;
-    --h3-font-size: 1.6rem;
-    --button-font-size: 1.4rem;
-    --text-font-size: 1.2rem;
-    --caption-font-size: 1.1rem;
-    --footnote-font-size: 1rem;
-    --line-height: 1.2;
-
-    // Dimensions
-
-    --regular-icon-size: 2.5rem;
-    --small-icon-size: 1.2rem;
-
-
-    // Colors
-
-    --eerie-black: #212121;
-    --jet: #333333;
-    --silver: #C2C2C2;
-    --emerald: #72C080;
-    --granny-smith-apple: #A3F3B0;
-    --middle-green: #428F53;
-
-    --primary-color: var(--eerie-black);
-    --primary-color-light: var(--jet);
-    --primary-color-dark: black;
-    --secondary-color: white;
-    --secondary-color-dark: var(--silver);
-    --accent-color: var(--emerald);
-    --accent-color-light: var(--granny-smith-apple);
-    --accent-color-dark: var(--middle-green);
-    --button-gradient: linear-gradient(
-        30deg,
-        hsl(131deg 38% 60%) 1%,
-        hsl(131deg 40% 62%) 34%,
-        hsl(130deg 43% 64%) 46%,
-        hsl(130deg 46% 66%) 54%,
-        hsl(130deg 49% 69%) 60%,
-        hsl(130deg 53% 71%) 66%,
-        hsl(130deg 58% 73%) 71%,
-        hsl(130deg 63% 75%) 76%,
-        hsl(130deg 69% 77%) 83%,
-        hsl(130deg 77% 80%) 100%
-    );
-}
-
-// Media queries
-
-$tablet-media-query: 48rem;
-$desktop-media-query: 62rem;

assets/styles/main.scss

@@ -0,0 +1,251 @@
+// --------------------------------------------------
+// VARIABLES
+// --------------------------------------------------
+
+:root {
+
+    // Fonts
+
+    --text-font-family: 'Karla', sans-serif;
+    --title-font-family: 'Cairo', sans-serif;
+    --extra-light-font-weight: 200;
+    --light-font-weight: 300;
+    --regular-font-weight: 400;
+    --medium-font-weight: 500;
+    --semi-bold-font-weight: 600;
+    --bold-font-weight: 700;
+    --extra-bold-font-weight: 800;
+    --black-font-weight: 900;
+    --h1-font-size: 2rem;
+    --h2-font-size: 2rem;
+    --h3-font-size: 1.8rem;
+    --button-font-size: 1.4rem;
+    --text-font-size: 1.2rem;
+    --caption-font-size: 1.1rem;
+    --footnote-font-size: 1rem;
+    --line-height: 1.2;
+
+    // Dimensions
+
+    --content-width: Min(100%, 120rem);
+    --text-width: Min(100%, 60rem);
+    --regular-icon-size: 2rem;
+    --small-icon-size: calc(var(--text-font-size) * var(--line-height));
+    --button-gap: 0.5rem;
+
+
+    // Colors
+
+    --eerie-black: #212121;
+    --sonic-silver: #7a7a7a;
+    --silver: #C2C2C2;
+    --emerald: #72C080;
+    --granny-smith-apple: #A3F3B0;
+    --middle-green: #428F53;
+
+    --primary-color: var(--eerie-black);
+    --primary-color-light: var(--sonic-silver);
+    --primary-color-dark: black;
+    --secondary-color: white;
+    --secondary-color-dark: var(--silver);
+    --accent-color: var(--emerald);
+    --accent-color-light: var(--granny-smith-apple);
+    --accent-color-dark: var(--middle-green);
+    --button-gradient: linear-gradient(
+        45deg,
+        hsl(131deg 38% 60%) 1%,
+        hsl(131deg 40% 62%) 34%,
+        hsl(130deg 43% 64%) 46%,
+        hsl(130deg 46% 66%) 54%,
+        hsl(130deg 49% 69%) 60%,
+        hsl(130deg 53% 71%) 66%,
+        hsl(130deg 58% 73%) 71%,
+        hsl(130deg 63% 75%) 76%,
+        hsl(130deg 69% 77%) 83%,
+        hsl(130deg 77% 80%) 100%
+    );
+}
+
+// Media queries
+
+$tablet-media-query: 48rem;
+$desktop-media-query: 62rem;
+
+// --------------------------------------------------
+// FONTS AND COLORS
+// --------------------------------------------------
+
+body {
+    font-family: var(--text-font-family);
+    font-size: var(--text-font-size);
+    font-weight: var(--regular-font-weight);
+    line-height: var(--line-height);
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+}
+
+h1 {
+    font-family: var(--title-font-family);
+    font-size: var(--h1-font-size);
+    font-weight: var(--medium-font-weight);
+}
+
+h2 {
+    font-family: var(--title-font-family);
+    font-size: var(--h2-font-size);
+}
+
+h3 {
+    font-family: var(--text-font-family);
+    font-size: var(--h3-font-size);
+}
+
+p {
+    font-weight: var(--light-font-weight);
+}
+
+strong {
+    font-weight: var(--bold-font-weight);
+}
+
+em {
+    font-style: italic;
+}
+
+// --------------------------------------------------
+// LINK STYLE
+// --------------------------------------------------
+
+a {
+    color: var(--secondary-color);
+    text-decoration: underline var(--accent-color);
+    border-radius: 2px;
+    transition: color 200ms ease-in-out;
+
+    &:hover,
+    &:focus,
+    &:active {
+        color: var(--accent-color);
+    }
+
+    &:focus-visible {
+        outline: 1px dashed var(--accent-color);
+        outline-offset: 2px;
+        animation: expand-outline 200ms ease-in-out;
+    }
+}
+
+// --------------------------------------------------
+// BUTTON STYLE
+// --------------------------------------------------
+
+button {
+    padding: 1rem 1.5rem;
+    color: var(--primary-color);
+    background-image: var(--button-gradient);
+    background-size: 100%;
+    background-position: right center;
+    border: none;
+    border-radius: 40px;
+    cursor: pointer;
+    font-family: var(--title-font-family);
+    font-size: var(--text-font-size);
+    font-weight: var(--semi-bold-font-weight);
+    line-height: var(--line-height);
+    text-align: center;
+    transition: background-size 200ms ease-in-out;
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-size: 300%;
+    }
+
+    &:focus-visible {
+        outline: 1px dashed var(--accent-color);
+        outline-offset: 4px;
+        animation: expand-outline 200ms ease-in-out;
+    }
+}
+
+@mixin button-with-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &-text {
+        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
+        transition: transform 200ms ease-in-out;
+    }
+
+    &-icon {
+        display: inherit;
+        flex-shrink: 0;
+        opacity: 0;
+        width: var(--small-icon-size);
+        height: var(--small-icon-size);
+        margin: 0 0 0 var(--button-gap);
+        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
+        transition:
+            opacity 200ms ease-in-out,
+            transform 200ms ease-in-out; 
+    }
+
+    &:hover &-text,
+    &:focus &-text,
+    &:active &-text {
+        transform: translateX(0);
+    }
+
+    &:hover &-icon,
+    &:focus &-icon,
+    &:active &-icon {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+// --------------------------------------------------
+// FORM STYLE
+// --------------------------------------------------
+
+div:has(label) { // Not yet supported in Firefox
+    position: relative;
+}
+
+label {
+    position: absolute;
+    top: calc(-1 * (var(--text-font-size) / 2));
+    left: 1rem;
+    display: inline-block;
+    padding: 0 0.5rem;
+    font-family: var(--title-font-family);
+    background-color: var(--primary-color);
+}
+
+input,
+textarea {
+    font-family: var(--text-font-family);
+    font-size: var(--text-font-size);
+    font-weight: var(--light-font-weight);
+    line-height: var(--line-height);
+    width: 100%;
+    padding: 1rem;
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+    border: 1px solid var( --primary-color-light);
+    border-radius: 10px;
+    transition: border 200ms ease-in-out;
+
+    &:hover,
+    &:focus,
+    &:active {
+        border: 1px solid var(--accent-color);
+        outline: none;
+    }
+}
+
+textarea {
+    resize: vertical;
+    min-height: 15rem;
+}