Extended scss files.

frontend/styles/global.scss

@@ -1,4 +1,49 @@
-@import './frontend/styles/variables';
+@import 'frontend/styles/variables';
+
+@font-face {
+  font-family: "Mabry";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/frontend/assets/fonts/mabry/Mabry-Regular-Pro.woff") format("woff");
+}
+
+body {
+  font-family: "Mabry", sans-serif; 
+  background-color: #19171A;
+  color: white;
+
+  margin-bottom: 2rem;
+}
+
+h1,h2,h3,h4,h5 {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: var(--text-xxl);
+
+  @include mobile {
+    font-size: var(--text-xl);
+  }
+}
+
+h2 {
+  font-size: var(--text-lg);
+
+  @include mobile {
+    font-size: var(--text-md);
+  }
+}
+h3 {
+  font-size: var(--text-lg);
+
+  &.h3-alt {
+    font-size: calc(0.785 * var(--text-lg));
+  }
+}
+
+
 
 .flex {
   display: flex;
@@ -17,6 +62,11 @@
   flex-direction: column;
 }
 
+.justify-around {
+  display: flex;
+  justify-content: space-around;
+}
+
 @include desktop {
   .mobile-only {
     display: none;
@@ -28,3 +78,82 @@
     display: none;
   }
 }
