lumeweb.com/dist/index.39691276.css

1074 lines
19 KiB
CSS

@import "https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400";
.logo {
height: 55px;
min-width: 210px;
background-image: url("lume-logo.298e2f2a.webp");
background-repeat: no-repeat;
background-size: contain;
margin-left: 5px;
z-index: 998 !important;
}
.navbar-container {
white-space: nowrap;
display: inline-block;
}
.navbar {
width: 100%;
height: 80px;
white-space: nowrap;
background-color: #031418;
justify-content: space-between;
align-items: center;
gap: 36px;
padding: 75px 7% 3%;
display: flex;
}
.nav-menu {
align-items: end;
padding: 1em;
transition: all 1s linear;
display: flex;
}
li {
padding: 1rem;
}
.download-btn-container {
color: var(--black);
font-family: var(--font-family-jetbrains_mono);
font-size: var(--font-size-s);
background-color: var(--aquamarine);
height: 52px;
min-width: 245px;
border-radius: 5px;
align-items: flex-end;
padding: 12px 5.2px;
font-style: normal;
font-weight: 400;
transition: all .3s;
display: flex;
transform: scale(1);
}
.download-btn-container a {
color: #000;
}
.download-btn-container:hover {
transition: all .3s;
transform: scale(1.01);
}
.download-btn {
letter-spacing: 0;
min-height: 26px;
text-align: center;
width: 234px;
display: block;
}
.hamburger {
font-size: var(--font-size-xl);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-select: none;
display: none;
}
.mobile-menu {
display: none;
}
@media screen and (max-width: 940px) {
.nav-menu {
opacity: 0;
visibility: hidden;
width: 1px;
transition: all linear;
position: fixed;
}
.hamburger {
justify-content: right;
display: block;
position: absolute;
right: 20px;
z-index: 999 !important;
}
.mobile-menu {
width: auto;
opacity: 100;
background-color: #031418;
border-radius: 10px;
outline: .1px solid #07363fa7;
flex-direction: column;
justify-content: space-between;
align-items: end;
margin-left: 50%;
transition: all .55s;
display: flex;
position: absolute;
top: -100vh;
right: 0;
box-shadow: 0 4px 4px #00000096;
z-index: 998 !important;
}
.active {
top: 2em;
}
.mobile-menu li {
margin: 0 1em;
padding: 1em .5em;
}
.download-btn-container {
margin-left: -.8em;
transition: all .3s;
transform: scale(.7);
}
.download-btn-container:hover {
transition: all .3s;
transform: scale(.75);
}
.download-btn {
letter-spacing: 0;
min-height: 26px;
text-align: center;
width: 234px;
display: block;
}
}
.header-container {
align-items: flex-start;
margin-block: calc(77px + 1.5625vw);
display: flex;
z-index: -1 !important;
}
.header {
color: var(--white);
font-family: var(--font-family-jetbrains_mono);
letter-spacing: -6px;
text-align: center;
width: 100%;
font-style: normal;
font-weight: 400;
line-height: calc(2.69231vw + 66.9231px);
}
.header-alt {
color: var(--aquamarine);
font-family: var(--font-family-jetbrains_mono);
}
.header-alignment {
flex-direction: column;
justify-content: center;
display: flex;
}
.header-underscore {
animation: 1.3s step-end infinite blink;
}
@keyframes blink {
from, to {
color: #0000;
}
50% {
color: #f5f5f5;
}
}
.vision-container {
vertical-align: center;
padding-bottom: 5vh;
align-items: flex-start;
margin-block: 5vh;
padding-inline: 15%;
display: flex;
}
.vision-wrapper {
background-image: url("video-placeholder.c0c98ad6.webp");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
transition: all .5s;
}
.vision-btn-container {
background-color: var(--aquamarine);
height: 49px;
max-width: 195px;
border-radius: 5px;
align-items: center;
margin-top: 22px;
margin-left: -1.5px;
padding: 0 3px;
transition: all .3s;
display: flex;
transform: scale(1);
}
.vision-btn-container:hover {
transition: all .3s;
transform: scale(1.01);
}
.vision-btn-container a {
color: #000;
}
.vision-btn {
letter-spacing: 0;
min-height: 26px;
text-align: center;
width: 234px;
display: block;
}
.vision-transluscent {
background-color: none;
border-radius: 15px;
transition: all .5s;
}
@media screen and (max-width: 1200px) {
.vision-transluscent {
background-color: #031418a7;
border-radius: 15px;
transition: all .5s;
}
}
.Whatisweb3-container {
width: 100%;
justify-content: center;
align-self: flex-start;
padding-block: 5vh;
position: relative;
}
.w3-container {
width: 100%;
padding-left: 53vw;
transition: all .5s;
z-index: 999 !important;
}
.Whatisweb3-wrapper {
width: 80%;
padding-block: 10em;
background-image: url("tilted-rectangle.14b6a762.webp");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
justify-content: center;
align-items: center;
padding-left: calc(8px + 1.5625vw);
display: flex;
overflow: hidden;
}
.img-left {
height: 817px;
width: 637px;
background-image: url("img-left.f6d2d03a.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: flex;
position: absolute;
left: 11%;
z-index: 998 !important;
}
.w3-btn-container {
background-color: var(--aquamarine);
height: 49px;
max-width: 105px;
border-radius: 5px;
align-items: center;
margin-top: 22px;
margin-left: -1.5px;
padding: 0 3px;
transition: all .5s;
display: flex;
transform: scale(1);
z-index: 999 !important;
}
.w3-btn-container:hover {
transition: all .5s;
transform: scale(1.01);
}
.w3-btn-container a {
color: #000;
}
.w3-btn {
letter-spacing: 0;
min-height: 26px;
text-align: center;
width: 105px;
font-size: 15px;
display: block;
}
.w3-transluscent {
max-width: 71.5%;
background-color: #020e1076;
border-radius: 15px;
transition: all .5s;
}
@media screen and (max-width: 1050px) {
.w3-container {
width: 100%;
padding-inline: 12%;
z-index: 999 !important;
z-index: 999 !important;
}
.Whatisweb3-wrapper {
width: 100%;
}
.img-left {
transition: all .5s;
left: 15%;
}
.w3-transluscent {
max-width: 100%;
}
}
@media screen and (min-width: 2200px) {
.w3-container {
width: 100%;
justify-content: center;
padding-inline: 96vw;
display: grid;
}
.img-left {
left: 5.5%;
}
.w3-transluscent {
max-width: 30%;
}
}
.valign-text-middle {
flex-direction: row;
justify-content: space-between;
display: flex;
}
.p-logo-wrapper {
white-space: nowrap;
width: 100%;
flex-direction: column;
align-items: center;
margin-left: 50%;
margin-right: 50%;
display: flex;
}
.rows {
height: auto;
width: 100%;
flex-direction: row;
place-items: center;
margin-bottom: 1.5vh;
display: flex;
overflow: hidden;
}
.p-logo-container {
white-space: normal;
justify-content: center;
align-items: center;
display: flex;
overflow: visible;
}
@media screen and (max-width: 625px) {
.p-logo-container {
width: 100%;
margin-top: 5%;
transition: all .5s;
}
.p-logo-wrapper {
margin-left: 0%;
}
.p-logo-container {
justify-content: center;
align-items: center;
display: grid;
overflow: visible;
}
}
.sia-logo {
height: 51.8px;
object-fit: cover;
width: 89.6px;
background-image: url("sia-logo.cbb05f15.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin-bottom: 8px;
}
.hns-logo {
height: 46.2px;
object-fit: cover;
width: 43.4px;
background-image: url("hsn-logo.869b6745.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin-left: 5px;
}
.osi-logo {
height: 70px;
width: 58.1px;
background-image: url("osi-logo.7a1e932b.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin-left: 18px;
}
.meme-container {
width: 100%;
justify-content: center;
align-self: flex-start;
margin-block: 5vh;
padding-block: 5vh;
position: relative;
}
.meme-bp {
padding-right: 45%;
}
.meme-wrapper {
width: 100%;
padding-block: 2.1em;
height: 80vh;
background-image: url("tilted-rectangle.14b6a762.webp");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
justify-content: center;
align-items: center;
padding-left: 6.5%;
transition: all .5s;
display: flex;
overflow: hidden;
}
.meme-bg {
height: calc(100% + .3vh);
background-image: url("meme.1e83716f.webp");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
margin-left: -.8vw;
transition: all .5s;
}
.meme-columns {
margin-block: calc(10% + 1.5625vh);
display: grid;
position: relative;
}
@media screen and (max-width: 1050px) {
.meme-container {
width: 100%;
transition: all .5s;
z-index: 999 !important;
}
.meme-bp {
padding-right: 0%;
}
.meme-wrapper {
width: 100%;
padding-inline: 15%;
height: 80vh;
padding-left: 20%;
transition: all .5s;
}
.meme-translucent {
max-width: 100%;
background-color: #020e10ac;
border-radius: 15px;
transition: all .5s;
}
.meme-bg {
background-position: 50%;
z-index: 999 !important;
}
.meme-columns {
margin-block: calc(25% + 1.5625vh);
transition: all .5s;
display: grid;
position: relative;
}
}
@media screen and (min-width: 2200px) {
.meme-container {
width: 100%;
justify-content: center;
transition: all .5s;
display: inline-block;
}
.meme-translucent {
max-width: 30%;
background-color: none;
border-radius: 15px;
transition: all .5s;
}
}
.column {
margin-block: 5vh;
padding-bottom: 5vh;
transition: all .5s;
}
.bordered {
background-color: var(--blue-charcoal);
border: 2px solid #0000;
border-radius: 5px;
margin: .5em;
transition: all .3s;
}
.bordered:hover {
border: 2px solid var(--aquamarine);
border-radius: 5px;
transition: all .1s;
}
@media screen and (min-width: 815px) {
.h5-padding {
padding-bottom: 15px;
}
.column {
transition: all .5s;
}
.div2 {
margin-top: -1.3em;
}
}
@media screen and (min-width: 0) and (max-width: 600px) {
.column {
justify-content: center;
padding: 0% 5% 5vh;
transition: all .5s;
display: inline-block;
}
}
@media screen and (max-width: 1300px) and (min-width: 700px) {
.column {
justify-content: center;
padding: 0% 0% 0% 20vw;
transition: all .5s;
display: inline-block;
}
}
.grid-container {
margin-bottom: -1em;
}
.socials-wrapper {
margin-bottom: 5vh;
margin-left: -5%;
padding-bottom: 5vh;
display: flex;
}
.gitHub {
height: 48.3px;
width: 55px;
background-image: url("github-logo.ca4e666e.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
}
.discord {
height: 48.3px;
width: 48.3px;
background-image: url("discord-logo.d821d169.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin-top: .4vh;
margin-left: 18px;
}
.twitter {
height: 48.3px;
width: 55px;
background-image: url("twitter-logo.d1bfbad0.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin-left: 18px;
}
.fb {
height: 42px;
width: 50px;
background-image: url("fb-logo.4541ad13.webp");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin-top: .5vh;
margin-left: 18px;
}
.cto-container {
width: 100%;
transition: all .5s;
}
.cto-bp {
padding-right: 0%;
transition: all .5s;
}
.cto-geometric-bg {
height: 588px;
width: 100%;
background-image: url("geometric-bg.93295629.webp");
background-position: 75vh -2vh;
background-repeat: no-repeat;
background-size: contain;
transition: all .5s;
position: relative;
}
.cto-shadow {
width: 100%;
border-radius: 72.5px;
transition: all .5s;
}
.shadowdrop {
width: 100%;
border-radius: 72.5px;
transition: all .5s;
box-shadow: 0 4px 4px #00000040;
}
.cto-mini-bio {
height: 96px;
width: 100%;
object-fit: contain;
background-image: url("cto-avatar.cdb0cc08.webp");
background-repeat: no-repeat;
flex-direction: column;
justify-content: center;
margin-top: 3vh;
display: inline-flex;
z-index: 999 !important;
}
.cto-info {
margin-left: 7em;
transition: all .5s;
}
.cto-translucent {
background-color: #020e10ac;
border-radius: 15px;
transition: all .5s;
}
@media screen and (min-width: 0) and (max-width: 600px) {
.cto-container {
background-position: 100px 50px;
background-repeat: no-repeat;
background-size: cover;
background-origin: content-box;
justify-content: center;
margin-left: -3em;
transition: all .5s;
}
.cto-bp {
padding-right: 0%;
transition: all .5s;
}
.shadowdrop {
border-radius: 72.5px;
justify-content: center;
margin-left: 12%;
transition: all .5s;
box-shadow: 0 4px 4px #00000040;
}
.cto-shadow {
vertical-align: center;
align-items: flex-start;
padding-left: 15%;
display: flex;
}
}
@media screen and (min-width: 601px) {
.cto-container {
width: 100%;
background-position: 100px 50px;
background-repeat: no-repeat;
background-size: cover;
background-origin: content-box;
transition: all .5s;
}
.cto-bp {
padding-right: 0%;
transition: all .5s;
}
.cto-shadow {
vertical-align: center;
align-items: flex-start;
padding-inline: 15%;
display: flex;
}
}
.message-container {
background-color: var(--aquamarine);
min-height: 237px;
width: 120%;
flex-direction: column;
align-items: flex-start;
gap: 7px;
margin-left: -1em;
padding: 5% 12%;
display: flex;
}
.message-header {
color: var(--blue-charcoal-2);
font-family: var(--font-family-jetbrains_mono);
font-size: calc(.615385vw + 23.1538px);
font-style: normal;
font-weight: 700;
line-height: 2em;
}
.message-content {
color: var(--blue-charcoal-2);
font-family: var(--font-family-jaldi);
max-width: 85%;
font-size: calc(.538462vw + 13.3846px);
font-style: normal;
font-weight: 400;
}
.footer-logo {
height: 55px;
min-width: 150px;
text-align: left;
margin-left: 5px;
margin-inline: 5px;
background-image: url("lume-logo.298e2f2a.webp");
background-repeat: no-repeat;
background-size: contain;
margin-top: 3vh;
display: inline-block;
z-index: 998 !important;
}
.footer-email {
height: 14px;
object-fit: cover;
width: 17px;
background-image: url("email-icon.afd1e4f7.webp");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin-inline: 10px;
padding-inline: 10px;
}
.footer-column {
vertical-align: center;
padding-inline: 1%;
background-color: #000;
justify-content: center;
align-items: flex-start;
padding-left: 5%;
list-style-type: none;
}
.footer-container {
flex-direction: row;
display: flex;
}
.footer-padding {
text-align: left;
font-family: var(--font-family-jaldi);
margin-inline: 5px;
margin-top: 5vh;
font-size: calc(.846154vw + 12.4615px);
display: inline-block;
}
.footer-li {
color: #808687;
font-family: var(--font-family-jaldi);
margin-inline: 5px;
padding-left: 0;
font-size: calc(.846154vw + 7.46154px);
font-style: normal;
font-weight: 100;
line-height: 1px;
}
.footer-h2 {
color: var(--aquamarine);
z-index: 999;
font-size: calc(1.15385vw + 11.5385px);
line-height: 1vh;
}
.page-one {
white-space: nowrap;
background-color: #000;
justify-content: center;
display: flex;
}
.page-one:after {
content: " page 1";
padding-left: 10px;
}
.page-two {
white-space: nowrap;
background-color: #000;
justify-content: center;
display: flex;
}
.page-two:after {
content: " page 2";
padding-left: 10px;
}
:root {
--primary-dark: #000;
--primary-light: #fff;
--black: #000;
--blue-charcoal: #010e10;
--blue-charcoal-2: #031518;
--aquamarine: #7afcbb;
--cloud: #c7c7c7;
--alto: #d9d9d9;
--white: #fff;
--font-size-s: 20px;
--font-size-m: 21px;
--font-size-l: 25px;
--font-size-xl: 30px;
--font-size-xxl: 32px;
--font-size-xxxl: 45px;
--font-size-xxxxl: 100px;
--font-family-ibm_plex_sans_devanagari: "IBM Plex Sans Devanagari";
--font-family-jaldi: "Jaldi";
--font-family-jetbrains_mono: "JetBrains Mono";
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
a, a:visited {
color: #fff;
text-decoration: none;
}
body {
color: #fff;
font-family: JetBrains Mono, sans-serif;
}
.body-block {
align-items: center;
gap: 78px;
display: flex;
}
.centered {
height: auto;
place-items: center;
margin-bottom: 1.5vh;
display: grid;
overflow: hidden;
}
.home {
display: absolute;
height: auto;
width: 100%;
background-color: #031418;
border: 1px;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.title {
height: 57px;
letter-spacing: -1.5px;
white-space: nowrap;
line-height: 102px;
}
a {
text-decoration: none;
}
h1 {
font-size: calc(4.30769vw + 13.0769px);
font-weight: 100;
}
h2 {
color: var(--aquamarine);
text-transform: uppercase;
z-index: 999;
font-size: calc(1.15385vw + 11.5385px);
}
h3 {
min-width: 75vw;
z-index: 999;
margin-top: .5em;
font-size: calc(1.15385vw + 26.5385px);
}
h4 {
color: var(--cloud);
font-size: calc(.461539vw + 13.6154px);
font-family: var(--font-family-jaldi);
font-size: var(--font-size-m);
max-width: 550px;
margin-top: .5em;
font-style: normal;
font-weight: 400;
line-height: 35px;
}
h5 {
color: var(--white);
font-size: calc(1.07692vw + 11.7692px);
font-family: var(--font-family-jaldi);
max-width: 300px;
font-style: normal;
font-weight: 400;
line-height: 2rem;
}
h6 {
color: var(--cloud);
font-size: calc(.307692vw + 14.0769px);
font-family: var(--font-family-jaldi);
max-width: 300px;
font-style: normal;
font-weight: 100;
}
ul {
list-style-type: none;
}
.container {
max-width: 1240px;
margin: auto;
padding: 0 1rem;
}
@media screen and (max-width: 1050px) {
.left {
white-space: normal;
display: flex;
position: relative;
overflow: hidden;
}
.h2-alignment {
margin-left: -10em;
}
h5 {
color: var(--white);
font-size: calc(1.07692vw + 16.7692px);
font-family: var(--font-family-jaldi);
max-width: 300px;
font-style: normal;
font-weight: 400;
line-height: 2rem;
}
h6 {
color: var(--cloud);
font-size: calc(.307692vw + 16.0769px);
font-family: var(--font-family-jaldi);
max-width: 300px;
font-style: normal;
font-weight: 100;
}
}
/*# sourceMappingURL=index.39691276.css.map */