Skip to content
This repository was archived by the owner on Apr 23, 2026. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 126 additions & 142 deletions src/assets/css/scss/_style.scss
Original file line number Diff line number Diff line change
@@ -1,170 +1,154 @@
*{
box-sizing: border-box;
* {
box-sizing: border-box;
}
html{
min-height: -webkit-fill-available;
html {
min-height: -webkit-fill-available;
}
body{
min-height: 100vh;
min-height: -webkit-fill-available;
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}

h1{
position: relative;
color: #ffffff;
font-size: 58px;
text-align: center;
padding: 100px;
z-index: 10;
h1 {
position: relative;
color: #ffffff;
font-size: 58px;
text-align: center;
padding: 100px;
z-index: 10;
}

/********************/
.header{
position: fixed;
top: 0;
left: 0;
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
z-index: 100;
opacity: 0;
visibility: hidden;

svg {
width: 100%;
text-align: center;
z-index: 100;
opacity: 0;
visibility: hidden;

svg{
width: 100%;
height: 100%;
}
height: 100%;
}
}
.header-container {
position: relative;
display: flex;
justify-content: center;
position: relative;
display: flex;
justify-content: center;
width: 100%;
max-width: 1000px;
margin: auto;

img {
width: 100%;
max-width: 1000px;
margin: auto;

img{
width: 100%;
height: auto;
}
height: auto;
}
}
.header-talking {
position: absolute;
width: 50px;
height: 50px;
top: 40px;
left: 30px;

#ctg-talking > *{
opacity: 0;
transform: translate(-5px,-5px);
}
position: absolute;
width: 50px;
height: 50px;
top: 40px;
left: 30px;

#ctg-talking > * {
opacity: 0;
transform: translate(-5px, -5px);
}
}
/********************/
.wrapper-animation{
position: relative;
width: 100%;
overflow: hidden;
background: #000;
font-family: "Play", sans-serif;
}

.timerEnd{
font-family: "Play", sans-serif ;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;

.wrapper-animation {
position: relative;
width: 100%;
overflow: hidden;
background: #000;
font-family: "Play", sans-serif;
}

.timerEnd {
font-family: "Play", sans-serif;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.timer_container {
font-size: calc(16px + (30 - 16) * (100vw - 400px) / (800 - 400));
color: #ffffff;
text-align: center;
}
.launch-btn-wrapper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 11;
font-size: calc(16px + (30 - 16) * (100vw - 400px) / (800 - 400));
color: #ffffff;
text-align: center;
}
.launch-btn-wrapper {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background: #000;
// z-index: 11;
}
.btn-home {
font-family: "Play", sans-serif ;
white-space: nowrap;
//background-color: #000;
background-color: transparent;
border: none;
font-family: "Play",sans-serif;
outline: none;
padding: 0.5em 1em;
font-size: calc(4vw + 4vh);
border-radius: 3px;
box-shadow: 0 0 10px 0 #38d6ae;
text-shadow: 0 0 25px #36d6ae;
color: #36d6ae;
-webkit-text-stroke: .5px rgba(54,214,174,.403921568627451);
transition: opacity .4s;
position: absolute;
transform: translate(-50%,-50%);
margin-right: -50%;
left: 50%;
top: 50%;
z-index: 20;
cursor: pointer;
opacity: 0;
visibility: hidden;
//display: none;
}


.chatContainer{
position: absolute;
top: 100px;
left: 0;
width: 100%;
z-index: 10;
opacity: 0;
visibility: hidden;
}


.finalTitleContainer{
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
opacity: 0;
visibility: hidden;
background: #000343;
}



.gs-dev-tools{
z-index: 9999;
position: fixed;
transform: translateY(100%);
opacity: 0;
visibility: hidden;
transition: all 1s;
}
.animEarthStart .gs-dev-tools{
transform: translateY(0%);
opacity: 1;
visibility: visible;
cursor: pointer;
box-shadow: 0 0 10px 0 #38d6ae;
text-shadow: 0 0 25px #36d6ae;
color: #36d6ae;
background-color: #000;
outline: none;
border: none;
border-radius: 3px;
margin: 5px 0px;
font-size: 2rem;
padding: 0.5em 1em;
position: absolute;
transform: translate(-50%, 0);
margin-right: -50%;
left: 50%;
}

.chatContainer {
position: absolute;
top: 100px;
left: 0;
width: 100%;
z-index: 10;
opacity: 0;
visibility: hidden;
}

.finalTitleContainer {
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
opacity: 0;
visibility: hidden;
background: #000343;
}

.gs-dev-tools {
z-index: 9999;
position: fixed;
transform: translateY(100%);
opacity: 0;
visibility: hidden;
transition: all 1s;
}
.animEarthStart .gs-dev-tools {
transform: translateY(0%);
opacity: 1;
visibility: visible;
}
.gs-dev-tools .time-scale,
.gs-dev-tools .rewind,
.gs-dev-tools .select-animation,
.gs-dev-tools .loop,
.gs-bottom-right > a{
display: none;
.gs-bottom-right > a {
display: none;
}

//.gs-top,
Expand Down
Loading