+
+.col-wrap {
+  padding-left: 120px;
+  padding-right: 120px;
+
+  @include tablet {
+    padding: 0 48px;
+  }
+
+  @include mobile {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+.max-width {
+  max-width: 1520px;
+  margin: auto;
+}
+
+.top-show {
+  box-sizing: border-box;
+  padding-bottom: var(--space-xxl);
+  padding-top: var(--space-xxxxl);
+
+  &-sm {
+    padding-top: var(--space-xxl);
+  }
+
+  @include mobile {
+    padding-top: var(--space-xl);
+  }
+}
+
+
+.page-header {
+  @include mobile {
+    margin-top: 2rem; 
+  }
+}
+
+
+.accent--xl {
+    font-size:calc(1.375 * var(--text-base-size))
+}
+
+@media (max-width: 992px) {
+    .accent--xl {
+        font-size:calc(1.25 * var(--text-base-size))
+    }
+}
+
+@media (max-width: 520px) {
+    .accent--xl {
+        font-size:calc(1.125 * var(--text-base-size))
+    }
+}
+
+.accent--lg {
+    font-size:calc(1.25 * var(--text-base-size))
+}
+
+@media (max-width: 992px) {
+    .accent--lg {
+        font-size:calc(1.125 * var(--text-base-size))
+    }
+}
+
+.accent--md {
+    font-size:calc(1.125 * var(--text-base-size))
+}
+
+@media (max-width: 992px) {
+    .accent--md {
+        font-size:calc(1 * var(--text-base-size))
+    }
+}
+
+

frontend/styles/icons.scss

@@ -1 +1 @@
-@import './frontend/assets/fonts/planetposen-icons/style.scss';
+@import 'frontend/assets/fonts/planetposen-icons/style.scss';

frontend/styles/normalize.scss

@@ -2,5 +2,14 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  -webkit-appearance: unset;
 }

frontend/styles/spacing.scss

@@ -0,0 +1,265 @@
+:root {
+    --space-unit: 1.125em;
+    --space-xxs: calc(0.25 * var(--space-unit));
+    --space-xs: calc(0.5 * var(--space-unit));
+    --space-sm: calc(0.75 * var(--space-unit));
+    --space: calc(1 * var(--space-unit));
+    --space-md: calc(1.25 * var(--space-unit));
+    --space-lg: calc(2 * var(--space-unit));
+    --space-xl: calc(3.25 * var(--space-unit));
+    --space-xxl: calc(5.25 * var(--space-unit));
+    --space-xxxl: calc(8.5 * var(--space-unit));
+    --space-xxxxl: calc(12 * var(--space-unit));
+    --component-padding: var(--space-xl)
+}
+
+@media (max-width: 992px) {
+    :root {
+        --space-unit: 1em;
+        --component-padding: var(--space-lg)
+    }
+}
+
+.margin-top {
+    margin-top:var(--space)
+}
+
+.margin-top--xs {
+    margin-top:var(--space-sm)
+}
+
+.margin-top--sm {
+    margin-top:var(--space-md)
+}
+
+.margin-top--md {
+    margin-top:var(--space-lg)
+}
+
+.margin-top--lg {
+    margin-top:var(--space-xl)
+}
+
+.margin-top--xl {
+    margin-top:var(--space-xxl)
+}
+
+.margin-top--xxl {
+    margin-top:var(--space-xxxl)
+}
+
+.margin-top--xxxl {
+    margin-top:var(--space-xxxxl)
+}
+
+.margin-bottom--xs {
+    margin-bottom:var(--space-sm)
+}
+
+.margin-bottom {
+    margin-bottom:var(--space)
+}
+
+.margin-bottom--sm {
+    margin-bottom:var(--space-md)
+}
+
+.margin-bottom--md {
+    margin-bottom:var(--space-lg)
+}
+
+.margin-bottom--lg {
+    margin-bottom:var(--space-xl)
+}
+
+.margin-bottom--xl {
+    margin-bottom:var(--space-xxl)
+}
+
+.margin-bottom--xxl {
+    margin-bottom:var(--space-xxxl)
+}
+
+.margin-bottom--xxxl {
+    margin-bottom:var(--space-xxxxl)
+}
+
+.padding-top {
+    padding-top:var(--space)
+}
+
+.padding-top--xs {
+    padding-top:var(--space-sm)
+}
+
+.padding-top--sm {
+    padding-top:var(--space-md)
+}
+
+.padding-top--md {
+    padding-top:var(--space-lg)
+}
+
+.padding-top--lg {
+    padding-top:var(--space-xl)
+}
+
+.padding-top--xl {
+    padding-top:var(--space-xxl)
+}
+
+.padding-top--xxl {
+    padding-top:var(--space-xxxl)
+}
+
+.padding-top--xxxl {
+    padding-top:var(--space-xxxxl)
+}
+
+.padding-bottom {
+    padding-bottom:var(--space)
+}
+
+.padding-bottom--xs {
+    padding-bottom:var(--space-sm)
+}
+
+.padding-bottom--sm {
+    padding-bottom:var(--space-md)
+}
+
+.padding-bottom--md {
+    padding-bottom:var(--space-lg)
+}
+
+.padding-bottom--lg {
+    padding-bottom:var(--space-xl)
+}
+
+.padding-bottom--xl {
+    padding-bottom:var(--space-xxl)
+}
+
+.padding-bottom--xxl {
+    padding-bottom:var(--space-xxxl)
+}
+
+.padding-bottom--xxxl {
+    padding-bottom:var(--space-xxxxl)
+}
+
+@media (max-width: 992px) {
+    .margin-top--xs {
+        margin-top:var(--space-xs)
+    }
+
+    .margin-top, .margin-top--md {
+        margin-top:var(--space-md)
+    }
+
+    .margin-top--sm {
+        margin-top:var(--space-sm)
+    }
+
+    .margin-top--lg {
+        margin-top:var(--space-lg)
+    }
+
+    .margin-top--xl {
+        margin-top:var(--space-xl)
+    }
+
+    .margin-top--xxl {
+        margin-top:var(--space-xxl)
+    }
+
+    .margin-top--xxxl {
+        margin-top:var(--space-xxxl)
+    }
+
+    .margin-bottom--xs {
+        margin-bottom:var(--space-xs)
+    }
+
+    .margin-bottom, .margin-bottom--md {
+        margin-bottom:var(--space-md)
+    }
+
+    .margin-bottom--sm {
+        margin-bottom:var(--space-sm)
+    }
+
+    .margin-bottom--lg {
+        margin-bottom:var(--space-lg)
+    }
+
+    .margin-bottom--xl {
+        margin-bottom:var(--space-xl)
+    }
+
+    .margin-bottom--xxl {
+        margin-bottom:var(--space-xxl)
+    }
+
+    .margin-bottom--xxxl {
+        margin-bottom:var(--space-xxxl)
+    }
+
+    .padding-top--xs {
+        padding-top:var(--space-xs)
+    }
+
+    .padding-top, .padding-top--md {
+        padding-top:var(--space-md)
+    }
+
+    .padding-top--sm {
+        padding-top:var(--space-sm)
+    }
+
+    .padding-top--lg {
+        padding-top:var(--space-lg)
+    }
+
+    .padding-top--xl {
+        padding-top:var(--space-xl)
+    }
+
+    .padding-top--xxl {
+        padding-top:var(--space-xxl)
+    }
+
+    .padding-top--xxxl {
+        padding-top:var(--space-xxxl)
+    }
+
+    .padding-bottom--xs {
+        padding-bottom:var(--space-xs)
+    }
+
+    .padding-bottom, .padding-bottom--md {
+        padding-bottom:var(--space-md)
+    }
+
+    .padding-bottom--sm {
+        padding-bottom:var(--space-sm)
+    }
+
+    .padding-bottom--lg {
+        padding-bottom:var(--space-lg)
+    }
+
+    .padding-bottom--xl {
+        padding-bottom:var(--space-xl)
+    }
+
+    .padding-bottom--xxl {
+        padding-bottom:var(--space-xxl)
+    }
+
+    .padding-bottom--xxxl {
+        padding-bottom:var(--space-xxxl)
+    }
+}
+
+

frontend/styles/variables.scss

@@ -1,9 +1,71 @@
 
-$green: #5cdb95;
+$green: #3b945e;
 $text-color: #05386B;
 
+$tablet-width: 1200px;
 $mobile-width: 768px;
 
+:root {
+  --color-highlight: #D5F5E3;
+
+  --color-green: #28B463;
+  --color-pink: #F0729F;
+  --color-yellow: #F4D03F;
+  --color-blue: #77A5BD;
+
+  --color-background-pink: #F8CED1;
+  --color-background-yellow: #F9E79F;
+  --color-background-green: #D5F5E3;
+  --color-background-blue: #BBD2DE;
+ 
+  --color-background: #19171A;
+  --color-background-highlight: #272527;
+}
+
+:root {
+  --font-primary: 'Mabry', sans-serif;
+  --font-secondary: serif;
+  --text-base-size: 1em;
+  --text-scale-ratio: 1.45;
+  --text-xs: calc(1em /(var(--text-scale-ratio) * var(--text-scale-ratio)));
+  --text-sm: calc(1em / var(--text-scale-ratio));
+  --text-md: calc(1em * var(--text-scale-ratio));
+  --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
+  --text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
+  --text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
+  --text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
+  --heading-line-height: 1.2;
+  --body-line-height: 1.4;
+}
+:root {
+  --btn-font-size: 1.125em;
+  --btn-sm: calc(var(--btn-font-size) - 0.1em);
+  --btn-md: calc(var(--btn-font-size) + 0.2em);
+  --btn-lg: calc(var(--btn-font-size) + 0.4em);
+  --btn-radius: 4px;
+}
+
+:root {
+  --space-unit: 1.125em;
+  --space-xxs: calc(0.25 * var(--space-unit));
+  --space-xs: calc(0.5 * var(--space-unit));
+  --space-sm: calc(0.75 * var(--space-unit));
+  --space: calc(1 * var(--space-unit));
+  --space-md: calc(1.25 * var(--space-unit));
+  --space-lg: calc(2 * var(--space-unit));
+  --space-xl: calc(3.25 * var(--space-unit));
+  --space-xxl: calc(5.25 * var(--space-unit));
+  --space-xxxl: calc(8.5 * var(--space-unit));
+  --space-xxxxl: calc(12 * var(--space-unit));
+  --component-padding: var(--space-xl)
+}
+
+@mixin tablet {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
 @mixin mobile {
   @media (max-width: #{$mobile-width}) {
     @content;