diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss
index 60b9507..5fe6e25 100644
--- a/src/components/common/card/card.module.scss
+++ b/src/components/common/card/card.module.scss
@@ -3,9 +3,9 @@
.card {
display: flex;
flex-direction: column;
- width: 100%;
- padding-bottom: tovw(2px, 'default', 2px);
cursor: pointer;
+ padding-bottom: tovw(2px, 'default', 2px);
+ width: 100%;
&-blog {
.content {
@@ -14,39 +14,39 @@
}
&__header {
+ display: flex;
+ flex-direction: column;
+ line-height: 1.2;
+ letter-spacing: tovw(-0.6px, 'default', -0.6px);
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(18px, 'default', 12px);
font-weight: 400;
- line-height: 1.2;
- display: flex;
- flex-direction: column;
- letter-spacing: tovw(-0.6px, 'default', -0.6px);
gap: tovw(14px, 'default', 8px);
&-blog {
- align-items: center;
display: flex;
+ align-items: center;
flex-direction: row;
gap: tovw(8px, 'default', 8px);
.category {
+ display: flex;
align-items: center;
border: tovw(1px, 'default', 1px) solid var(--color-white);
border-radius: tovw(4px, 'default', 4px);
- display: flex;
+ padding: 0 tovw(8px, 'default', 8px);
+ max-width: fit-content;
+ height: tovw(32px, 'default', 32px);
+ text-transform: uppercase;
+ line-height: tovw(16px, 'default', 16px);
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(12px, 'default', 12px);
- line-height: tovw(16px, 'default', 16px);
- height: tovw(32px, 'default', 32px);
- max-width: fit-content;
- padding: 0 tovw(8px, 'default', 8px);
- text-transform: uppercase;
}
.date {
+ margin-left: tovw(16px, 'default', 16px);
color: var(--color-grey-light);
font-family: var(--font-dm-mono), sans-serif;
- margin-left: tovw(16px, 'default', 16px);
}
}
@@ -72,8 +72,8 @@
gap: tovw(10px, 'default', 6px);
svg {
- height: tovw(18px, 'default', 12px);
margin-bottom: tovw(1px, 'default', 1px);
+ height: tovw(18px, 'default', 12px);
}
}
@@ -88,9 +88,9 @@
gap: tovw(44px, 'default', 44px);
> .image__container {
- height: tovw(355px, 'default', 200px);
margin: 0;
width: 50%;
+ height: tovw(355px, 'default', 200px);
img {
width: 100%;
@@ -103,17 +103,17 @@
width: 50%;
h2 {
- font-size: tovw(40px, 'default', 40px);
line-height: 134%;
+ font-size: tovw(40px, 'default', 40px);
}
.content {
margin-top: tovw(16px, 'default', 16px);
p {
- font-size: tovw(24px, 'default', 24px);
line-height: 134%;
letter-spacing: -0.02em;
+ font-size: tovw(24px, 'default', 24px);
}
}
@@ -130,11 +130,11 @@
}
.image__container {
- width: 100%;
- height: tovw(232px, 'default', 200px);
margin: tovw(25px, 'default', 16px) 0;
border-top: tovw(1px, 'default', 1px) solid var(--color-white);
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+ width: 100%;
+ height: tovw(232px, 'default', 200px);
img {
width: 100%;
@@ -149,24 +149,24 @@
.content {
display: flex;
- height: 100%;
flex-direction: column;
- place-content: space-between;
- gap: tovw(24px, 'default', 18px);
+ height: 100%;
text-align: left;
+ gap: tovw(24px, 'default', 18px);
+ place-content: space-between;
a {
- width: fit-content;
padding-top: tovw(20px, 'default', 12px);
+ width: fit-content;
}
p {
- font-size: tovw(18px, 'default', 15px);
- line-height: 1.4;
- margin: 0;
-
@include respond-to('mobile') {
line-height: 1.6;
}
+
+ margin: 0;
+ line-height: 1.4;
+ font-size: tovw(18px, 'default', 15px);
}
}
diff --git a/src/components/common/category/category.module.scss b/src/components/common/category/category.module.scss
index 3b3980f..c6e7d41 100644
--- a/src/components/common/category/category.module.scss
+++ b/src/components/common/category/category.module.scss
@@ -1,16 +1,16 @@
@import '~/css/helpers';
.category {
+ display: flex;
align-items: center;
border: tovw(1px, 'default', 1px) solid var(--color-white);
border-radius: tovw(4px, 'default', 4px);
- display: flex;
+ padding: 0 tovw(8px, 'default', 8px);
+ max-width: fit-content;
+ height: tovw(32px, 'default', 32px);
+ text-transform: uppercase;
+ line-height: tovw(16px, 'default', 16px);
+ white-space: nowrap;
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(12px, 'default', 12px);
- line-height: tovw(16px, 'default', 16px);
- height: tovw(32px, 'default', 32px);
- max-width: fit-content;
- padding: 0 tovw(8px, 'default', 8px);
- text-transform: uppercase;
- white-space: nowrap;
}
diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index e0fac3c..c52d5ee 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -5,95 +5,98 @@
text-align: center;
.isotype {
+ margin-bottom: tovw(54px, 'default', 35px);
width: tovw(94px, 'default', 52px);
height: tovw(95px, 'default', 53px);
- margin-bottom: tovw(54px, 'default', 35px);
}
&--section {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- height: calc(var(--vw) * 70);
@include respond-to('mobile') {
- height: calc(var(--vw) * 95);
background-image: url('/images/pre-footer-mobile.png');
background-position: 50%;
background-size: cover;
+ height: calc(var(--vw) * 95);
}
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ height: calc(var(--vw) * 70);
+
&::after,
&::before {
+ @include respond-to('mobile') {
+ content: normal;
+ }
+
position: absolute;
- z-index: -1;
top: 50%;
left: 50%;
- width: 100%;
- height: 101%;
- content: '';
transform: translate(-50%, -50%);
- pointer-events: none;
+ z-index: -1;
background: linear-gradient(
0deg,
var(--color-black) 15%,
rgb(9 9 121 / 0) 50%,
var(--color-black) 100%
);
- @include respond-to('mobile') {
- content: normal;
- }
+ width: 100%;
+ height: 101%;
+ content: '';
+ pointer-events: none;
}
&::before {
- width: 120%;
- height: 115%;
background: radial-gradient(
ellipse farthest-corner at center center,
rgb(4 4 4 / 0.05) 45%,
var(--color-black) 0
);
+ width: 120%;
+ height: 115%;
filter: blur(tovw(80px, 'default', 40px));
}
.video {
position: absolute;
- z-index: -2;
top: 0;
left: 0;
+ z-index: -2;
width: 100%;
height: 100%;
- user-select: none;
pointer-events: none;
+ user-select: none;
}
}
form {
- position: relative;
- width: max-content;
- margin: tovw(62px, 'default', 48px) auto 0;
@include respond-to('mobile') {
width: 100%;
}
+
+ position: relative;
+ margin: tovw(62px, 'default', 48px) auto 0;
+ width: max-content;
}
input {
- font-family: var(--font-tt-hoves);
- font-size: tovw(24px, 'default', 18px);
- width: tovw(440px, 'default', 320px);
- padding-bottom: tovw(10px, 'default', 10px);
- letter-spacing: tovw(-1px, 'default', -1px);
- color: var(--color-white);
+ @include respond-to('mobile') {
+ width: 100%;
+ }
+
border: none;
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
border-radius: 0;
background: transparent;
+ padding-bottom: tovw(10px, 'default', 10px);
+ width: tovw(440px, 'default', 320px);
+ letter-spacing: tovw(-1px, 'default', -1px);
+ color: var(--color-white);
+ font-family: var(--font-tt-hoves);
+ font-size: tovw(24px, 'default', 18px);
appearance: none;
- @include respond-to('mobile') {
- width: 100%;
- }
-
&::placeholder {
color: var(--color-grey-light);
}
@@ -102,14 +105,14 @@
position: absolute;
top: 50%;
right: 0;
- width: tovw(18px, 'default', 11px);
- height: tovw(18px, 'default', 11px);
- margin: 0;
- padding: 0;
- cursor: pointer;
transform: translateY(-80%);
+ margin: 0;
border: none;
background: none;
+ cursor: pointer;
+ padding: 0;
+ width: tovw(18px, 'default', 11px);
+ height: tovw(18px, 'default', 11px);
appearance: none;
svg {
@@ -120,16 +123,16 @@
}
.line {
- position: absolute;
- top: 0;
- left: calc(50% - (tovw(3px, 'default', 2px) / 2));
- width: tovw(3px, 'default', 2px);
- height: tovw(276px, 'default', 140px);
- margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
-
@include respond-to('mobile') {
display: none;
}
+
+ position: absolute;
+ top: 0;
+ left: calc(50% - (tovw(3px, 'default', 2px) / 2));
+ margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
+ width: tovw(3px, 'default', 2px);
+ height: tovw(276px, 'default', 140px);
}
.footer {
@@ -137,27 +140,22 @@
z-index: 10;
.container {
- display: flex;
- justify-content: space-between;
- padding-bottom: tovw(56px, 'default', 48px);
- border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
-
@include respond-to('mobile') {
margin-top: tovw(40px, 'default', 40px);
}
+ @include respond-to('tablet') {
+ flex-direction: column;
+ }
+
+ display: flex;
+ justify-content: space-between;
+ border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
+ padding-bottom: tovw(56px, 'default', 48px);
nav {
- display: flex;
- gap: tovw(88px, 'default', 55px);
-
- @media screen and (max-width: 1180px) {
- gap: tovw(65px, 'default', 35px);
- }
-
@include respond-to('tablet') {
justify-content: space-between;
}
-
@include respond-to('mobile') {
display: grid;
column-gap: tovw(97px, 'tablet', 97px);
@@ -165,9 +163,13 @@
grid-template-rows: auto;
row-gap: tovw(44px, 'tablet', 44px);
}
- }
- @include respond-to('tablet') {
- flex-direction: column;
+
+ display: flex;
+ gap: tovw(88px, 'default', 55px);
+
+ @media screen and (max-width: 1180px) {
+ gap: tovw(65px, 'default', 35px);
+ }
}
}
@@ -177,20 +179,20 @@
list-style-type: none;
> li {
- line-height: 1.35;
-
@include respond-to('mobile') {
margin-bottom: tovw(14px, 'default', 14px);
}
- &:first-of-type {
- line-height: 1;
- margin-bottom: tovw(12px, 'default', 10px);
+ line-height: 1.35;
+ &:first-of-type {
@include respond-to('mobile') {
margin-bottom: tovw(16px, 'default', 16px);
}
+ margin-bottom: tovw(12px, 'default', 10px);
+ line-height: 1;
+
a {
font-weight: 500;
}
@@ -200,21 +202,27 @@
}
.logo {
- margin-right: tovw(88px, 'default', 64px);
@include respond-to('tablet') {
margin-right: 0;
margin-bottom: tovw(56px, 'tablet', 56px);
}
+ margin-right: tovw(88px, 'default', 64px);
+
svg {
- width: tovw(305px, 'default', 120px);
@include respond-to('tablet') {
width: 100%;
}
+
+ width: tovw(305px, 'default', 120px);
}
}
.connect__links {
+ @include respond-to('mobile') {
+ display: none;
+ }
+
> li:last-of-type {
display: grid;
align-content: flex-start;
@@ -227,14 +235,9 @@
height: tovw(24px, 'default', 24px);
}
}
- @include respond-to('mobile') {
- display: none;
- }
}
.connect__links__mobile {
- display: none;
-
@include respond-to('mobile') {
> li:last-of-type {
display: flex;
@@ -247,43 +250,30 @@
}
}
}
+
+ display: none;
}
.sub__footer {
- ul:first-child {
- display: none;
-
- @include respond-to('mobile') {
- display: unset;
- }
- }
-
- display: flex;
- flex-direction: column;
- gap: tovw(32px, 'default', 32px);
- margin-top: tovw(18px, 'default', 18px);
- margin-bottom: tovw(44px, 'default', 36px);
-
@include respond-to('mobile') {
margin-top: tovw(32px, 'tablet', 32px);
}
- .sub__footer__links {
- display: flex;
- justify-content: space-between;
- width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: tovw(18px, 'default', 18px);
+ margin-bottom: tovw(44px, 'default', 36px);
+ gap: tovw(32px, 'default', 32px);
- li {
- a,
- p {
- font-size: tovw(18px, 'default', 14px);
- font-weight: 400 !important;
- line-height: 1;
- margin: 0;
- color: var(--color-grey-light);
- }
+ ul:first-child {
+ @include respond-to('mobile') {
+ display: unset;
}
+ display: none;
+ }
+
+ .sub__footer__links {
@include respond-to('mobile') {
align-items: center;
flex-direction: column;
@@ -294,14 +284,29 @@
}
}
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+
+ li {
+ a,
+ p {
+ margin: 0;
+ line-height: 1;
+ color: var(--color-grey-light);
+ font-size: tovw(18px, 'default', 14px);
+ font-weight: 400 !important;
+ }
+ }
+
li:first-of-type {
+ @include respond-to('mobile') {
+ margin-bottom: tovw(32px, 'tablet', 32px);
+ gap: tovw(32px, 'mobile');
+ }
+
display: flex;
gap: tovw(37px, 'default', 24px);
-
- @include respond-to('mobile') {
- gap: tovw(32px, 'mobile');
- margin-bottom: tovw(32px, 'tablet', 32px);
- }
}
}
}
diff --git a/src/components/layout/section/section.module.scss b/src/components/layout/section/section.module.scss
index 957b361..31208e6 100644
--- a/src/components/layout/section/section.module.scss
+++ b/src/components/layout/section/section.module.scss
@@ -2,8 +2,8 @@
.base {
position: relative;
- overflow: hidden;
padding: 0 tovw(56px, 'default', 16px);
+ overflow: hidden;
}
.children {
diff --git a/src/components/primitives/button/button.module.scss b/src/components/primitives/button/button.module.scss
index e0a59ca..4d2998b 100644
--- a/src/components/primitives/button/button.module.scss
+++ b/src/components/primitives/button/button.module.scss
@@ -9,11 +9,11 @@
cursor: pointer;
padding: tovw(16px, 'default', 16px) tovw(32px, 'default', 14px);
text-transform: uppercase;
+ text-decoration: none;
line-height: 1;
color: var(--color-white);
font-family: var(--font-dm-mono);
font-size: tovw(18px, 'default', 18px);
- text-decoration: none;
appearance: none;
&:disabled {
@@ -27,8 +27,8 @@
}
&--interactive {
- overflow: hidden;
position: relative;
+ overflow: hidden;
span {
position: relative;
@@ -45,12 +45,12 @@
}
&::before {
- content: '';
- background: var(--color-white);
- width: 130%;
left: -150%;
transform: skew(10deg);
transition: transform var(--duration-normal) var(--ease-button);
+ background: var(--color-white);
+ width: 130%;
+ content: '';
}
&:hover,
@@ -83,8 +83,8 @@
&--unstyled {
border: none;
- padding: tovw(12px, 'default', 12px);
background: none;
+ padding: tovw(12px, 'default', 12px);
&:hover {
background: none;
diff --git a/src/components/primitives/heading/heading.module.scss b/src/components/primitives/heading/heading.module.scss
index ea00807..5a37f80 100644
--- a/src/components/primitives/heading/heading.module.scss
+++ b/src/components/primitives/heading/heading.module.scss
@@ -1,45 +1,45 @@
@import 'css/helpers';
.heading {
+ margin: 0;
font-family: var(--font-heading);
font-weight: 400;
font-kerning: none;
- margin: 0;
&.centered {
text-align: center;
}
&--xl {
- font-size: tovw(110px, 'default', 50px);
line-height: 1.1;
letter-spacing: tovw(-3px);
+ font-size: tovw(110px, 'default', 50px);
}
&--lg {
- font-size: tovw(76px, 'default', 42px);
line-height: 1;
+ font-size: tovw(76px, 'default', 42px);
}
&--md {
- font-size: tovw(58px, 'default', 30px);
- line-height: 1.1;
-
@include respond-to('mobile') {
line-height: 1.24;
}
+
+ line-height: 1.1;
+ font-size: tovw(58px, 'default', 30px);
}
&--sm {
- font-size: tovw(40px, 'default', 30px);
line-height: 1;
+ font-size: tovw(40px, 'default', 30px);
}
&--xs {
- font-size: tovw(12px, 'default', 12px);
+ text-transform: uppercase;
line-height: 1.3;
letter-spacing: tovw(-0.5px);
- text-transform: uppercase;
+ font-size: tovw(12px, 'default', 12px);
}
&--arthemys {
diff --git a/src/components/primitives/link/link.module.scss b/src/components/primitives/link/link.module.scss
index 19814c0..cc09ea4 100644
--- a/src/components/primitives/link/link.module.scss
+++ b/src/components/primitives/link/link.module.scss
@@ -1,34 +1,34 @@
@import 'css/helpers';
.link {
+ position: relative;
+ transition: color var(--duration-fast) var(--ease);
+ outline: none;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ color: currentcolor;
font-family: var(--font-dm-mono);
font-size: tovw(18px, 'default', 16px);
font-weight: 400;
- position: relative;
- transition: color var(--duration-fast) var(--ease);
- white-space: nowrap;
- text-decoration: none;
- text-transform: uppercase;
pointer-events: all;
- color: currentcolor;
- outline: none;
&--default,
&--nav {
.icon {
- position: absolute;
- right: tovw(-24px, 'default', -26px);
- bottom: tovw(6px, 'default', 3px);
- width: tovw(10px, 'default', 9px);
- height: tovw(10px, 'default', 8px);
- transition: transform var(--normal-transition);
- vertical-align: middle;
-
@include respond-to('mobile') {
right: tovw(-20px, 'mobile', -14px);
bottom: tovw(3px, 'mobile', 4px);
}
+ position: absolute;
+ right: tovw(-24px, 'default', -26px);
+ bottom: tovw(6px, 'default', 3px);
+ transition: transform var(--normal-transition);
+ width: tovw(10px, 'default', 9px);
+ height: tovw(10px, 'default', 8px);
+ vertical-align: middle;
+
&--rotated {
transform: rotate(45deg);
}
@@ -38,11 +38,6 @@
position: absolute;
top: 100%;
left: 0;
- width: 100%;
- height: tovw(1px, 'default', 1px);
- content: '';
- animation: border var(--duration-normal) linear infinite;
- pointer-events: none;
opacity: 0;
background-image: repeating-linear-gradient(
0deg,
@@ -75,19 +70,24 @@
transparent 100%,
currentcolor 100%
);
- background-repeat: no-repeat;
background-position: 0 0, 0 0, 100% 0, 0 100%;
+ background-repeat: no-repeat;
background-size: 0 100%, 100% 0, 0 100%, 100% 2px;
+ width: 100%;
+ height: tovw(1px, 'default', 1px);
+ animation: border var(--duration-normal) linear infinite;
+ content: '';
+ pointer-events: none;
}
&::after {
position: absolute;
top: 100%;
left: 0;
+ background: currentcolor;
width: 100%;
height: tovw(1px);
content: '';
- background: currentcolor;
}
&:hover,
@@ -154,11 +154,11 @@
}
&--nav {
- font-family: var(--font-tt-hoves);
- font-size: tovw(16px, 'default', 14px);
+ text-transform: none;
line-height: 1;
letter-spacing: tovw(-0.5px, 'default', -0.5px);
- text-transform: none;
+ font-family: var(--font-tt-hoves);
+ font-size: tovw(16px, 'default', 14px);
&::after {
content: initial;
diff --git a/src/components/primitives/nav-link/index.tsx b/src/components/primitives/nav-link/index.tsx
deleted file mode 100644
index eaaea4c..0000000
--- a/src/components/primitives/nav-link/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import Link from 'next/link'
-import { forwardRef } from 'react'
-
-import s from './nav-link.module.scss'
-
-export const NavLink = forwardRef<
- HTMLAnchorElement,
- {
- href: string
- children?: React.ReactNode
- title?: string
- bg?: string
- }
->(({ href, children, title, bg = '#FFE927', ...rest }, ref) => {
- return (
-
-
- {children}
-
-
- )
-})
-
-export const NavButton = forwardRef<
- HTMLButtonElement,
- {
- children?: React.ReactNode
- title?: string
- bg?: string
- onClick?: () => void
- type?: 'button' | 'submit'
- }
->(({ children, title, bg = '#FFE927', ...rest }, ref) => {
- return (
-
- )
-})
diff --git a/src/components/primitives/nav-link/nav-link.module.scss b/src/components/primitives/nav-link/nav-link.module.scss
deleted file mode 100644
index e6d7b18..0000000
--- a/src/components/primitives/nav-link/nav-link.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '~/css/helpers';
-
-.base {
- @apply section-borders;
-
- --default-border-color: #{theme('colors.green')};
-
- display: inline-flex;
- align-items: center;
- justify-content: center;
- border-radius: var(--default-border-radius);
- text-transform: uppercase;
- font-weight: 800;
- font-size: tovw(18px, 'desktop-large', '12px');
- padding: 0 1.3333em;
- height: 2.5555em;
- line-height: calc(22 / 18);
- letter-spacing: -0.05em;
- transition: background-color 0.15s ease-in-out;
- appearance: none;
-
- @screen tablet {
- font-size: 12px;
- }
-
- &:hover {
- background-color: var(--bg);
- }
-}
diff --git a/src/components/sections/404/hero/hero.module.scss b/src/components/sections/404/hero/hero.module.scss
index 6873e10..2885b11 100644
--- a/src/components/sections/404/hero/hero.module.scss
+++ b/src/components/sections/404/hero/hero.module.scss
@@ -1,11 +1,18 @@
@import '~/css/helpers';
.section {
+ @include respond-to('mobile') {
+ background-image: url('/images/hero-mobile.png');
+ background-position: 50% 15%;
+ background-repeat: no-repeat;
+ background-size: 100%;
+ }
+
+ display: flex;
position: fixed;
right: 0;
bottom: 0;
left: 0;
- display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
@@ -17,92 +24,86 @@
z-index: 2;
}
- @include respond-to('mobile') {
- background-image: url('/images/hero-mobile.png');
- background-repeat: no-repeat;
- background-position: 50% 15%;
- background-size: 100%;
- }
-
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
&::after,
&::before {
+ @include respond-to('mobile') {
+ content: initial;
+ }
+
position: absolute;
- z-index: -1;
top: 50%;
left: 50%;
- width: 100%;
- height: 101%;
- content: '';
transform: translate(-50%, -50%);
- pointer-events: none;
+ z-index: -1;
background: linear-gradient(
0deg,
var(--color-black) 15%,
rgb(9 9 121 / 0) 50%,
var(--color-black) 100%
);
+ width: 100%;
+ height: 101%;
+ content: '';
+ pointer-events: none;
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
- @include respond-to('mobile') {
- content: initial;
- }
}
&::before {
- width: 120%;
- height: 115%;
background: radial-gradient(
ellipse farthest-corner at center center,
rgb(4 4 4 / 0.25) 55%,
var(--color-black) 0
);
+ width: 120%;
+ height: 115%;
filter: blur(tovw(80px, 'default', 40px));
}
h1 {
@include respond-to('mobile') {
- font-size: tovw(50px, 'mobile', 71px);
margin-top: auto;
+ font-size: tovw(50px, 'mobile', 71px);
}
}
p {
+ margin: 0 auto;
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(18px, 'default', 18px);
- margin: 0 auto;
}
a {
- margin-top: tovw(32px, 'default', 32px);
- text-decoration: none;
-
@include respond-to('mobile') {
- width: 100%;
margin-top: auto;
margin-bottom: tovw(25px, 'mobile');
+ width: 100%;
}
+
+ margin-top: tovw(32px, 'default', 32px);
+ text-decoration: none;
}
}
.scroll {
+ @include respond-to('mobile') {
+ display: none;
+ }
+
+ display: grid;
position: absolute;
bottom: 5%;
left: tovw(56px, 'default', 16px);
- display: grid;
align-items: flex-end;
width: calc(100% - (tovw(56px, 'default', 16px) * 2));
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
- @include respond-to('mobile') {
- display: none;
- }
-
ul {
margin: 0;
padding: 0;
@@ -111,24 +112,24 @@
p,
li {
- font-family: var(--font-dm-mono);
- font-size: tovw(12px, 'default', 11px);
- line-height: 1.7;
width: 100%;
text-align: right;
text-transform: uppercase;
+ line-height: 1.7;
+ font-family: var(--font-dm-mono);
+ font-size: tovw(12px, 'default', 11px);
font-variant-numeric: tabular-nums;
}
> div {
&:first-of-type {
- display: flex;
- align-items: flex-end;
- justify-self: flex-start;
-
@include respond-to('mobile') {
display: none;
}
+
+ display: flex;
+ align-items: flex-end;
+ justify-self: flex-start;
}
&:last-of-type {
@@ -144,41 +145,41 @@
}
.gradient {
+ @include respond-to('mobile') {
+ height: 70%;
+ }
+
position: absolute;
bottom: 0;
left: 0;
- width: 100%;
- height: tovw(740px, 'default', 740px);
background: linear-gradient(
180deg,
rgb(0 0 244 / 0) 1.63%,
rgb(0 0 244 / 0.9) 63.96%
);
-
- @include respond-to('mobile') {
- height: 70%;
- }
+ width: 100%;
+ height: tovw(740px, 'default', 740px);
}
.video {
position: absolute;
- z-index: -2;
top: 0;
left: 0;
+ z-index: -2;
width: 100%;
height: 100%;
- user-select: none;
pointer-events: none;
+ user-select: none;
}
.line {
+ margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
width: tovw(3px, 'default', 2px);
height: tovw(72px, 'default', 56px);
- margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
}
.flag {
+ margin: 0 auto 0 tovw(8px, 'default', 6px);
width: tovw(36px, 'default', 22px);
height: tovw(20px, 'default', 20px);
- margin: 0 auto 0 tovw(8px, 'default', 6px);
}
diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index 7308c00..10918e2 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -1,38 +1,38 @@
@import '~/css/helpers';
.section {
+ @include respond-to('mobile') {
+ padding: 0 0 tovw(18px, 'mobile') 0;
+ width: 100vw;
+ }
+
display: flex;
flex-direction: column;
justify-content: center;
+ padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
max-width: 100%;
min-height: calc(var(--vh) * 100);
- padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
-
- @include respond-to('mobile') {
- width: 100vw;
- padding: 0 0 tovw(18px, 'mobile') 0;
- }
video {
- margin: 0 tovw(-35px, 'default', -35px);
- mix-blend-mode: screen;
-
@include respond-to('mobile') {
display: none;
}
+
+ margin: 0 tovw(-35px, 'default', -35px);
+ mix-blend-mode: screen;
}
.hero__mobile {
- display: none;
-
@include respond-to('mobile') {
display: flex;
- place-self: center;
margin: tovw(30px, 'mobile', 75px) 0 tovw(-25px, 'mobile')
tovw(10px, 'mobile', 10px);
width: 300%;
mix-blend-mode: screen;
+ place-self: center;
}
+
+ display: none;
}
}
@@ -55,52 +55,52 @@
}
h1 {
- margin: 0;
- text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
-
@include respond-to('mobile') {
width: 90%;
font-size: tovw(50px, 'mobile');
}
+
+ margin: 0;
+ text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
}
.arrow {
- display: none;
-
@include respond-to('mobile') {
- position: relative;
display: unset;
+ position: relative;
align-self: flex-end;
- width: tovw(18px, 'mobile', 18px);
padding-bottom: tovw(10px, 'mobile', 10px);
+ width: tovw(18px, 'mobile', 18px);
}
+
+ display: none;
}
}
.line {
- height: tovw(175px, 'default', 130px);
- margin-top: tovw(5px, 'default', 5px);
-
@include respond-to('mobile') {
top: unset;
left: 0;
- height: tovw(140px, 'default', 130px);
- margin: 0;
transform: rotate(0deg) translateY(tovw(8px, 'default', 8px)) scaleX(1.2);
+ margin: 0;
+ height: tovw(140px, 'default', 130px);
}
+
+ margin-top: tovw(5px, 'default', 5px);
+ height: tovw(175px, 'default', 130px);
}
.content {
- display: flex;
- justify-content: space-between;
- gap: tovw(60px, 'default', 20px);
-
@include respond-to('mobile') {
flex-direction: column;
width: 100%;
gap: tovw(120px, 'default', 30px);
}
+ display: flex;
+ justify-content: space-between;
+ gap: tovw(60px, 'default', 20px);
+
div {
&:first-child {
display: flex;
@@ -108,14 +108,14 @@
}
p {
- font-size: tovw(24px, 'default', 18px);
- line-height: 1.32;
- width: tovw(636px, 'default', 200px);
- letter-spacing: -0.01em;
-
@include respond-to('mobile') {
width: 100%;
}
+
+ width: tovw(636px, 'default', 200px);
+ line-height: 1.32;
+ letter-spacing: -0.01em;
+ font-size: tovw(24px, 'default', 18px);
}
div:last-child {
@@ -126,26 +126,26 @@
}
h2 {
- line-height: 1.2;
width: tovw(367px, 'default', 280px);
+ line-height: 1.2;
}
}
}
.gradient {
+ @include respond-to('mobile') {
+ height: 70%;
+ }
+
position: absolute;
- z-index: -1;
top: 0;
left: 0;
- width: 100%;
- height: tovw(740px, 'default', 740px);
+ z-index: -1;
background: linear-gradient(
180deg,
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 99.89%
);
-
- @include respond-to('mobile') {
- height: 70%;
- }
+ width: 100%;
+ height: tovw(740px, 'default', 740px);
}
diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss
index 831ee47..be8d177 100644
--- a/src/components/sections/about/related/related.module.scss
+++ b/src/components/sections/about/related/related.module.scss
@@ -8,120 +8,121 @@
padding: tovw(170px, 'default', 140px) 0;
.slider__container {
- width: calc(100% - tovw(205px, 'default', 16px));
- margin-right: 0;
- margin-left: auto;
-
@include respond-to('mobile') {
width: calc(100% - tovw(16px, 'mobile'));
}
+ margin-right: 0;
+ margin-left: auto;
+ width: calc(100% - tovw(205px, 'default', 16px));
+
@media screen and (min-width: 1141px) {
margin: 0 auto;
}
}
.heading {
+ @include respond-to('mobile') {
+ align-items: flex-start;
+ flex-direction: column;
+ border-bottom: unset;
+ padding: 0 tovw(16px, 'tablet', 16px);
+ gap: tovw(16px, 'mobile');
+ }
+
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: tovw(90px, 'default', 64px);
- @include respond-to('mobile') {
- align-items: flex-start;
- flex-direction: column;
- gap: tovw(16px, 'mobile');
- padding: 0 tovw(16px, 'tablet', 16px);
- border-bottom: unset;
- }
-
h2 {
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
}
span {
+ width: tovw(350px, 'default', 265px);
+ line-height: 1.32;
font-family: var(--font-tt-hoves), sans-serif;
font-size: tovw(24px, 'default', 18px);
- line-height: 1.32;
- width: tovw(350px, 'default', 265px);
}
.gradient {
+ @include respond-to('mobile') {
+ display: none;
+ }
+
position: absolute;
- z-index: -1;
right: 0;
left: 0;
- width: 100%;
- height: tovw(500px, 'default', 250px);
- margin-left: 0;
- content: '';
- user-select: none;
- pointer-events: none;
opacity: 0.4;
+ z-index: -1;
+ margin-left: 0;
background: linear-gradient(
180deg,
rgb(229 229 229 / 0) 0%,
rgb(241 241 241 / 0.4) 48.91%,
rgb(241 241 241 / 0) 89.23%
);
-
- @include respond-to('mobile') {
- display: none;
- }
+ width: 100%;
+ height: tovw(500px, 'default', 250px);
+ content: '';
+ pointer-events: none;
+ user-select: none;
}
}
.events {
- padding-left: tovw(100px);
-
@include respond-to('mobile') {
padding-left: 0;
}
+ padding-left: tovw(100px);
+
@media screen and (min-width: 1141px) {
- width: 100%;
- max-width: tovw(1296px, 'default', 320px);
margin: 0 auto;
padding: 0;
+ width: 100%;
+ max-width: tovw(1296px, 'default', 320px);
}
&::after,
&::before {
- position: absolute;
- right: tovw(-20px, 'default', -20px);
- width: tovw(280px, 'default', 150px);
- height: 100%;
- content: '';
- background: linear-gradient(
- 90deg,
- rgb(3 3 3 / 0) 0%,
- rgb(3 3 3 / 0.95) 35%,
- rgb(3 3 3 / 1) 65%
- );
-
- @media screen and (min-width: 1141px) {
- display: none;
- }
-
@include respond-to('mobile') {
- width: tovw(20px, 'default', 20px);
background: linear-gradient(
90deg,
rgb(3 3 3 / 0) 0%,
rgb(3 3 3 / 0.55) 35%,
rgb(3 3 3 / 1) 95%
);
+ width: tovw(20px, 'default', 20px);
+ }
+
+ position: absolute;
+ right: tovw(-20px, 'default', -20px);
+ background: linear-gradient(
+ 90deg,
+ rgb(3 3 3 / 0) 0%,
+ rgb(3 3 3 / 0.95) 35%,
+ rgb(3 3 3 / 1) 65%
+ );
+ width: tovw(280px, 'default', 150px);
+ height: 100%;
+ content: '';
+
+ @media screen and (min-width: 1141px) {
+ display: none;
}
}
&::before {
- z-index: 5;
- right: initial;
- left: tovw(-180px);
- transform: scaleX(-1);
@include respond-to('mobile') {
content: initial;
}
+
+ right: initial;
+ left: tovw(-180px);
+ transform: scaleX(-1);
+ z-index: 5;
}
}
}
diff --git a/src/components/sections/about/team/team.module.scss b/src/components/sections/about/team/team.module.scss
index 8100cc9..ae6476d 100644
--- a/src/components/sections/about/team/team.module.scss
+++ b/src/components/sections/about/team/team.module.scss
@@ -1,136 +1,135 @@
@import '~/css/helpers';
.section {
- position: relative;
- margin-top: tovw(24px, 'default', 16px);
- padding: tovw(124px, 'default', 100px) 0;
-
@include respond-to('mobile') {
margin-top: 0;
}
+ position: relative;
+ margin-top: tovw(24px, 'default', 16px);
+ padding: tovw(124px, 'default', 100px) 0;
+
.container {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
> div:nth-child(2) {
- display: flex;
- justify-content: space-between;
- width: tovw(1076px, 'default', 400px);
- margin: auto;
- padding-top: tovw(68px, 'default', 40px);
- gap: tovw(24px, 'default', 24px);
-
@include respond-to('mobile') {
flex-direction: column;
width: 100%;
}
- p {
- font-size: tovw(24px, 'default', 18px);
- line-height: 1.32;
- width: tovw(524px, 'default', 300px);
- margin: 0;
- letter-spacing: -0.01em;
+ display: flex;
+ justify-content: space-between;
+ margin: auto;
+ padding-top: tovw(68px, 'default', 40px);
+ width: tovw(1076px, 'default', 400px);
+ gap: tovw(24px, 'default', 24px);
+ p {
@include respond-to('mobile') {
width: 100%;
}
+
+ margin: 0;
+ width: tovw(524px, 'default', 300px);
+ line-height: 1.32;
+ letter-spacing: -0.01em;
+ font-size: tovw(24px, 'default', 18px);
}
}
}
}
.team {
- display: flex;
- flex-direction: column;
- width: tovw(1076px, 'default', 400px);
- margin: auto;
- padding-top: tovw(120px, 'default', 60px);
- gap: tovw(64px, 'default', 26px);
-
@include respond-to('mobile') {
width: 100%;
}
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ padding-top: tovw(120px, 'default', 60px);
+ width: tovw(1076px, 'default', 400px);
+ gap: tovw(64px, 'default', 26px);
+
.header {
display: flex;
align-items: center;
justify-content: space-between;
- padding: tovw(24px, 'default', 20px) 0;
border-bottom: tovw(1px, 'default', 1px) solid grey;
+ padding: tovw(24px, 'default', 20px) 0;
div:first-child {
- display: flex;
- gap: tovw(20px, 'default', 3px);
-
@include respond-to('mobile') {
justify-content: flex-start;
}
+
+ display: flex;
+ gap: tovw(20px, 'default', 3px);
}
span:last-child {
- font-family: var(--font-dm-mono), sans-serif;
- font-size: tovw(16px, 'default', 12px);
- padding-top: tovw(18px, 'default', 8px);
- color: var(--color-grey-light);
-
@include respond-to('mobile') {
display: none;
}
+
+ padding-top: tovw(18px, 'default', 8px);
+ color: var(--color-grey-light);
+ font-family: var(--font-dm-mono), sans-serif;
+ font-size: tovw(16px, 'default', 12px);
}
.line {
- width: tovw(85px, 'default', 55px);
- height: tovw(45px, 'default', 30px);
- transform: rotate(-90deg) translateY(tovw(-5px, 'default', -5px))
- scaleX(2.6) scaleY(1.6);
-
@include respond-to('mobile') {
- height: tovw(25px, 'default', 25px);
transform: rotate(-90deg) scaleX(2.2) scaleY(1.4)
translateY(tovw(-2px, 'mobile', -3px))
translateX(tovw(-2px, 'mobile', -3px));
+ height: tovw(25px, 'default', 25px);
}
+
+ transform: rotate(-90deg) translateY(tovw(-5px, 'default', -5px))
+ scaleX(2.6) scaleY(1.6);
+ width: tovw(85px, 'default', 55px);
+ height: tovw(45px, 'default', 30px);
}
}
}
.profiles__container {
- @media screen and (min-width: 1400px) {
- display: flex;
- justify-content: flex-start;
- gap: tovw(100px, 'default', 40px);
- }
-
@include respond-to('mobile') {
width: 100vw;
overflow: unset !important;
scroll-behavior: smooth;
}
+ @media screen and (min-width: 1400px) {
+ display: flex;
+ justify-content: flex-start;
+ gap: tovw(100px, 'default', 40px);
+ }
}
.member {
display: flex;
flex-direction: column;
justify-content: space-between;
- width: tovw(194px, 'default', 80px) !important;
transition: filter var(--normal-transition);
+ width: tovw(194px, 'default', 80px) !important;
gap: tovw(24px, 'default', 24px);
img {
- overflow: hidden;
border-radius: tovw(5px, 'default', 5px);
+ overflow: hidden;
}
.description {
- font-family: var(--font-tt-hoves);
- font-size: tovw(18px, 'default', 16px);
- line-height: 1.3;
display: flex;
flex-direction: column;
+ line-height: 1.3;
letter-spacing: -0.02em;
+ font-family: var(--font-tt-hoves);
+ font-size: tovw(18px, 'default', 16px);
gap: tovw(5px, 'default', 5px);
span:last-child {
@@ -143,18 +142,18 @@
gap: tovw(14px, 'default', 14px);
button {
- cursor: pointer;
border: none;
background-color: unset;
+ cursor: pointer;
}
svg {
- width: tovw(23px, 'default', 18px);
-
@include respond-to('mobile') {
width: tovw(12px, 'mobile', 19px);
}
+ width: tovw(23px, 'default', 18px);
+
&:hover {
filter: opacity(80%);
}
@@ -170,12 +169,12 @@
}
.arrow {
+ @include respond-to('mobile') {
+ display: none;
+ }
+
position: absolute;
left: tovw(312px, 'default');
width: tovw(23px, 'default', 15px);
height: tovw(23px, 'default', 15px);
-
- @include respond-to('mobile') {
- display: none;
- }
}
diff --git a/src/components/sections/blog/hero/hero.module.scss b/src/components/sections/blog/hero/hero.module.scss
index 78174f1..62bb73d 100644
--- a/src/components/sections/blog/hero/hero.module.scss
+++ b/src/components/sections/blog/hero/hero.module.scss
@@ -5,23 +5,23 @@
align-items: center;
flex-direction: column;
justify-content: space-between;
- max-width: 100%;
- min-height: calc(var(--vh) * 100);
- padding-top: tovw(255px, 'default', 204px);
- padding-bottom: tovw(92px, 'default', 40px);
- text-align: center;
background: linear-gradient(
180deg,
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 99.89%
);
+ padding-top: tovw(255px, 'default', 204px);
+ padding-bottom: tovw(92px, 'default', 40px);
+ max-width: 100%;
+ min-height: calc(var(--vh) * 100);
+ text-align: center;
@media screen and (max-width: 800px) {
min-height: auto;
}
.container {
- padding-top: tovw(156px, 'default', 159px);
z-index: 10;
+ padding-top: tovw(156px, 'default', 159px);
}
}
diff --git a/src/components/sections/blog/post-content/content.module.scss b/src/components/sections/blog/post-content/content.module.scss
index 4434524..e5de448 100644
--- a/src/components/sections/blog/post-content/content.module.scss
+++ b/src/components/sections/blog/post-content/content.module.scss
@@ -13,10 +13,10 @@ $img-height-mobile: 200px;
}
.image__container {
- width: 100%;
- height: tovw($img-height, 'default', $img-height-mobile);
border-top: tovw(1px, 'default', 1px) solid var(--color-white);
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+ width: 100%;
+ height: tovw($img-height, 'default', $img-height-mobile);
img {
width: 100%;
diff --git a/src/components/sections/blog/post-hero/hero.module.scss b/src/components/sections/blog/post-hero/hero.module.scss
index be607d9..95c7d4e 100644
--- a/src/components/sections/blog/post-hero/hero.module.scss
+++ b/src/components/sections/blog/post-hero/hero.module.scss
@@ -1,41 +1,41 @@
@import '~/css/helpers';
.section {
- overflow: visible;
- position: relative;
display: flex;
+ position: relative;
align-items: center;
flex-direction: column;
- max-width: 100%;
- min-height: calc(var(--vh) * 100);
- padding-top: tovw(220px, 'default', 150px);
- text-align: center;
background: linear-gradient(
180deg,
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 99.89%
);
+ padding-top: tovw(220px, 'default', 150px);
+ max-width: 100%;
+ min-height: calc(var(--vh) * 100);
+ overflow: visible;
+ text-align: center;
@media screen and (max-width: 800px) {
- min-height: auto;
padding-bottom: tovw(66px, 'default', 66px);
+ min-height: auto;
}
.author {
- font-size: tovw(18px, 'default', 18px);
- font-family: var(--font-dm-mono);
- line-height: tovw(22px, 'default', 22px);
- letter-spacing: -0.02em;
margin-top: tovw(48px, 'default', 48px);
text-transform: uppercase;
+ line-height: tovw(22px, 'default', 22px);
+ letter-spacing: -0.02em;
+ font-family: var(--font-dm-mono);
+ font-size: tovw(18px, 'default', 18px);
}
.date {
- font-size: tovw(18px, 'default', 18px);
- font-family: var(--font-dm-mono);
+ margin-bottom: tovw(20px, 'default', 23px);
line-height: tovw(22px, 'default', 22px);
letter-spacing: -0.02em;
- margin-bottom: tovw(20px, 'default', 23px);
+ font-family: var(--font-dm-mono);
+ font-size: tovw(18px, 'default', 18px);
}
h1 {
@@ -44,9 +44,9 @@
.categories {
display: flex;
- gap: tovw(8px, 'default', 8px);
- list-style: none;
margin-top: tovw(45px, 'default', 45px);
padding: 0;
+ list-style: none;
+ gap: tovw(8px, 'default', 8px);
}
}
diff --git a/src/components/sections/blog/posts-grid/posts-grid.module.scss b/src/components/sections/blog/posts-grid/posts-grid.module.scss
index 8c9324d..d4b4c2e 100644
--- a/src/components/sections/blog/posts-grid/posts-grid.module.scss
+++ b/src/components/sections/blog/posts-grid/posts-grid.module.scss
@@ -2,11 +2,11 @@
.container {
display: grid;
- grid-template-columns: repeat(3, 1fr);
column-gap: tovw(24px, 'default', 24px);
- row-gap: tovw(104px, 'default', 81px);
- padding-bottom: tovw(80px, 'default', 80px);
padding-top: tovw(96px, 'default', 88px);
+ padding-bottom: tovw(80px, 'default', 80px);
+ grid-template-columns: repeat(3, 1fr);
+ row-gap: tovw(104px, 'default', 81px);
@media screen and (max-width: 800px) {
grid-template-columns: 1fr;
diff --git a/src/components/sections/blog/search/search.module.scss b/src/components/sections/blog/search/search.module.scss
index 8956914..6905ed1 100644
--- a/src/components/sections/blog/search/search.module.scss
+++ b/src/components/sections/blog/search/search.module.scss
@@ -15,17 +15,17 @@
gap: tovw(12px, 'default', 12px);
@media screen and (max-width: 800px) {
- overflow-x: scroll;
- width: 100vw;
- padding: 0 8px;
margin-right: -42px;
+ padding: 0 8px;
+ width: 100vw;
+ overflow-x: scroll;
}
a {
- font-size: tovw(12px, 'default', 12px);
height: tovw(40px, 'default', 40px);
text-decoration: none;
white-space: nowrap;
+ font-size: tovw(12px, 'default', 12px);
}
}
}
@@ -61,17 +61,17 @@
}
> input {
- appearance: none;
- background: none;
border: none;
border-bottom: 1px solid white;
border-radius: 0;
+ background: none;
+ padding-bottom: 12px;
+ width: 100%;
+ line-height: 1;
+ letter-spacing: -0.02em;
color: white;
font-family: var(--font-tt-hoves);
font-size: tovw(24px, 'default', 18px);
- line-height: 1;
- letter-spacing: -0.02em;
- padding-bottom: 12px;
- width: 100%;
+ appearance: none;
}
}
diff --git a/src/components/sections/community/events/events.module.scss b/src/components/sections/community/events/events.module.scss
index 9224ad5..ec91b6f 100644
--- a/src/components/sections/community/events/events.module.scss
+++ b/src/components/sections/community/events/events.module.scss
@@ -15,123 +15,125 @@
}
.slider__container {
- width: calc(100% - tovw(205px, 'default', 16px));
- margin-right: 0;
- margin-left: auto;
-
@include respond-to('mobile') {
width: calc(100% - tovw(16px, 'mobile'));
}
+
+ margin-right: 0;
+ margin-left: auto;
+ width: calc(100% - tovw(205px, 'default', 16px));
}
.header {
+ @include respond-to('mobile') {
+ align-items: flex-start;
+ flex-direction: column;
+ border-bottom: unset;
+ padding-bottom: unset;
+ gap: tovw(16px, 'mobile');
+ }
+
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: tovw(80px, 'default', 64px);
- padding-bottom: tovw(60px, 'default', 30px);
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
-
- @include respond-to('mobile') {
- align-items: flex-start;
- flex-direction: column;
- padding-bottom: unset;
- border-bottom: unset;
- gap: tovw(16px, 'mobile');
- }
+ padding-bottom: tovw(60px, 'default', 30px);
h2 {
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
}
span {
+ width: tovw(350px, 'default', 265px);
+ line-height: 1.32;
font-family: var(--font-tt-hoves), sans-serif;
font-size: tovw(24px, 'default', 18px);
- line-height: 1.32;
- width: tovw(350px, 'default', 265px);
}
.gradient {
+ @include respond-to('mobile') {
+ display: none;
+ }
+
position: absolute;
- z-index: -1;
right: 0;
left: 0;
- width: 100%;
- height: tovw(500px, 'default', 250px);
- margin-left: 0;
- content: '';
- user-select: none;
- pointer-events: none;
opacity: 0.4;
+ z-index: -1;
+ margin-left: 0;
background: linear-gradient(
180deg,
rgb(229 229 229 / 0) 0%,
rgb(241 241 241 / 0.4) 48.91%,
rgb(241 241 241 / 0) 89.23%
);
-
- @include respond-to('mobile') {
- display: none;
- }
+ width: 100%;
+ height: tovw(500px, 'default', 250px);
+ content: '';
+ pointer-events: none;
+ user-select: none;
}
}
.events__container {
- padding-left: tovw(100px);
@include respond-to('mobile') {
padding-left: 0;
}
+ padding-left: tovw(100px);
+
&::after,
&::before {
- position: absolute;
- right: tovw(-20px, 'default', -20px);
- width: tovw(280px, 'default', 150px);
- height: 100%;
- content: '';
- background: linear-gradient(
- 90deg,
- rgb(3 3 3 / 0) 0%,
- rgb(3 3 3 / 0.95) 35%,
- rgb(3 3 3 / 1) 65%
- );
-
@include respond-to('mobile') {
- width: tovw(20px, 'default', 20px);
background: linear-gradient(
90deg,
rgb(3 3 3 / 0) 0%,
rgb(3 3 3 / 0.55) 35%,
rgb(3 3 3 / 1) 95%
);
+ width: tovw(20px, 'default', 20px);
}
+
+ position: absolute;
+ right: tovw(-20px, 'default', -20px);
+ background: linear-gradient(
+ 90deg,
+ rgb(3 3 3 / 0) 0%,
+ rgb(3 3 3 / 0.95) 35%,
+ rgb(3 3 3 / 1) 65%
+ );
+ width: tovw(280px, 'default', 150px);
+ height: 100%;
+ content: '';
}
&::before {
- z-index: 5;
- right: initial;
- left: tovw(-180px);
- transform: scaleX(-1);
@include respond-to('mobile') {
content: initial;
}
+
+ right: initial;
+ left: tovw(-180px);
+ transform: scaleX(-1);
+ z-index: 5;
}
}
.navigation {
- display: flex;
- width: 100%;
- padding-top: tovw(75px, 'default', 45px);
- place-content: center;
- gap: tovw(25px, 'default', 15px);
-
@include respond-to('mobile') {
display: none;
}
+ display: flex;
+ padding-top: tovw(75px, 'default', 45px);
+ width: 100%;
+ gap: tovw(25px, 'default', 15px);
+ place-content: center;
+
.arrow {
- width: tovw(50px, 'default', 30px);
cursor: pointer;
+ width: tovw(50px, 'default', 30px);
&:first-child {
transform: rotate(180deg);
diff --git a/src/components/sections/community/hero/hero.module.scss b/src/components/sections/community/hero/hero.module.scss
index fc8094e..9e42a46 100644
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/src/components/sections/community/hero/hero.module.scss
@@ -1,6 +1,15 @@
@import '~/css/helpers';
.section {
+ @include respond-to('mobile') {
+ display: flex;
+ flex-direction: column;
+ padding-bottom: tovw(18px, 'mobile');
+ width: 100vw;
+ min-height: 100vh;
+ gap: tovw(49px, 'default', 49px);
+ }
+
display: grid;
align-items: center;
justify-content: center;
@@ -10,73 +19,45 @@
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
- @include respond-to('mobile') {
- display: flex;
- flex-direction: column;
- gap: tovw(49px, 'default', 49px);
- width: 100vw;
- min-height: 100vh;
- padding-bottom: tovw(18px, 'mobile');
- }
-
.hero__mobile {
- display: none;
-
@include respond-to('mobile') {
display: flex;
- place-self: center;
- width: 250%;
margin-right: tovw(150px, 'mobile');
padding-top: tovw(65px, 'mobile');
+ width: 250%;
mix-blend-mode: screen;
+ place-self: center;
}
+
+ display: none;
}
}
.video__container {
- position: absolute;
- z-index: -3;
- right: tovw(620px, 'default', 80px);
- padding-top: tovw(220px, 'default', 90px);
-
@include respond-to('mobile') {
display: none;
-
- // position: unset;
- // margin-bottom: tovw(-85px, 'mobile');
- // padding-top: tovw(55px, 'mobile');
}
- video {
- width: tovw(1750px, 'default', 800px);
- user-select: none;
- pointer-events: none;
- z-index: -1;
+ position: absolute;
+ right: tovw(620px, 'default', 80px);
+ z-index: -3;
+ padding-top: tovw(220px, 'default', 90px);
+ video {
@include respond-to('mobile') {
width: tovw(600px, 'mobile');
}
+
+ z-index: -1;
+ width: tovw(1750px, 'default', 800px);
+ pointer-events: none;
+ user-select: none;
}
&::after {
- position: absolute;
- z-index: 1;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 80%;
- content: '';
- background: radial-gradient(
- ellipse,
- rgb(3 3 3 / 0) 25%,
- rgb(3 3 3 / 0.9648) 60%,
- rgb(3 3 3 / 1) 95%
- );
-
@include respond-to('mobile') {
top: tovw(-260px, 'mobile', -260px);
bottom: unset;
- height: 100%;
transform: rotate(90deg);
background: radial-gradient(
ellipse,
@@ -84,15 +65,26 @@
rgb(3 3 3 / 0.9648) 55%,
rgb(3 3 3 / 1) 85%
);
+ height: 100%;
}
+
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: 1;
+ background: radial-gradient(
+ ellipse,
+ rgb(3 3 3 / 0) 25%,
+ rgb(3 3 3 / 0.9648) 60%,
+ rgb(3 3 3 / 1) 95%
+ );
+ width: 100%;
+ height: 80%;
+ content: '';
}
}
.header {
- align-self: end;
- width: tovw(580px, 'default', 80px);
- justify-self: end;
-
@include respond-to('mobile') {
display: flex;
align-items: flex-end;
@@ -101,36 +93,40 @@
width: 100%;
}
- h1 {
- margin: 0;
- text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+ align-self: end;
+ width: tovw(580px, 'default', 80px);
+ justify-self: end;
+ h1 {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
+
+ margin: 0;
+ text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
}
}
.content {
+ @include respond-to('mobile') {
+ width: 100%;
+ gap: tovw(120px, 'default', 30px);
+ }
+
display: flex;
align-self: start;
flex-direction: column;
gap: tovw(42px, 'default', 20px);
grid-area: 2 / 2 / 3 / 3;
- @include respond-to('mobile') {
- width: 100%;
- gap: tovw(120px, 'default', 30px);
- }
-
p {
- line-height: 1.3;
- width: tovw(500px, 'default', 370px);
- margin: 0;
-
@include respond-to('mobile') {
width: tovw(150px, 'mobile', 320px);
}
+
+ margin: 0;
+ width: tovw(500px, 'default', 370px);
+ line-height: 1.3;
}
a {
@@ -139,51 +135,51 @@
}
.buttons__container {
- display: flex;
- gap: tovw(24px, 'default', 20px);
- margin-top: tovw(32px, 'default', 16px);
-
@include respond-to('mobile') {
flex-direction: column;
- width: 100%;
margin-top: tovw(88px, 'default', 88px);
+ width: 100%;
gap: tovw(20px, 'mobile');
}
+
+ display: flex;
+ margin-top: tovw(32px, 'default', 16px);
+ gap: tovw(24px, 'default', 20px);
}
.gradient {
+ @include respond-to('mobile') {
+ height: 70%;
+ }
+
position: absolute;
- z-index: -1;
top: 0;
left: 0;
- width: 100%;
- height: tovw(740px, 'default', 740px);
+ z-index: -1;
background: linear-gradient(
180deg,
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 99.89%
);
+ width: 100%;
+ height: tovw(740px, 'default', 740px);
mix-blend-mode: screen;
-
- @include respond-to('mobile') {
- height: 70%;
- }
}
.arrow {
- position: absolute;
- width: tovw(22px, 'default', 15px);
- height: tovw(22px, 'default', 15px);
- margin-left: tovw(-58px, 'default', -58px);
-
@include respond-to('mobile') {
display: none;
}
+ position: absolute;
+ margin-left: tovw(-58px, 'default', -58px);
+ width: tovw(22px, 'default', 15px);
+ height: tovw(22px, 'default', 15px);
+
&--mobile {
+ margin-bottom: tovw(8px, 'default', 7px);
width: tovw(25px, 'default', 25px);
height: tovw(25px, 'default', 25px);
- margin-bottom: tovw(8px, 'default', 7px);
@media screen and (min-width: 801px) {
display: none;
diff --git a/src/components/sections/community/socials/socials.module.scss b/src/components/sections/community/socials/socials.module.scss
index 3877260..81162ed 100644
--- a/src/components/sections/community/socials/socials.module.scss
+++ b/src/components/sections/community/socials/socials.module.scss
@@ -1,138 +1,138 @@
@import '~/css/helpers';
.section {
- position: relative;
- padding: tovw(124px, 'default', 100px) 0;
-
@include respond-to('mobile') {
margin-top: 0;
}
+
+ position: relative;
+ padding: tovw(124px, 'default', 100px) 0;
}
.container {
- display: grid;
- grid-template-columns: 1.7fr 1fr;
- grid-template-rows: repeat(2, 1fr);
- gap: tovw(70px, 'default', 20px) 0;
-
@include respond-to('mobile') {
display: flex;
flex-direction: column;
- gap: tovw(5px, 'mobile', 15px);
padding: 0 tovw(16px, 'tablet', 16px);
+ gap: tovw(5px, 'mobile', 15px);
}
+
+ display: grid;
+ gap: tovw(70px, 'default', 20px) 0;
+ grid-template-columns: 1.7fr 1fr;
+ grid-template-rows: repeat(2, 1fr);
}
.header {
- display: flex;
- flex-direction: column;
- width: 100%;
-
@include respond-to('mobile') {
margin-top: tovw(-135px, 'mobile', -150px);
}
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
h2 {
+ @include respond-to('mobile') {
+ text-align: center;
+ font-size: tovw(42px, 'default', 36px);
+ }
+
margin: 0;
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
- @include respond-to('mobile') {
- font-size: tovw(42px, 'default', 36px);
- text-align: center;
- }
-
&:nth-child(1) {
- padding-left: tovw(125px, 'default', 60px);
-
@include respond-to('mobile') {
padding-left: unset;
}
+
+ padding-left: tovw(125px, 'default', 60px);
}
&:nth-child(2) {
- align-self: end;
- width: tovw(465px, 'default', 80px);
-
@include respond-to('mobile') {
width: 100%;
}
+
+ align-self: end;
+ width: tovw(465px, 'default', 80px);
}
}
}
.line {
- position: absolute;
- top: tovw(170px, 'default', 120px);
- left: tovw(770px, 'default', 300px);
- width: tovw(173px, 'default', 120px);
- height: tovw(72px, 'default', 40px);
- transform: rotate(270deg) scale(1.6);
-
@include respond-to('mobile') {
top: unset;
right: 0;
left: 0;
- height: tovw(80px, 'default', 38px);
- margin: auto;
transform: rotate(0deg) translateY(35%) scaleX(1.6);
+ margin: auto;
+ height: tovw(80px, 'default', 38px);
}
+
+ position: absolute;
+ top: tovw(170px, 'default', 120px);
+ left: tovw(770px, 'default', 300px);
+ transform: rotate(270deg) scale(1.6);
+ width: tovw(173px, 'default', 120px);
+ height: tovw(72px, 'default', 40px);
}
.icons__container {
- grid-area: 2 / 2 / 3 / 3;
-
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
+ grid-area: 2 / 2 / 3 / 3;
+
span {
+ @include respond-to('mobile') {
+ text-align: center;
+ }
+
+ letter-spacing: -0.02rem;
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(18px, 'default', 12px);
- letter-spacing: -0.02rem;
&::before {
- position: absolute;
- display: block;
- width: tovw(24px, 'default', 15px);
- height: tovw(18px, 'default', 15px);
- content: '';
- transform: translate(-220%, -50%);
- border-bottom: tovw(2px, 'default', 2px) solid blue;
-
@include respond-to('mobile') {
display: none;
}
- }
- @include respond-to('mobile') {
- text-align: center;
+ display: block;
+ position: absolute;
+ transform: translate(-220%, -50%);
+ border-bottom: tovw(2px, 'default', 2px) solid blue;
+ width: tovw(24px, 'default', 15px);
+ height: tovw(18px, 'default', 15px);
+ content: '';
}
}
}
.grid {
+ @include respond-to('mobile') {
+ place-content: center;
+ place-self: center;
+ }
+
display: flex;
flex-wrap: wrap;
- width: tovw(400px, 'default', 255px);
padding-top: tovw(30px, 'default', 15px);
+ width: tovw(400px, 'default', 255px);
gap: tovw(20px, 'default', 12px);
- @include respond-to('mobile') {
- place-self: center;
- place-content: center;
- }
-
button {
display: flex;
- width: tovw(72px, 'default', 54px);
- height: tovw(55px, 'default', 38px);
- padding: tovw(13px, 'default', 8px);
- cursor: pointer;
transition: filter 200ms;
border: tovw(1px, 'default', 1px) solid #fff;
border-radius: tovw(30px, 'default', 20px);
background-color: var(--color-black);
+ cursor: pointer;
+ padding: tovw(13px, 'default', 8px);
+ width: tovw(72px, 'default', 54px);
+ height: tovw(55px, 'default', 38px);
place-content: center;
&:hover {
@@ -146,13 +146,13 @@
}
.planet--image {
- position: absolute;
- width: tovw(725px, 'default', 320px);
- padding-top: tovw(160px, 'default', 80px);
-
@include respond-to('mobile') {
position: relative;
- width: 100%;
padding-top: unset;
+ width: 100%;
}
+
+ position: absolute;
+ padding-top: tovw(160px, 'default', 80px);
+ width: tovw(725px, 'default', 320px);
}
diff --git a/src/components/sections/homepage/benefits/benefit/benefit.module.scss b/src/components/sections/homepage/benefits/benefit/benefit.module.scss
index 49e452e..aae6b02 100644
--- a/src/components/sections/homepage/benefits/benefit/benefit.module.scss
+++ b/src/components/sections/homepage/benefits/benefit/benefit.module.scss
@@ -16,24 +16,24 @@
&::before {
position: absolute;
- z-index: 1;
top: 0;
left: 0;
- width: tovw(38px, 'default', 38px);
- height: tovw(27px, 'default', 27px);
- content: '';
opacity: 0.5;
+ z-index: 1;
background: linear-gradient(
134.38deg,
#fff 4.91%,
rgb(255 255 255 / 0) 108.92%
);
+ width: tovw(38px, 'default', 38px);
+ height: tovw(27px, 'default', 27px);
+ content: '';
}
svg {
+ transform: translate(50%, -50%);
z-index: 5;
width: tovw(32px, 'default', 32px);
height: tovw(32px, 'default', 32px);
- transform: translate(50%, -50%);
}
}
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index 3b60760..19aeff8 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -1,6 +1,23 @@
@import '~/css/helpers';
.section {
+ @include respond-to('mobile') {
+ padding-bottom: tovw(105px, 'mobile');
+
+ .grid {
+ display: flex;
+
+ .icon {
+ display: none;
+ }
+ }
+
+ .header {
+ padding-right: 0;
+ padding-left: 0;
+ }
+ }
+
position: relative;
padding-top: tovw(170px, 'default', 122px);
padding-bottom: tovw(100px, 'default', 90px);
@@ -30,31 +47,7 @@
}
}
- @include respond-to('mobile') {
- padding-bottom: tovw(105px, 'mobile');
-
- .grid {
- display: flex;
-
- .icon {
- display: none;
- }
- }
-
- .header {
- padding-right: 0;
- padding-left: 0;
- }
- }
-
ul {
- display: grid;
- margin: 0;
- padding: 0;
- list-style-type: none;
- grid-gap: tovw(26px, 'default', 26px) tovw(24px, 'default', 24px);
- grid-template-columns: repeat(3, auto);
- grid-template-rows: repeat(2, 1fr);
@include respond-to('mobile') {
display: flex;
flex-wrap: wrap;
@@ -64,10 +57,24 @@
width: 100%;
}
}
+
+ display: grid;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ grid-gap: tovw(26px, 'default', 26px) tovw(24px, 'default', 24px);
+ grid-template-columns: repeat(3, auto);
+ grid-template-rows: repeat(2, 1fr);
}
}
.background {
+ @include respond-to('mobile') {
+ margin-top: tovw(-60px, 'mobile');
+ background-image: none;
+ height: auto;
+ }
+
margin: 0 tovw(-56px, 'default', -56px);
margin-top: tovw(72px, 'default', 60px);
background-image: url('/images/benefit-bg.jpg');
@@ -75,16 +82,14 @@
background-repeat: no-repeat;
background-size: cover;
height: tovw(1582px, 'default', 1120px);
-
- @include respond-to('mobile') {
- margin-top: tovw(-60px, 'mobile');
- background-image: none;
- height: auto;
- }
}
.developers,
.users {
+ @include respond-to('mobile') {
+ padding: 0 tovw(13px, 'mobile');
+ }
+
margin: 0 0 tovw(305px, 'default', 110px) auto;
padding-top: tovw(138px, 'default', 100px);
padding-right: tovw(69px, 'default', 69px);
@@ -94,46 +99,42 @@
> ul {
margin-top: tovw(88px, 'default', 72px);
}
-
- @include respond-to('mobile') {
- padding: 0 tovw(13px, 'mobile');
- }
}
.service {
&__header {
+ @include respond-to('mobile') {
+ padding-right: tovw(16px, 'mobile');
+ padding-left: tovw(32px, 'mobile');
+ }
+
position: relative;
padding-left: tovw(8px, 'default');
- @include respond-to('mobile') {
- padding-left: tovw(32px, 'mobile');
- padding-right: tovw(16px, 'mobile');
- }
-
.line {
+ @include respond-to('mobile') {
+ left: tovw(16px, 'mobile');
+ }
+
position: absolute;
top: 0;
left: tovw(-24px, 'default', -16px);
width: tovw(3px, 'default', 2px);
height: 100%;
-
- @include respond-to('mobile') {
- left: tovw(16px, 'mobile');
- }
}
span {
+ @include respond-to('mobile') {
+ top: tovw(4px, 'mobile');
+ left: tovw(-5px, 'mobile');
+ }
+
position: absolute;
top: 0;
left: tovw(-62px, 'default', -48px);
text-transform: uppercase;
font-family: var(--font-dm-mono);
font-size: tovw(12px, 'default', 12px);
-
- @include respond-to('mobile') {
- top: tovw(4px, 'mobile');
- left: tovw(-5px, 'mobile');
- }
}
p {
@@ -144,14 +145,14 @@
}
.users {
- margin: 0 auto 0 0;
- padding-top: tovw(16px, 'default', 16px);
- padding-right: 0;
-
@include respond-to('mobile') {
padding-right: tovw(16px, 'mobile');
}
+ margin: 0 auto 0 0;
+ padding-top: tovw(16px, 'default', 16px);
+ padding-right: 0;
+
&__container {
@include respond-to('mobile') {
padding-right: 0;
@@ -181,10 +182,11 @@
}
.button {
- margin-top: tovw(32px, 'default', 32px);
@include respond-to('mobile') {
+ margin-top: tovw(40px, 'mobile');
width: 100%;
text-align: center;
- margin-top: tovw(40px, 'mobile');
}
+
+ margin-top: tovw(32px, 'default', 32px);
}
diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss
index 0d71ff4..d371f8b 100644
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@@ -1,6 +1,14 @@
@import '~/css/helpers';
.section {
+ @include respond-to('mobile') {
+ background-image: url('/images/hero-mobile.png');
+ background-position: 50% 15%;
+ background-repeat: no-repeat;
+ background-size: 100%;
+ min-height: calc(var(--vh) * 115);
+ }
+
display: flex;
align-items: center;
flex-direction: column;
@@ -9,58 +17,51 @@
min-height: calc(var(--vh) * 100);
text-align: center;
- @include respond-to('mobile') {
- background-image: url('/images/hero-mobile.png');
- background-repeat: no-repeat;
- background-position: 50% 15%;
- background-size: 100%;
- min-height: calc(var(--vh) * 115);
- }
-
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
&::after,
&::before {
+ @include respond-to('mobile') {
+ content: initial;
+ }
+
position: absolute;
- z-index: -1;
top: 50%;
left: 50%;
- width: 100%;
- height: 101%;
- content: '';
transform: translate(-50%, -50%);
- pointer-events: none;
+ z-index: -1;
background: linear-gradient(
0deg,
var(--color-black) 15%,
rgb(9 9 121 / 0) 50%,
var(--color-black) 100%
);
+ width: 100%;
+ height: 101%;
+ content: '';
+ pointer-events: none;
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
- @include respond-to('mobile') {
- content: initial;
- }
}
&::before {
- width: 120%;
- height: 115%;
background: radial-gradient(
ellipse farthest-corner at center center,
rgb(4 4 4 / 0.25) 45%,
var(--color-black) 0
);
+ width: 120%;
+ height: 115%;
filter: blur(tovw(80px, 'default', 40px));
}
.line {
+ margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
width: tovw(3px, 'default', 2px);
height: tovw(72px, 'default', 56px);
- margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
}
.arrow {
@@ -69,9 +70,9 @@
}
.flag {
+ margin: 0 auto 0 tovw(8px, 'default', 6px);
width: tovw(36px, 'default', 36px);
height: tovw(20px, 'default', 20px);
- margin: 0 auto 0 tovw(8px, 'default', 6px);
}
p {
@@ -79,40 +80,39 @@
}
.scroll {
+ @include respond-to('mobile') {
+ bottom: 5%;
+ grid-template-columns: 1fr;
+ }
+ @include respond-to('mobile-sm') {
+ bottom: 2%;
+ }
+
+ display: grid;
position: absolute;
bottom: 11%;
left: tovw(56px, 'default', 16px);
- display: grid;
align-items: center;
width: calc(100% - (tovw(56px, 'default', 16px) * 2));
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
- @include respond-to('mobile') {
- bottom: 5%;
- grid-template-columns: 1fr;
- }
-
- @include respond-to('mobile-sm') {
- bottom: 2%;
- }
-
p,
li {
- font-family: var(--font-dm-mono);
- font-size: tovw(12px, 'default', 11px);
- line-height: 1.7;
width: 100%;
text-align: right;
text-transform: uppercase;
+ line-height: 1.7;
+ font-family: var(--font-dm-mono);
+ font-size: tovw(12px, 'default', 11px);
font-variant-numeric: tabular-nums;
}
> div {
display: flex;
- justify-content: center;
- flex-direction: column;
align-items: center;
+ flex-direction: column;
+ justify-content: center;
span {
display: block;
@@ -122,17 +122,17 @@
.video {
position: absolute;
- z-index: -2;
top: 0;
left: 0;
+ z-index: -2;
width: 100%;
height: 100%;
- user-select: none;
pointer-events: none;
+ user-select: none;
}
.mobile__button {
- width: 100%;
margin: tovw(48px, 'mobile', 40px) 0 0 0;
+ width: 100%;
}
}
diff --git a/src/components/sections/homepage/latest-news/latest-news.module.scss b/src/components/sections/homepage/latest-news/latest-news.module.scss
index 19e84ec..457383a 100644
--- a/src/components/sections/homepage/latest-news/latest-news.module.scss
+++ b/src/components/sections/homepage/latest-news/latest-news.module.scss
@@ -8,21 +8,16 @@
padding: 0 0 tovw(185px, 'default', 90px) 0;
.slider__container {
- width: calc(100% - tovw(205px, 'default', 16px));
- margin-right: 0;
- margin-left: auto;
-
@include respond-to('mobile') {
width: calc(100% - tovw(16px, 'mobile'));
}
+
+ margin-right: 0;
+ margin-left: auto;
+ width: calc(100% - tovw(205px, 'default', 16px));
}
.heading {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: tovw(90px, 'default', 64px);
-
@include respond-to('mobile') {
align-items: flex-start;
flex-direction: column;
@@ -31,98 +26,105 @@
gap: tovw(16px, 'mobile');
}
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: tovw(90px, 'default', 64px);
+
h2 {
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
}
span {
+ width: tovw(350px, 'default', 265px);
+ line-height: 1.32;
font-family: var(--font-tt-hoves), sans-serif;
font-size: tovw(24px, 'default', 18px);
- line-height: 1.32;
- width: tovw(350px, 'default', 265px);
}
.gradient {
+ @include respond-to('mobile') {
+ display: none;
+ }
+
position: absolute;
- z-index: -1;
right: 0;
left: 0;
- width: 100%;
- height: tovw(500px, 'default', 250px);
- margin-left: 0;
- content: '';
- user-select: none;
- pointer-events: none;
opacity: 0.4;
+ z-index: -1;
+ margin-left: 0;
background: linear-gradient(
180deg,
rgb(229 229 229 / 0) 0%,
rgb(241 241 241 / 0.4) 48.91%,
rgb(241 241 241 / 0) 89.23%
);
-
- @include respond-to('mobile') {
- display: none;
- }
+ width: 100%;
+ height: tovw(500px, 'default', 250px);
+ content: '';
+ pointer-events: none;
+ user-select: none;
}
}
.events__container {
- padding-left: tovw(100px);
@include respond-to('mobile') {
padding-left: 0;
}
+ padding-left: tovw(100px);
+
&::after,
&::before {
- position: absolute;
- right: tovw(-20px, 'default', -20px);
- width: tovw(280px, 'default', 150px);
- height: 100%;
- content: '';
- background: linear-gradient(
- 90deg,
- rgb(3 3 3 / 0) 0%,
- rgb(3 3 3 / 0.95) 35%,
- rgb(3 3 3 / 1) 65%
- );
-
@include respond-to('mobile') {
- width: tovw(20px, 'default', 20px);
background: linear-gradient(
90deg,
rgb(3 3 3 / 0) 0%,
rgb(3 3 3 / 0.55) 35%,
rgb(3 3 3 / 1) 95%
);
+ width: tovw(20px, 'default', 20px);
}
+
+ position: absolute;
+ right: tovw(-20px, 'default', -20px);
+ background: linear-gradient(
+ 90deg,
+ rgb(3 3 3 / 0) 0%,
+ rgb(3 3 3 / 0.95) 35%,
+ rgb(3 3 3 / 1) 65%
+ );
+ width: tovw(280px, 'default', 150px);
+ height: 100%;
+ content: '';
}
&::before {
- z-index: 5;
- right: initial;
- left: tovw(-180px);
- transform: scaleX(-1);
@include respond-to('mobile') {
content: initial;
}
+
+ right: initial;
+ left: tovw(-180px);
+ transform: scaleX(-1);
+ z-index: 5;
}
}
.navigation {
- display: flex;
- width: 100%;
- padding-top: tovw(75px, 'default', 45px);
- place-content: center;
- gap: tovw(25px, 'default', 15px);
-
@include respond-to('mobile') {
display: none;
}
+ display: flex;
+ padding-top: tovw(75px, 'default', 45px);
+ width: 100%;
+ gap: tovw(25px, 'default', 15px);
+ place-content: center;
+
.arrow {
- width: tovw(50px, 'default', 30px);
cursor: pointer;
+ width: tovw(50px, 'default', 30px);
&:first-child {
transform: rotate(180deg);
diff --git a/src/components/sections/homepage/seen-in/seen-in.module.scss b/src/components/sections/homepage/seen-in/seen-in.module.scss
index 92ef13f..da4b3d5 100644
--- a/src/components/sections/homepage/seen-in/seen-in.module.scss
+++ b/src/components/sections/homepage/seen-in/seen-in.module.scss
@@ -1,23 +1,7 @@
@import '~/css/helpers';
.section {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- height: calc(var(--vh) * 152);
- margin-top: tovw(24px, 'default', 16px);
- padding: tovw(104px, 'default', 72px) 0;
- background: linear-gradient(
- 180deg,
- rgb(0 0 244 / 0) 1.63%,
- rgb(0 0 244 / 0.9) 42.64%,
- rgb(0 0 244 / 0.9) 56.97%,
- rgb(0 0 244 / 0) 99.89%
- );
-
@include respond-to('mobile') {
- height: calc(var(--vh) * 95);
margin-top: 0;
background: linear-gradient(
180deg,
@@ -26,35 +10,51 @@
rgb(0 0 244 / 0.9) 56.97%,
rgb(0 0 244 / 0) 99.89%
);
+ height: calc(var(--vh) * 95);
}
- .image {
- position: absolute;
- z-index: 5;
- top: 50%;
- left: 50%;
- width: tovw(1104px, 'default', 375px);
- height: tovw(869px, 'default', 441px);
- transform: translate(-50%, -50%);
- pointer-events: none;
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ margin-top: tovw(24px, 'default', 16px);
+ background: linear-gradient(
+ 180deg,
+ rgb(0 0 244 / 0) 1.63%,
+ rgb(0 0 244 / 0.9) 42.64%,
+ rgb(0 0 244 / 0.9) 56.97%,
+ rgb(0 0 244 / 0) 99.89%
+ );
+ padding: tovw(104px, 'default', 72px) 0;
+ height: calc(var(--vh) * 152);
+ .image {
@include respond-to('mobile') {
top: 45%;
}
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 5;
+ width: tovw(1104px, 'default', 375px);
+ height: tovw(869px, 'default', 441px);
+ pointer-events: none;
}
.grid {
- display: grid;
- margin-top: tovw(284px, 'default', 150px);
- grid-template-columns: repeat(12, 1fr);
- grid-template-rows: 1fr;
- grid-column-gap: tovw(24px, 'default', 24px);
-
@include respond-to('mobile') {
display: flex;
flex-wrap: wrap;
}
+ display: grid;
+ margin-top: tovw(284px, 'default', 150px);
+ grid-column-gap: tovw(24px, 'default', 24px);
+ grid-template-columns: repeat(12, 1fr);
+ grid-template-rows: 1fr;
+
p {
&:first-of-type {
grid-area: 1 / 2 / 2 / 7;
diff --git a/src/components/sections/homepage/trusted-by/item/item.module.scss b/src/components/sections/homepage/trusted-by/item/item.module.scss
index 6361132..0dd93b3 100644
--- a/src/components/sections/homepage/trusted-by/item/item.module.scss
+++ b/src/components/sections/homepage/trusted-by/item/item.module.scss
@@ -4,16 +4,16 @@
display: flex;
align-items: center;
justify-content: center;
- width: tovw(137px, 'default', 63px);
- height: tovw(137px, 'default', 63px);
border-radius: 100%;
+ box-shadow: inset 0 0 0 1px var(--color-white);
background: radial-gradient(
50% 50% at 50% 50%,
rgb(255 255 255 / 0) 0%,
rgb(255 255 255 / 0.5) 100%
);
- box-shadow: inset 0 0 0 1px var(--color-white);
padding: tovw(8px, 'default', 6px);
+ width: tovw(137px, 'default', 63px);
+ height: tovw(137px, 'default', 63px);
svg {
width: 100%;
diff --git a/src/components/sections/homepage/trusted-by/trusted-by.module.scss b/src/components/sections/homepage/trusted-by/trusted-by.module.scss
index 5065118..a617ed2 100644
--- a/src/components/sections/homepage/trusted-by/trusted-by.module.scss
+++ b/src/components/sections/homepage/trusted-by/trusted-by.module.scss
@@ -1,38 +1,39 @@
@import '~/css/helpers';
.section {
- position: relative;
- height: calc(var(--vh) * 50);
- margin-top: tovw(24px, 'default', 16px);
- padding: tovw(104px, 'default', 72px) 0;
-
@include respond-to('mobile') {
- height: calc(var(--vh) * 48);
margin-top: 0;
+ height: calc(var(--vh) * 48);
}
+ position: relative;
+ margin-top: tovw(24px, 'default', 16px);
+ padding: tovw(104px, 'default', 72px) 0;
+ height: calc(var(--vh) * 50);
+
&::after {
+ @include respond-to('mobile') {
+ transform: translate(-50%, -60%);
+ height: 50%;
+ }
+
position: absolute;
- z-index: 5;
top: 50%;
left: 50%;
- width: 100%;
- height: 100%;
- content: '';
- user-select: none;
transform: translate(-50%, -40%);
- pointer-events: none;
opacity: 0.4;
+ z-index: 5;
background: linear-gradient(
180deg,
hsl(0deg 0% 90% / 0),
hsl(0deg 0% 95% / 0.5) 48.91%,
hsl(0deg 0% 95% / 0) 89.23%
);
- @include respond-to('mobile') {
- height: 50%;
- transform: translate(-50%, -60%);
- }
+ width: 100%;
+ height: 100%;
+ content: '';
+ pointer-events: none;
+ user-select: none;
}
}
diff --git a/src/components/sections/homepage/what-others-say/item/item.module.scss b/src/components/sections/homepage/what-others-say/item/item.module.scss
index d643b48..f79f30b 100644
--- a/src/components/sections/homepage/what-others-say/item/item.module.scss
+++ b/src/components/sections/homepage/what-others-say/item/item.module.scss
@@ -1,31 +1,31 @@
@import '~/css/helpers';
.item {
- position: absolute;
- z-index: 5;
- top: 50%;
- left: 50%;
- width: tovw(420px);
- margin: tovw(-210px) 0 0 tovw(-210px);
- padding: tovw(24px, 'default', 22px);
- transform: translate3d(0, 0, tovw(-10px));
- transform-origin: 50% 50%;
- color: var(--color-white);
- border: tovw(1.5px, 'default', 1px) solid var(--color-grey-light);
- border-radius: tovw(8px, 'default', 8px);
- background-color: rgb(0 0 0 / 0.9);
-
@include respond-to('mobile') {
position: relative;
top: initial;
left: initial;
+ transform: none;
+ margin: 0;
width: max-content;
height: max-content !important;
min-height: auto !important;
- margin: 0;
- transform: none;
}
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate3d(0, 0, tovw(-10px));
+ transform-origin: 50% 50%;
+ z-index: 5;
+ margin: tovw(-210px) 0 0 tovw(-210px);
+ border: tovw(1.5px, 'default', 1px) solid var(--color-grey-light);
+ border-radius: tovw(8px, 'default', 8px);
+ background-color: rgb(0 0 0 / 0.9);
+ padding: tovw(24px, 'default', 22px);
+ width: tovw(420px);
+ color: var(--color-white);
+
&__header {
display: flex;
align-items: center;
@@ -38,12 +38,12 @@
}
p {
+ margin: 0;
+ text-transform: uppercase;
+ line-height: 1.1;
+ letter-spacing: tovw(-0.6px, 'default', -0.6px);
font-family: var(--font-dm-mono);
font-size: tovw(12px, 'default', 12px);
- line-height: 1.1;
- margin: 0;
- letter-spacing: tovw(-0.6px, 'default', -0.6px);
- text-transform: uppercase;
span {
letter-spacing: tovw(-1px, 'default', -1px);
@@ -58,18 +58,19 @@
}
img {
- overflow: hidden;
- width: tovw(48px, 'default', 48px);
- height: tovw(48px, 'default', 48px);
margin-right: tovw(16px, 'default', 16px);
border-radius: 100%;
+ width: tovw(48px, 'default', 48px);
+ height: tovw(48px, 'default', 48px);
+ overflow: hidden;
}
p {
- font-size: tovw(16px, 'default', 16px);
- margin: 0;
@include respond-to('mobile') {
line-height: 1.6;
}
+
+ margin: 0;
+ font-size: tovw(16px, 'default', 16px);
}
}
diff --git a/src/components/sections/homepage/what-others-say/what-others-say.module.scss b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
index 72edee9..4118acf 100644
--- a/src/components/sections/homepage/what-others-say/what-others-say.module.scss
+++ b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
@@ -7,38 +7,38 @@
}
.header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- max-width: tovw(1076px, 'default', 700px);
- margin: 0 auto;
- text-transform: capitalize;
-
@include respond-to('mobile') {
flex-direction: column;
margin-bottom: tovw(24px, 'mobile');
gap: tovw(24px, 'mobile');
}
- span {
- font-family: var(--font-dm-mono);
- font-size: tovw(18px, 'default', 16px);
- letter-spacing: tovw(-0.8px, 'default', -0.8px);
- text-transform: uppercase;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0 auto;
+ width: 100%;
+ max-width: tovw(1076px, 'default', 700px);
+ text-transform: capitalize;
+ span {
@include respond-to('mobile') {
&:first-of-type {
display: none;
}
}
+
+ text-transform: uppercase;
+ letter-spacing: tovw(-0.8px, 'default', -0.8px);
+ font-family: var(--font-dm-mono);
+ font-size: tovw(18px, 'default', 16px);
}
.arrow {
display: inline-block;
+ margin: 0 tovw(12px, 'default', 12px);
width: tovw(14px, 'default', 14px);
height: tovw(8px, 'default', 8px);
- margin: 0 tovw(12px, 'default', 12px);
vertical-align: middle;
&:first-of-type {
@@ -52,62 +52,62 @@
}
.carousel {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100vh;
- cursor: grab;
- user-select: none;
- transform: rotateX(-15deg) scale(0.85) translateY(0%);
- transform-style: preserve-3d;
- perspective: tovw(3000px);
-
@include respond-to('mobile') {
display: none;
}
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ perspective: tovw(3000px);
+ transform: rotateX(-15deg) scale(0.85) translateY(0%);
+ transform-style: preserve-3d;
+ cursor: grab;
+ width: 100%;
+ height: 100vh;
+ user-select: none;
}
.image {
position: relative;
+ transform: scale(1.18);
z-index: -1;
width: tovw(531px, 'default', 336px);
height: tovw(817px, 'default', 518px);
- user-select: none;
- transform: scale(1.18);
pointer-events: none;
+ user-select: none;
img {
+ display: block;
+ margin: 0 auto;
width: tovw(531px, 'default', 336px);
height: tovw(817px, 'default', 518px);
- margin: 0 auto;
- display: block;
}
}
.slider {
- height: tovw(636px, 'mobile');
- padding-left: tovw(16px, 'mobile');
align-items: center;
+ padding-left: tovw(16px, 'mobile');
+ height: tovw(636px, 'mobile');
@media screen and (min-width: 800px) {
display: none !important;
}
.image {
position: absolute;
+ left: tovw(10px, 'mobile');
+ transform: none;
z-index: -1;
width: 85%;
height: auto;
- user-select: none;
- transform: none;
- left: tovw(10px, 'mobile');
pointer-events: none;
+ user-select: none;
img {
- width: 100%;
opacity: 0.7;
- height: auto;
margin: 0 auto;
+ width: 100%;
+ height: auto;
}
}
}
diff --git a/src/components/sections/privacy/hero/hero.module.scss b/src/components/sections/privacy/hero/hero.module.scss
index 6e9759f..02db086 100644
--- a/src/components/sections/privacy/hero/hero.module.scss
+++ b/src/components/sections/privacy/hero/hero.module.scss
@@ -1,60 +1,60 @@
@import '~/css/helpers';
.section {
- display: flex;
- flex-direction: column;
- justify-content: center;
- max-width: 100%;
- min-height: calc(var(--vh) * 60);
- padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
- padding-bottom: 0;
-
@include respond-to('mobile') {
align-items: center;
flex-direction: row;
justify-content: space-between;
- width: 100vw;
- min-height: calc(var(--vh) * 45);
padding: 0 tovw(16px, 'tablet', 16px);
padding-top: tovw(70px, 'tablet', 70px);
+ width: 100vw;
+ min-height: calc(var(--vh) * 45);
}
- h1 {
- margin: 0;
- text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
+ padding-bottom: 0;
+ max-width: 100%;
+ min-height: calc(var(--vh) * 60);
+ h1 {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
+
+ margin: 0;
+ text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
}
}
.arrow {
- display: none;
-
@include respond-to('mobile') {
- position: relative;
display: unset;
- width: tovw(18px, 'mobile', 18px);
+ position: relative;
padding-top: tovw(17px, 'mobile', 17px);
+ width: tovw(18px, 'mobile', 18px);
}
+
+ display: none;
}
.gradient {
+ @include respond-to('mobile') {
+ height: 70%;
+ }
+
position: absolute;
- z-index: -1;
top: 0;
left: 0;
- width: 100%;
- height: tovw(740px, 'default', 740px);
+ z-index: -1;
background: linear-gradient(
180deg,
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 99.89%
);
+ width: 100%;
+ height: tovw(740px, 'default', 740px);
mix-blend-mode: screen;
-
- @include respond-to('mobile') {
- height: 70%;
- }
}
diff --git a/src/components/sections/products/app/app.module.scss b/src/components/sections/products/app/app.module.scss
index 6c9d99d..f7f7fe8 100644
--- a/src/components/sections/products/app/app.module.scss
+++ b/src/components/sections/products/app/app.module.scss
@@ -1,31 +1,31 @@
@import '~/css/helpers';
.section {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- height: calc(var(--vw) * 60);
- margin: tovw(100px, 'default', 50px) 0;
-
@include respond-to('mobile') {
- height: calc(var(--vw) * 95);
background-image: url('/images/pre-footer-mobile.png');
background-position: 50%;
background-size: cover;
+ height: calc(var(--vw) * 95);
}
- .container {
- position: relative;
- z-index: 2;
- display: flex;
- align-items: center;
- flex-direction: column;
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ margin: tovw(100px, 'default', 50px) 0;
+ height: calc(var(--vw) * 60);
+ .container {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
+ display: flex;
+ position: relative;
+ align-items: center;
+ flex-direction: column;
+ z-index: 2;
+
h2 {
@include respond-to('mobile') {
font-size: tovw(32px, 'mobile');
@@ -33,59 +33,60 @@
}
p {
- font-size: tovw(30px, 'default', 15px);
- line-height: 1.35;
+ @include respond-to('mobile') {
+ margin-top: tovw(16px, 'mobile');
+ line-height: 1.5;
+ }
+
width: tovw(856px, 'default', 300px);
text-align: center;
-
- @include respond-to('mobile') {
- line-height: 1.5;
- margin-top: tovw(16px, 'mobile');
- }
+ line-height: 1.35;
+ font-size: tovw(30px, 'default', 15px);
}
}
&::after,
&::before {
+ @include respond-to('mobile') {
+ content: normal;
+ }
+
position: absolute;
top: 50%;
left: 50%;
- width: 100%;
- height: 100%;
- content: '';
transform: translate(-50%, -50%);
- pointer-events: none;
background: linear-gradient(
0deg,
var(--color-black) 15%,
rgb(9 9 121 / 0) 45%,
var(--color-black) 100%
);
- @include respond-to('mobile') {
- content: normal;
- }
+ width: 100%;
+ height: 100%;
+ content: '';
+ pointer-events: none;
}
&::before {
- width: 120%;
- height: 110%;
background: radial-gradient(
ellipse,
rgb(3 3 3 / 0) 25%,
rgb(3 3 3 / 0.965) 60%,
rgb(3 3 3 / 1) 100%
);
+ width: 120%;
+ height: 110%;
filter: blur(tovw(80px, 'default', 40px));
}
.video {
position: absolute;
- z-index: -1;
top: 0;
left: 0;
+ z-index: -1;
width: 100%;
height: 100%;
- user-select: none;
pointer-events: none;
+ user-select: none;
}
}
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index ea45600..4e370a9 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -1,18 +1,18 @@
@import '~/css/helpers';
.section {
+ @include respond-to('mobile') {
+ margin-bottom: tovw(88px, 'mobile');
+ padding: 0;
+ width: 100vw;
+ }
+
display: flex;
flex-direction: column;
justify-content: center;
+ padding: tovw(100px, 'default', 50px) 0;
max-width: 100%;
min-height: calc(var(--vh) * 100);
- padding: tovw(100px, 'default', 50px) 0;
-
- @include respond-to('mobile') {
- width: 100vw;
- margin-bottom: tovw(88px, 'mobile');
- padding: 0;
- }
.container {
@include respond-to('mobile') {
@@ -21,25 +21,25 @@
}
video {
- margin: 0 tovw(180px, 'default', 90px);
- mix-blend-mode: screen;
-
@include respond-to('mobile') {
display: none;
}
+
+ margin: 0 tovw(180px, 'default', 90px);
+ mix-blend-mode: screen;
}
.hero__mobile {
- display: none;
-
@include respond-to('mobile') {
display: flex;
- place-self: center;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
mix-blend-mode: screen;
+ place-self: center;
}
+
+ display: none;
}
.body {
@@ -49,31 +49,31 @@
gap: tovw(89px, 'default', 56px);
h1 {
- margin: 0;
- text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
-
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
+
+ margin: 0;
+ text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
}
ol {
- font-family: var(--font-tt-hoves);
- font-size: tovw(24px, 'default', 16px);
- line-height: 1.3;
+ @include respond-to('mobile') {
+ border-bottom: tovw(1px, 'mobile') solid var(--color-white);
+ padding-bottom: tovw(25px, 'mobile', 56px);
+ grid-template-columns: repeat(2, 1fr);
+ }
+
display: grid;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
- grid-template-columns: repeat(3, 1fr);
+ line-height: 1.3;
+ font-family: var(--font-tt-hoves);
+ font-size: tovw(24px, 'default', 16px);
gap: tovw(40px, 'default', 20px) tovw(35px, 'default', 15px);
-
- @include respond-to('mobile') {
- padding-bottom: tovw(25px, 'mobile', 56px);
- border-bottom: tovw(1px, 'mobile') solid var(--color-white);
- grid-template-columns: repeat(2, 1fr);
- }
+ grid-template-columns: repeat(3, 1fr);
li {
display: flex;
@@ -85,34 +85,34 @@
}
&::before {
+ padding-top: tovw(5px, 'default');
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(12px, 'default', 10px);
- padding-top: tovw(5px, 'default');
content: '0' counter(custom) ' ';
}
}
}
.text__container {
- display: grid;
- grid-template-columns: 1fr 1.15fr;
- gap: tovw(113px, 'default', 40px);
-
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
- p:first-child {
- font-size: tovw(30px, 'default', 18px);
- line-height: 1.65;
- width: tovw(546px, 'default', 150px);
+ display: grid;
+ gap: tovw(113px, 'default', 40px);
+ grid-template-columns: 1fr 1.15fr;
+ p:first-child {
@include respond-to('mobile') {
- line-height: 1.5;
width: 100%;
max-width: 550px;
+ line-height: 1.5;
}
+
+ width: tovw(546px, 'default', 150px);
+ line-height: 1.65;
+ font-size: tovw(30px, 'default', 18px);
}
> div {
@@ -121,35 +121,35 @@
gap: tovw(50px, 'default', 35px);
div {
- display: flex;
- padding-top: tovw(22px, 'default', 18px);
- border-top: tovw(1px, 'default') solid var(--color-grey-light);
- gap: tovw(140px, 'default', 20px);
-
@include respond-to('mobile') {
border-top: unset;
gap: tovw(22px, 'mobile', 22px);
}
- h2 {
- width: tovw(100px, 'default', 20px);
+ display: flex;
+ border-top: tovw(1px, 'default') solid var(--color-grey-light);
+ padding-top: tovw(22px, 'default', 18px);
+ gap: tovw(140px, 'default', 20px);
+ h2 {
@include respond-to('mobile') {
width: unset;
min-width: tovw(75px, 'mobile');
}
+
+ width: tovw(100px, 'default', 20px);
}
p {
- font-size: tovw(24px, 'default', 16px);
- line-height: 1.35;
- width: tovw(416px, 'default', 200px);
- margin: 0;
- color: var(--color-grey-light);
-
@include respond-to('mobile') {
width: 100%;
}
+
+ margin: 0;
+ width: tovw(416px, 'default', 200px);
+ line-height: 1.35;
+ color: var(--color-grey-light);
+ font-size: tovw(24px, 'default', 16px);
}
}
}
@@ -160,34 +160,34 @@
justify-content: space-between;
.arrow {
- display: none;
-
@include respond-to('mobile') {
- position: relative;
display: unset;
+ position: relative;
align-self: flex-end;
- width: tovw(18px, 'mobile', 18px);
padding-bottom: tovw(10px, 'mobile', 10px);
+ width: tovw(18px, 'mobile', 18px);
}
+
+ display: none;
}
}
}
.gradient {
+ @include respond-to('mobile') {
+ height: 45%;
+ }
+
position: absolute;
- z-index: -1;
top: 0;
left: 0;
- width: 100%;
- height: tovw(740px, 'default', 740px);
+ z-index: -1;
background: linear-gradient(
180deg,
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 99.89%
);
-
- @include respond-to('mobile') {
- height: 45%;
- }
+ width: 100%;
+ height: tovw(740px, 'default', 740px);
}
}
diff --git a/src/components/sections/products/network/network.module.scss b/src/components/sections/products/network/network.module.scss
index 92e6660..c696d6d 100644
--- a/src/components/sections/products/network/network.module.scss
+++ b/src/components/sections/products/network/network.module.scss
@@ -1,22 +1,22 @@
@import '~/css/helpers';
.section {
- position: relative;
- padding: tovw(124px, 'default', 100px) 0;
-
@include respond-to('mobile') {
padding: 0;
padding-bottom: tovw(18px, 'mobile');
}
- .container {
- position: relative;
- display: flex;
+ position: relative;
+ padding: tovw(124px, 'default', 100px) 0;
+ .container {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
+ display: flex;
+ position: relative;
+
div:first-child {
width: 100%;
@@ -27,66 +27,66 @@
}
> p {
- font-size: tovw(30px, 'default', 18px);
- line-height: 1.3;
- width: tovw(720px, 'default', 350px);
- margin: 0;
- margin-top: tovw(62px, 'default', 30px);
-
@include respond-to('mobile') {
- line-height: 1.5;
- width: 100%;
- max-width: 550px;
margin: 0;
margin-top: tovw(40px, 'mobile');
+ width: 100%;
+ max-width: 550px;
+ line-height: 1.5;
}
+
+ margin: 0;
+ margin-top: tovw(62px, 'default', 30px);
+ width: tovw(720px, 'default', 350px);
+ line-height: 1.3;
+ font-size: tovw(30px, 'default', 18px);
}
.features {
- display: grid;
- margin-top: tovw(125px, 'default', 60px);
- grid-template-columns: repeat(2, tovw(360px, 'default', 225px));
- gap: tovw(64px, 'default', 40px) 0;
-
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
- > div {
- display: grid;
- grid-template-columns: auto 1fr;
- gap: tovw(23px, 'default', 16px);
+ display: grid;
+ margin-top: tovw(125px, 'default', 60px);
+ gap: tovw(64px, 'default', 40px) 0;
+ grid-template-columns: repeat(2, tovw(360px, 'default', 225px));
+ > div {
@include respond-to('mobile') {
margin: 0 tovw(10px, 'mobile');
}
+ display: grid;
+ gap: tovw(23px, 'default', 16px);
+ grid-template-columns: auto 1fr;
+
img {
flex: 1;
width: tovw(55px, 'default', 45px);
}
p {
- font-size: tovw(24px, 'default', 15px);
- line-height: 1.6;
- width: tovw(268px, 'default', 100px);
- margin: 0;
- margin-top: tovw(20px, 'default', 16px);
- color: var(--color-grey-light);
-
@include respond-to('mobile') {
width: 100%;
}
+
+ margin: 0;
+ margin-top: tovw(20px, 'default', 16px);
+ width: tovw(268px, 'default', 100px);
+ line-height: 1.6;
+ color: var(--color-grey-light);
+ font-size: tovw(24px, 'default', 15px);
}
&:last-child {
p {
- width: tovw(300px, 'default', 85px);
-
@include respond-to('mobile') {
width: 100%;
}
+
+ width: tovw(300px, 'default', 85px);
}
}
}
@@ -94,27 +94,27 @@
}
.network__img {
- position: absolute;
- z-index: -1;
- bottom: tovw(-190px, 'default', -750px);
- left: tovw(550px, 'default', 50px);
- width: tovw(1050px, 'default', 550px);
- mix-blend-mode: screen;
-
@include respond-to('mobile') {
display: none;
}
+
+ position: absolute;
+ bottom: tovw(-190px, 'default', -750px);
+ left: tovw(550px, 'default', 50px);
+ z-index: -1;
+ width: tovw(1050px, 'default', 550px);
+ mix-blend-mode: screen;
}
.network__img__mobile {
- display: none;
-
@include respond-to('mobile') {
display: unset;
- width: 100%;
margin: tovw(60px, 'mobile') 0 tovw(20px, 'mobile') 0;
+ width: 100%;
mix-blend-mode: screen;
}
+
+ display: none;
}
}
}
diff --git a/src/components/sections/products/partners/partners.module.scss b/src/components/sections/products/partners/partners.module.scss
index 6388625..635c8dc 100644
--- a/src/components/sections/products/partners/partners.module.scss
+++ b/src/components/sections/products/partners/partners.module.scss
@@ -1,14 +1,14 @@
@import '~/css/helpers';
.section {
- position: relative;
- margin: tovw(135px, 'default', 70px) 0;
- padding: tovw(104px, 'default', 95px) 0;
-
@include respond-to('mobile') {
margin-top: 0;
}
+ position: relative;
+ margin: tovw(135px, 'default', 70px) 0;
+ padding: tovw(104px, 'default', 95px) 0;
+
.container {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
@@ -17,45 +17,45 @@
.header {
display: flex;
justify-content: space-between;
- padding-bottom: tovw(36px, 'default', 24px);
border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
+ padding-bottom: tovw(36px, 'default', 24px);
&:nth-child(3) {
margin-top: tovw(182px, 'default', 100px);
}
span {
- font-family: var(--font-dm-mono), sans-serif;
- font-size: tovw(18px, 'default', 12px);
padding-top: tovw(35px, 'default', 14px);
color: var(--color-grey-light);
+ font-family: var(--font-dm-mono), sans-serif;
+ font-size: tovw(18px, 'default', 12px);
}
}
.gradient {
+ @include respond-to('mobile') {
+ bottom: tovw(1px, 'mobile', 90px);
+ height: tovw(230px, 'mobile', 440px);
+ }
+
position: absolute;
- z-index: -1;
right: 0;
bottom: tovw(160px, 'default', 160px);
left: 0;
- width: 100%;
- height: tovw(500px, 'default', 180px);
- margin-left: 0;
- content: '';
- user-select: none;
- pointer-events: none;
opacity: 0.4;
+ z-index: -1;
+ margin-left: 0;
background: linear-gradient(
180deg,
rgb(229 229 229 / 0) 0%,
rgb(241 241 241 / 0.4) 48.91%,
rgb(241 241 241 / 0) 89.23%
);
-
- @include respond-to('mobile') {
- bottom: tovw(1px, 'mobile', 90px);
- height: tovw(230px, 'mobile', 440px);
- }
+ width: 100%;
+ height: tovw(500px, 'default', 180px);
+ content: '';
+ pointer-events: none;
+ user-select: none;
}
}
}
@@ -65,18 +65,18 @@
user-select: none;
> img {
- width: tovw(240px, 'default', 220px);
margin-right: tovw(53px, 'default', 40px);
+ width: tovw(240px, 'default', 220px);
pointer-events: none;
}
&__container {
- margin-top: tovw(60px, 'default', 43px);
-
@include respond-to('mobile') {
- width: unset !important;
margin: tovw(60px, 'default', 43px) tovw(-18px, 'mobile') 0
tovw(-18px, 'mobile');
+ width: unset !important;
}
+
+ margin-top: tovw(60px, 'default', 43px);
}
}
diff --git a/src/components/sections/products/stack/stack.module.scss b/src/components/sections/products/stack/stack.module.scss
index f372c41..4fa0fa6 100644
--- a/src/components/sections/products/stack/stack.module.scss
+++ b/src/components/sections/products/stack/stack.module.scss
@@ -1,14 +1,14 @@
@import '~/css/helpers';
.section {
- position: relative;
- padding: tovw(124px, 'default', 100px) 0;
-
@include respond-to('mobile') {
padding: 0;
padding-bottom: tovw(88px, 'mobile');
}
+ position: relative;
+ padding: tovw(124px, 'default', 100px) 0;
+
.container {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
@@ -16,32 +16,32 @@
}
.header {
- display: flex;
-
@include respond-to('mobile') {
flex-direction: column;
}
- h2 {
- width: tovw(360px, 'default', 250px);
+ display: flex;
+ h2 {
@include respond-to('mobile') {
width: unset;
}
+
+ width: tovw(360px, 'default', 250px);
}
p {
- font-size: tovw(30px, 'default', 18px);
- line-height: 1.35;
- width: tovw(746px, 'default', 300px);
-
@include respond-to('mobile') {
- line-height: 1.5;
- width: 100%;
- max-width: 550px;
margin: 0;
margin-top: tovw(40px, 'mobile');
+ width: 100%;
+ max-width: 550px;
+ line-height: 1.5;
}
+
+ width: tovw(746px, 'default', 300px);
+ line-height: 1.35;
+ font-size: tovw(30px, 'default', 18px);
}
}
@@ -49,41 +49,41 @@
margin-top: tovw(165px, 'default', 80px);
ol {
- font-family: var(--font-tt-hoves);
- font-size: tovw(24px, 'default', 15px);
- display: grid;
- justify-content: space-between;
- margin: 0 tovw(-50px, 'default');
- padding: 0;
- list-style: none;
- list-style-position: outside;
- grid-template-columns: repeat(3, 1fr);
- gap: tovw(68px, 'default', 40px) tovw(35px, 'default', 15px);
-
@include respond-to('mobile') {
display: flex;
flex-direction: column;
margin: 0;
}
- li {
- position: relative;
- display: flex;
- counter-increment: custom;
- gap: tovw(34px, 'default', 28px);
+ display: grid;
+ justify-content: space-between;
+ margin: 0 tovw(-50px, 'default');
+ padding: 0;
+ list-style: none;
+ list-style-position: outside;
+ font-family: var(--font-tt-hoves);
+ font-size: tovw(24px, 'default', 15px);
+ gap: tovw(68px, 'default', 40px) tovw(35px, 'default', 15px);
+ grid-template-columns: repeat(3, 1fr);
+ li {
@include respond-to('mobile') {
width: 100%;
}
+ display: flex;
+ position: relative;
+ counter-increment: custom;
+ gap: tovw(34px, 'default', 28px);
+
&:first-child {
counter-reset: custom;
}
&::before {
+ padding-top: tovw(8px, 'default');
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(12px, 'default', 10px);
- padding-top: tovw(8px, 'default');
content: '0' counter(custom) ' ';
}
@@ -93,22 +93,22 @@
gap: tovw(22px, 'default', 18px);
span {
- font-size: tovw(24px, 'default', 18px);
line-height: 1.33;
color: var(--color-grey-light);
+ font-size: tovw(24px, 'default', 18px);
}
}
.line {
- position: absolute;
- bottom: 0;
- width: tovw(3px, 'default', 2px);
- margin-bottom: tovw(42px, 'default', 42px);
- margin-left: tovw(25px, 'default', 20px);
-
@include respond-to('mobile') {
margin-bottom: tovw(8px, 'mobile');
}
+
+ position: absolute;
+ bottom: 0;
+ margin-bottom: tovw(42px, 'default', 42px);
+ margin-left: tovw(25px, 'default', 20px);
+ width: tovw(3px, 'default', 2px);
}
}
}
@@ -116,8 +116,8 @@
div:last-child {
.stack__img {
- width: 100%;
margin-top: tovw(293px, 'default', 88px);
+ width: 100%;
image-rendering: optimizequality;
@media screen and (max-width: 1450px) {
display: none;
@@ -133,28 +133,28 @@
}
.gradient {
+ @include respond-to('mobile') {
+ display: none;
+ }
+
position: absolute;
- z-index: -1;
right: 0;
bottom: tovw(530px, 'default', 300px);
left: 0;
- width: 100%;
- height: tovw(500px, 'default', 180px);
- margin-left: 0;
- content: '';
- user-select: none;
- pointer-events: none;
opacity: 0.4;
+ z-index: -1;
+ margin-left: 0;
background: linear-gradient(
180deg,
rgb(229 229 229 / 0) 0%,
rgb(241 241 241 / 0.5) 48.91%,
rgb(241 241 241 / 0) 89.23%
);
-
- @include respond-to('mobile') {
- display: none;
- }
+ width: 100%;
+ height: tovw(500px, 'default', 180px);
+ content: '';
+ pointer-events: none;
+ user-select: none;
}
}
}
diff --git a/src/components/sections/products/token/token.module.scss b/src/components/sections/products/token/token.module.scss
index 16b5c5a..8670225 100644
--- a/src/components/sections/products/token/token.module.scss
+++ b/src/components/sections/products/token/token.module.scss
@@ -1,22 +1,22 @@
@import '~/css/helpers';
.section {
- position: relative;
- padding: tovw(124px, 'default', 100px) 0;
-
@include respond-to('mobile') {
padding: 0;
padding-bottom: tovw(18px, 'mobile');
}
- .container {
- position: relative;
- display: flex;
+ position: relative;
+ padding: tovw(124px, 'default', 100px) 0;
+ .container {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
+ display: flex;
+ position: relative;
+
h2 {
@include respond-to('mobile') {
width: tovw(320px, 'mobile');
@@ -27,66 +27,66 @@
width: 100%;
> p {
- font-size: tovw(30px, 'default', 18px);
- line-height: 1.3;
- width: tovw(814px, 'default', 350px);
- margin: 0;
- margin-top: tovw(62px, 'default', 30px);
-
@include respond-to('mobile') {
- line-height: 1.5;
- width: 100%;
- max-width: 550px;
margin: 0;
margin-top: tovw(40px, 'mobile');
+ width: 100%;
+ max-width: 550px;
+ line-height: 1.5;
}
+
+ margin: 0;
+ margin-top: tovw(62px, 'default', 30px);
+ width: tovw(814px, 'default', 350px);
+ line-height: 1.3;
+ font-size: tovw(30px, 'default', 18px);
}
.features {
- display: grid;
- margin-top: tovw(125px, 'default', 60px);
- grid-template-columns: repeat(2, tovw(360px, 'default', 190px));
- gap: tovw(64px, 'default', 40px) 0;
-
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
- > div {
- display: grid;
- grid-template-columns: auto 1fr;
- gap: tovw(23px, 'default', 15px);
+ display: grid;
+ margin-top: tovw(125px, 'default', 60px);
+ gap: tovw(64px, 'default', 40px) 0;
+ grid-template-columns: repeat(2, tovw(360px, 'default', 190px));
+ > div {
@include respond-to('mobile') {
margin: 0 tovw(10px, 'mobile');
}
+ display: grid;
+ gap: tovw(23px, 'default', 15px);
+ grid-template-columns: auto 1fr;
+
img {
flex: 1;
width: tovw(55px, 'default', 45px);
}
p {
- font-size: tovw(24px, 'default', 15px);
- line-height: 1.6;
- width: tovw(220px, 'default', 115px);
- margin: 0;
- margin-top: tovw(20px, 'default', 16px);
- color: var(--color-grey-light);
-
@include respond-to('mobile') {
width: 100%;
}
+
+ margin: 0;
+ margin-top: tovw(20px, 'default', 16px);
+ width: tovw(220px, 'default', 115px);
+ line-height: 1.6;
+ color: var(--color-grey-light);
+ font-size: tovw(24px, 'default', 15px);
}
&:last-child {
p {
- width: tovw(265px, 'default', 150px);
-
@include respond-to('mobile') {
width: 100%;
}
+
+ width: tovw(265px, 'default', 150px);
}
}
}
@@ -94,27 +94,27 @@
}
.token__img {
- position: absolute;
- z-index: -1;
- bottom: tovw(-150px, 'default', -750px);
- left: tovw(630px, 'default', 50px);
- width: tovw(950px, 'default', 550px);
- mix-blend-mode: screen;
-
@include respond-to('mobile') {
display: none;
}
+
+ position: absolute;
+ bottom: tovw(-150px, 'default', -750px);
+ left: tovw(630px, 'default', 50px);
+ z-index: -1;
+ width: tovw(950px, 'default', 550px);
+ mix-blend-mode: screen;
}
.token__img__mobile {
- display: none;
-
@include respond-to('mobile') {
display: unset;
- width: 100%;
margin: tovw(60px, 'mobile') 0 tovw(5px, 'mobile') 0;
+ width: 100%;
mix-blend-mode: screen;
}
+
+ display: none;
}
}
}
diff --git a/src/components/sections/terms/hero/hero.module.scss b/src/components/sections/terms/hero/hero.module.scss
index 6e9759f..02db086 100644
--- a/src/components/sections/terms/hero/hero.module.scss
+++ b/src/components/sections/terms/hero/hero.module.scss
@@ -1,60 +1,60 @@
@import '~/css/helpers';
.section {
- display: flex;
- flex-direction: column;
- justify-content: center;
- max-width: 100%;
- min-height: calc(var(--vh) * 60);
- padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
- padding-bottom: 0;
-
@include respond-to('mobile') {
align-items: center;
flex-direction: row;
justify-content: space-between;
- width: 100vw;
- min-height: calc(var(--vh) * 45);
padding: 0 tovw(16px, 'tablet', 16px);
padding-top: tovw(70px, 'tablet', 70px);
+ width: 100vw;
+ min-height: calc(var(--vh) * 45);
}
- h1 {
- margin: 0;
- text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
+ padding-bottom: 0;
+ max-width: 100%;
+ min-height: calc(var(--vh) * 60);
+ h1 {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
+
+ margin: 0;
+ text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
}
}
.arrow {
- display: none;
-
@include respond-to('mobile') {
- position: relative;
display: unset;
- width: tovw(18px, 'mobile', 18px);
+ position: relative;
padding-top: tovw(17px, 'mobile', 17px);
+ width: tovw(18px, 'mobile', 18px);
}
+
+ display: none;
}
.gradient {
+ @include respond-to('mobile') {
+ height: 70%;
+ }
+
position: absolute;
- z-index: -1;
top: 0;
left: 0;
- width: 100%;
- height: tovw(740px, 'default', 740px);
+ z-index: -1;
background: linear-gradient(
180deg,
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 99.89%
);
+ width: 100%;
+ height: tovw(740px, 'default', 740px);
mix-blend-mode: screen;
-
- @include respond-to('mobile') {
- height: 70%;
- }
}
diff --git a/src/components/sections/terms/termsofuse/termsofuse.module.scss b/src/components/sections/terms/termsofuse/termsofuse.module.scss
index fb8fdb0..47caeea 100644
--- a/src/components/sections/terms/termsofuse/termsofuse.module.scss
+++ b/src/components/sections/terms/termsofuse/termsofuse.module.scss
@@ -1,26 +1,26 @@
@import '~/css/helpers';
.section {
+ @include respond-to('mobile') {
+ padding: 0 tovw(16px, 'tablet', 16px);
+ padding-bottom: tovw(80px, 'tablet', 80px);
+ max-width: 100%;
+ }
+
position: relative;
padding: tovw(16px, 'default', 10px) tovw(221px, 'default', 150px)
tovw(100px, 'default', 50px);
padding-bottom: tovw(270px, 'default', 150px);
- @include respond-to('mobile') {
- max-width: 100%;
- padding: 0 tovw(16px, 'tablet', 16px);
- padding-bottom: tovw(80px, 'tablet', 80px);
- }
-
p {
- font-size: tovw(22px, 'default', 18px);
- line-height: 1.9;
- margin: tovw(64px, 'default', 40px) 0;
-
@include respond-to('mobile') {
- font-size: tovw(15px, 'tablet', 15px);
line-height: 1.6;
+ font-size: tovw(15px, 'tablet', 15px);
}
+
+ margin: tovw(64px, 'default', 40px) 0;
+ line-height: 1.9;
+ font-size: tovw(22px, 'default', 18px);
}
}
@@ -31,19 +31,19 @@
}
.header {
- font-family: var(--font-dm-mono), sans-serif;
- font-size: tovw(18px, 'default', 16px);
+ @include respond-to('mobile') {
+ padding-bottom: tovw(16px, 'tablet', 16px);
+ font-size: tovw(12px, 'tablet', 12px);
+ }
+
display: flex;
margin-bottom: tovw(130px, 'default', 36px);
- padding-bottom: tovw(13px, 'default', 10px);
border-bottom: 1px solid var(--color-grey-light);
+ padding-bottom: tovw(13px, 'default', 10px);
+ font-family: var(--font-dm-mono), sans-serif;
+ font-size: tovw(18px, 'default', 16px);
gap: tovw(15px, 'default', 10px);
- @include respond-to('mobile') {
- font-size: tovw(12px, 'tablet', 12px);
- padding-bottom: tovw(16px, 'tablet', 16px);
- }
-
.separator {
color: var(--color-grey-light);
}
diff --git a/src/css/global.scss b/src/css/global.scss
index 4d5bd7f..b067938 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -46,17 +46,17 @@
}
html {
+ box-sizing: border-box;
background-color: var(--color-black);
text-rendering: geometricprecision;
+ line-height: 1.15;
color: var(--color-white);
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: antialiased;
+ font-variant-ligatures: common-ligatures;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
- box-sizing: border-box;
- line-height: 1.15;
- font-variant-ligatures: common-ligatures;
&.no-animation {
* {
@@ -76,9 +76,9 @@ html.has-custom-cursor ::before {
body {
background-color: var(--color-black);
+ overflow-x: hidden;
color: var(--color-white);
font-family: var(--font-tthoves);
- overflow-x: hidden;
}
body:not(.user-is-tabbing) button:focus,
@@ -93,31 +93,32 @@ body:not(.user-is-tabbing) textarea:focus {
}
::selection {
- color: var(--color-black);
background: var(--color-accent);
+ color: var(--color-black);
}
p {
- font-size: tovw(24px, 'default', 18px);
font-family: var(--font-tt-hoves);
+ font-size: tovw(24px, 'default', 18px);
}
.sr-only {
position: absolute;
+ border: 0;
+ padding: 0;
width: 1px;
height: 1px;
- padding: 0;
overflow: hidden;
- clip: rect(0, 0, 0, 0);
white-space: nowrap;
- border: 0;
+ clip: rect(0, 0, 0, 0);
}
.hide-on-mobile {
- display: inherit !important;
@include respond-to('mobile') {
display: none !important;
}
+
+ display: inherit !important;
}
.hide-on-desktop {