support : integration except products

assets/css/base/_body.scss

@@ -0,0 +1,41 @@
+* {
+    margin: 0;
+    padding: 0;
+
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased
+}
+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;
+}
+
+
+
+//temp
+main{
+    // padding-top: calc(var(--header-h-shrinked) - var(--padding-body));
+}

assets/css/base/_responsive.scss

@@ -0,0 +1,14 @@
+$desktop: "screen and (min-width: 1200px)";
+$medium: "screen and (max-width: 1200px)";
+$small-up: "screen and (min-width: 720px)";
+$small: "screen and (max-width: 720px)";
+$x-small: "screen and (max-width: 560px)";
+
+
+@media #{$medium}{
+    :root{
+        --padding: 16px;
+        --padding-cards: 0.75rem;
+        --padding-cards-small: 0.5rem;
+    }
+}

assets/css/base/_var.scss

@@ -0,0 +1,55 @@
+:root{
+    --font: Arial, sans-serif;
+
+    // --fs-small: 9px;
+    // --font-size: 12px;
+    // --fs-medium: 18px;
+    // --fs-big: 24px;
+
+    --fs-x-small: 9px;
+    --fs-small: 13px;
+    --fs-normal: 18px;
+    --fs-medium: 22px;
+    --fs-big: 28px;
+    --fs-x-big: 36px;
+
+    --leading-tight: 1;
+    --leading-normal: 1.2;
+    // --leading-relaxed: 1.4;
+    // --leading-loose: 1.8;
+
+    --fw-normal: 400;
+    --fw-medium: 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-800: #383838;
+
+    --border: 1px solid var(--color-txt);
+
+
+    --header-h: 140px;
+    --header-h-shrinked: 60px;
+
+
+    // responsive
+    --padding-body: 16px;
+
+
+    --radius-small: 4px;
+    --spacing: 40px;
+    --h-block: 40px;
+
+    
+
+
+    
+}