feat(landing): version 2.0

.eslintrc.js

@@ -9,4 +9,9 @@ module.exports = {
     'plugin:nuxt/recommended',
     'codex',
   ],
+  rules: {
+    'jsdoc/require-returns': 'off',
+    'no-irregular-whitespace': 'off',
+    'import/named': 'off',
+  },
 };

assets/styles/common.pcss

@@ -1,11 +1,69 @@
-a {
-  text-decoration: none;
-  color: inherit;
+:root { font-family: 'Inter', system-ui, sans-serif; }
+
+@supports (font-variation-settings: normal) {
+  :root { font-family: 'InterVariable', system-ui, sans-serif; }
+}
+
+html {
+  font-size: 14px;
+  line-height: 20px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+
+  background: var(--color-bg-main);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+/**
+ * App content max size (1520px)
+ */
+.block-inner-container {
+  width: 100%;
+  max-width: var(--layout-block-inner-container-width);
+  margin: 0 auto;
+  padding: 0 var(--layout-paddings-horisontal);
+}
+
+
+/**
+ * Center column max size (1024px)
+ */
+.block-content-container {
+  width: 100%;
+  max-width: var(--layout-content-container-width);
+  margin: 0 auto;
 }
 
-.small-heading {
-  color: var(--color-text-second);
-  text-transform: uppercase;
-  font-size: 13px;
-  font-weight: 500;
+.svg-icon {
+  fill: currentColor;
+}
+
+.link-with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.desktop-only {
+  @media (max-width: 850px) {
+    display: none !important;
+  }
+}
+
+.mobile-only {
+  display: none !important;
+
+  @media (max-width: 850px) {
+    display: block !important;
+  }
 }

assets/styles/variables.pcss

@@ -2,27 +2,77 @@
 @custom-media --screen-small (max-width: 1024px);
 @custom-media --screen-mobile (max-width: 850px);
 @custom-media --screen-mobile-extra-small (max-width: 320px);
+@custom-media --screen-desktop (min-width: 851px);
+@custom-media --screen-retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
 
 :root {
-  --color-bg-main: #181B23;
-  --color-bg-header: #242732;
-  --color-text-main: #DBE6FF;
-  --color-bg-button-primary: #4979E4;
-  --color-text-second: rgba(219, 230, 255, 0.6); /* 60% alpha */
-  --color-text-inversed: #242732;
-  --color-border-light: rgba(219, 230, 255, 0.1); /* 10% alpha */
+  --color-bg-main: #000000;
+  --color-bg-secondary: #101010;
+  --color-bg-third: #080808;
+  --color-bg-popover: #231E30;
 
+  --color-text-main: #ffffff;
+  --color-text-secondary: #B5B5B5;
+  --color-text-third: #707070;
+  --color-text-link-visited: #6f6087;
+
+  --color-code-text: #E1E4E8;
+  --color-code-comment: var(--color-text-secondary);
+  --color-code-token: #F97583;
+  --color-code-class: #79B8FF;
+  --color-code-string: #9ECBFF;
+  --color-code-method: #B392F0;
+  --color-code-object: #FFAB70;
+  --color-code-added-line-text: #63FFA1;
+  --color-code-added-line-bg: #083A1D;
+  --color-code-removed-line-text: #FF9FA1;
+  --color-code-removed-line-bg: #352020;
+  --color-code-highlighted-line-bg: #c63a5423;
+
+  --color-signal: #652CFF;
+
+  --color-button-primary: #652CFF;
+  --color-button-primary-hover: #5223CC;
+  --color-button-primary-border: #652CFF;
+  --color-button-primary-text: #F2F1F4;
+
+  --color-button-secondary: #282B31;
+  --color-button-secondary-hover: #1E1E1E;
+  --color-button-secondary-border: #32363C;
+  --color-button-secondary-text: #D5D9E9;
+
+  --hawk-text-primary: #DBE6FF;
+  --hawk-text-secondary: #7D849E;
+  --hawk-text-third: #646C81;
+  --hawk-color-signal: #4979E4;
+  --hawk-color-bg-secondary:rgba(125, 132, 158, 0.24);
+  --hawk-color-bg-main: #242732;
+
+  --z-header: 100;
+
+
+  --color-separator: rgba(255, 255, 255, 0.12);
+  --color-separator-island: #171717;
+
+  --layout-block-inner-container-width: 1520px;
+  --layout-content-container-width: 1024px;
+
+  --layout-header-height: 64px;
   --layout-paddings-horisontal: 20px;
-  --layout-main-col-width: 1024px;
+  --layout-paddings-grid: 26px;
+  --layout-paddings-appshell: var(--layout-paddings-horisontal);
+
   --layout-page-content-max-width: 660px;
   --layout-features-column-width: 620px;
+  --layout-features-wide-content-width: 847px;
 
-  --font-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  --font-mono: "JetBrains Mono", SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
 }
 
-@media (--screen-small) {
+/* Variable font support */
+@supports (font-variation-settings: normal) {
   :root {
-    --layout-main-col-width: 860px;
+    --font-mono: "JetBrainsMonoVariable", "JetBrains Mono", SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
   }
 }