LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Normalize styles order (#33)

Browse Source
This commit is contained in:
Nazareno Oviedo 2022-04-11 19:01:06 -03:00 committed by GitHub
parent 7121498ff4
commit ba11dcb6f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 1194 additions and 1262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/common/card/card.module.scss
View File

@ -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);
}
}

14
src/components/common/category/category.module.scss
View File

@ -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;
}

213
src/components/common/footer/footer.module.scss
View File

@ -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);
}
}
}
}

2
src/components/layout/section/section.module.scss
View File

@ -2,8 +2,8 @@
.base {
position: relative;
overflow: hidden;
padding: 0 tovw(56px, 'default', 16px);
overflow: hidden;
}
.children {

12
src/components/primitives/button/button.module.scss
View File

@ -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;

18
src/components/primitives/heading/heading.module.scss
View File

@ -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 {

50
src/components/primitives/link/link.module.scss
View File

@ -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;

51
src/components/primitives/nav-link/index.tsx
View File

@ -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 (
<Link href={href} scroll={false}>
<a
title={title}
className={s.base}
style={{ ['--bg' as string]: bg }}
{...rest}
ref={ref}
>
{children}
</a>
</Link>
)
})
export const NavButton = forwardRef<
HTMLButtonElement,
{
children?: React.ReactNode
title?: string
bg?: string
onClick?: () => void
type?: 'button' | 'submit'
}
>(({ children, title, bg = '#FFE927', ...rest }, ref) => {
return (
<button
title={title}
className={s.base}
style={{ ['--bg' as string]: bg }}
{...rest}
ref={ref}
>
{children}
</button>
)
})

29
src/components/primitives/nav-link/nav-link.module.scss
View File

@ -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);
}
}

93
src/components/sections/404/hero/hero.module.scss
View File

@ -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);
}

82
src/components/sections/about/hero/hero.module.scss
View File

@ -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);
}

101
src/components/sections/about/related/related.module.scss
View File

@ -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;
}
}
}

113
src/components/sections/about/team/team.module.scss
View File

@ -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;
}
}

12
src/components/sections/blog/hero/hero.module.scss
View File

@ -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);
}
}

4
src/components/sections/blog/post-content/content.module.scss
View File

@ -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%;

32
src/components/sections/blog/post-hero/hero.module.scss
View File

@ -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);
}
}

6
src/components/sections/blog/posts-grid/posts-grid.module.scss
View File

@ -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;

20
src/components/sections/blog/search/search.module.scss
View File

@ -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;
}
}

104
src/components/sections/community/events/events.module.scss
View File

@ -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);

148
src/components/sections/community/hero/hero.module.scss
View File

@ -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;

122
src/components/sections/community/socials/socials.module.scss
View File

@ -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);
}

10
src/components/sections/homepage/benefits/benefit/benefit.module.scss
View File

@ -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%);
}
}

110
src/components/sections/homepage/benefits/benefits.module.scss
View File

@ -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);
}

76
src/components/sections/homepage/hero/hero.module.scss
View File

@ -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%;
}
}

96
src/components/sections/homepage/latest-news/latest-news.module.scss
View File

@ -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);

62
src/components/sections/homepage/seen-in/seen-in.module.scss
View File

@ -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;

6
src/components/sections/homepage/trusted-by/item/item.module.scss
View File

@ -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%;

33
src/components/sections/homepage/trusted-by/trusted-by.module.scss
View File

@ -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;
}
}

51
src/components/sections/homepage/what-others-say/item/item.module.scss
View File

@ -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);
}
}

72
src/components/sections/homepage/what-others-say/what-others-say.module.scss
View File

@ -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;
}
}
}

48
src/components/sections/privacy/hero/hero.module.scss
View File

@ -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%;
}
}

65
src/components/sections/products/app/app.module.scss
View File

@ -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;
}
}

120
src/components/sections/products/hero/hero.module.scss
View File

@ -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);
}
}

86
src/components/sections/products/network/network.module.scss
View File

@ -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;
}
}
}

46
src/components/sections/products/partners/partners.module.scss
View File

@ -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);
}
}

100
src/components/sections/products/stack/stack.module.scss
View File

@ -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;
}
}
}

86
src/components/sections/products/token/token.module.scss
View File

@ -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;
}
}
}

48
src/components/sections/terms/hero/hero.module.scss
View File

@ -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%;
}
}

38
src/components/sections/terms/termsofuse/termsofuse.module.scss
View File

@ -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);
}

21
src/css/global.scss
View File

@ -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 {