feat: added web

2026-06-02 17:45:51 +03:00
parent 709df7eddc
commit 0719b11093
39 changed files with 12450 additions and 0 deletions
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -0,0 +1,150 @@
+@use "vars" as *;
+@use "mixins" as *;
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    min-width: 320px;
+    margin: 0;
+    font-family: $font-main;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.4;
+    color: $color-black;
+    background: $color-white;
+    text-rendering: geometricPrecision;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+button,
+a {
+    -webkit-tap-highlight-color: transparent;
+}
+
+img,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+.container {
+    width: min($container-width, calc(100% - 32px));
+    margin-inline: auto;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 46px;
+    padding: 0 26px;
+    border: 1px solid transparent;
+    border-radius: $radius-pill;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    transition: transform $transition-fast, border-color $transition-fast, background-color $transition-fast, color $transition-fast;
+
+    @include hover-supported {
+        transform: translateY(-2px);
+    }
+
+    &--dark {
+        min-width: 172px;
+        gap: 12px;
+        color: $color-white;
+        background: $color-black;
+        box-shadow: 0 18px 38px rgba($color-black, 0.12);
+    }
+
+    &--light {
+        min-width: 150px;
+        color: $color-btn-light-text;
+        background: rgba($color-white, 0.78);
+        border-color: rgba($color-black, 0.14);
+    }
+}
+
+.site-header {
+    position: fixed;
+    top: 14px;
+    left: 50%;
+    z-index: 20;
+    width: min(505px, calc(100% - 32px));
+    transform: translateX(-50%);
+
+    &__inner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 50px;
+        padding: 0 20px;
+        border: 1px solid rgba($color-black, 0.06);
+        border-radius: $radius-pill;
+        background: rgba(248, 248, 248, 0.86);
+        backdrop-filter: blur(16px);
+    }
+
+    &__logo {
+        flex: 0 0 auto;
+
+        img {
+            width: 100px;
+            height: auto;
+        }
+    }
+
+    &__nav {
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        color: $color-header-text;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1;
+
+        a {
+            transition: color $transition-fast;
+
+            @include hover-supported {
+                color: $color-black;
+            }
+        }
+    }
+}
+
+@include media-down($bp-mobile) {
+    .site-header {
+        top: 10px;
+        width: calc(100% - 20px);
+
+        &__inner {
+            min-height: 46px;
+            padding: 0 16px;
+        }
+
+        &__logo img {
+            width: 92px;
+        }
+
+        &__nav {
+            gap: 12px;
+            font-size: 11px;
+        }
+    }
+}