first commit

assets/css/base/_body.scss

@@ -0,0 +1,44 @@
+* {
+    margin: 0;
+    padding: 0;
+
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased;
+
+    scroll-behavior: smooth;
+}
+a {
+    color: currentColor;
+}
+button{
+    background: none;
+    outline: none;
+    border: none;
+    color: var(--color-txt);
+}
+iframe{
+    border: none;
+}
+
+body{
+    font-family: var(--font);
+    line-height: var(--leading-normal);
+    font-size: var(--fs-normal);
+
+    color: var(--color-txt);
+    background-color: var(--color-bg);
+    padding: 0px var(--padding-body);
+
+    width: 100vw;
+    overflow-x: hidden;
+    
+}
+
+
+
+main{
+    padding-top:  var(--header-h);
+    // padding-bottom: 10vh;
+}

assets/css/base/_responsive.scss

@@ -0,0 +1,11 @@
+$desktop: "screen and (min-width: 1200px)";
+$medium: "screen and (max-width: 1080px)";
+$medium-up: "screen and (min-width: 1080px)";
+$small-up: "screen and (min-width: 720px)";
+$small: "screen and (max-width: 720px)";
+$x-small: "screen and (max-width: 560px)";
+$paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
+
+@media #{$medium}{
+
+}

assets/css/base/_var.scss

@@ -0,0 +1,60 @@
+:root {
+  --font: 'Executive', Arial, sans-serif;
+  --title: 'System', Arial, sans-serif;
+
+  // --fs-x-small: 10px;
+  // --fs-small: 12px;
+  // --fs-normal: 16px;
+  // --fs-medium: 22px;
+  // --fs-big: 38px;
+
+  --fs-x-small: 10px;
+  --fs-small: 12px;
+  --fs-normal: 16px;
+  --fs-medium: 20px;
+  --fs-big: 30px;
+  --fs-x-big: 38px;
+
+  --fs-button-bold: 22px;
+
+  @media #{$small} {
+    --fs-medium: 20px;
+    --fs-big: 26px;
+  }
+
+  --leading-tight: 1;
+  --leading-normal: 1.2;
+  // --leading-relaxed: 1.4;
+  // --leading-loose: 1.8;
+
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
+
+  --color-bg: #161616;
+  --color-txt: #ffffff;
+  --color-accent: #00ff00;
+  --color-accent-50: #e9ffe9;
+  --color-accent-100: #d8fdd8;
+
+  --grey-100: #d8d8d8;
+  --grey-300: #b9b9b9;
+  --grey-400: #969696;
+  --grey-600: #6d6d6d;
+  --grey-800: #383838;
+
+  --border: 1px solid var(--color-txt);
+  --border-light: 1px solid var(--grey-800);
+
+  --header-h: 80px;
+  --header-h-shrinked: 50px;
+
+  // responsive
+  --padding-body: 20px;
+
+  --radius-small: 4px;
+  --spacing: 30px;
+  --h-block: 30px;
+
+  --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}