v1.6.7/website relaunch
This commit is contained in:
+228
-604
@@ -10,667 +10,291 @@ CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
|
||||
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
************************************************************************/
|
||||
|
||||
@keyframes circleFloat {
|
||||
0% {
|
||||
top: -12.5rem;
|
||||
left: -12.5rem;
|
||||
}
|
||||
25% {
|
||||
top: -14rem;
|
||||
left: -13rem;
|
||||
}
|
||||
50% {
|
||||
left: -11rem;
|
||||
}
|
||||
75% {
|
||||
top: -11rem;
|
||||
}
|
||||
100% {
|
||||
top: -12.5rem;
|
||||
left: -12.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 10px;
|
||||
background-color: var(--primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
padding-top: 12.5rem;
|
||||
padding-left: 10rem;
|
||||
}
|
||||
|
||||
.logo-circle {
|
||||
border-radius: 100%;
|
||||
width: 60rem;
|
||||
height: 60rem;
|
||||
position: absolute;
|
||||
top: -12.5rem;
|
||||
left: -12.5rem;
|
||||
z-index: -1 !important;
|
||||
background-color: var(--primary-light);
|
||||
animation: circleFloat 3s ease-in-out 0s infinite;
|
||||
}
|
||||
.logo-circle:nth-of-type(2) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.logo-circle:nth-of-type(3) {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--cta);
|
||||
font-size: 7.2rem;
|
||||
letter-spacing: 2.2rem;
|
||||
}
|
||||
|
||||
.logo.duplicate {
|
||||
margin-bottom: var(--logo-offset);
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.link-button.duplicate {
|
||||
margin-bottom: var(--link-button-offset);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.logo-tag {
|
||||
color: var(--primary-text);
|
||||
font-size: 3.2rem;
|
||||
letter-spacing: 1.375rem;
|
||||
margin: 6rem 0;
|
||||
line-height: 6.4rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
color: var(--primary-text);
|
||||
letter-spacing: 0.75rem;
|
||||
margin: 3rem 0;
|
||||
display: inline-block;
|
||||
line-height: 6rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--primary-text);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.supported-logo {
|
||||
display: inline-block;
|
||||
padding: 10rem;
|
||||
margin: 2.5rem;
|
||||
background-position: center !important;
|
||||
background-size: contain !important;
|
||||
background-repeat: no-repeat !important;
|
||||
font-size: 10px !important;
|
||||
background-color: var(--color-primary);
|
||||
transition: all ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
display: table;
|
||||
a {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
display: inline-block;
|
||||
content: '↗';
|
||||
margin-left: 1rem;
|
||||
transition: all ease-in-out 0.2s;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
a:hover::after {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.underlink {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 2px;
|
||||
text-decoration: none;
|
||||
padding: 3rem 7.5rem;
|
||||
color: var(--primary);
|
||||
background-color: var(--cta);
|
||||
font-size: 4rem;
|
||||
border-radius: 7.5rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin: 6rem 0;
|
||||
padding-left: 10rem;
|
||||
.title {
|
||||
font-size: 7.2rem;
|
||||
margin-bottom: 5rem;
|
||||
letter-spacing: 1rem;
|
||||
}
|
||||
|
||||
.features .title {
|
||||
a.title {
|
||||
display: block;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: var(--primary-light);
|
||||
padding: 6rem 7.5rem;
|
||||
margin: 10rem 0;
|
||||
}
|
||||
|
||||
.feature-icon video {
|
||||
border-radius: 100%;
|
||||
width: 10rem;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
margin-top: 9rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
.feature-card .feature-icon video {
|
||||
transform: scale(2.5) translateY(-50%) translateX(1.5rem);
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: var(--primary-text);
|
||||
font-size: 2.8rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--primary-medium);
|
||||
padding: 6rem 10rem;
|
||||
}
|
||||
|
||||
footer .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.built-with a {
|
||||
color: var(--cta);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--cta);
|
||||
padding-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
footer .link-button {
|
||||
margin: 3rem 0;
|
||||
position: relative;
|
||||
width: calc(100% - 15rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copyright .landing {
|
||||
flex: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.welcome .logo,
|
||||
.copyright .logo {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.welcome .logo a,
|
||||
.copyright .logo a {
|
||||
color: var(--cta);
|
||||
text-decoration: none;
|
||||
padding-bottom: 0.5rem;
|
||||
line-height: 125%;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.welcome .landing video {
|
||||
display: block;
|
||||
max-width: 85%;
|
||||
height: auto;
|
||||
border-radius: 7rem;
|
||||
border: 2px solid var(--cta);
|
||||
margin: 10rem 0;
|
||||
box-shadow: 0px 0px 50px #c0f30054;
|
||||
}
|
||||
|
||||
.welcome .landing .title.subtitle {
|
||||
display: table;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip {
|
||||
padding: 3rem 0;
|
||||
border-bottom: 0.5px solid var(--cta);
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .link-button {
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip h6 {
|
||||
color: var(--primary-text);
|
||||
font-size: 3rem;
|
||||
.sub-title {
|
||||
font-size: 3.6rem;
|
||||
letter-spacing: 0.5rem;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip p {
|
||||
color: var(--primary-text);
|
||||
font-size: 3rem;
|
||||
margin: 1.5rem 0;
|
||||
letter-spacing: 0.25rem;
|
||||
}
|
||||
|
||||
.landing .supported .supported-logo {
|
||||
position: relative;
|
||||
border-bottom: 2px solid var(--cta);
|
||||
}
|
||||
.landing .supported .supported-logo[data-full-support]::before,
|
||||
.landing .supported .supported-logo[data-beta-support]::before,
|
||||
.landing .supported .supported-logo[data-upcoming-support]::before {
|
||||
content: 'FULLY SUPPORTED';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 2rem;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
transition: all ease-out 0.3s;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
color: var(--primary);
|
||||
font-family: 'GlacialBold';
|
||||
background-color: var(--cta);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.landing .supported .supported-logo[data-beta-support]::before {
|
||||
content: 'BETA SUPPORT';
|
||||
}
|
||||
|
||||
.landing .supported .supported-logo[data-upcoming-support]::before {
|
||||
content: attr(data-upcoming-support);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.home .pop-features {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.pop-features {
|
||||
padding: 35px;
|
||||
padding-left: 70px;
|
||||
}
|
||||
|
||||
.pop-features .title {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.pop-feature {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pop-feature > * {
|
||||
flex: 1;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
#title-card {
|
||||
border-radius: 26px;
|
||||
background: var(--primary-light);
|
||||
width: 500px;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
box-shadow: 0px 0px 84px var(--primary-medium);
|
||||
margin: 0 auto;
|
||||
}
|
||||
div#title-card {
|
||||
width: calc(500px - 60px);
|
||||
height: calc(500px - 60px);
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
h5#title-card-title {
|
||||
font-size: 20px;
|
||||
color: var(--cta);
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
h3#title-card-subtitle {
|
||||
font-size: 30px;
|
||||
letter-spacing: 5px;
|
||||
margin: 7.5px 0px;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
p#control-notification,
|
||||
p#control-autorejoin,
|
||||
p#control-admin {
|
||||
font-size: 15px;
|
||||
padding: 10px 55px;
|
||||
background: var(--primary);
|
||||
border-radius: 26px;
|
||||
color: var(--primary-text);
|
||||
box-shadow: 0px 0px 20px var(--primary-medium);
|
||||
margin: 35px 0px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
p#control-notification {
|
||||
margin-left: -150px;
|
||||
}
|
||||
|
||||
p#control-autorejoin {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
p#control-admin {
|
||||
margin-left: -75px;
|
||||
}
|
||||
|
||||
p#control-notification span,
|
||||
p#control-autorejoin span,
|
||||
p#control-admin span {
|
||||
display: block;
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
.pop-feature .explanation > div {
|
||||
margin: auto auto;
|
||||
align-items: center;
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
.pop-feature .explanation div h4 {
|
||||
color: var(--primary-text);
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 5px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.pop-feature .explanation p {
|
||||
color: var(--primary-text);
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 5px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.pop-feature .explanation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h5#system-message {
|
||||
text-align: center;
|
||||
color: var(--primary-text);
|
||||
font-size: 16px;
|
||||
.body {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: 2px;
|
||||
margin: 5px 0;
|
||||
margin: 3rem 0px;
|
||||
}
|
||||
|
||||
p#call-user-chip {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
padding: 10px 25px;
|
||||
color: var(--primary-text);
|
||||
border-radius: 26px;
|
||||
background: var(--cta);
|
||||
color: var(--primary-medium);
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
body {
|
||||
padding: 10rem;
|
||||
}
|
||||
|
||||
p#call-user-chip.not-me-user-chip {
|
||||
background: var(--primary);
|
||||
color: var(--primary-text);
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
max-width: fit-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.bubble {
|
||||
border-width: 5rem;
|
||||
border-color: var(--color-bright);
|
||||
border-style: solid;
|
||||
background-color: var(--color-bright);
|
||||
border-radius: 90rem;
|
||||
padding-top: 20rem;
|
||||
padding-bottom: 20rem;
|
||||
}
|
||||
|
||||
p#call-user-chip.not-me-user-chip input {
|
||||
margin-left: 20px;
|
||||
.bubble.empty {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
h6#title-card-tagline {
|
||||
color: var(--primary-medium);
|
||||
font-size: 15px;
|
||||
color: var(--primary);
|
||||
margin: 20px 0;
|
||||
letter-spacing: 3.5px;
|
||||
.bubble.right {
|
||||
border-left-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: -10rem;
|
||||
margin-right: -10rem;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
}
|
||||
|
||||
@keyframes circleMove {
|
||||
0% {
|
||||
right: -40px;
|
||||
bottom: -40px;
|
||||
}
|
||||
35% {
|
||||
right: 200px;
|
||||
bottom: 350px;
|
||||
}
|
||||
60% {
|
||||
right: 200px;
|
||||
bottom: 350px;
|
||||
}
|
||||
75% {
|
||||
right: -40px;
|
||||
bottom: -40px;
|
||||
}
|
||||
100% {
|
||||
right: -40px;
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
@keyframes rectSize {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
35% {
|
||||
width: 300px;
|
||||
}
|
||||
60% {
|
||||
width: 300px;
|
||||
}
|
||||
75% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
.bubble.left {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-left: -10rem;
|
||||
margin-right: -10rem;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
}
|
||||
|
||||
div#fab {
|
||||
background: var(--primary);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 60px;
|
||||
letter-spacing: 5px;
|
||||
.big-button {
|
||||
display: block;
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: 20rem;
|
||||
color: var(--color-primary);
|
||||
padding: 2.5rem 5rem;
|
||||
margin: 10rem 0rem;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
color: var(--cta);
|
||||
position: absolute;
|
||||
right: 250px;
|
||||
bottom: 250px;
|
||||
animation: circleMove 2s linear 0s infinite alternate !important;
|
||||
z-index: 99;
|
||||
filter: drop-shadow(0px 0px 20px var(--primary));
|
||||
font-size: 1.8rem;
|
||||
text-decoration: none;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
div#title-card {
|
||||
position: relative;
|
||||
a.big-button::after {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
div#sidebar {
|
||||
width: 300px;
|
||||
height: 120%;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: var(--cta);
|
||||
top: -10%;
|
||||
border-top-right-radius: 26px;
|
||||
border-bottom-right-radius: 26px;
|
||||
animation: rectSize 2s linear 0s infinite alternate !important;
|
||||
box-shadow: -5px 0px 50px var(--primary-medium);
|
||||
.overlap {
|
||||
margin-top: -20rem;
|
||||
}
|
||||
|
||||
/*
|
||||
T H R E A D
|
||||
D E M O S
|
||||
*/
|
||||
|
||||
#ti * {
|
||||
font-size: 14px !important;
|
||||
font-family: 'Glacial';
|
||||
letter-spacing: 1.1px;
|
||||
.info {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
#ti {
|
||||
color: white;
|
||||
width: fit-content;
|
||||
margin: 10px 0;
|
||||
.info .info-card {
|
||||
background-color: var(--color-dim);
|
||||
border-radius: 2.5rem;
|
||||
height: 45rem;
|
||||
width: 100%;
|
||||
}
|
||||
#tm {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#tm #tt {
|
||||
height: 0;
|
||||
overflow-y: visible;
|
||||
font-size: 10px;
|
||||
transition: all ease-in-out 0.3s;
|
||||
/* transition-delay: 0.1s; */
|
||||
white-space: nowrap;
|
||||
margin-bottom: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info .info-card {
|
||||
color: var(--color-primary);
|
||||
font-size: 15rem;
|
||||
letter-spacing: 1rem;
|
||||
}
|
||||
|
||||
.info .info-card video {
|
||||
margin: 0 auto;
|
||||
clip-path: circle();
|
||||
max-height: 30rem;
|
||||
}
|
||||
|
||||
.info .info-card svg {
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.info .info-text p .underlink {
|
||||
display: block;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.supported.text-section {
|
||||
position: relative;
|
||||
margin-top: 20rem;
|
||||
}
|
||||
|
||||
.bright-circle {
|
||||
width: 50rem;
|
||||
height: 50rem;
|
||||
background-color: var(--color-bright);
|
||||
position: absolute;
|
||||
border-radius: 80rem;
|
||||
z-index: -1;
|
||||
left: -10rem;
|
||||
top: -7.5rem;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
max-height: fit-content;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.card-grid::-webkit-scrollbar {
|
||||
height: 0.7rem !important;
|
||||
}
|
||||
|
||||
.card-grid::-webkit-scrollbar-track {
|
||||
background-color: var(--color-tertiary);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.card-grid::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.card-grid::after {
|
||||
content: '.';
|
||||
opacity: 0;
|
||||
color: #9f9f9f;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 50rem;
|
||||
}
|
||||
#tm #tt span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
#tm #tt #ri {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
color: #c0f300;
|
||||
font-size: 20px;
|
||||
border-radius: 26px;
|
||||
z-index: 99 !important;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
background-image: url('https://www.materialui.co/materialIcons/content/reply_grey_192x192.png');
|
||||
|
||||
.card-grid .support-card {
|
||||
display: inline-block;
|
||||
min-width: 30rem;
|
||||
min-height: 30rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
margin: 3rem;
|
||||
border-radius: 2.5rem;
|
||||
background-color: var(--color-tertiary);
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
bottom: 0;
|
||||
transition: all ease-in-out 0.3s;
|
||||
/* transition-delay: 0.1s; */
|
||||
}
|
||||
#ti:hover #tm #tt {
|
||||
height: 24px;
|
||||
margin-bottom: 7px;
|
||||
opacity: 1;
|
||||
|
||||
.card-grid a.support-card::after {
|
||||
content: none;
|
||||
}
|
||||
#tm p {
|
||||
max-width: 40%;
|
||||
padding: 5px 15px;
|
||||
background: #424242;
|
||||
border-radius: 26px;
|
||||
z-index: 99 !important;
|
||||
transition: all ease-in-out 0.3s;
|
||||
/* transition-delay: 0.1s; */
|
||||
width: fit-content;
|
||||
|
||||
.features.card-grid {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
#tm video {
|
||||
max-width: 40%;
|
||||
border-radius: 26px;
|
||||
transition: all ease-in-out 0.3s;
|
||||
/* transition-delay: 0.1s; */
|
||||
z-index: 99;
|
||||
}
|
||||
#ti:hover #tm p,
|
||||
#ti:hover #tm video {
|
||||
margin-left: 40px;
|
||||
}
|
||||
#tm #tt #ri:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
#tn {
|
||||
font-size: 11px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 7px;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
#tr {
|
||||
font-size: 11px;
|
||||
margin-bottom: -20px;
|
||||
padding: 7.5px 15px;
|
||||
padding-bottom: 25px;
|
||||
border-radius: 13px;
|
||||
background: #222222;
|
||||
width: fit-content;
|
||||
max-width: 35%;
|
||||
z-index: 99 !important;
|
||||
transition: all ease-in-out 0.3s;
|
||||
/* transition-delay: 0.1s; */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
#tr video {
|
||||
max-height: 50px;
|
||||
border-radius: 26px;
|
||||
transition: all ease-in-out 0.3s;
|
||||
/* transition-delay: 0.1s; */
|
||||
}
|
||||
#ti:hover #tr {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 7.5px;
|
||||
}
|
||||
#tr:hover {
|
||||
background: #111111;
|
||||
}
|
||||
#ti.mm {
|
||||
|
||||
.features.card-grid .support-card {
|
||||
min-width: 50rem;
|
||||
min-height: 50rem;
|
||||
margin: 3rem;
|
||||
background-image: none;
|
||||
background-color: var(--color-dim);
|
||||
padding: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#ti.mm #tn {
|
||||
display: none;
|
||||
|
||||
.features.card-grid .support-card video {
|
||||
clip-path: circle();
|
||||
height: 20rem;
|
||||
flex: 1;
|
||||
}
|
||||
#ti.mm #tm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
footer {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
#ti.mm #tm p {
|
||||
text-align: right;
|
||||
|
||||
.link-list {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
#ti.mm #tm #tt {
|
||||
flex-direction: row;
|
||||
|
||||
.link-list .link-list-title {
|
||||
font-size: 2.2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
#ti.mm #tm #tt #ri {
|
||||
right: 0;
|
||||
left: unset;
|
||||
|
||||
.link-list .underlink {
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
#ti.mm:hover #tm p,
|
||||
#ti.mm:hover #tm video {
|
||||
margin-left: 0;
|
||||
margin-right: 40px;
|
||||
|
||||
.link-list .underlink:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
video::-internal-media-controls-overlay-cast-button {
|
||||
display: none;
|
||||
|
||||
footer .end-line .underlink::after {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
footer .end-line .underlink:first-of-type {
|
||||
display: block;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
footer .end-line .underlink svg {
|
||||
fill: var(--color-dim);
|
||||
margin-right: 2.5rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
footer .end-line .underlink svg:hover {
|
||||
fill: var(--color-secondary);
|
||||
}
|
||||
|
||||
.versions .support-card {
|
||||
font-size: 7rem;
|
||||
text-decoration: none;
|
||||
letter-spacing: 4px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user