Source code of www.zrythm.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1297 lines
27 KiB

/*
Copyright (C) 2019, 2021 Alexandros Theodotou <alex at zrythm dot org>
Copyright (C) 2021-2022 Andrew Harter <andrewhharter@gmail.com>
This file is part of Zrythm
Zrythm is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Zrythm is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
*/
/* --- google fonts --- */
//@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700');
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Light.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Light.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Light.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Light.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Light.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Light.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Regular.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Regular.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Regular.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Regular.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Regular.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Medium.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Medium.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Medium.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Medium.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Medium.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Medium.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-SemiBold.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-SemiBold.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-SemiBold.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-SemiBold.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-SemiBold.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-SemiBold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Bold.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Bold.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Bold.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Bold.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Bold.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
src: url(https://www.zrythm.org/dist/manrope-font/Manrope-Bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- end google fonts --- */
:root {
/* colors */
--color-grayscale-100: hsl(0, 0%, 6%);
--color-grayscale-200: hsl(0, 0%, 10%);
--color-grayscale-300: hsl(0, 0%, 19%);
--color-grayscale-400: hsl(0, 0%, 29%);
--color-grayscale-500: hsl(0, 0%, 41%);
--color-grayscale-600: hsl(0, 0%, 50%);
--color-grayscale-700: hsl(0, 0%, 60%);
--color-grayscale-800: hsl(0, 0%, 71%);
--color-grayscale-900: hsl(0, 0%, 89%);
--color-primary-100: hsl(41, 100%, 77%);
--color-primary-200: hsl(41, 100%, 63%);
--color-primary-300: hsl(41, 100%, 50%);
--color-primary-400: hsl(36, 100%, 42%);
--color-primary-500: hsl(32, 100%, 30%);
--color-secondary-200: rgb(170, 255, 237);
--color-secondary-300: rgb(85, 255, 218);
--color-secondary-400: rgb(56, 196, 165);
--color-tertiary-200: rgb(192, 70, 117);
--color-tertiary-300: rgb(172, 40, 90);
--color-tertiary-400: rgb(133, 23, 65);
--color-logo-100: #FF6600;
--color-logo-200: #E4245E;
/* margin/padding */
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
/* border radius */
--border-radius-100: 3px;
--border-radius-200: 7px;
--border-radius-300: 11px;
--border-radius-rounded: 9999px;
/* transitions */
--transition-1: .2s ease;
/* screen sizes */
--screen-size-sm: 500px;
--screen-size-md: 720px;
--screen-size-lg: 1280px;
--screen-size-xl: 1920px;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: var(--color-grayscale-100);
}
::-webkit-scrollbar-thumb {
background: var(--color-primary-300);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-primary-400);
}
::-moz-selection {
background: var(--accent-color-1);
color: var(--color-grayscale-100)
}
::selection {
background: var(--color-primary-300);
color: var(--color-grayscale-100);
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}
html {
font-size: 100%;
margin: 0px;
padding: 0px;
} /*16px*/
body {
background-color: black;
font-family: 'Manrope', sans-serif;
font-weight: 400;
line-height: 1.75;
color: var(--color-grayscale-900);
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
p {
margin-bottom: 1rem;
font-size: 1.15rem;
}
h1, h2, h3, h4, h5 {
margin: 3rem 0 1.38rem;
font-family: 'Manrope', sans-serif;
font-weight: 500;
line-height: 1.3;
}
h1, .h1 {
margin-top: 0;
font-size: 4.209rem;
}
h2, .h2 {font-size: 3.157rem;}
h3, .h3 {font-size: 2.369rem;}
h4, .h4 {font-size: 1.777rem;}
h5, .h5 {font-size: 1.333rem;}
small, .text_small {font-size: 0.75rem;}
a, .link {
text-decoration: none;
font-weight: 500;
color: var(--color-primary-300);
background: transparent;
border: none;
font-size: 1.15rem;
cursor: pointer;
transition: color .2s ease;
&:hover {
color: var(--color-primary-200);
}
&:focus {
outline: solid 3px var(--color-primary-300);
}
}
svg {
display: block;
}
.btn {
display: inline-block;
border-radius: 8px;
background-color: var(--color-grayscale-200);
padding: .5rem 1rem;
color: var(--color-grayscale-900);
transition: background-color .2s ease;
transition-property: background-color, box-shadow;
&:hover {
background-color: var(--color-grayscale-300);
color: var(--color-grayscale-900);
}
&:active {
background-color: var(--color-grayscale-100);
}
&:focus {
/*-webkit-box-shadow: 0px 0px 0px 4px var(--color-grayscale-100) 0px 0px 0px 8px var(--color-primary-300); */
box-shadow: 0 0 0 2px var(--color-grayscale-100), 0 0 0 4px var(--color-primary-300) ;
outline: 0px;
}
}
.btn.btn--primary {
color: var(--color-grayscale-100);
background-color: var(--color-primary-300);
&:hover {
background-color: var(--color-primary-200);
}
&:active {
background-color: var(--color-primary-400);
}
}
.btn.btn--secondary {
background-color: var(--color-secondary-300);
color: var(--color-grayscale-100);
&:hover {
background-color: var(--color-secondary-200);
}
&:active {
background-color: var(--color-secondary-400);
}
}
.btn.btn--tertiary {
background-color: var(--color-tertiary-300);
&:hover {
background-color: var(--color-tertiary-200);
}
&:active {
background-color: var(--color-tertiary-400);
}
}
/*.btn.btn--outline {
border: solid 2px var(--color-grayscale-500);
background: transparent;
&:hover {
}
&:active {
}
}*/
.header--primary {
color: var(--color-primary-300);
}
.header--secondary {
color: var(--color-secondary-300);
}
.header--tertiary {
color: var(--color-tertiary-300);
}
.header--underline {
text-align: center;
border-bottom: 2px solid var(--color-grayscale-300);
}
/* utilities */
.container {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
overflow-x: none;
}
.mt--auto {
margin-top: auto;
}
/* specialized components */
.navbar {
position: fixed;
width: 100%;
background-color: black;
z-index: 998;
-webkit-box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
}
.navbar__placeholder {
height: 72px;
position: static;
}
.navbar__content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.navbar__logo {
padding: 1rem;
}
.navbar__image {
width: 2.5rem;
display: block;
}
.navbar__menu-btn {
display: none;
}
.navbar__nav-icon {
background: var(--color-grayscale-900);
display: block;
height: 2px;
width: 23px;
position: relative;
transition: background .2s ease;
border-radius: 9999px;
&::before {
background: var(--color-grayscale-900);
content:"";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease;
top: 7px;
border-radius: 9999px;
}
&::after {
background: var(--color-grayscale-900);
content:"";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease;
top: -7px;
border-radius: 9999px;
}
}
.navbar__menu-icon {
position: relative;
float: right;
cursor: pointer;
padding: 1rem;
}
.navbar__menu-icon {
transition: transform .3s ease;
}
.navbar__menu-btn:checked ~ .navbar__menu-icon {
transform: rotate(90deg);
}
.navbar__menu-btn:checked ~ .navbar__menu-icon .navbar__nav-icon {
background: transparent;
}
.navbar__menu-btn:checked ~ .navbar__menu-icon .navbar__nav-icon::before {
transform: rotate(-45deg);
top: 0;
}
.navbar__menu-btn:checked ~ .navbar__menu-icon .navbar__nav-icon::after {
transform: rotate(45deg);
top: 0;
}
.navbar__menu-btn:checked ~ .navbar__links {
max-height: 500px;
}
.navbar__links {
flex-basis: 100%;
max-height: 0px;
transition: max-height ease .3s;
overflow-y: hidden;
align-items: center;
}
.navbar__link {
display: block;
color: var(--color-grayscale-900);
padding: 1.5rem 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 900px) {
.navbar__content {
flex-wrap: nowrap;
}
.navbar__menu-icon {
display: none;
}
.navbar__links {
width: 100%;
flex-basis: 100%;
max-height: none;
display: flex;
}
.navbar__link {
display: inline-block;
padding: 1rem;
border: none;
&:focus {
outline: 0px;
color: var(--color-primary-300);
}
}
.ml-auto {
margin-left: auto;
}
.navbar__btn {
border-radius: 8px;
background-color: var(--color-grayscale-200);
padding: .5rem 1rem;
color: var(--color-grayscale-900);
margin: 0px .5rem;
transition: background-color .2s ease;
transition-property: background-color, box-shadow;
&:hover {
background-color: var(--color-grayscale-300);
color: var(--color-grayscale-900);
}
&:active {
background-color: var(--color-grayscale-100);
}
&:focus {
/*-webkit-box-shadow: 0px 0px 0px 4px var(--color-grayscale-100) 0px 0px 0px 8px var(--color-primary-300); */
box-shadow: 0 0 0 2px var(--color-grayscale-100), 0 0 0 4px var(--color-primary-300) ;
outline: 0px;
}
}
.navbar__btn.btn--primary {
color: var(--color-grayscale-100);
background-color: var(--color-primary-300);
margin-left: auto;
&:hover {
background-color: var(--color-primary-200);
}
&:active {
background-color: var(--color-primary-400);
}
}
.navbar__btn.btn--outline {
border: solid 2px var(--color-grayscale-500);
background: transparent;
}
}
.modal {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .1);
pointer-events: none;
opacity: 0;
transition: opacity ease .2s;
z-index: 1000;
}
.modal__dialog {
background-color: var(--color-grayscale-100);
padding: 1rem;
display: flex;
flex-direction: column;
border-radius: 8px;
width: 500px;
max-height: 400px;
-webkit-box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
}
.modal__header {
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__title {
margin: 0px;
}
.modal__close-btn {
color: white;
}
.modal__list {
overflow-y: scroll;
}
.modal__list-item {
display: block;
color: var(--color-grayscale-900);
border-top: solid 1px rgba(255, 255, 255, .1);
padding: 1rem;
}
.modal:target {
opacity: 1;
pointer-events: all;
}
.hero {
background-color: black;
background: radial-gradient(101.59% 100.42% at 18.26% 109.12%, rgba(255, 0, 77, 0.27) 0%, rgba(0, 4, 3, 0) 99.99%, rgba(0, 0, 0, 0) 100%), radial-gradient(95% 79.91% at 85.03% 87.08%, rgba(0, 255, 209, 0.27) 0%, rgba(0, 0, 0, 0) 99.99%, rgba(0, 0, 0, 0) 100%);
}
.hero__container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px 0px;
}
.hero__brand {
margin-top: 7rem;
margin-bottom: 1rem;
font-weight: 300;
letter-spacing: 12px;
text-align: center;
}
.hero__title {
text-align: center;
}
.hero__subtext {
text-align: center;
margin-top: 1rem;
margin-bottom: 4rem;
}
.hero__screenshot {
padding: 0px 1rem;
}
.hero__image {
position: relative;
display: block;
max-width: 100%;
transform: translateY(25%);
border-radius: 8px;
z-index: 0;
-webkit-box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
}
.hero__button {
margin: 0px .5rem;
}
.highlights {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
width: 100%;
overflow-x: hidden;
}
.highlights__row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 5rem 0px;
background: var(--color-grayscale-100);
-webkit-box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.46);
width: 100%; // temporary solution to width issue
}
.highlights__row--alt {
flex-direction: row-reverse;
text-align: end;
background: black;
}
.highlights__screenshot {
flex-basis: 65%;
}
.highlights__row--alt .highlights__screenshot {
margin-right: 0px;
margin-left: -15%;
}
.highlights__screenshot {
margin-right: -15%;
}
.highlights__content {
margin-left: 15%;
}
.highlights__row--alt .highlights__content {
margin-left: 10px;
margin-right: 15%;
}
.highlights__image {
max-width: 100%;
border-radius: 8px;
max-height: 480px;
}
.highlights__image[src$='.svg'] {
min-height: 250px;
}
.highlights__content {
flex-basis: 400px;
}
@media only screen and (max-width: 1180px) {
.highlights__row {
flex-wrap: wrap-reverse;
}
.highlights__screenshot {
flex-basis: 95%;
}
.highlights__row--alt .highlights__screenshot {
margin-right: 5%;
margin-left: 0px;
}
.highlights__screenshot {
margin-left: 5%;
}
}
.showcase {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.showcase__carousel {
display: flex;
overflow-y: hidden;
overflow-x: auto;
width: 100%;
scroll-snap-type: x mandatory;
/*-ms-overflow-style: none;
scrollbar-width: none; */
margin-bottom: 2rem;
}
/*
.showcase__carousel::-webkit-scrollbar {
display: none;
}
*/
.showcase__slide {
width: 100%;
flex: 0 0 100%;
scroll-snap-align: start;
}
.showcase__video {
max-width: 100%;
}
.showcase__button {
border-radius: 9999px;
}
.testimonials {
display: flex;
justify-content: space-between;
align-items: stretch;
margin-top: 2rem;
flex-wrap: wrap;
}
.testimonals__card {
background-color: var(--color-grayscale-100);
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
padding: 1rem;
margin: 1rem;
text-align: center;
border-radius: 8px;
flex-basis: 30%;
}
.testimonials__portrait {
height: 7rem;
display: block;
border-radius: 9999px;
}
@media only screen and (max-width: 1000px) {
.testimonals__card {
flex-basis: 100%;
}
}
.plugins {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
background-color: black;
}
.plugins__group {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.plugins__heading {
text-align: center;
border-bottom: 2px solid var(--color-grayscale-300);
}
.plugins__card {
border-radius: 8px;
margin: 1rem;
background-color: var(--color-grayscale-100);
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 384px;
}
.plugins__thumbnail {
min-width: 100%;
}
.plugins__content {
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.plugins__text {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.plugins__title {
margin-top: 1rem;
}
@media only screen and (max-width: 1000px) {
.plugins__group {
justify-content: center;
}
}
@media only screen and (max-width: 900px) {
.plugins__group {
justify-content: center;
}
.plugins__card {
width: 85%;
}
}
.downloads__container {
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
}
.downloads__heading {
text-align: center;
border-bottom: 2px solid var(--color-grayscale-300);
}
.downloads__card {
flex-basis: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 1rem;
background-color: var(--color-grayscale-100);
border-radius: 8px;
padding: 1rem;
}
.downloads__title {
margin-top: 1rem;
text-align: center;
}
.downloads__price {
font-weight: 700;
text-align: center;
margin-top: 1rem;
/*margin-bottom: auto;*/
}
.downloads__features {
text-align: center;
list-style: none;
padding: 0px;
margin-bottom: auto;
padding-bottom: 1rem;
}
.downloads__feature {
text-align: center;
display: block;
border-bottom: solid 1px var(--color-grayscale-200);
padding: .5rem;
}
.downloads__btn {
text-align: center;
}
.downloads__source {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem
}
.downloads__sourcebtn {
margin: 0px .5rem
}
.downloads__funds-container {
display: flex;
justify-content: center;
}
.downloads__funds {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.downloads__funds-text {
text-align: center;
}
.downloads__funds-amount {
font-weight: 700;
background-color: var(--color-grayscale-100);
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
}
@media only screen and (max-width: 900px) {
.downloads__container {
flex-wrap: wrap;
}
}
.learn__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.learn__category {
margin-left: 1rem;
}
.learn__card {
padding: 1rem;
background-color: var(--color-grayscale-100);
max-width: 384px;
margin: 1rem;
border-radius: var(--border-radius-200);
}
.learn__video {
max-width: 100%;
}
.learn__title {
margin: 0px;
}
.learn__buttons {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.learn__button {
width: 45%;
text-align: center;
margin: 1rem;
font-size: 1.3rem;
display: flex;
justify-content: center;
align-items: center;
}
.community__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.community__card {
background-color: var(--color-grayscale-100);
padding: 1rem;
margin: 1rem;
border-radius: var(--border-radius-300);
max-width: 425px;
}
.affiliates__grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.community__title {
margin-top: 1rem;
}
.footer {
padding: 3rem 0px 2rem 0px;
text-align: center;
background-color: var(--color-grayscale-100);
margin-top: 3rem;
}
.footer__copyright {
margin-top: 0px;
}
.footer__container {
color: var(--color-grayscale-900);
margin-top: 3rem;
background-color: var(--color-grayscale-100);
}
.footer__container a {
color: var(--color-grayscale-900);
&:hover {
color: var(--color-primary-300);
}
}
.footer__container ul {
list-style: none;
padding: 0;
}
.footer__title {
margin: 0;
}
.footer__title--bold {
font-weight: bold;
}
.footer__container .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer__section {
display: flex;
flex-direction: column;
padding: 2rem;
}
.footer__section--copyright {
max-width: 445px;
}
.footer__logo {
width: 3.5rem;
display: flex;
align-items: center;
width: 100%;
}
.footer__image {
max-width: 3.5rem;
}
.footer__logo--text {
font-weight: bold;
margin: 1rem;
}